feat(docs): Work on landing page

docs/assets/scripts/intro/intro.ts

@@ -8,6 +8,7 @@ const textArea = document.querySelector('.vendure-intro .intro-text-area');
 const scene = document.querySelector('.vendure-intro .scene');
 const controls = document.querySelector('.vendure-intro .intro-controls');
 const title = document.querySelector('.vendure-intro .intro-title');
+const INTRO_VIEWED_KEY = 'v-intro-viewed';
 
 if (textArea && scene && controls && title) {
     const replayButton = controls.querySelector('#replay');
@@ -22,16 +23,24 @@ if (textArea && scene && controls && title) {
             active.classList.add('active');
         }
         if (className === 'scene-6') {
+            window.localStorage.setItem(INTRO_VIEWED_KEY, 'true');
             title.classList.add('visible');
             if (replayButton) {
                 replayButton.classList.add('visible');
             }
+        } else {
+            title.classList.remove('visible');
         }
     };
     const sequencer = new Sequencer(scene as HTMLDivElement, terminal, onTransition);
 
-    sequencer.play();
-
+    const introViewed = !!window.localStorage.getItem(INTRO_VIEWED_KEY);
+    // const introViewed = false;
+    if (!introViewed) {
+        sequencer.play();
+    } else {
+        sequencer.jumpTo(6);
+    }
 
     if (replayButton) {
         replayButton.addEventListener('click', () => sequencer.play());

docs/assets/scripts/main.ts

@@ -10,13 +10,15 @@ require('../styles/main.scss');
 document.addEventListener('DOMContentLoaded', () => {
     const topBar = document.querySelector('.top-bar');
     if (topBar) {
-        window.addEventListener('scroll', (e) => {
+        const setTopBarClass = () => {
             if (window.scrollY === 0) {
                 topBar.classList.remove('floating');
             } else {
                 topBar.classList.add('floating');
             }
-        });
+        };
+        window.addEventListener('scroll', setTopBarClass);
+        setTopBarClass();
     }
 
     const toc = document.querySelector('#TableOfContents') as HTMLDivElement;

docs/assets/styles/_landing-page.scss

@@ -1,125 +1,220 @@
 @import "variables";
 
-.top-header {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+@mixin texture-bg {
+    background-color: #1a1a1a;
+    box-shadow: inset 0px 0px 15px 8px rgba(0, 0, 0, 0.75);
+    background-image: url("/header-bg.png");
+    background-attachment: fixed;
+    background-blend-mode: darken;
 }
-.content {
-    padding: 20px;
-    max-width: 800px;
-    margin: auto;
-    color: #393939;
-
-    a:link, a:visited {
-        color: darken($brand-color, 20%);
-    }
-    a:hover, a:active {
+
+.landing-page {
+
+    h2 {
+        font-size: 3em;
+        font-weight: normal;
         color: $brand-color;
+        @media screen and (max-width: $sm-breakpoint) {
+            font-size: 2em;
+        }
     }
-}
 
-a.status {
-    background-color: orange;
-    padding: 5px 10px;
-    border-radius: 3px;
-    font-size: 16px;
-    margin-left: 12px;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.1);
-    transition: background-color 0.2s, box-shadow 0.2s;
-    clr-icon {
-        margin-right: 6px;
+    h3 {
+        font-size: 2.5em;
+        font-weight: normal;
+        color: $gray-600;
+        @media screen and (max-width: $sm-breakpoint) {
+            font-size: 1.8em;
+        }
     }
 
-    &:link, &:visited {
-        color: #444;
-    }
-    &:hover {
-        background-color: #ffb203;
-        box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.3);
+    p.lead {
+        font-size: 1.4em;
+        font-weight: lighter;
+        line-height: 1.6em;
+        @media screen and (max-width: $sm-breakpoint) {
+            font-size: 1.2em;
+        }
     }
-}
-
-.section-2 {
-    background-color: #e5e5e5;
-}
-
-.section-video {
-    background-color: #212122;
-    box-shadow: inset 0px 0px 15px 8px rgba(0,0,0,0.75);
 
-    background-image: url("/header-bg.png");
-    background-attachment: fixed;
     .content {
-        text-align: center;
-    }
-    iframe.video-embed {
-        max-width: 100%;
-    }
-}
+        padding: 20px;
+        max-width: $container-max-width;
+        margin: auto;
 
-.features {
-    display: flex;
-    flex-direction: column;
-    .feature {
-        margin: 10px;
-        flex: 1;
-    }
-    .feature-icon {
-        text-align: center;
-        img {
-            width: 64px;
-            height: 64px;
+        a:link, a:visited {
+            color: darken($brand-color, 20%);
+        }
+
+        a:hover, a:active {
+            color: $brand-color;
         }
     }
-    h3 {
+
+    .section-1 {
         text-align: center;
-    }
-}
+        color: $gray-300;
+        @include texture-bg;
 
-.roadmap {
-    ul li {
-        margin: 12px 0;
-    }
-}
+        .stack-logos {
+            display: flex;
+            align-items: center;
+            justify-content: space-evenly;
+            padding-bottom: 36px;
 
-.about {
-    margin-top: 64px;
-}
+            @media screen and (max-width: $sm-breakpoint) {
+                flex-wrap: wrap;
+            }
 
-.footer {
-    padding: 30px 10px;
-    background: #a1a1a1;
-    text-align: center;
-    color: #e5e5e5;
+            .stack-logo {
+                max-width: 200px;
+                margin: 0 12px;
+                height: 100px;
+                display: flex;
+                align-items: center;
 
-    .gh-link {
-        margin-left: 12px;
-    }
-}
-.footer a:link, .footer a:visited {
-    color: #eee;
-}
-@media all and (min-width: 600px){
-    .hero {
-        padding: 100px;
+                @media screen and (max-width: $sm-breakpoint) {
+                    max-width: 100px;
+                }
+
+                img {
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+            }
+            .ts-logo {
+                width: 200px;
+            }
+            .nest-logo {
+                filter: saturate(0%) brightness(2);
+            }
+        }
     }
-    .logo img {
-        max-width: 160px;
+
+    .section-2 {
+        background-color: $gray-100;
     }
-    .logo h1 {
-        font-size: 5em;
+
+    .features {
+        .feature {
+            display: flex;
+            align-items: center;
+
+            @media screen and (min-width: $sm-breakpoint) {
+                &:nth-child(even) {
+                    flex-direction: row-reverse;
+                }
+            }
+            @media screen and (max-width: $sm-breakpoint) {
+                flex-direction: column;
+            }
+            color: $gray-700;
+        }
+        .feature-copy {
+            padding: 0 16px;
+        }
+        .feature-image {
+            max-width: 100%;
+            min-width: 400px;
+            margin-top: 40px;
+            display: flex;
+            align-items: center;
+            @media screen and (max-width: $sm-breakpoint) {
+                flex-direction: column;
+            }
+            @media screen and (min-width: $lg-breakpoint) {
+                min-width: 600px;
+            }
+            img {
+                width: 100%;
+            }
+        }
     }
-    .top-header {
-        flex-direction: row;
+
+    .section-3 {
+        .install-code, .getting-started-link {
+            flex: 1;
+        }
+        .getting-started-link {
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .getting-started-button {
+            text-transform: uppercase;
+            font-size: 1.4em;
+            padding: 12px 24px;
+            background-color: $color-success;
+            box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.23);
+            white-space: nowrap;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+            &:link, &:visited {
+                color: #ceeabe;
+            }
+            &:hover {
+                background-color: lighten($color-success, 4%);
+            }
+        }
     }
-    .subhead {
-        font-size: 2em;
+
+    .footer {
+        @include texture-bg;
+        padding: 30px 10px;
+        margin-top: 120px;
+        color: $gray-600;
+
+        .gh-link {
+            margin-left: 12px;
+        }
+
+        .links {
+            margin-left: 12px;
+            margin-bottom: 60px;
+            ul {
+                font-size: 18px;
+                list-style-type: none;
+                padding-left: 0;
+                li {
+                    margin: 6px 0;
+                }
+            }
+        }
+        .copyright {
+            font-size: 12px;
+            text-align: center;
+        }
+        a:link, a:visited {
+            color: $gray-500;
+            transition: color 0.2s;
+        }
+        a:hover {
+            color: $gray-200;
+        }
     }
-    .features {
-        flex-direction: row;
+
+
+
+    @media all and (min-width: 600px) {
+        .hero {
+            padding: 100px;
+        }
+        .logo img {
+            max-width: 160px;
+        }
+        .logo h1 {
+            font-size: 5em;
+        }
+        .top-header {
+            flex-direction: row;
+        }
+        .subhead {
+            font-size: 2em;
+        }
+        .features {
+            flex-direction: row;
+        }
     }
 }

docs/assets/styles/_top-bar.scss

@@ -2,15 +2,23 @@
 
 .top-bar {
     position: fixed;
-    padding: 12px 24px;
+    padding: 0 24px;
     background-color: #1e1e1e;
     width: 100%;
     top: 0;
     height: $top-bar-height;
-    display: flex;
-    align-items: center;
     transition: background-color 0.7s;
     z-index: 10;
+    display: flex;
+    align-items: center;
+
+    .top-bar-content {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        max-width: $container-max-width;
+        margin: auto;
+    }
 
     @media all and (max-width: $sm-breakpoint){
         padding: 12px;
@@ -43,11 +51,15 @@
         }
     }
 
-
     .flex-spacer {
         flex: 1;
     }
 
+    .left {
+        display: flex;
+        align-items: center;
+    }
+
     .logo {
         img {
             max-width: 32px;
@@ -58,6 +70,26 @@
         font-size: 24px;
         letter-spacing: 0px;
         font-weight: 600;
+
+        .logotype {
+            display: inline-block;
+            margin-right: 12px;
+            @media all and (max-width: $sm-breakpoint){
+                display: none;
+            }
+        }
+    }
+
+
+    .alpha-label {
+        display: inline-block;
+        background-color: #ffd400;
+        padding: 3px 6px;
+        border-radius: 3px;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+        color: #736108;
     }
 
     .right {

docs/assets/styles/_utils.scss

@@ -1,5 +1,10 @@
+@import "variables";
+
 .flex {
     display: flex;
+    @media all and (max-width: $sm-breakpoint){
+        flex-direction: column;
+    }
 }
 
 .justify-start {

docs/assets/styles/_variables.scss

@@ -51,3 +51,4 @@ $container-max-width: 80rem;
 
 $sm-breakpoint: $menu-width + $body-min-width;
 $md-breakpoint: $sm-breakpoint + $toc-width;
+$lg-breakpoint: 1200px;

docs/assets/styles/intro/_cube.scss

@@ -12,6 +12,7 @@
     transform: translateZ(calc(-1.75 * var(--width-unit)))
      translateX(calc(.25 * var(--width-unit))) 
      rotateY(45deg) ;
+    z-index: 1;
 } 
 
 .cube2 {

docs/assets/styles/intro/intro.scss

@@ -11,28 +11,44 @@
     --color-left: #30c6fd;
     --color-right: #13b7f3;
     --color-shadow: rgba(94, 94, 94, 0);
-    --width-unit: 10vw;
+    --width-unit: 9vw;
     --border-width: calc(.0 * var(--width-unit));
     --border-style: dashed;
     --front-border-width: 0;
     --border-color: rgb(95, 95, 95);
 
+    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 56%, #d7d8d1 100%);
     margin: 0;
+    overflow: hidden;
     box-sizing: border-box;
     height: 100vh;
     padding-top: 10vh;
+    transition: padding-top 0.2s;
+
     @media all and (max-width: $sm-breakpoint) {
-        height: initial;
+        padding-top: 10vh;
+    }
+    @media all and (min-height: 1000px) {
+        padding-top: 5vh;
+    }
+    @media all and (min-width: $lg-breakpoint) {
+        // --width-unit: 10vh;
     }
 }
 
+.intro-container {
+    max-width: $container-max-width;
+    margin: auto;
+    position: relative;
+}
+
 .scene {
     perspective: calc(10 * var(--width-unit));
     transform-style: preserve-3d;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 50vw;
+    height: 40vw;
     transform: rotateX(-45deg);
     transition: transform $transition-duration, perspective $transition-duration, opacity 0.2s 0.5s;
     font-family: sans-serif;
@@ -41,18 +57,18 @@
     &.visible {
         opacity: 1;
     }
-
-    @media all and (min-width: 1200px) {
-        --width-unit: 10vh;
-        height: 50vh;
+    @media all and (min-height: 1000px) {
+        height: 50vw;
     }
 
 }
 
 .intro-title {
-    text-align: center;
-    padding: 0 16px;
-    max-width: 1200px;
+    top: 18vw;
+    right: 36px;
+    position: absolute;
+    text-align: right;
+    max-width: $lg-breakpoint;
     margin: auto;
     opacity: 0;
     transform: translateY(-20px);
@@ -76,30 +92,47 @@
 
     h1 {
         color: $brand-color;
-        font-size: calc(1.1 * var(--width-unit));
+        font-size: calc(0.9 * var(--width-unit));
         margin: 0 0 15px;
         font-family: 'Didact Gothic', sans-serif;
     }
 
     .subhead {
-        font-size: calc(0.35 * var(--width-unit));
+        max-width: calc(4 * var(--width-unit));
+        font-size: calc(0.3 * var(--width-unit));
         color: desaturate($brand-color, 50%);
         margin: auto;
     }
-    @media all and (min-width: 1200px) {
+    .more-icon {
+        width: calc(1 * var(--width-unit));
+        transform: rotateZ(180deg);
+        opacity: 0.1;
+    }
+    @media all and (min-width: $lg-breakpoint) {
         h1 {
-            font-size: 7em;
+            font-size: 6em;
         }
         .subhead {
-            font-size: 2.5em;
+            font-size: 2em;
         }
+        .more-icon {
+            width: 7em;
+        };
+    }
+    @media all and (min-height: 1000px) {
+        top: 26vw;
     }
     @media all and (max-width: $sm-breakpoint) {
+        top: 60vw;
+        right: 36px;
+        text-align: center;
+        padding: 0 24px;
         h1 {
             font-size: 4em;
         }
         .subhead {
             font-size: 1.5em;
+            max-width: 100%;
         }
     }
 }
@@ -135,6 +168,10 @@
     }
 }
 
+.intro-gql-logo {
+    filter: saturate(0%);
+}
+
 /*
  * Makes the cubes aligned in a row
  */
@@ -224,7 +261,7 @@
     }
     .intro-gql-logo {
         opacity: 1;
-        transition: opacity 0.6s;
+        transition: opacity 4.6s;
         img {
             transform: translateY(0);
         }
@@ -368,7 +405,9 @@
 }
 
 .scene-6 {
-    transition: none;
+    @media all and (min-width: $sm-breakpoint) {
+        transform: rotateX(-45deg) translateX(calc(-2 * var(--width-unit)));
+    }
     .cube {
         transition: none;
     }

docs/content/docs/_index.md

@@ -11,14 +11,14 @@ weight: 0
 
 ## What is Vendure?
 
-Vendure is a headless ecommerce framework.
+Vendure is a headless e-commerce framework.
 
-* *Headless* is a term which means that it does not concern itself with rendering the HTML pages of a website. Rather, it exposes a GraphQL API which which can be *queried* for data ("Give me a list of available products") or issued with *mutation* instructions ("Add product '123' to the current order") by a *client application*. Thus the client is responsible for how the ecommerce "storefront" looks and how it works. Vendure is responsible for the rest.
-* Vendure is a *framework* in that it supplies core ecommerce functionality, but is open to further extension by the developer.
+* *Headless* is a term which means that it does not concern itself with rendering the HTML pages of a website. Rather, it exposes a GraphQL API which which can be *queried* for data ("Give me a list of available products") or issued with *mutation* instructions ("Add product '123' to the current order") by a *client application*. Thus the client is responsible for how the e-commerce "storefront" looks and how it works. Vendure is responsible for the rest.
+* Vendure is a *framework* in that it supplies core e-commerce functionality, but is open to further extension by the developer.
 
 ## Who should use Vendure?
 
-Vendure is intended to be used by developers who wish to create a modern ecommerce solution. While we aim for a seamless and simple developer experience, Vendure is not aimed at non-technical users.
+Vendure is intended to be used by developers who wish to create a modern e-commerce solution. While we aim for a seamless and simple developer experience, Vendure is not aimed at non-technical users.
 
 ## What technologies is Vendure built on?
 

docs/layouts/index.en.html

@@ -6,22 +6,27 @@
     <link rel="stylesheet" href="{{ "intro.css" | absURL }}">
     <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Open+Sans" rel="stylesheet">
 </head>
-<body>
+<body class="landing-page">
 {{ partial "top-bar" (dict "isLandingPage" true) }}
 {{ partial "intro" }}
 <div class="section-1">
     <div class="content">
-        <h2 class="top-header">Ecommerce For The Modern Web
-            <a class="status" href="https://github.com/vendure-ecommerce/vendure/projects/1">
-            <clr-icon shape="info-standard" size="24"></clr-icon>
-                Status: pre-alpha
-            </a>
-        </h2>
-        <p>Vendure is a new ecommerce framework built for the developers who are building the modern web.</p>
-        <p>
-            The project is currently in the early stages of development.
-            <strong>The alpha release is coming in Q1 2019</strong>.
-            You can track progress on <a href="https://github.com/vendure-ecommerce/vendure/projects/1">GitHub</a>.</p>
+        <h2>E-commerce for the Modern Web</h2>
+        <p class="lead">Vendure is a new e-commerce framework built for the developers who are building the modern web.</p>
+        <div class="stack-logos">
+            <div class="stack-logo ts-logo">
+                <img src="{{ "logo/ts-logo.svg" | absURL }}">
+            </div>
+            <div class="stack-logo graphql-logo">
+                <img src="{{ "logo/graphql-logo.png" | absURL }}">
+            </div>
+            <div class="stack-logo node-logo">
+                <img src="{{ "logo/nodejs-logo.png" | absURL }}">
+            </div>
+            <div class="stack-logo nest-logo">
+                <img src="{{ "logo/nest-logo.svg" | absURL }}">
+            </div>
+        </div>
     </div>
 </div>
 <div class="section-2">
@@ -29,120 +34,94 @@
         <div class="features">
 
             <div class="feature">
-                <div class="feature-icon">
-                    <img src="{{ "svg/clr-icon-data-cluster-brand.svg" | absURL }}" />
+                <div class="feature-copy">
+                    <h3>De-coupled & Flexible</h3>
+                    <p class="lead">
+                        Vendure is a headless framework, meaning that it delivers content through its <a href="https://graphql.org/">GraphQL API</a>, leaving you free to
+                        implement your store-front applications in the technologies of your choice.
+                    </p>
+                </div>
+                <div class="feature-image">
+                    <img src="{{ "features-code.png" | absURL }}">
                 </div>
-                <h3>De-coupled & Flexible</h3>
-                <p>
-                    Vendure is a headless framework, meaning that it delivers content through its <a href="https://graphql.org/">GraphQL API</a>, leaving you free to
-                    implement your store-front application(s) in the technologies of your choice.
-                </p>
             </div>
 
             <div class="feature">
-                <div class="feature-icon">
-                    <img src="{{ "svg/clr-icon-terminal-brand.svg" | absURL }}" />
+                <div class="feature-copy">
+                    <h3>Made for Developers</h3>
+                    <p class="lead">
+                        Vendure makes developer productivity a top priority. The framework is written in TypeScript and is
+                        built on the npm ecosystem.
+                    </p>
+                    <p class="lead">
+                        The combination of TypeScript and GraphQL provides end-to-end type safety.
+                    </p>
+                </div>
+                <div class="feature-image">
+                    <img src="{{ "features-dev.png" | absURL }}">
                 </div>
-                <h3>Built for Developers</h3>
-                <p>
-                    Vendure makes developer productivity a top priority. The framework is written in TypeScript and is
-                    built on the npm ecosystem.
-                </p>
-                <p>
-                    The combination of TypeScript and GraphQL enables end-to-end type safety.
-                </p>
             </div>
 
             <div class="feature">
-                <div class="feature-icon">
-                    <img src="{{ "svg/clr-icon-library-brand.svg" | absURL }}" />
+                <div class="feature-copy">
+                    <h3>Open Source</h3>
+                    <p class="lead">
+                        Vendure is available under the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>.
+                    </p>
+                    <p class="lead">
+                        All development of the core framework is being done in the open on <a href="https://github.com/vendure-ecommerce/vendure">GitHub</a>.
+                    </p>
+                </div>
+                <div class="feature-image">
+                    <img src="{{ "features-oss.png" | absURL }}">
                 </div>
-                <h3>Open Source</h3>
-                <p>
-                    Vendure is available under the <a href="https://tldrlegal.com/license/mit-license">MIT license</a>.
-                </p>
-                <p>
-                    All development of the core framework is being done in the open on <a href="https://github.com/vendure-ecommerce/vendure">GitHub</a>.
-                </p>
             </div>
         </div>
     </div>
 </div>
-<div class="section-video">
+<div class="section-3">
     <div class="content">
-        <iframe class="video-embed"
-                src="https://player.vimeo.com/video/305117299"
-                width="640" height="360" frameborder="0"
-                webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <h2>Get Started</h2>
+        <div class="flex">
+            <div class="install-code">
+                <div class="highlight">
+            <pre class="chroma"><code class="language-bash" data-lang="bash">$ npm install @vendure/core
+
+<span class="c1"># or</span>
+
+$ yarn add @vendure/core</code>
+            </pre>
+                </div>
+            </div>
+            <div class="getting-started-link">
+
+                <div class='alert warning'>
+                    <p>
+                    <strong>Note</strong> Vendure is currently in <strong>alpha</strong>, which means it is not yet production-ready.
+                    </p>
+                </div>
+                <a href="{{ "docs/getting-started" | absURL }}" class="getting-started-button">
+                <img src="{{ "svg/clr-icon-bolt-light.svg" | absURL }}"> Getting Started Guide
+                </a>
+            </div>
+        </div>
     </div>
 </div>
-<div class="section-3">
-    <div class="content">
-        <div class="roadmap">
-            <h2>Roadmap</h2>
-            <p>
-                Here's a partial list of some of the features which are planned for the initial release:
-            </p>
+<div class="footer">
+    <div class="container">
+        <div class="links">
             <ul>
-                <li>
-                    <strong>Built-in admin interface</strong> Vendure will ship with a fully-functional admin UI app.
-                </li>
-                <li>
-                    <strong>Full multi-language support</strong> Create and deliver content in any language.
-                </li>
-                <li>
-                    <strong>Guest checkouts</strong> Reduce friction by allowing purchases to be made without requiring
-                    a sign-up.
-                </li>
-                <li>
-                    <strong>Fully customizable models</strong> Adding domain-specific properties to your models (products,
-                    customers, orders etc.) can be done in just a few lines of configuration code.
-                </li>
-                <li>
-                    <strong>Faceted search</strong> Facets (e.g. "Brand", "Colour") enable efficient filtering and grouping
-                    of products.
-                </li>
-                <li>
-                    <strong>Flexible search integrations</strong> Product search is one of the most important aspects of a successful
-                    ecommerce experience. Vendure will feature a pluggable interface to allow you to use the search solution
-                    of your choice (e.g. Elastic, Algolia etc).
-                </li>
-                <li>
-                    <strong>Extensible business logic</strong> Need to apply custom shipping logic? Sophisticated promotions?
-                    Vendure will feature hooks at each point of the purchase journey which allow you to customise and extend
-                    the built-in behaviour.
-                </li>
-                <li>
-                    <strong>Blazing fast</strong> What feature list would be complete without these two magical words?
-                </li>
+                <li><a href="./docs/">Documentation</a></li>
+                <li><a href="https://github.com/vendure-ecommerce/vendure">GitHub</a></li>
+                <li><a href="https://www.npmjs.com/~vendure">npm</a></li>
+                <li><a href="https://twitter.com/vendure_io">Twitter</a></li>
             </ul>
         </div>
-        <div class="about">
-            <h2>Who is building Vendure?</h2>
-            <p>
-                Vendure is being built full-time by <a href="https://www.michaelbromley.co.uk/">Michael Bromley</a>.
-            </p>
-            <p>
-                I've been working on custom ecommerce software on and off for the past 13 years. Over that time I've learned
-                a lot about how <em>not</em> to do things, and have developed a feel for what I as a developer would
-                really like to see in an ecommerce tool.
-            </p>
-            <p>
-                I also spent the past 3 years working on the core team of the <a href="https://getmesh.io/">Gentics Mesh</a> headless CMS.
-                During my time on that project I came to appreciate the power of the API-first approach.
-            </p>
-            <p>
-                Vendure is the culmination of my years in the trenches of yesterday's ecommerce development combined with
-                my passion for front-end development and my conviction that headless architecture - and GraphQL
-                in particular - are the way of the future.
-            </p>
+        <div class="copyright">
+            &copy; {{ now.Format "2006" }} <a href="https://www.michaelbromley.co.uk/">Michael Bromley</a>
         </div>
     </div>
 </div>
-<div class="footer">
-    &copy; 2018 <a href="https://www.michaelbromley.co.uk/">Michael Bromley</a>
-    <a href="https://github.com/vendure-ecommerce/vendure" class="gh-link">Vendure on GitHub</a>
-</div>
 <script src="{{ "intro.js" | absURL }}"></script>
 </body>
 </html>

docs/layouts/partials/top-bar.html

@@ -1,21 +1,24 @@
 <div class="top-bar {{ if .isLandingPage }}landing-page{{ end }}" >
-    <div class="left">
-        <a class="logo" href="/">
-            <img src="{{ "logo.png" | absURL }}" />
-            {{ if not .isLandingPage }}vendure{{ end }}
-        </a>
-    </div>
-    <div class="flex-spacer"></div>
-    {{ if not .isLandingPage }}
-    <div class="search-input">
-        <button class="search-icon">
-            <img src="{{ "svg/clr-icon-search-light.svg" | absURL }}">
-        </button>
-        <input id="searchInput" placeholder="Search docs">
-    </div>
-    {{ end }}
-    <div class="right">
-        <a href="/docs">Docs</a>
-        <a href="https://github.com/vendure-ecommerce/vendure">GitHub</a>
+    <div class="top-bar-content">
+        <div class="left">
+            <a class="logo" href="/">
+                <img src="{{ "logo.png" | absURL }}" />
+                {{ if not .isLandingPage }}<div class="logotype">vendure</div>{{ end }}
+            </a>
+            <div class="alpha-label">alpha</div>
+        </div>
+        <div class="flex-spacer"></div>
+        {{ if not .isLandingPage }}
+        <div class="search-input">
+            <button class="search-icon">
+                <img src="{{ "svg/clr-icon-search-light.svg" | absURL }}">
+            </button>
+            <input id="searchInput" placeholder="Search docs">
+        </div>
+        {{ end }}
+        <div class="right">
+            <a href="/docs">Docs</a>
+            <a href="https://github.com/vendure-ecommerce/vendure">GitHub</a>
+        </div>
     </div>
 </div>

docs/static/svg/clr-icon-bolt-light.svg

@@ -0,0 +1 @@
+<svg version="1.1" class="has-solid " viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true" role="img" width="32" height="32" fill="#ccc"><path d="M10.52,34h-3a1,1,0,0,1-.88-1.44L12.55,21H6a1,1,0,0,1-.85-1.54l10.68-17A1,1,0,0,1,16.64,2H30.07a1,1,0,0,1,.77,1.69L21.78,14h5.38a1,1,0,0,1,.73,1.66l-16.63,18A1,1,0,0,1,10.52,34ZM9.18,32h.91L24.86,16H19.59a1,1,0,0,1-.77-1.69L27.88,4H17.19L7.77,19H14.2a1,1,0,0,1,.88,1.44Z" class="clr-i-outline clr-i-outline-path-1"/><path d="M30.8,2.29A.49.49,0,0,0,30.35,2H16.42a.5.5,0,0,0-.42.23l-10.71,17A.49.49,0,0,0,5.7,20h7.67L6.6,33.25a.52.52,0,0,0,.46.75h3a.5.5,0,0,0,.37-.16L28,14.85a.5.5,0,0,0-.37-.85H20.89L30.72,2.82A.49.49,0,0,0,30.8,2.29Z" class="clr-i-solid clr-i-solid-path-1" style="display:none"/></svg>