From 1bc386893fd817b3464e0d8e0bc1973955d16fc4 Mon Sep 17 00:00:00 2001
From: = <=>
Date: Sun, 21 May 2023 01:42:17 +0300
Subject: [PATCH 1/2] add generate logic

---
 package-lock.json                |  1 +
 package.json                     |  3 +-
 src/App.tsx                      |  1 -
 src/elements/TourCard/index.tsx  | 53 ++++++++++++--------
 src/pages/GenerateTour/index.tsx | 84 ++++++++++++++++++++++++++++++++
 src/pages/GenerateTour/style.css |  9 ++++
 src/router.tsx                   |  6 +++
 7 files changed, 135 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/GenerateTour/index.tsx
 create mode 100644 src/pages/GenerateTour/style.css

diff --git a/package-lock.json b/package-lock.json
index b3cde51..e67331d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "@yandex/ui": "^3.33.0",
         "antd": "^5.5.0",
         "axios": "^1.4.0",
+        "gl-matrix": "^3.4.3",
         "mapbox-gl": "^2.14.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
diff --git a/package.json b/package.json
index 0a146f5..7bc8675 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-spring/web": "^9.7.2",
     "@bem-react/classname": "^1.6.0",
     "@bem-react/core": "^5.1.0",
     "@bem-react/di": "^5.0.0",
+    "@react-spring/web": "^9.7.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -17,6 +17,7 @@
     "@yandex/ui": "^3.33.0",
     "antd": "^5.5.0",
     "axios": "^1.4.0",
+    "gl-matrix": "^3.4.3",
     "mapbox-gl": "^2.14.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/src/App.tsx b/src/App.tsx
index 747637c..45ec261 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,6 @@ import { Register } from './pages/Register';
 import { MyMap } from './сomponents/map';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
