Implement simple splash with button

2 files changed, 42 insertions, 10 deletions

diff --git a/src/components/splash.js b/src/components/splash.js
index 76fd677..f494b2a 100644
--- a/src/components/splash.js
+++ b/src/components/splash.js
@@ -1,14 +1,33 @@
 import React from 'react'
 import { css } from '@emotion/core'
 
+import { Button } from './button'
+import { colours, margins } from './globals'
+
+const splashContainerStyle = css`
+  height: 100%;
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`
+
+const taglineStyle = css`
+  margin: ${margins.md}px 0;
+`
+
 export const Splash = p => (
-  <div
-    css={css`
-      height: 100%;
-      display: flex;
-      align-items: center;
-    `}
-  >
-    <h2>Hello big world</h2>
-  </div>
+  <article css={splashContainerStyle}>
+    <h2 css={taglineStyle}>{p.heroText}</h2>
+    <Button
+      fontSize="1.5em"
+      fontWeight="800"
+      background={colours.background}
+      hoverBackground={colours.main}
+      hoverColour={colours.background}
+      to={p.heroBtnTo}
+    >
+      {p.heroBtn}
+    </Button>
+  </article>
 )
diff --git a/src/pages/index.js b/src/pages/index.js
index 3405b38..14e4b4d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,11 +1,24 @@
 import React from 'react'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
+
 import Layout from '../components/layout'
 import { Splash } from '../components/splash'
 
+const indexData = {
+  heroText: `Let's make computers work for us`,
+  heroBtnTo: '/about',
+  heroBtn: (
+    <>
+      Get In Touch <FontAwesomeIcon icon={faPaperPlane} />
+    </>
+  )
+}
+
 const IndexPage = () => (
   <Layout height="100vh">
-    <Splash />
+    <Splash {...indexData} />
   </Layout>
 )