Use demo component and add description

Some other refactoring here as well: wrap button in function to add
classes and FA, and update to use new logo component.

There is also now a margin around the FA icons in the buttons

2 files changed, 17 insertions, 14 deletions

diff --git a/src/components/layout/layout.css b/src/components/layout/layout.css
index 342de78..4bf4ff1 100644
--- a/src/components/layout/layout.css
+++ b/src/components/layout/layout.css
@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  margin: 0 auto;
 }
 
 .btnBox {
@@ -22,12 +23,10 @@
   }
 }
 
-.screenshot {
-  composes: marginMixin;
-  max-width: 1200px;
-  width: 90%;
-}
-
 .red {
   color: var(--red);
 }
+
+.iconMargin {
+  margin: 0 0 0 var(--marginSm);
+}
diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
index 6d3a9c2..e1e82ee 100644
--- a/src/components/layout/layout.js
+++ b/src/components/layout/layout.js
@@ -1,24 +1,28 @@
 import React from 'react'
 import FA from 'react-fontawesome'
 
-import { layout, btnBox, btn, screenshot, red } from './layout.css'
+import { layout, btnBox, btn, red, iconMargin } from './layout.css'
+import { centerText } from '../../globals.css'
 
-import screenshotImg from '../screenshot/screenshot.png'
 import Logo from '../logo/logo'
-import Button from '../button/button'
+import { RectButton as Button } from '../button/button'
+import Demo from '../demo/demo'
 import Footer from '../footer/footer'
 
+const styledButton = (text, href, iconName) =>
+  <Button href={href} className={btn}>{text}<FA name={iconName} className={iconMargin} /></Button>
+
 const Layout = p =>
   <div className={layout}>
     <div className={layout}>
-      <Logo>slask</Logo>
-      <h2>Connect your team</h2>
+      <Logo tagline='Untangle your team' name='slask' />
       <div className={btnBox}>
-        <Button className={btn}>Download <FA name='download' /></Button>
-        <Button href='//github.com/nvandoorn/slask' className={btn}>Source Code <FA name='github' /></Button>
+        {styledButton('Download', '//www.npmjs.com/package/slask', 'download')}
+        {styledButton('Code', '//github.com/nvandoorn/slask', 'github')}
       </div>
     </div>
-    <img src={screenshotImg} className={screenshot} alt='slask screenshot' />
+    <p className={centerText}>slask is a lightweight log viewer and server all in one.</p>
+    <Demo />
     <Footer>
       Made with <FA name='heart' className={red} /> by nvandoorn
     </Footer>