сделал анимированный гамбургер в main и переписал несколько стилей

package-lock.json

@@ -18,9 +18,11 @@
         "matchmedia": "^0.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.15.0",
         "react-scripts": "5.0.1",
         "react-swipeable": "^7.0.1",
         "react-tinder-card": "^1.6.2",
+        "sass": "^1.66.1",
         "web-vitals": "^2.1.4",
         "workbox-background-sync": "^6.6.0",
         "workbox-broadcast-update": "^6.6.0",
@@ -34,8 +36,7 @@
         "workbox-routing": "^6.6.0",
         "workbox-strategies": "^6.6.0",
         "workbox-streams": "^6.6.0"
-      },
+      }
-      "devDependencies": {}
     },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
@@ -3409,6 +3410,14 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -9450,6 +9459,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14924,6 +14938,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0",
+        "react-router": "6.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -15505,6 +15549,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
+      "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": ">=14.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

package.json

@@ -12,9 +12,11 @@
     "matchmedia": "^0.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "react-swipeable": "^7.0.1",
     "react-tinder-card": "^1.6.2",
+    "sass": "^1.66.1",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",
     "workbox-broadcast-update": "^6.6.0",
@@ -53,6 +55,10 @@
       "last 1 safari version"
     ]
   },
+  "devDependencies": {
+    "react-scripts": "^5.0.1",
+    "sass": "^1.38.0"
+  },
   "main": "index.js",
   "keywords": [],
   "author": "",

src/components/App/App.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import Start from './components/Start/Start';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Second from './components/Second/Second';
+import Start from '../Start/Start';
-import Tinder from './components/Tinder/Tinder';
+import Second from '../Second/Second';
-import Main from './components/Main/Main';
+import Tinder from '../Tinder/Tinder';
-import City from './components/City/City';
+import Main from '../Main/Main';
+import City from '../City/City';
 import axios from 'axios';
 import './App.css';
 
@@ -48,30 +49,17 @@ function App() {
     console.log(userData);
   }, [userData]);
 
