add: new Main page/component.

Author: rafaeldo

src/App.js

@@ -1,10 +1,12 @@
 import React, { Fragment } from 'react';
 import GlobalStyle from './styles/global';
 
+import Main from './pages/Main';
+
 const App = () => (
   <Fragment>
     <GlobalStyle />
-    <div className="App" />
+    <Main />
   </Fragment>
 );
 

src/assets/logo.png

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Logo from '../assets/logo.png';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 60px;
+`;
+
+const Form = styled.form`
+  margin-top: 20px;
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+
+  input {
+    flex: 1;
+    height: 55px;
+    padding: 0 20px;
+    background: #fff;
+    border: 0;
+    font-size: 18px;
+    color: #444;
+    border-radius: 3px;
+  }
+
+  button {
+    height: 55px;
+    padding: 0 20px;
+    margin-left: 10px;
+    background: #63f5b8;
+    color: #fff;
+    border: 0;
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 3px;
+
+    &:hover {
+      background: #57d89f;
+    }
+  }
+`;
+
+const Main = () => (
+  <Container>
+    <img src={Logo} alt="Github Compare" />
+
+    <Form>
+      <input type="text" placeholder="usuário/repositório" />
+      <button type="submit">OK</button>
+    </Form>
+  </Container>
+);
+
+export default Main;

src/pages/Main.js

@@ -5,6 +5,7 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    outline: 0;
   }
 
   body {