-configureRootTheme({ theme })
 
 function App() {
   return (
diff --git a/src/elements/TourCard/index.tsx b/src/elements/TourCard/index.tsx
index b4e4983..5b4976e 100644
--- a/src/elements/TourCard/index.tsx
+++ b/src/elements/TourCard/index.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import { Button } from '../../elements/Button'
 import { Block } from '../../elements/Block'
 import './style.css'
+import { MyMap } from "../../сomponents/map";
 
 export interface PlaceCardIE{
     title:string,
@@ -30,28 +31,40 @@ export const PlaceCard: React.FC<PlaceCardIE> = (props) =>{
 
 export const TourCard:React.FC<TourCardIE> = (props) =>{
     
+    const [showMap, setShowMap] = useState(false)
+
 
     return(
-        <Block className='tourcard-block'>
-            <div className="cardDescr">
-                <div className="cardTitle">
-                    <div className="titleText">{props.title}</div>
-                    <div className="cardInfo">
-                        <div>{props.days} дней,</div>
-                        <div>{props.placeCards.length} мест</div>
-                    </div>
-                </div>
-                <img  className="cardAvatar" src={props.imageURL}></img>
-                
-            </div>
-            <div className="placesWrapper">
-                {
-                    props.placeCards.map((value, index) => <PlaceCard {...value}></PlaceCard>)
-                }
-            </div>
-            <Button className=''>Посмотреть</Button>
+        <div>
+            {showMap? <div>
+                <Block  className='tourcard-block'>
+                    <MyMap></MyMap>
+                    <Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
 
-        </Block>
+                </Block>
+            </div>:null}
+            <Block className='tourcard-block'>
+                <div className="cardDescr">
+                    <div className="cardTitle">
+                        <div className="titleText">{props.title}</div>
+                        <div className="cardInfo">
+                            <div>{props.days} дней,</div>
+                            <div>{props.placeCards.length} мест</div>
+                        </div>
+                    </div>
+                    <img  className="cardAvatar" src={props.imageURL}></img>
+                    
+                </div>
+                <div className="placesWrapper">
+                    {
+                        props.placeCards.map((value, index) => <PlaceCard {...value}></PlaceCard>)
+                    }
+                </div>
+                <Button className='' onClick={()=>setShowMap(!showMap)}>Посмотреть</Button>
+
+            </Block>
+        </div>
+        
     );
 
     
diff --git a/src/pages/GenerateTour/index.tsx b/src/pages/GenerateTour/index.tsx
new file mode 100644
index 0000000..c608d96
--- /dev/null
+++ b/src/pages/GenerateTour/index.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { DatePicker, Select } from 'antd';
+import { RusPassHeader } from "../../elements/Header";
+import { Block } from "../../elements/Block";
+import { Button } from "../../elements/Button";
+import { TourCard, TourCardIE } from "../../elements/TourCard";
+
+const { RangePicker } = DatePicker;
+
+export const GenerateTour = () =>{
+    
+    const [dates, setDates] = useState()
+    const [theme, setTheme] = useState('jack')
+
+    const [generate, setGenerate] = useState(false)
+
+
+
+    const TourPropsCard = {
+        title: 'Я покажу тебе Москву',
+        days: 8,
+        imageURL: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+        placeCards: [
+           {
+              title:'Парк Горького',
+              type: 'Место',
+              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+           },
+           {
+              title:'Отель Москва',
+              type: 'Отель',
+              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+           },
+           {
+              title:'Ресторан Сказка',
+              type: 'Ресторан',
+              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+           }
+        ]
+     } as TourCardIE
+     
+    let tours = []
+
+    for (let i=0; i<=5; i++){
+        tours.push(
+            <TourCard {...TourPropsCard}></TourCard>
+        )
+    }
+
+    return(
+        <div>
+            <RusPassHeader></RusPassHeader>
+            <div>
+                <Block className="">
+                    <div>
+                        <RangePicker
+                            onChange={(e)=>setDates(e as any)}
+                        ></RangePicker>
+                        <Select
+                            defaultValue="lucy"
+                            style={{ width: 120 }}
+                            value={theme}
+                            onChange={(e)=>setTheme(e)}
+                            options={[
+                                { value: 'jack', label: 'Jack' },
+                                { value: 'lucy', label: 'Lucy' },
+                                { value: 'Yiminghe', label: 'yiminghe' },
+                                { value: 'disabled', label: 'Disabled'},
+                            ]}
+                        />
+                        <Button onClick={()=>setGenerate(!generate)} className="btn-y">Сгенирировать</Button>
+                    </div>
+                    
+                    <div>
+                        {
+                            generate? tours:null
+                        }
+                    </div>
+
+                </Block>
+            </div>
+        </div>
+    );
+}
diff --git a/src/pages/GenerateTour/style.css b/src/pages/GenerateTour/style.css
new file mode 100644
index 0000000..4c51819
--- /dev/null
+++ b/src/pages/GenerateTour/style.css
@@ -0,0 +1,9 @@
+.btn-y{
+    width: 200px!important;
+    background-color: #FFCF08;
+    border-radius: 10px;
+    padding: 15px 50px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/router.tsx b/src/router.tsx
index b8c3a52..ed5248d 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -6,6 +6,7 @@ import { Register } from './pages/Register';
 import { Login } from './pages/Login';
 import { Main } from './pages/Main';
 import { EventMatch } from './pages/EventMatch';
+import { GenerateTour } from './pages/GenerateTour';
 
 
 const routes = [
@@ -28,7 +29,12 @@ const routes = [
     {
         path: '/event-match',
         element: <EventMatch></EventMatch>
+    },
+    {
+        path: '/generate',
+        element: <GenerateTour></GenerateTour>
     }
+
 ]
 
 export const router = createBrowserRouter(routes);

From 1b8055266eba5e93c51b8fd6d233846b4e167931 Mon Sep 17 00:00:00 2001
From: = <=>
Date: Mon, 22 May 2023 02:44:56 +0300
Subject: [PATCH 2/2] add

---
 package-lock.json                   | 411 ++++++++++++++++++++++++++++
 package.json                        |   3 +
 src/consts.tsx                      |   7 +
 src/elements/GenerateCard/index.tsx |   2 +-
 src/elements/GenerateCard/style.css |   1 +
 src/elements/TourCard/index.tsx     |  36 ++-
 src/elements/TourCard/style.css     |   8 +-
 src/pages/GenerateTour/index.tsx    |  57 ++--
 src/pages/GenerateTour/style.css    |  25 ++
 src/pages/Main/index.tsx            |  19 +-
 10 files changed, 510 insertions(+), 59 deletions(-)
 create mode 100644 src/consts.tsx

diff --git a/package-lock.json b/package-lock.json
index e67331d..fef12c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@types/node": "^16.18.31",
         "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
+        "@types/react-sidebar": "^3.0.2",
         "@yandex/ui": "^3.33.0",
         "antd": "^5.5.0",
         "axios": "^1.4.0",
@@ -27,8 +28,10 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-map-gl": "^7.0.23",
+        "react-pro-sidebar": "^1.1.0-alpha.1",
         "react-router-dom": "^6.11.2",
         "react-scripts": "5.0.1",
+        "react-sidebar": "^3.0.2",
         "react-tinder-card": "^1.6.2",
         "react-yandex-login": "^1.0.2",
         "typescript": "^4.9.5",
@@ -2258,16 +2261,173 @@
         "node": ">=10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/babel-plugin/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==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz",
+      "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/serialize/node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -4356,6 +4516,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-sidebar": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-sidebar/-/react-sidebar-3.0.2.tgz",
+      "integrity": "sha512-6ABhGhwv78nZVcHntCkq3ky7qOzKttyfhmEletO0BMkBUVl1+TlJMr6ficypIS8B+lSojLTnM+tQeydtMRRciQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -8436,6 +8604,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -9067,6 +9240,19 @@
         "he": "bin/he"
       }
     },
+    "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/hoist-non-react-statics/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/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -15467,6 +15653,30 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/react-pro-sidebar": {
+      "version": "1.1.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-1.1.0-alpha.1.tgz",
+      "integrity": "sha512-kIo4p3gHIdxqANG2KXv7V8KXDmDFsRhk23AGLbXsicCV39k32EP3Os2DXyOj9S6UCDYB+4G3WoeJFiMIkkHe0w==",
+      "dependencies": {
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@popperjs/core": "^2.11.6",
+        "classnames": "^2.3.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-pro-sidebar/node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15577,6 +15787,19 @@
         }
       }
     },
+    "node_modules/react-sidebar": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-sidebar/-/react-sidebar-3.0.2.tgz",
+      "integrity": "sha512-LG/JO1cJvdRqSmUT+DOhJrml/b45/UqM9nm8emcgbJb5EKNegKCObZcrRqyzVix42VfFf0odytviAAFEYYTu1Q==",
+      "dependencies": {
+        "@babel/runtime": ">=7.0.0-beta.56",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.2",
+        "react-dom": ">=16.4.2"
+      }
+    },
     "node_modules/react-tinder-card": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",
@@ -20016,16 +20239,149 @@
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
       "integrity": "sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ=="
     },
+    "@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      },
+      "dependencies": {
+        "@emotion/hash": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+          "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+        },
+        "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=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/react": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.0.tgz",
+      "integrity": "sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "requires": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "@emotion/hash": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+          "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+        },
+        "@emotion/unitless": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+          "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      }
+    },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -21563,6 +21919,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-sidebar": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-sidebar/-/react-sidebar-3.0.2.tgz",
+      "integrity": "sha512-6ABhGhwv78nZVcHntCkq3ky7qOzKttyfhmEletO0BMkBUVl1+TlJMr6ficypIS8B+lSojLTnM+tQeydtMRRciQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -24603,6 +24967,11 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -25033,6 +25402,21 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "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"
+      },
+      "dependencies": {
+        "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=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -29458,6 +29842,24 @@
         "@types/mapbox-gl": "^2.6.0"
       }
     },
