fix

src/App.js

@@ -1,14 +1,16 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import Start from './components/Start/Start';
 import Second from './components/Second/Second';
 import Tinder from './components/Tinder/Tinder';
 import Map from './components/Map/Map';
-import './App.css'
+import axios from 'axios';
+import './App.css';
 
 function App() {
   
   const [buttonValue, setButtonValue] = useState("");
   const [isHidden, setIsHidden] = useState(false);
+  const [cardInfo, setCardInfo] = useState([]);
 
   const handleButtonValue = (value) => {
     setIsHidden(true);
@@ -18,13 +20,27 @@ function App() {
     }, 300);
   };
 
+  useEffect(() => {
+    const fetchData = () => {
+      axios.get('https://easytravel.zetcraft.ru/v1/GetAllCards')
+        .then(response => {
+          setCardInfo(response.data);
+          console.log(cardInfo.length);
+        })
+        .catch(error => {
+          console.error('Error fetching data:', error);
+        });
+    }
+    fetchData();
+  }, []);
+
   let content = null;
   switch (buttonValue) {
     case '/':
       content = <Second getValue={handleButtonValue}/>
       break;
     case '/tinder':
-      content = <Tinder getValue={handleButtonValue}/>
+      content = <Tinder getValue={handleButtonValue} cardInfo={cardInfo}/>
       break;
     case '/map':
       content = <Map/>

src/components/Start/Start.js

@@ -12,6 +12,7 @@ const Start = (props) => {
             flexWrap: 'wrap',
             justifyContent: 'space-evenly',
             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%)',
             overflow: 'hidden',
         }}>
             <span style={{

src/components/Tinder/Tinder.css

@@ -7,7 +7,6 @@
     align-items: center;
     flex-direction: column;
     overflow: hidden;
-    background-color: #fff;
   }
   
   .card-container {

src/components/Tinder/Tinder.js

@@ -6,25 +6,11 @@ import axios from 'axios';
 const Tinder = (props) => {
 
     const route = props.getValue;
+    const cardInfo = props.cardInfo;
 
     const [lastDirection, setLastDirection] = useState();
     const [cardId, setCardId] = useState([]);
     const [allIds, setAllIds] = useState([]);
-    const [cardInfo, setCardInfo] = useState([]);
-
-    useEffect(() => {
-        const fetchData = () => {
-          axios.get('https://easytravel.zetcraft.ru/v1/GetAllCards')
-            .then(response => {
-              setCardInfo(response.data);
-              console.log(cardInfo.length);
-            })
-            .catch(error => {
-              console.error('Error fetching data:', error);
-            });
-        }
-        fetchData();
-      }, []);
 
     const swiped = (direction, id) => {
         setLastDirection(direction);