-  let content = null;
-  switch (buttonValue) {
-    case '/second':
-      content = <Second getValue={handleButtonValue}setUserData={setUserData} />
-      break;
-    case '/tinder':
-      content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />
-      break;
-    case '/main':
-      content = <Main />
-      break;
-    case '/city':
-      content = <City getValue={handleButtonValue} setUserData={setUserData} />
-      break;
-    default:
-      content = <Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />
-  }
-
-  const arrayLength = userData.unique ? userData.unique.length : 0;
 
   return (
-    <div className={`App ${isHidden ? 'hidden' : ''}`}>
+    <BrowserRouter>
-      {arrayLength !== 0 ? <Main userData={userData}/> : content}
+      <Routes>
-    </div>
+        <Route path="/" element={<Start getValue={handleButtonValue} userData={userData} setUserData={setUserData} />}/>
+        <Route path="second" element={<Second getValue={handleButtonValue} setUserData={setUserData} />} />
+        <Route path="tinder" element={<Tinder getValue={handleButtonValue} cardInfo={cardInfo} userData={userData} setUserData={setUserData} />} />
+        <Route path="city" element={<City getValue={handleButtonValue} setUserData={setUserData} />} />
+        <Route path="main" element={<Main userData={userData}/>} />
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/components/City/City.css

@@ -1,46 +0,0 @@
-/* .button-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  opacity: 0;
-  transform: translateY(20px);
-  transition: opacity 0.5s ease, transform 0.5s ease;
-} */
-
-.animated-button {
-  width: 304px;
-  height: 54px;
-  font-size: 20px;
-  border-radius: 27px;
-  border: none;
-  background-color: #46A2E3;
-  font-family: 'Raleway';
-  color: #FFFFFF;
-  font-weight: 97px;
-} 
-
-.animated-button:hover {
-  background-color: #398ac5;
-}
-
-.ab {
-  width: 304px;
-  height: 54px;
-  font-size: 20px;
-  border-radius: 27px;
-  border: none;
-  background-color: white;
-  font-family: 'Raleway';
-  color: #398ac5;
-  font-weight: 97px;
-} 
-
-.ab:hover {
-  background-color: #f8f8f8;
-}
-
-/* 
-.button-container.visible {
-  opacity: 1;
-  transform: translateY(0);
-} */

src/components/City/City.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom"; 
+
 import axios from "axios";
-import './City.css'
+import './City.scss'
 
 const City = (props) => {
   const route = props.getValue;
   const setUserData = props.setUserData
+  const second = useNavigate();
 
   const [cityOptions, setCityOptions] = useState([]);
   const [filteredCityOptions, setFilteredCityOptions] = useState([]);
@@ -51,48 +54,13 @@ const City = (props) => {
   }, [selectedCity, cityOptions]);
 
   return (
-    <div style={{
+    <div className="container container_space_around">
-      display: 'flex',
+      <div className="city">
-      flexDirection: 'column',
+        <div className="city__plannet">
-      height: '100vh',
+          <img src='./image 2.png' alt="#" draggable="false" className="city__plannet_img"/>
-      justifyContent: 'space-around',
-      alignItems: 'center',
-      background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
-    }}>
-      <div style={{
-        position: 'fixed',
-        top: 100,
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        gap: 80,
-      }}>
-        <div style={{
-          display: 'flex',
-          justifyContent: 'center',
-          width: 304,
-        }}>
-          <img src='./image 2.png' alt="#" draggable="false" style={{
-            width: 282,
-            height: 282,
-          }} />
         </div>
-          <span style={{
+        <select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" className="city__choise">
-            fontWeight: 700,
+          <option value="" className="city__choise_option">Выберите город...</option>
-            fontSize: 30,
-            color: '#000'
-          }}></span>
-        <select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" style={{
-          height: 40,
-          width: 304,
-          borderRadius: '20px',
-          border: 'none',
-          padding: '5px',
-        }}>
-          <option value="" style={{
-                maxWidth: 200,
-            }}>Выберите город...</option>
           {filteredCityOptions.map(option => (
             <option key={option.id} value={option.name} style={{
                 maxWidth: 200,
@@ -101,17 +69,11 @@ const City = (props) => {
         </select>
       </div>
       {buttonsVisible ? (
-  <div className="button-container" style={{
+  <div className="button-container">
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'fixed',
-    bottom: 50,
-    gap: 10,
-    }}>
     <button
       className="animated-button"
       onClick={() => {
-        route('/second')
+        second('/second')
         setUserData({selectedCity: selectedCity});
         console.log(selectedCity);
     }}
@@ -119,25 +81,13 @@ const City = (props) => {
       Я в этом городе
     </button>
     <button
-      className="ab"
+      className="city__ticket"
       onClick={() => window.open('https://www.aviasales.ru/?marker=15468.ydof241309826304&yclid=18373991699987824639&params=TGK1')}
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: 42,
-        border: 'none',
-      }}
     >
       <img
+        className="city__ticket_img"
         src="./icon200.png"
         alt="#"
-        style={{
-          fontSize: 20,
-          width: 30,
-          height: 30,
-          marginRight: 10,
-        }}
       />
       Купить билет
     </button>

src/components/City/City.scss

@@ -0,0 +1,96 @@
+.button-container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 50px;
+  gap: 10px;
+}
+
+.animated-button {
+  width: 304px;
+  height: 54px;
+  font-size: 20px;
+  border-radius: 27px;
+  border: none;
+  background-color: #46A2E3;
+  font-family: 'Raleway';
+  color: #FFFFFF;
+  font-weight: 97px;
+  &:hover {
+    background-color: #398ac5;
+  }
+} 
+.city__ticket {
+  width: 304px;
+  height: 54px;
+  font-size: 20px;
+  border-radius: 27px;
+  border: none;
+  background-color: white;
+  font-family: 'Raleway';
+  color: #398ac5;
+  font-weight: 97px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 42px;
+  border: none;
+  &_img {
+    font-size: 20px;
+    width: 30px;
+    height: 30px;
+    margin-right: 10px;
+  }
+  &:hover {
+    background-color: #f8f8f8;
+  }
+} 
+
+
+/* 
+.button-container.visible {
+  opacity: 1;
+  transform: translateY(0);
+} */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 95vh;
+  
+  align-items: center;
+  background: linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%);
+  &_space_around {
+    justify-content: space-around;
+  }
+}
+.city {
+  height: 400px;
+  position: fixed;
+  top: 100px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 80px;
+  &__plannet {
+    display: flex;
+    justify-content: center;
+    width: 304px;
+    &_img {
+      width: 282px;
+      height: 282px;
+    }
+  }
+  &__choise {
+    height: 40px;
+    width: 304px;
+    border-radius: 20px;
+    border: none;
+    padding: 5px;
+
+    &_option {
+      max-width: 200px;
+    }
+  }
+}

src/components/Header/Header.js

@@ -0,0 +1,87 @@
+import './header.scss';
+import { useEffect } from 'react';
+
+
+const Header = () => {
+    useEffect(() => {
+        const humburger = document.querySelector('.hamburger');
+        const header = document.querySelector('.header__navigation');
+        console.log(humburger);
+
+            humburger.addEventListener('click', (e) => {
+                e.currentTarget.classList.toggle('hamburger_active');
+                header.classList.toggle('hide');
+            });
+
+
+        
+
+
+        return () => {
+                humburger.removeEventListener('click', (e) => {
+                    e.currentTarget.classList.toggle('hamburger_active');
+                    header.classList.toggle('hide');
+                });
+
+          };
+    }, [])
+
+    return ( 
+        <header className="header" style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}>
+            <div className="header__container" style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingLeft: '40px',
+                height: 79,
+                
+                backgroundColor: '#ffffff',
+            }}>
+                <div className="header__logo" style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                }}>
+                    <img src="./logo5121.png" alt="#" className="header__logo_img" style={{
+                    height: 53,
+                    width: 53,
+                }}/>
+                <span className="header__title" style={{
+                    color: '#F68C43',
+                    width: '60%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'start',
+                    fontWeight: 700,
+                    fontFamily: 'Raleway',
+                    fontSize: '20px',
+                }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
+                </div>
+                <button className="header__btn" style={{
+                    backgroundColor: '#fff',
+                    border: 'none',
+                }}>
+                   
+                </button>
+                <div className='hamburger'>
+                <span></span>
+                <span></span>
+                <span></span>
+                </div>
+            </div>
+            <div className='header__navigation hide'>
+                <a href='#' className='header__navigation_link'>Кино по пушкинской карте</a>
+                <a href='#' className='header__navigation_link'>Достопримечательности</a>
+                <a href='#' className='header__navigation_link'>Отели</a>
+            </div>
+        </header>
+        
+     );
+}
+ 
+export default Header;

