package-lock.json

@@ -22,7 +22,6 @@
         "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",
@@ -9459,11 +9458,6 @@
         "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",
@@ -15549,22 +15543,6 @@
       "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

@@ -16,7 +16,6 @@
     "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",
@@ -55,10 +54,6 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "react-scripts": "^5.0.1",
-    "sass": "^1.38.0"
-  },
   "main": "index.js",
   "keywords": [],
   "author": "",

src/components/City/City.css

@@ -0,0 +1,46 @@
+/* .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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom"; 
 
 import axios from "axios";
-import './City.scss'
+import './City.css'
 
 const City = (props) => {
   const route = props.getValue;
@@ -54,13 +54,48 @@ const City = (props) => {
   }, [selectedCity, cityOptions]);
 
   return (
-    <div className="container">
+    <div style={{
-      <div className="city">
+      display: 'flex',
-        <div className="city__plannet">
+      flexDirection: 'column',
-          <img src='./image 2.png' alt="#" draggable="false" className="city__plannet_img"/>
+      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>
-        <select onChange={e => cityHandler(e)} placeholder="Выберите город..." value={selectedCity} id="city" name="city" className="city__choise">
+          <span style={{
-          <option value="" className="city__choise_option">Выберите город...</option>
+            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>
           {filteredCityOptions.map(option => (
             <option key={option.id} value={option.name} style={{
                 maxWidth: 200,
@@ -69,7 +104,13 @@ const City = (props) => {
         </select>
       </div>
       {buttonsVisible ? (
-  <div className="button-container">
+  <div className="button-container" style={{
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'fixed',
+    bottom: 50,
+    gap: 10,
+    }}>
     <button
       className="animated-button"
       onClick={() => {
@@ -81,13 +122,25 @@ const City = (props) => {
       Я в этом городе
     </button>
     <button
-      className="city__ticket"
+      className="ab"
       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

@@ -1,93 +0,0 @@
-.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: 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%);
-
-}
-.city {
-  height: 520px;
-  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/Second/Second.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { useNavigate } from "react-router-dom"; 
-import './second.scss'
+import './style.css'
 import Icon from './images/Vector.svg'
 
 
@@ -10,15 +10,39 @@ const Second = (props) => {
     const tinder = useNavigate();
     const main = useNavigate();
     return (
-        <div className="container">
+        <div style={{
+            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 className="container__description">
+               <div style={{
-                <h1 className="container__main_text">Давайте<br/>знакомиться!</h1>
+                display:'flex',
-                <p className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
+                flexDirection:'column',
+                gap:20,
+                alignItems:'center',
+               }}>
+                <h1 className="main_text">Давайте<br/>знакомиться!</h1>
+                <p style={{
+                    textAlign:'center',
+                    color:'#6C6C6C',
+                }} className="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
               для вас мероприятия</p>
                </div>
                 
-               <div className="btn__container">
+               <div style={{
+                display:'flex',
+                flexDirection:'column',
+                gap:15,
+                alignItems:'center',
+               }}>
                   <button className="btn_first" onClick={() => tinder('/tinder')}>Давайте!</button>
                   <button className="btn_second" onClick={() => main('/main')}>Пропустить</button>
                </div>

src/components/Second/second.scss

@@ -1,77 +0,0 @@
-@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: 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);
-    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

@@ -0,0 +1,50 @@
+@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,7 +1,5 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom"; 
-import './start.scss';
-
 
 const Start = (props) => {
   const history = useNavigate();
@@ -37,12 +35,38 @@ const Start = (props) => {
   }, []);
 
   return (
-    <div className="container">
+    <div style={{
-      <div className="header">
+      display: 'flex',
-        <img src="./logo192.png" alt="logo" className="header__logo"/>
+      flexDirection: 'column',
-        <span className="header__text">Путешествия<p>Просто!</p></span>
+      alignContent: 'center',
+      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 id="start" scrolling="no" src={kek} style={{
+        overflow: 'hidden',
+        border: 'none',
+        width: '440px',
+        height: '440px',
+      }}></iframe>
     </div>
   )
 };

src/components/Start/start.scss

@@ -1,37 +0,0 @@
-.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;
-}