feat: changed style & added random quotes & added random button & add…

…ed a wave svg

packages/web/src/frontPage/home.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
 
+const ReactRotatingText = require("react-rotating-text");
+
+import { getRandomText } from "./randomText";
+
 import {
     SvgCrown,
     Container,
@@ -8,7 +12,11 @@ import {
     VerticallyCenteredText,
     FixText,
     FixCrown,
-    Title
+    Title,
+    RandomText,
+    Wave,
+    ButtonWrapper,
+    TypeButton
 } from "./style";
 
 export const Home = () => {
@@ -39,9 +47,34 @@ export const Home = () => {
                 <VerticallyCenteredText>
                     <TitleTextButton>
                         <Title>King Typer</Title>
+                        <RandomText>
+                            <ReactRotatingText
+                                cursor={true}
+                                pause={1000}
+                                emptyPause={300}
+                                deletingInterval={20}
+                                items={getRandomText()}
+                            />
+                        </RandomText>
+                        <ButtonWrapper>
+                            <TypeButton>Start Typing!</TypeButton>
+                        </ButtonWrapper>
                     </TitleTextButton>
                 </VerticallyCenteredText>
             </FixText>
+
+            <Wave>
+                <svg
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 1920 303"
+                >
+                    <path
+                        d="M1921.5 313.056H-1v-153c50.808 20.339 585.5-12 998-114.5s924.5 0 924.5 0v267.5z"
+                        fill="#fff"
+                    />
+                </svg>
+            </Wave>
         </Container>
     );
 };

packages/web/src/frontPage/randomText.ts

@@ -0,0 +1,41 @@
+const randomText = [
+    `Hello world!`,
+    `Keyboard on fire? Still not enough!`,
+    `Over 9000 WPM!!!!`,
+    `Typing is fun!`,
+    `Imagine any typing website, but better.`,
+    `Try typing faster than you can speak.`,
+    `WPM = words per minute`,
+    `CPM = characters per minute`,
+    `Don't look at the keyboard while typing, it will slow you down.`,
+    `Keyboards can get pretty dirty, clean your keyboard.`,
+    `Practice makes perfect.`,
+    `You can be slow at the beginning, keep practicing.`,
+    `It's important to follow the rules of typing.`,
+    `Don't forget about your posture.`,
+    `Drink some water, hydration is important.`,
+    `Typrrrrrr`,
+    `Fingers on fire? Still not enough!`,
+    `A pandemic can't stop you practicing!`,
+    `You can take a break if you want, but later.`,
+    `There are many types of keyboards, some can help you improve, some will do the opposite.`,
+    `Just keep typing, typing, typing...`,
+    `Queen typer, Prince typer, and Princess typer not included.`,
+    `If you think you're typing too much, take a break and go type something instead.`,
+    `The perfect website for practicing typing doesn't exis...`,
+    `Don't smash your keyboard, don't lose CONTROL`,
+    `If you have no Home you should find a replacement key.`,
+    `This typing website has no escape.`,
+    `My keyboard works for everyone except me, I guess it just isn't my type.`,
+    `The F and J keys have bumps on them, that helps you find them easier.`,
+    `You know the rules and so do I.`
+];
+
+export const getRandomText = (): Array<string> => {
+    let array = randomText;
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+};

packages/web/src/frontPage/style.tsx

@@ -1,8 +1,11 @@
 import styled from "@emotion/styled";
+import { css } from "@emotion/core";
 //// CONTAINER 1
 export const Container = styled.div`
+    position: relative;
     background-color: #198cf6;
-    height: 1080px;
+    height: 100vh;
+    min-height: 1000px;
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
@@ -22,7 +25,7 @@ export const FixCrown = styled.div`
 export const VerticallyCenteredDiv = styled.div`
     margin: 0;
     position: absolute;
-    top: 40%;
+    top: 35%;
     left: 50%;
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
@@ -31,12 +34,13 @@ export const VerticallyCenteredDiv = styled.div`
 export const FixText = styled.div`
     position: relative;
     flex: 2 2 750px;
+    margin-top: -100px;
 `;
 
 export const TitleTextButton = styled.div`
-    @import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
-    font-family: "Press Start 2P", cursive;
+    font-family: "Verdana";
     color: white;
+    font-weight: bold;
     text-align: center;
 `;
 export const VerticallyCenteredText = styled.div`
@@ -50,6 +54,50 @@ export const VerticallyCenteredText = styled.div`
 `;
 
 export const Title = styled.div`
-    font-size: 80px;
+    font-size: 110px;
     width: auto;
 `;
+
+export const RandomText = styled.div`
+    font-size: 22px;
+    font-style: oblique;
+    font-weight: normal;
+    padding: 30px;
+    height: 50px;
+
+    .react-rotating-text-cursor {
+        animation: blinking-cursor 0.6s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s
+            infinite;
+    }
+
+    @keyframes blinking-cursor {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+`;
+
+export const Wave = styled.div`
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+`;
+export const TypeButton = styled.a`
+    background: #fde400;
+    color: black;
+    text-decorate: none;
+    font-size: 18px;
+    font-weight: bold;
+    padding: 15px 25px;
+`;
+
+export const ButtonWrapper = styled.div`
+    width: 100%;
+    padding-top: 20px;
+`;