Implement simple splash with button

1 files changed, 28 insertions, 9 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>
 )