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

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={{
-      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 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 className="container container_space_around">
+      <div className="city">
+        <div className="city__plannet">
+          <img src='./image 2.png' alt="#" draggable="false" className="city__plannet_img"/>
         </div>
-          <span style={{
-            fontWeight: 700,
-            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>
+        <select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" className="city__choise">
+          <option value="" className="city__choise_option">Выберите город...</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={{
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'fixed',
-    bottom: 50,
-    gap: 10,
-    }}>
+  <div className="button-container">
     <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>