diff options
| -rw-r--r-- | src/components/splash.js | 37 | ||||
| -rw-r--r-- | src/pages/index.js | 15 |
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> ) |