+    "react-pro-sidebar": {
+      "version": "1.1.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-1.1.0-alpha.1.tgz",
+      "integrity": "sha512-kIo4p3gHIdxqANG2KXv7V8KXDmDFsRhk23AGLbXsicCV39k32EP3Os2DXyOj9S6UCDYB+4G3WoeJFiMIkkHe0w==",
+      "requires": {
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@popperjs/core": "^2.11.6",
+        "classnames": "^2.3.2"
+      },
+      "dependencies": {
+        "@popperjs/core": {
+          "version": "2.11.7",
+          "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+          "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -29535,6 +29937,15 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-sidebar": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-sidebar/-/react-sidebar-3.0.2.tgz",
+      "integrity": "sha512-LG/JO1cJvdRqSmUT+DOhJrml/b45/UqM9nm8emcgbJb5EKNegKCObZcrRqyzVix42VfFf0odytviAAFEYYTu1Q==",
+      "requires": {
+        "@babel/runtime": ">=7.0.0-beta.56",
+        "prop-types": "^15.6.2"
+      }
+    },
     "react-tinder-card": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",
diff --git a/package.json b/package.json
index 7bc8675..46231d9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@types/node": "^16.18.31",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "@types/react-sidebar": "^3.0.2",
     "@yandex/ui": "^3.33.0",
     "antd": "^5.5.0",
     "axios": "^1.4.0",
@@ -22,8 +23,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.0.23",
+    "react-pro-sidebar": "^1.1.0-alpha.1",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-sidebar": "^3.0.2",
     "react-tinder-card": "^1.6.2",
     "react-yandex-login": "^1.0.2",
     "typescript": "^4.9.5",
diff --git a/src/consts.tsx b/src/consts.tsx
new file mode 100644
index 0000000..883d42b
--- /dev/null
+++ b/src/consts.tsx
@@ -0,0 +1,7 @@
+import axios from "axios";
+
+export const backend = axios.create({
+    baseURL: 'https://dev2.akarpov.ru/api/',
+    timeout: 10000,
+    headers: {'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjg3Mjk0NTExLCJpYXQiOjE2ODQ3MDI1MTEsImp0aSI6ImUwNGNjZGViMzA0NzQxYTlhYzJhODRhNzc1YWFkZTIxIiwidXNlcl9pZCI6N30.M-F08v6Wit5Bbm668m84JThyDX5yZhzsh3_GFh3nzXM'}
+  });
\ No newline at end of file
diff --git a/src/elements/GenerateCard/index.tsx b/src/elements/GenerateCard/index.tsx
index 1a80e18..4350541 100644
--- a/src/elements/GenerateCard/index.tsx
+++ b/src/elements/GenerateCard/index.tsx
@@ -19,7 +19,7 @@ export const GenerateCard:React.FC = (props) =>{
                 </div>                
             </div>
             <img src='generateTour.png'></img>
-            <Button className='generate-y'>Посмотреть <img className="wand" src='magicWand.svg'></img></Button>
+            <Button className='generate-y'>Cгенерирвоать тур <img className="wand" src='magicWand.svg'></img></Button>
 
         </Block>
     );
diff --git a/src/elements/GenerateCard/style.css b/src/elements/GenerateCard/style.css
index d1b7c6e..a7af3b8 100644
--- a/src/elements/GenerateCard/style.css
+++ b/src/elements/GenerateCard/style.css
@@ -1,5 +1,6 @@
 .generatecard-block{
     width: 400px;
+    height: 548px;
     display: flex;
     flex-direction: column;
     gap:30px;
diff --git a/src/elements/TourCard/index.tsx b/src/elements/TourCard/index.tsx
index 5b4976e..2f0a350 100644
--- a/src/elements/TourCard/index.tsx
+++ b/src/elements/TourCard/index.tsx
@@ -3,17 +3,21 @@ import { Button } from '../../elements/Button'
 import { Block } from '../../elements/Block'
 import './style.css'
 import { MyMap } from "../../сomponents/map";
+import Sidebar from "react-sidebar";
 
 export interface PlaceCardIE{
     title:string,
-    type: string,
-    imageURL?: string
+    description: string,
+    icon: string,
+    location: number[]
+
 }
 
 export interface TourCardIE{
-    title:string,
+    name:string,
+    description:string,
     days:number, 
-    placeCards: PlaceCardIE[],
+    points: PlaceCardIE[],
     imageURL?: string
 }
 
@@ -22,9 +26,9 @@ export const PlaceCard: React.FC<PlaceCardIE> = (props) =>{
         <div className="placeCard">
             <div className="placeDescrWrapper">
                 <div>{props.title}</div>
-                <div className="placeType">{props.type}</div>
+                <div className="placeType">{props.description.slice(0,50)}</div>
             </div>
-            <img className="placeImage" src={props.imageURL}></img>
+            <img className="placeImage" src={props.icon}></img>
         </div>
     );
 }
@@ -36,20 +40,24 @@ export const TourCard:React.FC<TourCardIE> = (props) =>{
 
     return(
         <div>
-            {showMap? <div>
-                <Block  className='tourcard-block'>
+            {/* <Sidebar
+                sidebar={
+                    <Block  className='tourcard-block'>
                     <MyMap></MyMap>
                     <Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
-
-                </Block>
-            </div>:null}
+                    </Block>
+                }
+                open={showMap}
+                styles={{ sidebar: { background: "white" } }}
+            ></Sidebar> */}
+                
             <Block className='tourcard-block'>
                 <div className="cardDescr">
                     <div className="cardTitle">
-                        <div className="titleText">{props.title}</div>
+                        <div className="titleText">{props.name}</div>
                         <div className="cardInfo">
                             <div>{props.days} дней,</div>
-                            <div>{props.placeCards.length} мест</div>
+                            <div>{props.points.length} мест</div>
                         </div>
                     </div>
                     <img  className="cardAvatar" src={props.imageURL}></img>
@@ -57,7 +65,7 @@ export const TourCard:React.FC<TourCardIE> = (props) =>{
                 </div>
                 <div className="placesWrapper">
                     {
-                        props.placeCards.map((value, index) => <PlaceCard {...value}></PlaceCard>)
+                        props.points.map((value, index) => <PlaceCard {...value}></PlaceCard>)
                     }
                 </div>
                 <Button className='' onClick={()=>setShowMap(!showMap)}>Посмотреть</Button>
diff --git a/src/elements/TourCard/style.css b/src/elements/TourCard/style.css
index cf18754..7071c72 100644
--- a/src/elements/TourCard/style.css
+++ b/src/elements/TourCard/style.css
@@ -1,5 +1,6 @@
 .tourcard-block{
     width: 400px;
+    height: 548px;
     display: flex;
     flex-direction: column;
     gap:50px;
@@ -41,14 +42,17 @@
     flex-direction: column;
     gap:20px;
     margin-top: 30px;
+    height: 260px;
+    overflow-y: scroll;
 }
-
+.placesWrapper::-webkit-scrollbar {
+    width: 0;
+  }
 .placeCard{
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-
 }
 
 .placeImage{
diff --git a/src/pages/GenerateTour/index.tsx b/src/pages/GenerateTour/index.tsx
index c608d96..27d75c9 100644
--- a/src/pages/GenerateTour/index.tsx
+++ b/src/pages/GenerateTour/index.tsx
@@ -1,58 +1,47 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { DatePicker, Select } from 'antd';
 import { RusPassHeader } from "../../elements/Header";
 import { Block } from "../../elements/Block";
 import { Button } from "../../elements/Button";
 import { TourCard, TourCardIE } from "../../elements/TourCard";
-
+import './style.css'
+import axios from "axios";
+import { backend } from "../../consts";
 const { RangePicker } = DatePicker;
 
 export const GenerateTour = () =>{
     
     const [dates, setDates] = useState()
     const [theme, setTheme] = useState('jack')
-
     const [generate, setGenerate] = useState(false)
+    const [toursData, setToursData] = useState(new Array<TourCardIE>())
+
+    useEffect(()=>{
+        if (toursData.length == 0){
+            backend.get('/route/build').then((data)=>setToursData(data.data))
+        }
+    })
 
 
 
-    const TourPropsCard = {
-        title: 'Я покажу тебе Москву',
-        days: 8,
-        imageURL: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
-        placeCards: [
-           {
-              title:'Парк Горького',
-              type: 'Место',
-              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
-           },
-           {
-              title:'Отель Москва',
-              type: 'Отель',
-              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
-           },
-           {
-              title:'Ресторан Сказка',
-              type: 'Ресторан',
-              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
-           }
-        ]
-     } as TourCardIE
      
-    let tours = []
+    let tours = new Array()
 
-    for (let i=0; i<=5; i++){
+    toursData.forEach(tour => {
         tours.push(
-            <TourCard {...TourPropsCard}></TourCard>
+            <TourCard {...tour}></TourCard>
         )
-    }
+    })
+
+    console.log(toursData)
+        
 
     return(
         <div>
             <RusPassHeader></RusPassHeader>
-            <div>
-                <Block className="">
-                    <div>
+            <div className='generateTourContent'>
+                <Block className="generateTourBlock">
+                    <div className="tourToolBar">
                         <RangePicker
                             onChange={(e)=>setDates(e as any)}
                         ></RangePicker>
@@ -70,8 +59,8 @@ export const GenerateTour = () =>{
                         />
                         <Button onClick={()=>setGenerate(!generate)} className="btn-y">Сгенирировать</Button>
                     </div>
-                    
-                    <div>
+                    <h2>Рекомендованные Туры</h2>
+                    <div className="tourCardsWrapper">
                         {
                             generate? tours:null
                         }
diff --git a/src/pages/GenerateTour/style.css b/src/pages/GenerateTour/style.css
index 4c51819..327cae6 100644
--- a/src/pages/GenerateTour/style.css
+++ b/src/pages/GenerateTour/style.css
@@ -6,4 +6,29 @@
     outline: none;
     border: none;
     cursor: pointer;
+}
+
+.generateTourBlock{
+    display: flex;
+    flex-direction: column;
+    gap:30px
+}
+
+.tourCardsWrapper{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap:15px
+}
+
+.tourToolBar{
+    display: flex;
+    flex-direction: row;
+    gap:15px;
+    align-items: center;
+}
+
+.generateTourContent{
+    padding:50px;
+    
 }
\ No newline at end of file
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
index abb22c5..2857763 100644
--- a/src/pages/Main/index.tsx
+++ b/src/pages/Main/index.tsx
@@ -8,24 +8,27 @@ import './style.css'
 
 export const Main: react.FC = () => {
    const TourPropsCard = {
-      title: 'Я покажу тебе Москву',
+      name: 'Я покажу тебе Москву',
       days: 8,
       imageURL: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
-      placeCards: [
+      points: [
          {
             title:'Парк Горького',
-            type: 'Место',
-            imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+            description: 'Место',
+            icon:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+            location:[1,2]
          },
          {
             title:'Отель Москва',
-            type: 'Отель',
-            imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+            description: 'Отель',
+            icon:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+            location:[1,2]
          },
          {
             title:'Ресторан Сказка',
-            type: 'Ресторан',
-            imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+            description: 'Ресторан',
+            icon:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+            location:[1,2]
          }
       ]
    } as TourCardIE