Add signup form

pull/1331/head
Kamran Ahmed 5 years ago
parent c6dff9efde
commit 4b3b1496b7
  1. 12
      components/signup-form/index.js
  2. 55
      components/signup-form/style.js
  3. 1
      components/site-nav/index.js
  4. 10
      pages/signup.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;

@ -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;
}
`;

@ -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>

@ -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>
);

Loading…
Cancel
Save