Где дизайн

src/App.js

@@ -1,10 +1,31 @@
-import React from 'react';
+import React, {useState} from 'react';
 import './App.css';
+import Start from './components/Start/Start';
+import Second from './components/Second/Second';
+import Tinder from './components/Tinder/Tinder';
 
 function App() {
+
+  const [buttonValue, setButtonValue] = useState("");
+
+  const handleButtonValue = (value) => {
+    setButtonValue(value);
+  };
+
+  let content = null;
+  switch (buttonValue) {
+    case '/':
+      content = <Second getValue={handleButtonValue}/>
+      break;
+    case '/tinder':
+      content = <Tinder />
+      break;
+    default: content = <Start getValue={handleButtonValue}/>
+  }
+
   return (
     <div className="App">
-      
+      {content}
     </div>
   );
 }

src/components/Second/Second.js

@@ -0,0 +1,22 @@
+import React from "react"
+
+const Second = (props) => {
+
+    const route = props.getValue
+
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignContent: 'center',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            height: '95vh',
+        }}>
+            <span>Пройти опрос</span>
+            <button onClick={() => route('/tinder')}>Tinder</button>
+        </div>
+    )
+}
+
+export default Second;

src/components/Start/Start.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const Start = (props) => {
+
+    const route =  props.getValue;
+
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignContent: 'center',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            height: '95vh',
+        }}>
+            <img src="" alt="Icon"/>
+            <button onClick={() => route('/')}>Начать</button>
+        </div>
+    )
+};
+
+export default Start;