create navbar wave

Signed-off-by: Guilherme Deusdará <[email protected]>

components/NavBar/index.js

@@ -15,8 +15,6 @@ export default function Navbar() {
           <Button primary>SIGN IN</Button>
         </Auth>
       </Wrapper>
-
-      <footer></footer>
     </div>
   );
 }

components/NavBar/styles.js

@@ -4,7 +4,12 @@ export const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 12px 24px;
-  background: #2000e5;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  z-index: 10000;
 `;
 
 export const Logo = styled.a`

components/Wave/index.js

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import { Header, Text } from './styles';
+import theme from "../../styles/theme";
+
+const Wave = () => {
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setAnimated(true);
+    }, 2000);
+  }, [])
+
+  return (
+    <>
+      <Header fill="url(#gradient)"
+        paused={animated}
+        options={{
+          height: 50,
+          amplitude: 20,
+          speed: 0.7,
+          points: 3
+        }}
+      >
+        <defs>
+          <linearGradient id="gradient" gradientTransform="rotate(0)">
+            <stop offset="60%"  stopColor="#8f00ff" />
+            <stop offset="100%" stopColor="#2000e5" />
+          </linearGradient>
+        </defs>
+      </Header>
+      <Text>Understand the growing computational burden in the history of computer progress.</Text>
+    </>
+  );
+}
+
+export default Wave;

components/Wave/styles.js

@@ -0,0 +1,24 @@
+
+import styled from "styled-components";
+import Wave from 'react-wavify';
+import theme from "../../styles/theme";
+
+export const Header = styled(Wave)`
+  transform: rotate(180deg);
+  margin-top: -5px;
+  height: 300px;
+`;
+
+export const Wrapper = styled.div`
+  position: relative;
+`
+
+export const Text = styled.p`
+  position: absolute;
+  top: 100px;
+  left: 72px;
+  font-weight: bold;
+  font-size: 1.5rem;
+  color: ${theme.colors.white};
+  width: 50%;
+`

containers/Home/index.js

@@ -1,6 +1,9 @@
+
 import Head from "next/head";
 import { Container } from "./styles.js";
-import Navbar from "../../components/NavBar";
+import NavBar from "../../components/NavBar";
+import Wave from "../../components/Wave";
+
 export default function Home() {
   return (
     <div>
@@ -9,7 +12,8 @@ export default function Home() {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Navbar />
+      <NavBar />
+      <Wave />
       <Container></Container>
 
       <footer></footer>

containers/Home/styles.js

@@ -4,4 +4,4 @@ export const Container = styled.div`
   background: gray;
   font-size: 2rem;
   height: 100vh;
-`;
+`;

package.json

@@ -11,6 +11,7 @@
     "next": "10.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-wavify": "^1.5.2",
     "styled-components": "^5.3.0"
   }
 }

yarn.lock

@@ -1492,7 +1492,7 @@ [email protected], process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-[email protected]:
+[email protected], prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -1587,6 +1587,13 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-wavify@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/react-wavify/-/react-wavify-1.5.2.tgz#02a26b335414d0e008cd4f6c0ab15dd97af5ba88"
+  integrity sha512-Xf7zC+6DyitUbNQsAMrSN6DygN90DrzQB20ecgLpiSoBqyUgUM3DbYvCTk5re7azvwT9EANq+awyk2KNCr4oEg==
+  dependencies:
+    prop-types "^15.7.2"
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"