Implement layout composed of other components

3 files changed, 60 insertions, 0 deletions

diff --git a/src/components/layout/layout.css b/src/components/layout/layout.css
new file mode 100644
index 0000000..342de78
--- /dev/null
+++ b/src/components/layout/layout.css
@@ -0,0 +1,33 @@
+@import "../../globals.css";
+
+.layout {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.btnBox {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  composes: marginMixin;
+}
+
+.btn {
+  &:hover {
+    color: var(--bgColor);
+    background: var(--fontColor);
+    border-color: rgba(0, 0, 0, 0);
+  }
+}
+
+.screenshot {
+  composes: marginMixin;
+  max-width: 1200px;
+  width: 90%;
+}
+
+.red {
+  color: var(--red);
+}
diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
new file mode 100644
index 0000000..6d3a9c2
--- /dev/null
+++ b/src/components/layout/layout.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import FA from 'react-fontawesome'
+
+import { layout, btnBox, btn, screenshot, red } from './layout.css'
+
+import screenshotImg from '../screenshot/screenshot.png'
+import Logo from '../logo/logo'
+import Button from '../button/button'
+import Footer from '../footer/footer'
+
+const Layout = p =>
+  <div className={layout}>
+    <div className={layout}>
+      <Logo>slask</Logo>
+      <h2>Connect your team</h2>
+      <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>
+      </div>
+    </div>
+    <img src={screenshotImg} className={screenshot} alt='slask screenshot' />
+    <Footer>
+      Made with <FA name='heart' className={red} /> by nvandoorn
+    </Footer>
+  </div>
+
+export default Layout
diff --git a/src/components/screenshot/screenshot.png b/src/components/screenshot/screenshot.png
new file mode 100644
index 0000000..36926a9
--- /dev/null
+++ b/src/components/screenshot/screenshot.png