Update website adding 'ready to start?' section

packages/website/scss/index.scss

@@ -82,6 +82,10 @@ pre[class*=language-] {
     text-align: center;
     margin-bottom: 25px;
 
+    &:last-child {
+        margin-bottom: 0;
+    }
+
     .title, section {
         font-weight: 300;
         margin: 0 auto;
@@ -90,6 +94,7 @@ pre[class*=language-] {
 
     .title {
         font-size: 2.6em;
+        padding: 0;
     } 
 
     @include for-desktop-up {
@@ -278,7 +283,9 @@ h2 {
     text-align: right;
 
     @include for-desktop-up {
-        position: absolute;
+        @at-root .hero:first-child + .github-link {
+            position: absolute;
+        }
     }
 
     a {
@@ -326,3 +333,10 @@ h2 {
         }
     }
 }
+
+.shell-image {
+    width: 100vw;
+    max-width: 700px;
+    display: block;
+    margin: 0 -15px;
+}

packages/website/src/ReadyToStart.js

@@ -0,0 +1,14 @@
+import shellImage from '../images/shell.svg';
+import GitHubLink from './GitHubLink';
+
+const ReadyToStart = () => (
+    <div class="container hero figma-gradient with-opacity-05">
+        <section>
+            <h2 class="figma-gradient text title">ready to start?</h2>
+            <img className="shell-image" src={shellImage} alt="Shell - npm install figma-export" />
+            <GitHubLink />
+        </section>
+    </div>
+);
+
+export default ReadyToStart;

packages/website/src/Title.js

@@ -0,0 +1,18 @@
+import SvgOcticons from './SvgOcticons';
+
+const Title = () => (
+    <div class="container hero figma-gradient with-opacity-05">
+        <section>
+            <h1 class="figma-gradient text title">@figma-export</h1>
+            <p>Export tool for Figma</p>
+            <p>
+                You can easily and automatically export your
+                figma <code class="figma-gradient with-opacity-10">components</code> and <code class="figma-gradient with-opacity-10">styles</code> and
+                use them directly into your website
+            </p>
+        </section>
+        <SvgOcticons />
+    </div>
+);
+
+export default Title;

packages/website/src/index.js

@@ -1,30 +1,21 @@
 import { render, Fragment, hydrate } from 'preact';
 
-import SvgOcticons from './SvgOcticons';
 import GitHubLink from './GitHubLink';
+import Title from './Title';
+import ReadyToStart from './ReadyToStart';
 
 import OutputComponents from './output-components';
 import OutputStyles from './output-styles';
 
 const App = () => (
     <Fragment>
-        <div class="container hero figma-gradient with-opacity-05">
-            <section>
-                <h1 class="figma-gradient text title">@figma-export</h1>
-                <p>Export tool for Figma</p>
-                <p>
-                    You can easily and automatically export your
-                    figma <code class="figma-gradient with-opacity-10">components</code> and <code class="figma-gradient with-opacity-10">styles</code> and
-                    use them directly into your website
-                </p>
-            </section>
-            <SvgOcticons />
-        </div>
-
+        <Title />
         <GitHubLink />
 
         <OutputComponents />
         <OutputStyles />
+
+        <ReadyToStart />
     </Fragment>
 );
 

packages/website/src/output-components/ComponentsAsES6_base64.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'preact';
 
-import CodeBlock from '../CodeBlock';
+import CodeBlock from '../components/CodeBlock';
 
 // eslint-disable-next-line import/no-unresolved, import/extensions
 import { figmaExport, figmaLogo } from '../../output/es6-base64/icons';

packages/website/src/output-components/ComponentsAsES6_dataUrl.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'preact';
 
-import CodeBlock from '../CodeBlock';
+import CodeBlock from '../components/CodeBlock';
 
 // eslint-disable-next-line import/no-unresolved, import/extensions
 import { figmaExport, figmaLogo } from '../../output/es6-dataurl/icons';

packages/website/src/output-components/ComponentsAsSvgr_default.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import { Fragment } from 'preact';
 
-import CodeBlock from '../CodeBlock';
+import CodeBlock from '../components/CodeBlock';
 
 // eslint-disable-next-line import/no-unresolved, import/extensions
 import * as FigmaIcons from '../../output/svgr/icons';

packages/website/src/output-components/ComponentsAsSvgstore_default.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import { Fragment } from 'preact';
 
-import CodeBlock from '../CodeBlock';
+import CodeBlock from '../components/CodeBlock';
 
 const fs = require('fs');
 

packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import { Fragment } from 'preact';
 
-import CodeBlock from '../CodeBlock';
+import CodeBlock from '../components/CodeBlock';
 
 const fs = require('fs');
 

packages/website/src/output-styles/AsCss.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'preact';
-import Code from '../Code';
-import CodeBlock from '../CodeBlock';
+import Code from '../components/Code';
+import CodeBlock from '../components/CodeBlock';
 
 const props = {
     title: (

packages/website/src/output-styles/AsLess.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'preact';
-import Code from '../Code';
-import CodeBlock from '../CodeBlock';
+import Code from '../components/Code';
+import CodeBlock from '../components/CodeBlock';
 
 const props = {
     title: (

packages/website/src/output-styles/AsSass.js

@@ -1,6 +1,6 @@
 import { Fragment } from 'preact';
-import Code from '../Code';
-import CodeBlock from '../CodeBlock';
+import Code from '../components/Code';
+import CodeBlock from '../components/CodeBlock';
 
 const props = {
     title: (