src/components/Header/header.scss

@@ -0,0 +1,78 @@
+.hamburger {
+    display: block;
+    position: fixed;
+    right: 10px;
+    top: 28px;
+    transform: translateX(-50%);
+    height: 30px;
+    width: 30px;
+    span {
+    
+      display: block;
+      height: 3px;
+      width: 100%;
+      background-color: #000;
+      margin-top: 5px;
+      &:nth-child(1) {
+        margin-top: 0px;
+      }
+    }
+    &_active {
+      margin-top: 6px;
+      span {
+        transition: ease 0.5s;
+        &:nth-child(1) {
+          margin-top: -2px;
+          transform: translateY(4px) rotate(-45deg);
+        }
+        &:nth-child(2) {
+          display: none;
+        }
+        &:nth-child(3) {
+          margin-top: -3px;
+          transform: translateY(4px) rotate(45deg);
+        }
+      }
+    }
+}
+
+.header {
+
+
+    &__navigation {
+        transition:ease 0.6s;
+        transform: translateX(0%);
+        height: 200%;
+        position: fixed;
+        left: 0px;
+        width: 60%;
+        background-color: rgba( 0, 0, 0, 0.5 );
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: left;
+        padding-left: 30px;
+        padding-top: 100px;
+        
+        &_link {
+            margin-top: 6px;
+            z-index: 1;
+            color: #FFF;
+            font-family: Montserrat;
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            text-decoration: none;
+        }
+    }
+    &__container {
+        
+        width: 100%;
+        top: 0px;
+        position: fixed;                                                                
+    }
+}
+.hide {
+    transform: translateX(-100%);
+}

src/components/Main/Header.js

@@ -1,57 +0,0 @@
-
-const Header = () => {
-
-    return ( 
-        <div style={{
-            height: '100%',
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }}>
-            <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                paddingLeft: '10px',
-                height: 79,
-                width: 390,
-                backgroundColor: '#ffffff',
-            }}>
-                <div style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                }}>
-                    <img src="./logo5121.png" alt="#" style={{
-                    height: 53,
-                    width: 53,
-                }}/>
-                <span style={{
-                    color: '#F68C43',
-                    width: '60%',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'start',
-                    fontWeight: 700,
-                    fontFamily: 'Raleway',
-                    fontSize: '20px',
-                }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
-                </div>
-                <button style={{
-                    backgroundColor: '#fff',
-                    border: 'none',
-                }}>
-                    <img src="./menu.png" alt="#" style={{
-                                 height: 20,
-                                 width: 32,
-                                 marginRight: 10,       
-                                    }}/>
-                </button>
-                
-            </div>
-        </div>
-        
-     );
-}
- 
-export default Header;

