getStart

src/components/Second/Second.js

@@ -1,9 +1,27 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
+import './style.css'
+import Icon from './images/Vector.svg'
+
 
 const Second = (props) => {
 
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight)
+
+    const handleResize = () => {
+        setWindowWidth(window.innerWidth)
+        setWindowHeight(window.innerHeight)
+    }
+
     const route = props.getValue
 
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        }
+    }, [])
+
     return (
         <div style={{
             display: 'flex',
@@ -11,10 +29,36 @@ const Second = (props) => {
             alignContent: 'center',
             flexWrap: 'wrap',
             justifyContent: 'space-between',
-            height: '95vh',
+            height:{windowHeight} ,
+            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,
+
         }}>
-            <span>Пройти опрос</span>
-            <button onClick={() => route('/tinder')}>Tinder</button>
+               <img src={Icon} alt='#'/>
+               <div style={{
+                display:'flex',
+                flexDirection:'column',
+                gap:20,
+                alignItems:'center',
+               }}>
+                <h1 class="main_text">Давайте знакомиться!</h1>
+                <p class="text">Пройдите небольшой тест,<br/> чтобы мы подобрали интересные<br/>
+              для вас мероприятия</p>
+               </div>
+                
+               <div style={{
+                display:'flex',
+                flexDirection:'column',
+                gap:20,
+                alignItems:'center',
+               }}>
+                  <button class="btn_first" onClick={() => route('/tinder')}>Давайте!</button>
+                  <button class="btn_second" onClick={() => route('')}>Сам разберусь</button>
+               </div>
+          
+        
+            
         </div>
     )
 }

src/components/Second/style.css

@@ -0,0 +1,46 @@
+@font-face {
+    font-family: "Raleway";
+    src: url("../Second/fonts/Raleway.ttf");
+  }
+  
+
+
+.main_text{
+    font-size: 40px;
+    text-align: center;
+    font-family: "Raleway";
+    
+}
+.text{
+    font-size: 20px;
+    color: #6C6C6C;
+    text-align: center;
+    width: 332px;
+    font-family: "Raleway";
+}
+.btn_first{
+    width: 231px;
+    height: 61px;
+    background: #0094FF;
+    border: #0094FF;
+    color: #fff;
+    font-size: 24px;
+    text-align: center;
+    border-radius: 53px;
+    font-weight: bold;
+    box-shadow: 0px 4px 4px 0px #0094FF;
+
+   
+}
+.btn_second{
+    width: 169px;
+    height: 49px;
+    background: rgb(126, 175, 231,100);
+    border: #0094FF;
+    color: #fff;
+    font-size: 15px;
+    text-align: center;
+    border-radius: 53px;
+    box-shadow: 0px 4px 4px 0px #C6C6C6;
+   
+}