Hero Section Added

src/components/sections/Header.css

@@ -0,0 +1,17 @@
+.Header {
+  width: 100%;
+  height: 80vh;
+  display: flex;
+  align-items: center;
+}
+
+.Header > h1 {
+  font-size: 3.7em;
+  font-weight: lighter;
+  line-height: 65px;
+  width: 65%;
+  color: #353576;
+}
+.Header > img {
+  width: 35%;
+}

src/components/sections/Header.js

@@ -3,24 +3,17 @@ import { Link } from 'gatsby';
 
 import Image from '@common/Image';
 import { Container, Button } from '@components/global';
+import './Header.css';
+import coverPageImage from '../../images/cover-page.svg';
 
 const Header = props => (
   <header style={{ padding: '3rem 0', marginTop: '5rem' }}>
     <Container>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <div style={{ width: 300 }}>
-          <Image />
-        </div>
-        <div style={{ padding: '4rem' }}>
-          <h1>Hi people</h1>
-          <p>
-            Welcome to your new Gatsby site. <br /> Now go build something
-            great.
-          </p>
-          <Button as={Link} to="/page-2/" style={{ textDecoration: 'none' }}>
-            Go to page 2 &nbsp; &rarr;
-          </Button>
-        </div>
+      <div className="Header">
+        <h1>
+          We are India’s largest and fastest growing community of builders.
+        </h1>
+        <img src={coverPageImage} alt="image" />
       </div>
     </Container>
   </header>