src/components/Main/Main.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import Header from "./Header";
+import Header from "../Header/Header";
-import Card from "./Card";
+import Card from "../Card/Card";
-import Footer from "./Footer";
+import Footer from "../Footer/Footer";
 
 const Main = ({ userData }) => {
 
@@ -50,7 +50,7 @@ const Main = ({ userData }) => {
     }, []);
 
     return (
-        <div>
+        <div style={{paddingTop:'70px'}}>
         <Header />
         <Card city={userData.selectedCity}/>
         <div style={{

src/components/Second/Second.js

@@ -1,48 +1,26 @@
 import React from "react"
-import './style.css'
+import { useNavigate } from "react-router-dom"; 
+import './second.scss';
 import Icon from './images/Vector.svg'
 
 
 const Second = (props) => {
 
     const route = props.getValue;
-
+    const tinder = useNavigate();
+    const main = useNavigate();
     return (
-        <div style={{
+        <div className="container">
-            display: 'flex',
-            flexDirection: 'column',
-            alignContent: 'center',
-            flexWrap: 'wrap',
-            justifyContent: 'space-between',
-            height: '95vh' ,
-            background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
-            filter: 'blur 2',
-            paddingBottom:10,
-            overflow: 'hidden',
-        }}>
                <img src={Icon} alt='#'/>
-               <div style={{
+               <div className="container__description">
-                display:'flex',
+                <h1 className="container__main_text">Давайте<br/>знакомиться!</h1>
-                flexDirection:'column',
+                <p className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
-                gap:20,
-                alignItems:'center',
-               }}>
-                <h1 className="main_text">Давайте<br/>знакомиться!</h1>
-                <p style={{
-                    textAlign:'center',
-                    color:'#6C6C6C',
-                }} className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
               для вас мероприятия</p>
                </div>
                 
-               <div style={{
+               <div className="btn__container">
-                display:'flex',
+                  <button className="btn_first" onClick={() => tinder('/tinder')}>Давайте!</button>
-                flexDirection:'column',
+                  <button className="btn_second" onClick={() => main('/main')}>Пропустить</button>
-                gap:15,
-                alignItems:'center',
-               }}>
-                  <button className="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
-                  <button className="btn_second" onClick={() => route('/main')}>Пропустить</button>
                </div>
         </div>
     )

src/components/Second/second.scss

@@ -0,0 +1,77 @@
+@font-face {
+    font-family: "Raleway";
+    src: url("../Second/fonts/Raleway.ttf");
+  }
+  
+
+
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    height: 100%;
+    background: linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%);
+    filter: blur(2);
+    padding-bottom: 10px;
+    overflow: hidden;
+
+    &__description {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        align-items: center;
+    }
+    &__main_text{
+        font-size: 45px;
+        text-align: center;
+        font-family: "Raleway";
+        p {
+            font-size: 18px;
+            color: #6C6C6C;
+            text-align: center;
+            width: 332px;
+            font-family: "Raleway";
+        }
+        
+    }
+}
+
+.btn__container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    align-items: center;
+}
+.btn_first{
+    width: 231px;
+    height: 61px;
+    background: #46A2E3;
+    color: #fff;
+    font-size: 24px;
+    border: none;
+    text-align: center;
+    border-radius: 53px;
+    font-weight: bold;
+}
+
+.btn_first:hover {
+    background-color: #398ac5;
+}
+
+.btn_second{
+    width: 169px;
+    height: 49px;
+    background: #7dc5f8;
+    border: #0094FF;
+    color: #ffffff;
+    font-size: 15px;
+    text-align: center;
+    border-radius: 53px;
+}
+
+.btn_second:hover {
+    background-color: #398ac5;
+}

src/components/Second/style.css

@@ -1,50 +0,0 @@
-@font-face {
-    font-family: "Raleway";
-    src: url("../Second/fonts/Raleway.ttf");
-  }
-  
-
-
-.main_text{
-    font-size: 45px;
-    text-align: center;
-    font-family: "Raleway";
-    
-}
-.text{
-    font-size: 18px;
-    color: #6C6C6C;
-    text-align: center;
-    width: 332px;
-    font-family: "Raleway";
-}
-.btn_first{
-    width: 231px;
-    height: 61px;
-    background: #46A2E3;
-    color: #fff;
-    font-size: 24px;
-    border: none;
-    text-align: center;
-    border-radius: 53px;
-    font-weight: bold;
-}
-
-.btn_first:hover {
-    background-color: #398ac5;
-}
-
-.btn_second{
-    width: 169px;
-    height: 49px;
-    background: #7dc5f8;
-    border: #0094FF;
-    color: #ffffff;
-    font-size: 15px;
-    text-align: center;
-    border-radius: 53px;
-}
-
-.btn_second:hover {
-    background-color: #398ac5;
-}

src/components/Start/Start.js

@@ -1,67 +1,48 @@
 import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom"; 
+import './start.scss';
+
 
 const Start = (props) => {
-
+  const history = useNavigate();
-    const route =  props.getValue;
+  const kek = './circle.html';
-    const kek = './circle.html'
 
   function hideAddressBar() {
     if (document.documentElement.scrollHeight < window.outerHeight / window.devicePixelRatio)
       document.documentElement.style.height = (window.outerHeight / window.devicePixelRatio) + 'px';
     setTimeout(window.scrollTo(1, 1), 0);
   }
+
   window.addEventListener("load", function () { hideAddressBar(); });
   window.addEventListener("orientationchange", function () { hideAddressBar(); });
 
+  const handleButtonClick = () => {
+    history('/city');
+  };
+
   useEffect(() => {
-        const handler = (ev: MessageEvent<{ type: string }>) => {
+    const frame = document.querySelector("#start");
-          if (typeof ev.data !== 'object') return
+    frame.addEventListener('load', () => {
-          if (!ev.data.type) return
+      frame.contentWindow.addEventListener('click', () => {
-          if (ev.data.type !== 'button-click') return
+        handleButtonClick();
+      });
+    });
 
-          route('/city')
+    return () => {
-        }
+      frame.removeEventListener('load', () => {
-    
+        frame.contentWindow.removeEventListener('click', () => {
-        window.addEventListener('message', handler)
+        });
-    
+      });
-        // Don't forget to remove addEventListener
+    };
-        return () => window.removeEventListener('message', handler)
+  }, []);
-      }, [])
 
   return (
-        <div style={{
+    <div className="container container_space_around">
-            display: 'flex',
+      <div className="header">
-            flexDirection: 'column',
+        <img src="./logo192.png" alt="logo" className="header__logo"/>
-            alignContent: 'center',
+        <span className="header__text">Путешествия<p>Просто!</p></span>
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            justifyContent: 'space-evenly',
-            height: '95vh',
-            overflow: 'hidden',
-        }}>
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-            }}>
-                <img src="./logo192.png" alt="logo" style={{width: '181px', height: '181px'}} />
-            <span style={{
-                color: '#F68C43',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'start',
-                fontWeight: 700,
-                fontFamily: 'Raleway',
-                fontSize: '40px',
-            }}>Путешествия <p style={{color: '#4EB0F2'}} >Просто!</p></span>
       </div>
