Add signup form

components/page-footer/index.js

@@ -55,4 +55,4 @@ const PageFooter = () => (
   </FooterWrap>
 );
 
-export default PageFooter;
+export default PageFooter;

components/signup-form/index.js

@@ -0,0 +1,12 @@
+import { SignUpWrap, Title, Subtitle, Textbox, Button } from './style';
+
+const SignUpForm = () => (
+  <SignUpWrap>
+    <Title>Subscribe</Title>
+    <Subtitle>You have caught us before we are ready, enter your email below and we will keep you posted</Subtitle>
+    <Textbox type="text" placeholder="Your email" />
+    <Button>Subscribe</Button>
+  </SignUpWrap>
+);
+
+export default SignUpForm;

components/signup-form/style.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+export const SignUpWrap = styled.div`
+  max-width: 400px;
+  margin: 200px auto;
+  text-align: center;
+`;
+
+export const Title = styled.h1`
+  font-size: 48px;
+  font-weight: 700;
+  margin-bottom: 17px;
+`;
+
+export const Subtitle = styled.p`
+  font-size: 16px;
+`;
+
+export const Textbox = styled.input`
+  display: block;
+  width: 100%;
+  padding: 10px 15px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  height: auto;
+  outline: none;
+  background-color: #fff;
+  border: 1px solid #ced4da;
+  border-radius: 5px;
+  
+  &:focus {
+    border: 1px solid #101010;
+  }
+`;
+
+export const Button = styled.button`
+  -webkit-appearance: none;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  display: block;
+  text-align: center;
+  width: 100%;
+  padding: 10px 15px;
+  margin-top: 10px;
+  background: #333;
+  color: white;
+  border-radius: 5px;
+  
+  &:hover {
+    background: #000000;
+  }
+`;

components/site-nav/index.js

@@ -12,7 +12,6 @@ const SiteNav = () => (
       <div className="nav-links">
         <Link href="/roadmaps"><a>Roadmaps</a></Link>
         <Link href="/guides"><a>Guides</a></Link>
-        <Link href="/about"><a>FAQs</a></Link>
         <Link href="/signup"><a className="signup">Sign Up</a></Link>
       </div>
     </div>

pages/signup.js

@@ -1,18 +1,12 @@
 import DefaultLayout from 'layouts/default';
 import PageFooter from 'components/page-footer';
 import SiteNav from 'components/site-nav';
+import SignUpForm from '../components/signup-form';
 
 const SignUp = () => (
   <DefaultLayout>
     <SiteNav />
-    <div className="container">
-      <div className="text-center" style={{ maxWidth: '400px', margin: '200px auto'}}>
-        <h1 className="font-weight-bolder">Sign Up</h1>
-        <p>You have caught us before we are ready, enter your email below and we will notify you once you are in</p>
-        <input type="text" className="form-control" />
-        <button className="btn btn-dark btn-block mb-5 mt-2">Subscribe</button>
-      </div>
-    </div>
+    <SignUpForm />
     <PageFooter />
   </DefaultLayout>
 );