Implement demo component

Screenshot moved into its own component such that we can place a button
over the image

3 files changed, 39 insertions, 0 deletions

diff --git a/src/components/demo/demo.css b/src/components/demo/demo.css
new file mode 100644
index 0000000..df0219d
--- /dev/null
+++ b/src/components/demo/demo.css
@@ -0,0 +1,22 @@
+@import "../../globals.css";
+
+.demo {
+  width: 90%;
+  position: relative;
+  composes: flexCenter;
+}
+
+.screenshot {
+  width: 100%;
+  max-width: 1200px;
+}
+
+.btn {
+  background: var(--green);
+  position: absolute;
+  left: calc(50% - (var(--roundBtnDim) / 2));
+  top: 40%;
+  &:hover{
+    transform: scale(1.5);
+  }
+}
diff --git a/src/components/demo/demo.js b/src/components/demo/demo.js
new file mode 100644
index 0000000..96f7ad8
--- /dev/null
+++ b/src/components/demo/demo.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import FA from 'react-fontawesome'
+
+import { RoundButton as Button } from '../button/button'
+
+import { demo, screenshot, btn } from './demo.css'
+import screenshotImg from './screenshot.png'
+
+const Demo = p =>
+  <div className={demo}>
+    <img src={screenshotImg} className={screenshot} alt='slask screenshot' />
+    <Button className={btn} href='//slaskdemo.herokuapp.com'>
+      <FA name='play' />
+    </Button>
+  </div>
+
+export default Demo
diff --git a/src/components/screenshot/screenshot.png b/src/components/demo/screenshot.png
index 36926a9..36926a9 100644
--- a/src/components/screenshot/screenshot.png
+++ b/src/components/demo/screenshot.png