-            
+      <iframe id="start" scrolling="no" src={kek} className="content__btn"></iframe>
-            <iframe scrolling="no" src={kek} style={{
-                overflow: 'hidden',
-                border: 'none',
-                width: '440px',
-                height: '440px',
-            }}></iframe>
     </div>
   )
 };

src/components/Start/start.scss

@@ -0,0 +1,37 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    height: 95vh;
+    overflow: hidden;
+}
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &__logo {
+        width: 181px;
+        height: 181px;
+    }
+    &__text {
+        color: #F68C43;
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        font-weight: 700;
+        font-family: 'Raleway';
+        font-size: 40px;
+        p {
+            color: #4EB0F2;
+        }
+    }
+}
+.content__btn {
+    overflow: hidden;
+    border: none;
+    width: 440px;
+    height: 440px;
+}

src/components/Tinder/Tinder.js

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
+import { useNavigate } from "react-router-dom"; 
 import TinderCard from 'react-tinder-card';
-import './Tinder.css';
+import './Tinder.scss';
 
 const Tinder = (props) => {
 
     const route = props.getValue;
     const cardInfo = props.cardInfo;
     const setUserData = props.setUserData;
+    const main = useNavigate();
 
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
@@ -32,14 +34,7 @@ const Tinder = (props) => {
     };
 
     return (
-        <div style={{
+        <div className='tinder__flex'>
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100vh',
-            justifyContent: 'space-around',
-            alignItems: 'center',
-            background: 'linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%)',
-          }}>
         <div className='tinder-container'>
             <div className='card-container'>
                 {cardInfo.map((card) => (
@@ -51,74 +46,33 @@ const Tinder = (props) => {
                             var unique = [...new Set(cardId)]
                             var uniqueIds = [...new Set(allIds)];
                             if(uniqueIds.length === cardInfo.length) {
-                                route('/main');
+                                main('/main');
                                 setUserData(prevUserData => ({ ...prevUserData, unique: unique }));
-                                console.log(unique);
-                                console.log(props.userData);
                             }
                         }}
                     >
                         <div className='card'>
                             <div
                                 className='card-content'
-                                style={{
+                                >
-                                    width: '300px',
+                                <div className='card__img' style={{
-                                    height: '500px',
+                                    backgroundImage: `url(${card.imageURL})`
-                                    borderRadius: '10px',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    paddingTop: '10px',
-                                }}>
-                                <div style={{
-                                    height: '300px',
-                                    width: '245px',
-                                    borderRadius: '10px',
-                                    backgroundImage: `url(${card.imageURL})`,
-                                    backgroundRepeat: 'no-repeat',
-                                    backgroundPosition: 'center',
                                 }}/>
-                                <div style={{
+                                <div className='card__description_container'>
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    justifyContent: 'space-between',
-                                    height: '150px',
-                                }}>
                                     <h3 className="noselect text">{card.question}</h3>
-                                <div style={{
+                                <div className='btn__container_tinder'>
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    marginLeft: '18px',
-                                    marginRight: '18px',
-                                }}>
                                     <button
-                                    className="noselect"
+                                    className="btn__tinder noselect"
-                                    style={{
-                                        height: '69px',
-                                        width: '69px',
-                                        backgroundColor: 'rgb(0,0,0,0)',
-                                        border: 'none',
-                                    }}
                                     onClick={() => handleDislike(card.id)}
                                 >
-                                    <img draggable="false" src="./Dis.png" alt='#' style={{
+                                    <img draggable="false" src="./Dis.png" alt='#' className='card__choise_img' onClick={() => handleDislike(card.id)}/>
-                                        height: '100%',
-                                        width: '100%',
-                                    }} onClick={() => handleDislike(card.id)}/>
                                 </button>
                                 <button
-                                    className="noselect"
+                                    className="btn__tinder noselect"
-                                    style={{
+                                    
-                                        height: '69px',
-                                        width: '69px',
-                                        backgroundColor: 'rgb(0,0,0,0)',
-                                        border: 'none',
-                                    }}
                                     onClick={() => handleLike(card.id)}
                                 >
-                                    <img draggable="false" src="./Like.png" alt='#' style={{
+                                    <img draggable="false" src="./Like.png" alt='#' className='card__choise_img' onClick={() => handleLike(card.id)}/>
-                                        height: '100%',
-                                        width: '100%',
-                                    }} onClick={() => handleLike(card.id)}/>
                                 </button>
                                 </div>
                                 </div>

src/components/Tinder/Tinder.scss

@@ -80,6 +80,24 @@
     flex-wrap: wrap;
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
     background-color: #fff;
+    &__choise_img {
+      height: 100%;
+      width: 100%;
+    }
+    &__img {
+      height: 300px;
+      width: 245px;
+      border-radius: 10px;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    &__description_container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      height: 150px;
+    }
   }
   
   .card-content {
@@ -90,8 +108,34 @@
     width: 300px;
     height: 500px;
     background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    flex-direction: column;
+    padding-top: 10px;
   }
   
   .infoText {
     margin-top: 16px;
   }
+.tinder__flex {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: space-around;
+  align-items: center;
+  background: linear-gradient(180deg, #7EAFE7 0.27%, rgba(41, 134, 242, 0.38) 27.08%, rgba(41, 134, 242, 0.35) 31.77%, rgba(152, 198, 253, 0.28) 46.35%, rgba(41, 134, 242, 0.00) 100%);
+  
+}
+.btn__container_tinder {
+  width: 150px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 14px;
+  margin-bottom: 10px;
+}
+.btn__tinder {
+  height: 69px;
+  width: 69px;
+  background-color: #fff;
+  border: none;
+}

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import App from './components/App/App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
+import * as serviceWorkerRegistration from './components/ServiceWorkerRegistration/serviceWorkerRegistration';
-import reportWebVitals from './reportWebVitals';
+import reportWebVitals from './components/ReportWebVitals/reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(