From 9ea532d7707204da4931c0b6116e8b1329dd5e6c Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Mon, 22 Jun 2020 21:49:56 +0200
Subject: [PATCH 01/29] feat: add enterprise navigation item and refactor
 discover.

moreover, regardless if user is logged or not, give the ability to go back to the home

the main screen (welcome) remain either landing or feed according if user is logged or not.

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 studio/src/app/app-root.tsx                   | 16 ++++---
 .../app/components/core/app-menu/app-menu.tsx | 28 ++++++-----
 .../app-navigation-actions.tsx                | 19 ++------
 .../core/app-navigation/app-navigation.scss   | 10 ++--
 .../core/app-navigation/app-navigation.tsx    | 32 ++++++++++++-
 .../app-actions-editor.scss                   |  4 +-
 .../src/app/pages/core/app-home/app-home.tsx  | 44 +++--------------
 .../src/app/pages/core/app-poll/app-poll.tsx  | 10 ++--
 .../app/pages/core/welcome/app-welcome.tsx    | 48 +++++++++++++++++++
 studio/src/components.d.ts                    | 11 +++++
 studio/src/global/theme/menu.scss             |  7 ++-
 11 files changed, 146 insertions(+), 83 deletions(-)
 create mode 100644 studio/src/app/pages/core/welcome/app-welcome.tsx

diff --git a/studio/src/app/app-root.tsx b/studio/src/app/app-root.tsx
index 2cf3f6727..4c6ac23a1 100644
--- a/studio/src/app/app-root.tsx
+++ b/studio/src/app/app-root.tsx
@@ -14,7 +14,7 @@ import {OfflineService} from './services/editor/offline/offline.service';
 
 @Component({
   tag: 'app-root',
-  styleUrl: 'app-root.scss'
+  styleUrl: 'app-root.scss',
 })
 export class AppRoot {
   @Element() el: HTMLElement;
@@ -84,12 +84,12 @@ export class AppRoot {
       buttons: [
         {
           text: 'Close',
-          role: 'cancel'
-        }
+          role: 'cancel',
+        },
       ],
       position: 'top',
       color: 'danger',
-      duration: 6000
+      duration: 6000,
     });
 
     await popover.present();
@@ -134,10 +134,14 @@ export class AppRoot {
     return [
       <ion-app>
         <ion-router useHash={false}>
-          <ion-route url="/" component="app-home" />
+          <ion-route url="/" component="app-welcome" />
+
+          <ion-route url="/home" component="app-home" />
 
           <ion-route url="/discover" component="app-discover" />
 
+          <ion-route url="/enterprise" component="app-enterprise" />
+
           <ion-route url="/editor" component="app-editor" />
           <ion-route url="/editor/:deckId" component="app-editor" />
 
@@ -179,7 +183,7 @@ export class AppRoot {
         <ion-nav id="menu-content" />
 
         <app-share-deck></app-share-deck>
-      </ion-app>
+      </ion-app>,
     ];
   }
 }
diff --git a/studio/src/app/components/core/app-menu/app-menu.tsx b/studio/src/app/components/core/app-menu/app-menu.tsx
index e58aea550..35f428431 100644
--- a/studio/src/app/components/core/app-menu/app-menu.tsx
+++ b/studio/src/app/components/core/app-menu/app-menu.tsx
@@ -12,7 +12,7 @@ import {NavDirection, NavService} from '../../../services/core/nav/nav.service';
 @Component({
   tag: 'app-menu',
   styleUrl: 'app-menu.scss',
-  shadow: false
+  shadow: false,
 })
 export class AppMenu {
   @Element() el: HTMLElement;
@@ -45,7 +45,7 @@ export class AppMenu {
   private async signIn() {
     this.navService.navigate({
       url: '/signin' + (window && window.location ? window.location.pathname : ''),
-      direction: NavDirection.FORWARD
+      direction: NavDirection.FORWARD,
     });
   }
 
@@ -54,7 +54,7 @@ export class AppMenu {
 
     this.navService.navigate({
       url: '/',
-      direction: NavDirection.ROOT
+      direction: NavDirection.ROOT,
     });
   }
 
@@ -65,6 +65,7 @@ export class AppMenu {
 
         {this.renderHome()}
         {this.renderDiscover()}
+        {this.renderEnterprise()}
         {this.renderDashboard()}
         {this.renderSettings()}
         {this.renderSignInOut()}
@@ -75,7 +76,7 @@ export class AppMenu {
   private renderUser() {
     if (Utils.isLoggedIn(this.authUser)) {
       return (
-        <ion-item class="user">
+        <ion-item class="user ion-margin-bottom">
           <app-user-info avatarColSize={3}></app-user-info>
         </ion-item>
       );
@@ -117,18 +118,14 @@ export class AppMenu {
 
   private renderHome() {
     return (
-      <ion-item button class="home" href="/" routerDirection="forward">
-        <ion-icon lazy={true} name="home-outline" slot="start"></ion-icon>
-        <ion-label>Home</ion-label>
+      <ion-item button class="home" href="/home" routerDirection="forward">
+        <app-logo slot="start"></app-logo>
+        <ion-label>DeckDeckGo</ion-label>
       </ion-item>
     );
   }
 
   private renderDiscover() {
-    if (Utils.isLoggedIn(this.authUser)) {
-      return undefined;
-    }
-
     return (
       <ion-item button class="home" href="/discover" routerDirection="forward">
         <ion-icon lazy={true} name="search-outline" slot="start"></ion-icon>
@@ -137,6 +134,15 @@ export class AppMenu {
     );
   }
 
+  private renderEnterprise() {
+    return (
+      <ion-item button class="home" href="/enterprise" routerDirection="forward">
+        <ion-icon lazy={true} name="business-outline" slot="start"></ion-icon>
+        <ion-label>Enterprise</ion-label>
+      </ion-item>
+    );
+  }
+
   private renderSettings() {
     return (
       <ion-item button class="home" href="/settings" routerDirection="forward">
diff --git a/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx b/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx
index 3dfe02e8d..a83a9e85d 100644
--- a/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx
+++ b/studio/src/app/components/core/app-navigation-actions/app-navigation-actions.tsx
@@ -17,7 +17,7 @@ import {ThemeService} from '../../../services/theme/theme.service';
 @Component({
   tag: 'app-navigation-actions',
   styleUrl: 'app-navigation-actions.scss',
-  shadow: false
+  shadow: false,
 })
 export class AppNavigationActions {
   @Prop() signIn: boolean = true;
@@ -89,7 +89,7 @@ export class AppNavigationActions {
     const popover: HTMLIonPopoverElement = await popoverController.create({
       component: 'app-user-menu',
       event: $event,
-      mode: 'ios'
+      mode: 'ios',
     });
 
     await popover.present();
@@ -98,14 +98,13 @@ export class AppNavigationActions {
   private async navigateSignIn() {
     this.navService.navigate({
       url: '/signin' + (window && window.location ? window.location.pathname : ''),
-      direction: NavDirection.FORWARD
+      direction: NavDirection.FORWARD,
     });
   }
 
   render() {
     return (
       <div>
-        {this.renderFeed()}
         {this.renderSignIn()}
         {this.renderPresentationButton()}
         {this.renderPublishButton()}
@@ -114,18 +113,6 @@ export class AppNavigationActions {
     );
   }
 
-  private renderFeed() {
-    if (Utils.isLoggedIn(this.authUser) || !this.signIn) {
-      return undefined;
-    } else if (this.presentation || this.publish) {
-      return (
-        <ion-router-link href="/discover" routerDirection="forward" class="wide-device ion-padding-start ion-padding-end">
-          <ion-label>Discover</ion-label>
-        </ion-router-link>
-      );
-    }
-  }
-
   private renderSignIn() {
     if (Utils.isLoggedIn(this.authUser) || !this.signIn) {
       return undefined;
diff --git a/studio/src/app/components/core/app-navigation/app-navigation.scss b/studio/src/app/components/core/app-navigation/app-navigation.scss
index c21f8c77b..80679c488 100644
--- a/studio/src/app/components/core/app-navigation/app-navigation.scss
+++ b/studio/src/app/components/core/app-navigation/app-navigation.scss
@@ -32,13 +32,17 @@ app-navigation {
       user-select: none;
     }
 
+    ion-router-link.nav:not(:last-of-type) {
+      margin-right: 24px;
+    }
+
     &.deck-name-visible {
       ion-label.deck-name {
         visibility: initial;
         opacity: 1;
       }
 
-      ion-router-link.home div.logo ion-label {
+      ion-router-link.nav ion-label {
         display: none;
       }
     }
@@ -111,11 +115,11 @@ body.dark {
   }
 }
 
-@media screen and (max-width: 720px) {
+@media screen and (max-width: 768px) {
   ion-nav {
     div.title:not(.offline) {
       ion-label.deck-name,
-      ion-router-link.home ion-label {
+      ion-router-link.nav ion-label {
         display: none;
       }
     }
diff --git a/studio/src/app/components/core/app-navigation/app-navigation.tsx b/studio/src/app/components/core/app-navigation/app-navigation.tsx
index 2e0723afc..d369a13dd 100644
--- a/studio/src/app/components/core/app-navigation/app-navigation.tsx
+++ b/studio/src/app/components/core/app-navigation/app-navigation.tsx
@@ -10,7 +10,7 @@ import {OfflineService} from '../../../services/editor/offline/offline.service';
 @Component({
   tag: 'app-navigation',
   styleUrl: 'app-navigation.scss',
-  shadow: false
+  shadow: false,
 })
 export class AppNavigation {
   @Prop() menuToggle: boolean = true;
@@ -80,15 +80,43 @@ export class AppNavigation {
 
     return (
       <div class={titleClass}>
-        <ion-router-link onClick={() => this.closeMenu()} href="/" routerDirection="forward" class="home">
+        <ion-router-link onClick={() => this.closeMenu()} href="/home" routerDirection="forward" class="nav">
           {this.renderLogo()}
         </ion-router-link>
 
+        {this.renderFeed()}
+
+        {this.renderEnterprise()}
+
         <ion-label class="deck-name">{this.deckName}</ion-label>
       </div>
     );
   }
 
+  private renderFeed() {
+    if (this.presentation || this.publish) {
+      return (
+        <ion-router-link href="/discover" routerDirection="forward" class="nav discover">
+          <ion-label>Discover</ion-label>
+        </ion-router-link>
+      );
+    } else {
+      return undefined;
+    }
+  }
+
+  private renderEnterprise() {
+    if (this.presentation || this.publish) {
+      return (
+        <ion-router-link href="/enterprise" routerDirection="forward" class="nav">
+          <ion-label>Enterprise</ion-label>
+        </ion-router-link>
+      );
+    } else {
+      return undefined;
+    }
+  }
+
   private renderTitleOffline() {
     if (this.offline === undefined) {
       return undefined;
diff --git a/studio/src/app/components/editor/actions/app-actions-editor/app-actions-editor.scss b/studio/src/app/components/editor/actions/app-actions-editor/app-actions-editor.scss
index 798a50f90..7e6e623ac 100644
--- a/studio/src/app/components/editor/actions/app-actions-editor/app-actions-editor.scss
+++ b/studio/src/app/components/editor/actions/app-actions-editor/app-actions-editor.scss
@@ -63,7 +63,7 @@ app-actions-editor {
     }
   }
 
-  @media screen and (max-width: 720px) {
+  @media screen and (max-width: 768px) {
     ion-tab-button,
     app-action-share,
     app-action-busy,
@@ -74,7 +74,7 @@ app-actions-editor {
     }
   }
 
-  @media screen and (min-width: 720px) {
+  @media screen and (min-width: 768px) {
     ion-tab-button,
     app-action-share,
     app-action-busy,
diff --git a/studio/src/app/pages/core/app-home/app-home.tsx b/studio/src/app/pages/core/app-home/app-home.tsx
index e67d9a144..153984b5e 100644
--- a/studio/src/app/pages/core/app-home/app-home.tsx
+++ b/studio/src/app/pages/core/app-home/app-home.tsx
@@ -1,48 +1,18 @@
-import {Component, h, State} from '@stencil/core';
-
-import {AuthUser} from '../../../models/auth/auth.user';
-
-import {AuthService} from '../../../services/auth/auth.service';
+import {Component, h} from '@stencil/core';
 
 @Component({
-  tag: 'app-home'
+  tag: 'app-home',
 })
 export class AppHome {
-  private authService: AuthService;
-
-  @State()
-  private landing: boolean | undefined = undefined;
-
-  constructor() {
-    this.authService = AuthService.getInstance();
-  }
-
-  async componentWillLoad() {
-    const localUser: AuthUser = await this.authService.getLocalAuthUser();
-    this.landing = localUser === undefined || localUser.anonymous;
-  }
-
   render() {
     return [<app-navigation presentation={true}></app-navigation>, this.renderContent()];
   }
 
   private renderContent() {
-    if (this.landing === undefined) {
-      return undefined;
-    }
-
-    if (this.landing) {
-      return (
-        <ion-content>
-          <app-landing></app-landing>
-        </ion-content>
-      );
-    } else {
-      return (
-        <ion-content class="ion-padding">
-          <app-feed></app-feed>
-        </ion-content>
-      );
-    }
+    return (
+      <ion-content>
+        <app-landing></app-landing>
+      </ion-content>
+    );
   }
 }
diff --git a/studio/src/app/pages/core/app-poll/app-poll.tsx b/studio/src/app/pages/core/app-poll/app-poll.tsx
index 178f9f691..0c78235ef 100644
--- a/studio/src/app/pages/core/app-poll/app-poll.tsx
+++ b/studio/src/app/pages/core/app-poll/app-poll.tsx
@@ -11,7 +11,7 @@ import {ErrorService} from '../../../services/core/error/error.service';
 
 @Component({
   tag: 'app-poll',
-  styleUrl: 'app-poll.scss'
+  styleUrl: 'app-poll.scss',
 })
 export class AppPoll {
   @Prop({mutable: true})
@@ -143,7 +143,7 @@ export class AppPoll {
           {this.renderJoinPoll()}
           {this.renderHasVoted()}
         </main>
-      </ion-content>
+      </ion-content>,
     ];
   }
 
@@ -164,7 +164,7 @@ export class AppPoll {
         </ion-list>
 
         {this.renderSubmitForm()}
-      </form>
+      </form>,
     ];
   }
 
@@ -198,7 +198,7 @@ export class AppPoll {
       this.renderJoinPollForm(),
       <h2 class="ion-padding-top">Live interactive audience participation</h2>,
       <p>Engage your audience or class in real time.</p>,
-      <p>Involve them to contribute to your presentations with their smartphones and show the results live.</p>
+      <p>Involve them to contribute to your presentations with their smartphones and show the results live.</p>,
     ];
   }
 
@@ -263,7 +263,7 @@ export class AppPoll {
 
         <div class="by-deckdeckgo">
           Created with{' '}
-          <ion-router-link href="/" routerDirection="forward">
+          <ion-router-link href="/home" routerDirection="forward">
             <div>
               <app-logo></app-logo> DeckDeckGo
             </div>
diff --git a/studio/src/app/pages/core/welcome/app-welcome.tsx b/studio/src/app/pages/core/welcome/app-welcome.tsx
new file mode 100644
index 000000000..d6f37b6e6
--- /dev/null
+++ b/studio/src/app/pages/core/welcome/app-welcome.tsx
@@ -0,0 +1,48 @@
+import {Component, h, State} from '@stencil/core';
+
+import {AuthUser} from '../../../models/auth/auth.user';
+
+import {AuthService} from '../../../services/auth/auth.service';
+
+@Component({
+  tag: 'app-welcome',
+})
+export class AppWelcome {
+  private authService: AuthService;
+
+  @State()
+  private landing: boolean | undefined = undefined;
+
+  constructor() {
+    this.authService = AuthService.getInstance();
+  }
+
+  async componentWillLoad() {
+    const localUser: AuthUser = await this.authService.getLocalAuthUser();
+    this.landing = localUser === undefined || localUser.anonymous;
+  }
+
+  render() {
+    return [<app-navigation presentation={true}></app-navigation>, this.renderContent()];
+  }
+
+  private renderContent() {
+    if (this.landing === undefined) {
+      return undefined;
+    }
+
+    if (this.landing) {
+      return (
+        <ion-content>
+          <app-landing></app-landing>
+        </ion-content>
+      );
+    } else {
+      return (
+        <ion-content class="ion-padding">
+          <app-feed></app-feed>
+        </ion-content>
+      );
+    }
+  }
+}
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index 590e31fab..bc6ae7fa3 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -363,6 +363,7 @@ export namespace Components {
     'avatarColSize': number;
   }
   interface AppUserMenu {}
+  interface AppWelcome {}
   interface AppYoutube {
     'selectedElement': HTMLElement;
   }
@@ -1001,6 +1002,12 @@ declare global {
     new (): HTMLAppUserMenuElement;
   };
 
+  interface HTMLAppWelcomeElement extends Components.AppWelcome, HTMLStencilElement {}
+  var HTMLAppWelcomeElement: {
+    prototype: HTMLAppWelcomeElement;
+    new (): HTMLAppWelcomeElement;
+  };
+
   interface HTMLAppYoutubeElement extends Components.AppYoutube, HTMLStencilElement {}
   var HTMLAppYoutubeElement: {
     prototype: HTMLAppYoutubeElement;
@@ -1112,6 +1119,7 @@ declare global {
     'app-user-delete': HTMLAppUserDeleteElement;
     'app-user-info': HTMLAppUserInfoElement;
     'app-user-menu': HTMLAppUserMenuElement;
+    'app-welcome': HTMLAppWelcomeElement;
     'app-youtube': HTMLAppYoutubeElement;
   }
 }
@@ -1485,6 +1493,7 @@ declare namespace LocalJSX {
     'avatarColSize'?: number;
   }
   interface AppUserMenu {}
+  interface AppWelcome {}
   interface AppYoutube {
     'selectedElement'?: HTMLElement;
   }
@@ -1595,6 +1604,7 @@ declare namespace LocalJSX {
     'app-user-delete': AppUserDelete;
     'app-user-info': AppUserInfo;
     'app-user-menu': AppUserMenu;
+    'app-welcome': AppWelcome;
     'app-youtube': AppYoutube;
   }
 }
@@ -1710,6 +1720,7 @@ declare module "@stencil/core" {
       'app-user-delete': LocalJSX.AppUserDelete & JSXBase.HTMLAttributes<HTMLAppUserDeleteElement>;
       'app-user-info': LocalJSX.AppUserInfo & JSXBase.HTMLAttributes<HTMLAppUserInfoElement>;
       'app-user-menu': LocalJSX.AppUserMenu & JSXBase.HTMLAttributes<HTMLAppUserMenuElement>;
+      'app-welcome': LocalJSX.AppWelcome & JSXBase.HTMLAttributes<HTMLAppWelcomeElement>;
       'app-youtube': LocalJSX.AppYoutube & JSXBase.HTMLAttributes<HTMLAppYoutubeElement>;
     }
   }
diff --git a/studio/src/global/theme/menu.scss b/studio/src/global/theme/menu.scss
index 31b514fd0..809e63f2c 100644
--- a/studio/src/global/theme/menu.scss
+++ b/studio/src/global/theme/menu.scss
@@ -62,11 +62,16 @@ ion-menu {
           margin-bottom: 6px;
         }
 
-        ion-icon {
+        ion-icon,
+        app-logo {
           color: var(--ion-color-medium);
           margin: 8px 8px 8px 0;
         }
 
+        app-logo {
+          --deckgo-logo-size: 1.4rem;
+        }
+
         app-avatar {
           margin: 0 8px 0 0;
         }

From 51379d9d11aa605202d6eb51a6e5da6d16fcb053 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 14:42:17 +0200
Subject: [PATCH 02/29] feat: enterprise page hero and introduction

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../landing/app-landing/app-landing.scss      |   3 +-
 .../core/app-enterprise/app-enterprise.scss   | 136 ++++++++++++++++++
 .../core/app-enterprise/app-enterprise.tsx    |  73 ++++++++++
 studio/src/components.d.ts                    |  11 ++
 studio/src/global/theme/button.scss           |   8 ++
 studio/src/global/theme/fonts.scss            |  17 ---
 6 files changed, 230 insertions(+), 18 deletions(-)
 create mode 100644 studio/src/app/pages/core/app-enterprise/app-enterprise.scss
 create mode 100644 studio/src/app/pages/core/app-enterprise/app-enterprise.tsx

diff --git a/studio/src/app/components/landing/app-landing/app-landing.scss b/studio/src/app/components/landing/app-landing/app-landing.scss
index a183cd99a..badaf52af 100644
--- a/studio/src/app/components/landing/app-landing/app-landing.scss
+++ b/studio/src/app/components/landing/app-landing/app-landing.scss
@@ -23,9 +23,10 @@ app-landing {
     }
 
     p {
-      font-size: 24px;
+      font-size: 22px;
       line-height: 28px;
       font-weight: 300;
+      color: var(--ion-color-dark);
     }
 
     &.header {
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
new file mode 100644
index 000000000..41630c9f2
--- /dev/null
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -0,0 +1,136 @@
+app-enterprise {
+  main {
+    display: flex;
+    flex-direction: column;
+
+    section {
+      width: 100%;
+      padding: 0 128px;
+
+      position: relative;
+
+      @media (max-width: 992px) {
+        padding: 0 64px;
+      }
+
+      h1 {
+        font-size: 48px;
+        font-weight: 600;
+      }
+
+      h2 {
+        font-size: 32px;
+      }
+
+      h3 {
+        font-size: 24px;
+      }
+
+      h2,
+      h3 {
+        font-weight: 500;
+      }
+
+      p,
+      button.app-button {
+        font-size: 22px;
+        line-height: 28px;
+        font-weight: 300;
+      }
+
+      p {
+        color: var(--ion-color-dark);
+        margin-top: 0;
+      }
+
+      img.wave {
+        position: absolute;
+        left: 0;
+        bottom: -1px;
+      }
+    }
+
+    section.hero {
+      height: calc(100vh - 56px);
+
+      background: var(--ion-color-dark);
+      color: var(--ion-color-dark-contrast);
+
+      display: grid;
+      grid-template-columns: repeat(2, 50%);
+
+      @media (max-width: 992px) {
+        grid-template-columns: 100%;
+      }
+
+      justify-content: center;
+      align-content: center;
+
+      > div {
+        z-index: 2;
+      }
+    }
+
+    section.intro {
+      background: white;
+
+      display: grid;
+      grid-template-columns: repeat(2, 50%);
+      grid-template-rows: auto;
+
+      grid-gap: 32px;
+
+      @media (max-width: 992px) {
+        grid-template-columns: 100%;
+        grid-row-gap: 0;
+      }
+
+      blockquote,
+      h2 {
+        grid-column-start: 1;
+        grid-column-end: 3;
+
+        @media (max-width: 992px) {
+          grid-column-end: 2;
+        }
+      }
+
+      blockquote {
+        background: transparent;
+
+        width: 720px;
+        max-width: 100%;
+        justify-self: center;
+
+        margin: 32px 0;
+
+        span {
+          font-size: 10rem;
+          line-height: 0.6em;
+          color: var(--ion-color-medium);
+          opacity: 0.4;
+        }
+
+        p {
+          margin: 0 16px;
+          color: var(--ion-color-medium);
+          font-style: italic;
+        }
+      }
+
+      > h2 {
+        margin: 0;
+
+        @media (max-width: 992px) {
+          margin: 16px 0 32px;
+        }
+      }
+    }
+
+    img.separator {
+      &.intro {
+        background: white;
+      }
+    }
+  }
+}
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
new file mode 100644
index 000000000..1da422b64
--- /dev/null
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -0,0 +1,73 @@
+import {Component, h} from '@stencil/core';
+
+@Component({
+  tag: 'app-enterprise',
+  styleUrl: 'app-enterprise.scss',
+})
+export class AppEnterprise {
+  private featuresRef!: HTMLElement;
+
+  private scrollToFeatures() {
+    if (!this.featuresRef) {
+      return;
+    }
+
+    this.featuresRef.scrollIntoView({
+      behavior: 'smooth',
+    });
+  }
+
+  render() {
+    return [
+      <app-navigation presentation={true}></app-navigation>,
+      <ion-content>
+        <main>
+          <section class="hero">
+            <div>
+              <h1>The unbreakable slides for your corporate communication.</h1>
+              <h3 style={{'font-weight': '300'}}>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</h3>
+
+              <ion-button class="ion-margin-top" shape="round" href="/editor" routerDirection="root" mode="md" color="tertiary">
+                <ion-label style={{'text-transform': 'none'}}>Get in touch</ion-label>
+              </ion-button>
+            </div>
+
+            <img class="wave" src={`/assets/img/landing/wave-start.svg`} role="presentation" />
+          </section>
+
+          <section class="intro">
+            <blockquote>
+              <span>❝</span>
+              <p>Did you had a look to Bob's last presentation? He used our old logo and made it green, again.</p>
+            </blockquote>
+
+            <h2>Templates and options that match your CI/CD.</h2>
+
+            <div>
+              <p>
+                Unlike any other editor for presentations, DeckDeckGo assists you in applying your corporate identity to your company's presentations. The
+                templates and set of options you are defining are those your collaborators are using.
+              </p>
+            </div>
+
+            <div>
+              <p>Together with your designers, we create unbreakable slides.</p>
+
+              <p>Moreover, rolling out new design and logo has never been so easy and DeckDeckGo can offer so much more.</p>
+
+              <button type="button" class="app-button" onClick={() => this.scrollToFeatures()}>
+                Discover more features <ion-icon src="/assets/icons/ionicons/arrow-forward.svg"></ion-icon>
+              </button>
+            </div>
+          </section>
+
+          <img class="separator intro" src={`/assets/img/landing/wave-introducing.svg`} role="presentation" />
+
+          <section class="features" ref={(el) => (this.featuresRef = el as HTMLElement)}>
+            Features TODO
+          </section>
+        </main>
+      </ion-content>,
+    ];
+  }
+}
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index bc6ae7fa3..018ca6f74 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -198,6 +198,7 @@ export namespace Components {
     'slide': boolean;
   }
   interface AppEmbed {}
+  interface AppEnterprise {}
   interface AppExpansionPanel {
     'expanded': 'open' | 'close';
     'expander': boolean;
@@ -600,6 +601,12 @@ declare global {
     new (): HTMLAppEmbedElement;
   };
 
+  interface HTMLAppEnterpriseElement extends Components.AppEnterprise, HTMLStencilElement {}
+  var HTMLAppEnterpriseElement: {
+    prototype: HTMLAppEnterpriseElement;
+    new (): HTMLAppEnterpriseElement;
+  };
+
   interface HTMLAppExpansionPanelElement extends Components.AppExpansionPanel, HTMLStencilElement {}
   var HTMLAppExpansionPanelElement: {
     prototype: HTMLAppExpansionPanelElement;
@@ -1052,6 +1059,7 @@ declare global {
     'app-element-delete': HTMLAppElementDeleteElement;
     'app-element-style': HTMLAppElementStyleElement;
     'app-embed': HTMLAppEmbedElement;
+    'app-enterprise': HTMLAppEnterpriseElement;
     'app-expansion-panel': HTMLAppExpansionPanelElement;
     'app-faq': HTMLAppFaqElement;
     'app-feed': HTMLAppFeedElement;
@@ -1306,6 +1314,7 @@ declare namespace LocalJSX {
     'slide'?: boolean;
   }
   interface AppEmbed {}
+  interface AppEnterprise {}
   interface AppExpansionPanel {
     'expanded'?: 'open' | 'close';
     'expander'?: boolean;
@@ -1537,6 +1546,7 @@ declare namespace LocalJSX {
     'app-element-delete': AppElementDelete;
     'app-element-style': AppElementStyle;
     'app-embed': AppEmbed;
+    'app-enterprise': AppEnterprise;
     'app-expansion-panel': AppExpansionPanel;
     'app-faq': AppFaq;
     'app-feed': AppFeed;
@@ -1653,6 +1663,7 @@ declare module "@stencil/core" {
       'app-element-delete': LocalJSX.AppElementDelete & JSXBase.HTMLAttributes<HTMLAppElementDeleteElement>;
       'app-element-style': LocalJSX.AppElementStyle & JSXBase.HTMLAttributes<HTMLAppElementStyleElement>;
       'app-embed': LocalJSX.AppEmbed & JSXBase.HTMLAttributes<HTMLAppEmbedElement>;
+      'app-enterprise': LocalJSX.AppEnterprise & JSXBase.HTMLAttributes<HTMLAppEnterpriseElement>;
       'app-expansion-panel': LocalJSX.AppExpansionPanel & JSXBase.HTMLAttributes<HTMLAppExpansionPanelElement>;
       'app-faq': LocalJSX.AppFaq & JSXBase.HTMLAttributes<HTMLAppFaqElement>;
       'app-feed': LocalJSX.AppFeed & JSXBase.HTMLAttributes<HTMLAppFeedElement>;
diff --git a/studio/src/global/theme/button.scss b/studio/src/global/theme/button.scss
index 2a4c6571a..9696e9f2d 100644
--- a/studio/src/global/theme/button.scss
+++ b/studio/src/global/theme/button.scss
@@ -9,4 +9,12 @@ ion-button {
   font-family: inherit;
   margin: 0 4px 0 0;
   padding: 0;
+
+  ion-icon {
+    vertical-align: middle;
+  }
+
+  &:focus {
+    outline: 0;
+  }
 }
diff --git a/studio/src/global/theme/fonts.scss b/studio/src/global/theme/fonts.scss
index 9918f0e12..f8d20e1ae 100644
--- a/studio/src/global/theme/fonts.scss
+++ b/studio/src/global/theme/fonts.scss
@@ -63,20 +63,3 @@ ion-router-link:hover,
 .app-button:hover {
   border-bottom-color: var(--ion-color-primary);
 }
-
-blockquote {
-  background: var(--ion-color-tertiary);
-  margin: 32px 0;
-  padding: 1px 18px 4px;
-  border-radius: 4px;
-}
-
-blockquote p {
-  color: white;
-  line-height: 1.6;
-  font-size: 14px;
-}
-
-blockquote a {
-  color: var(--ion-color-secondary);
-}

From 34bca8da32366a8d562a2e21654a947e0deadf1b Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 17:30:08 +0200
Subject: [PATCH 03/29] feat: enterprise features list

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../enterprise/app-features/app-features.scss |  38 +++
 .../enterprise/app-features/app-features.tsx  | 220 ++++++++++++++++++
 .../core/app-enterprise/app-enterprise.scss   |   2 +-
 .../core/app-enterprise/app-enterprise.tsx    |   4 +-
 studio/src/components.d.ts                    |  11 +
 5 files changed, 271 insertions(+), 4 deletions(-)
 create mode 100644 studio/src/app/components/enterprise/app-features/app-features.scss
 create mode 100644 studio/src/app/components/enterprise/app-features/app-features.tsx

diff --git a/studio/src/app/components/enterprise/app-features/app-features.scss b/studio/src/app/components/enterprise/app-features/app-features.scss
new file mode 100644
index 000000000..530e499cd
--- /dev/null
+++ b/studio/src/app/components/enterprise/app-features/app-features.scss
@@ -0,0 +1,38 @@
+app-features {
+  section.features {
+    display: grid;
+    grid-template-columns: repeat(3, calc(100% / 3));
+    grid-template-rows: auto;
+
+    grid-gap: 32px;
+
+    outline: 1px solid var(--ion-color-light);
+
+    @media (max-width: 992px) {
+      grid-template-columns: repeat(2, 50%);
+      grid-row-gap: 0;
+    }
+
+    > h2,
+    > p {
+      grid-column-start: 1;
+      grid-column-end: 4;
+
+      @media (max-width: 992px) {
+        grid-column-end: 3;
+      }
+    }
+
+    > p {
+      margin-top: 32px;
+    }
+
+    > h2 {
+      color: rgba(var(--ion-color-medium-rgb), 0.4);
+
+      &:not(:first-of-type) {
+        margin-top: 48px;
+      }
+    }
+  }
+}
diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
new file mode 100644
index 000000000..8f4be6a21
--- /dev/null
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -0,0 +1,220 @@
+import {Component, h} from '@stencil/core';
+
+@Component({
+  tag: 'app-features',
+  styleUrl: 'app-features.scss',
+  shadow: false,
+})
+export class AppFeatures {
+  render() {
+    return (
+      <section class="features">
+        <h2>Main features</h2>
+
+        <article>
+          <h3>Edit anywhere</h3>
+
+          <p>The editor is available anywhere, it is a Progressive Web Apps!</p>
+        </article>
+
+        <article>
+          <h3>Showcase everywhere</h3>
+
+          <p>Presentations work on any device. These are published are standalone apps.</p>
+        </article>
+
+        <article>
+          <h3>Privacy per default</h3>
+
+          <p>Your presentations and content are private. You can choose to share them publicly anytime, but that's your choice.</p>
+        </article>
+
+        <article>
+          <h3>Share standalone apps</h3>
+
+          <p>Your presentation are published as standalone Progressive Web Apps. It only needs a link to share them.</p>
+        </article>
+
+        <article>
+          <h3>
+            Share privately <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>Create private links to restrain the access to your published content.</p>
+        </article>
+
+        <article>
+          <h3>
+            Export to PDF <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>If you rather like PDF over apps.</p>
+        </article>
+
+        <article>
+          <h3>Polls</h3>
+
+          <p>Engage your audience in real time. Involve them to contribute to your presentations with their smartphones and show the results live.</p>
+        </article>
+
+        <article>
+          <h3>Offline</h3>
+
+          <p>Present and edit your presentation offline.</p>
+        </article>
+
+        <h2>Editing</h2>
+
+        <article>
+          <h3>
+            Unbreakable templates <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</p>
+        </article>
+
+        <article>
+          <h3>Highlighted code</h3>
+
+          <p>Show syntax highlighted code in beautiful terminal cards.</p>
+        </article>
+
+        <article>
+          <h3>Embed your products</h3>
+
+          <p>If your products are made with the web too, embed these directly in your slides.</p>
+        </article>
+
+        <article>
+          <h3>Cloud library</h3>
+
+          <p>All images or data your are uploading are saved in your personal cloud storage and available to all your slides.</p>
+        </article>
+
+        <article>
+          <h3>Youtube</h3>
+
+          <p>Embed easily Youtube videos. Play and pause through the remote control.</p>
+        </article>
+
+        <article>
+          <h3>Unsplash and Giphy</h3>
+
+          <p>Search and integrate freely stock photos and gifs.</p>
+        </article>
+
+        <article>
+          <h3>Google fonts</h3>
+
+          <p>Select a Google Font from a list we have preselected for your.</p>
+        </article>
+
+        <article>
+          <h3>
+            Custom fonts <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>Use your brand fonts.</p>
+        </article>
+
+        <article>
+          <h3>Full screen edit</h3>
+
+          <p>No more toggle to make a quick change, your slides are editable in full screen mode as well.</p>
+        </article>
+
+        <article>
+          <h3>Transition</h3>
+
+          <p>Make individual text element appear one after the others.</p>
+        </article>
+
+        <article>
+          <h3>Math</h3>
+
+          <p>Render math formula with Katex in your slides.</p>
+        </article>
+
+        <h2>Presenting</h2>
+
+        <article>
+          <h3>Remote control</h3>
+
+          <p>Remote control your presentations, draw over your slides and set timer from your phone, tablet or any devices.</p>
+        </article>
+
+        <article>
+          <h3>Speaker notes</h3>
+
+          <p>Write notes for your slides. Cherry on top, Markdown is supported.</p>
+        </article>
+
+        <h2>More for enterprise</h2>
+
+        <article>
+          <h3>
+            In housing <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>Integrate DeckDeckGo in your infrastructure and private network.</p>
+        </article>
+
+        <article>
+          <h3>
+            Custom domain <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>Publish your decks under with your org domain name.</p>
+        </article>
+
+        <article>
+          <h3>
+            Archive <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>List and find all your presentations in a single place.</p>
+        </article>
+
+        <article>
+          <h3>
+            Collaborate <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>Multiple concurrent users can edit the same presentation at the same time.</p>
+        </article>
+
+        <article>
+          <h3>
+            Library <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+          </h3>
+
+          <p>Organize your company's media library and share it with your teams.</p>
+        </article>
+
+        <h2>Developers</h2>
+
+        <article>
+          <h3>Developer Kit</h3>
+
+          <p>You rather like to code your presentation with HTML or Markdown? All public features used by our editor are available in a developer kit.</p>
+        </article>
+
+        <article>
+          <h3>Open source</h3>
+
+          <p>
+            DeckDeckGo is open source. The code of our applications and components are available on&nbsp;
+            <a href="http://github.com/deckgo/deckdeckgo">
+              <ion-icon name="logo-github" area-label="Github"></ion-icon> Github
+            </a>
+          </p>
+        </article>
+
+        <p>
+          <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> Available for organizations. Get in touch for a tailored discussion about
+          your needs and pricing.
+        </p>
+      </section>
+    );
+  }
+}
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index 41630c9f2..46fc1ef65 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -102,7 +102,7 @@ app-enterprise {
         max-width: 100%;
         justify-self: center;
 
-        margin: 32px 0;
+        margin: 64px 0;
 
         span {
           font-size: 10rem;
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index 1da422b64..5962e3150 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -63,9 +63,7 @@ export class AppEnterprise {
 
           <img class="separator intro" src={`/assets/img/landing/wave-introducing.svg`} role="presentation" />
 
-          <section class="features" ref={(el) => (this.featuresRef = el as HTMLElement)}>
-            Features TODO
-          </section>
+          <app-features ref={(el) => (this.featuresRef = el as HTMLElement)}></app-features>
         </main>
       </ion-content>,
     ];
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index 018ca6f74..ff4666f76 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -204,6 +204,7 @@ export namespace Components {
     'expander': boolean;
   }
   interface AppFaq {}
+  interface AppFeatures {}
   interface AppFeed {}
   interface AppFeedCard {
     'compact': boolean;
@@ -619,6 +620,12 @@ declare global {
     new (): HTMLAppFaqElement;
   };
 
+  interface HTMLAppFeaturesElement extends Components.AppFeatures, HTMLStencilElement {}
+  var HTMLAppFeaturesElement: {
+    prototype: HTMLAppFeaturesElement;
+    new (): HTMLAppFeaturesElement;
+  };
+
   interface HTMLAppFeedElement extends Components.AppFeed, HTMLStencilElement {}
   var HTMLAppFeedElement: {
     prototype: HTMLAppFeedElement;
@@ -1062,6 +1069,7 @@ declare global {
     'app-enterprise': HTMLAppEnterpriseElement;
     'app-expansion-panel': HTMLAppExpansionPanelElement;
     'app-faq': HTMLAppFaqElement;
+    'app-features': HTMLAppFeaturesElement;
     'app-feed': HTMLAppFeedElement;
     'app-feed-card': HTMLAppFeedCardElement;
     'app-feed-card-tags': HTMLAppFeedCardTagsElement;
@@ -1320,6 +1328,7 @@ declare namespace LocalJSX {
     'expander'?: boolean;
   }
   interface AppFaq {}
+  interface AppFeatures {}
   interface AppFeed {}
   interface AppFeedCard {
     'compact'?: boolean;
@@ -1549,6 +1558,7 @@ declare namespace LocalJSX {
     'app-enterprise': AppEnterprise;
     'app-expansion-panel': AppExpansionPanel;
     'app-faq': AppFaq;
+    'app-features': AppFeatures;
     'app-feed': AppFeed;
     'app-feed-card': AppFeedCard;
     'app-feed-card-tags': AppFeedCardTags;
@@ -1666,6 +1676,7 @@ declare module "@stencil/core" {
       'app-enterprise': LocalJSX.AppEnterprise & JSXBase.HTMLAttributes<HTMLAppEnterpriseElement>;
       'app-expansion-panel': LocalJSX.AppExpansionPanel & JSXBase.HTMLAttributes<HTMLAppExpansionPanelElement>;
       'app-faq': LocalJSX.AppFaq & JSXBase.HTMLAttributes<HTMLAppFaqElement>;
+      'app-features': LocalJSX.AppFeatures & JSXBase.HTMLAttributes<HTMLAppFeaturesElement>;
       'app-feed': LocalJSX.AppFeed & JSXBase.HTMLAttributes<HTMLAppFeedElement>;
       'app-feed-card': LocalJSX.AppFeedCard & JSXBase.HTMLAttributes<HTMLAppFeedCardElement>;
       'app-feed-card-tags': LocalJSX.AppFeedCardTags & JSXBase.HTMLAttributes<HTMLAppFeedCardTagsElement>;

From 003ade0e914a13dcba320004384f567e8fc38f3f Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 17:38:44 +0200
Subject: [PATCH 04/29] style: spacing on mobile

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app/components/enterprise/app-features/app-features.scss  | 2 ++
 studio/src/app/pages/core/app-enterprise/app-enterprise.scss  | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.scss b/studio/src/app/components/enterprise/app-features/app-features.scss
index 530e499cd..20d0b7e66 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.scss
+++ b/studio/src/app/components/enterprise/app-features/app-features.scss
@@ -11,6 +11,8 @@ app-features {
     @media (max-width: 992px) {
       grid-template-columns: repeat(2, 50%);
       grid-row-gap: 0;
+      grid-column-gap: 16px;
+      width: calc(100% - 16px);
     }
 
     > h2,
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index 46fc1ef65..4d61378a4 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -13,6 +13,10 @@ app-enterprise {
         padding: 0 64px;
       }
 
+      @media (max-width: 768px) {
+        padding: 0 16px;
+      }
+
       h1 {
         font-size: 48px;
         font-weight: 600;

From eba7c2bbaab8dfbdbcde5b2afe0bd46b4ada6fa1 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 17:45:32 +0200
Subject: [PATCH 05/29] feat: separator

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../src/app/pages/core/app-enterprise/app-enterprise.scss   | 6 ++++++
 studio/src/app/pages/core/app-enterprise/app-enterprise.tsx | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index 4d61378a4..bc4a2724b 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -1,4 +1,6 @@
 app-enterprise {
+  display: block;
+
   main {
     display: flex;
     flex-direction: column;
@@ -135,6 +137,10 @@ app-enterprise {
       &.intro {
         background: white;
       }
+
+      &.features {
+        background: var(--ion-color-light);
+      }
     }
   }
 }
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index 5962e3150..a3fab8cec 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -61,9 +61,11 @@ export class AppEnterprise {
             </div>
           </section>
 
-          <img class="separator intro" src={`/assets/img/landing/wave-introducing.svg`} role="presentation" />
+          <img class="separator intro" src={`/assets/img/landing/wave-introducing.svg`} role="presentation" loading="lazy" />
 
           <app-features ref={(el) => (this.featuresRef = el as HTMLElement)}></app-features>
+
+          <img class="separator features" src={`/assets/img/landing/wave-audience.svg`} role="presentation" loading="lazy" />
         </main>
       </ion-content>,
     ];

From 0d537a5adc543c5dc919fa8acdee811902354135 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 18:32:10 +0200
Subject: [PATCH 06/29] feat: add formspree contact form

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-contact-form/app-contact-form.scss    | 24 +++++++
 .../app-contact-form/app-contact-form.tsx     | 72 +++++++++++++++++++
 .../enterprise/app-features/app-features.tsx  |  3 +-
 .../core/app-enterprise/app-enterprise.tsx    | 13 ++--
 studio/src/components.d.ts                    | 11 +++
 studio/src/index.html                         |  2 +-
 6 files changed, 117 insertions(+), 8 deletions(-)
 create mode 100644 studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
 create mode 100644 studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx

diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
new file mode 100644
index 000000000..1ed0a787d
--- /dev/null
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
@@ -0,0 +1,24 @@
+section.contact {
+  background: white;
+
+  display: flex;
+  justify-content: center;
+
+  form {
+    width: 720px;
+    max-width: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    ion-item {
+      margin: 4px 0;
+    }
+
+    ion-button,
+    p {
+      width: fit-content;
+      align-self: center;
+    }
+  }
+}
diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
new file mode 100644
index 000000000..1fa9776a3
--- /dev/null
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
@@ -0,0 +1,72 @@
+import {Component, h, State} from '@stencil/core';
+
+@Component({
+  tag: 'app-contact-form',
+  styleUrl: 'app-contact-form.scss',
+  shadow: false,
+})
+export class AppContactForm {
+  @State()
+  private status: 'SUCCESS' | 'ERROR' | undefined = undefined;
+
+  private submitForm($event) {
+    $event.preventDefault();
+
+    const form = $event.target;
+    const data = new FormData(form);
+    const xhr = new XMLHttpRequest();
+    xhr.open(form.method, form.action);
+    xhr.setRequestHeader('Accept', 'application/json');
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState !== XMLHttpRequest.DONE) return;
+      if (xhr.status === 200) {
+        form.reset();
+        this.status = 'SUCCESS';
+      } else {
+        this.status = 'ERROR';
+      }
+    };
+    xhr.send(data);
+  }
+
+  render() {
+    return (
+      <section class="contact">
+        <form onSubmit={($event) => this.submitForm($event)} action="https://formspree.io/xjvaebzk" method="POST">
+          <p>Get in touch for a tailored discussion about your needs and pricing.</p>
+
+          <ion-list class="inputs-list">
+            <ion-item>
+              <ion-input required={true} input-mode="text" name="company" placeholder="Your company"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input required={true} input-mode="text" name="name" placeholder="Your name"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input required={true} input-mode="email" name="_replyto" placeholder="Your email"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-input input-mode="tel" name="phone" placeholder="Your phone"></ion-input>
+            </ion-item>
+
+            <ion-item>
+              <ion-textarea name="message" placeholder="Your message" rows={4}></ion-textarea>
+            </ion-item>
+          </ion-list>
+
+          {this.status === 'SUCCESS' ? (
+            <p class="ion-margin-top">Thanks!</p>
+          ) : (
+            <ion-button type="submit" color="primary" shape="round" class="ion-margin-top">
+              Submit
+            </ion-button>
+          )}
+          {this.status === 'ERROR' && <p class="ion-margin-top">Ooops! There was an error.</p>}
+        </form>
+      </section>
+    );
+  }
+}
diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 8f4be6a21..9e8545298 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -211,8 +211,7 @@ export class AppFeatures {
         </article>
 
         <p>
-          <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> Available for organizations. Get in touch for a tailored discussion about
-          your needs and pricing.
+          <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available for organizations.
         </p>
       </section>
     );
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index a3fab8cec..bf3d0b084 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -6,13 +6,14 @@ import {Component, h} from '@stencil/core';
 })
 export class AppEnterprise {
   private featuresRef!: HTMLElement;
+  private formRef!: HTMLElement;
 
-  private scrollToFeatures() {
-    if (!this.featuresRef) {
+  private scrollTo(ref: HTMLElement | undefined) {
+    if (!ref) {
       return;
     }
 
-    this.featuresRef.scrollIntoView({
+    ref.scrollIntoView({
       behavior: 'smooth',
     });
   }
@@ -27,7 +28,7 @@ export class AppEnterprise {
               <h1>The unbreakable slides for your corporate communication.</h1>
               <h3 style={{'font-weight': '300'}}>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</h3>
 
-              <ion-button class="ion-margin-top" shape="round" href="/editor" routerDirection="root" mode="md" color="tertiary">
+              <ion-button class="ion-margin-top" shape="round" onClick={() => this.scrollTo(this.formRef)} mode="md" color="tertiary">
                 <ion-label style={{'text-transform': 'none'}}>Get in touch</ion-label>
               </ion-button>
             </div>
@@ -55,7 +56,7 @@ export class AppEnterprise {
 
               <p>Moreover, rolling out new design and logo has never been so easy and DeckDeckGo can offer so much more.</p>
 
-              <button type="button" class="app-button" onClick={() => this.scrollToFeatures()}>
+              <button type="button" class="app-button" onClick={() => this.scrollTo(this.featuresRef)}>
                 Discover more features <ion-icon src="/assets/icons/ionicons/arrow-forward.svg"></ion-icon>
               </button>
             </div>
@@ -66,6 +67,8 @@ export class AppEnterprise {
           <app-features ref={(el) => (this.featuresRef = el as HTMLElement)}></app-features>
 
           <img class="separator features" src={`/assets/img/landing/wave-audience.svg`} role="presentation" loading="lazy" />
+
+          <app-contact-form ref={(el) => (this.formRef = el as HTMLElement)}></app-contact-form>
         </main>
       </ion-content>,
     ];
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index ff4666f76..8c07afab1 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -136,6 +136,7 @@ export namespace Components {
     'slide': boolean;
   }
   interface AppContact {}
+  interface AppContactForm {}
   interface AppCreateSlide {}
   interface AppCustomData {}
   interface AppCustomImages {}
@@ -482,6 +483,12 @@ declare global {
     new (): HTMLAppContactElement;
   };
 
+  interface HTMLAppContactFormElement extends Components.AppContactForm, HTMLStencilElement {}
+  var HTMLAppContactFormElement: {
+    prototype: HTMLAppContactFormElement;
+    new (): HTMLAppContactFormElement;
+  };
+
   interface HTMLAppCreateSlideElement extends Components.AppCreateSlide, HTMLStencilElement {}
   var HTMLAppCreateSlideElement: {
     prototype: HTMLAppCreateSlideElement;
@@ -1046,6 +1053,7 @@ declare global {
     'app-color-sides': HTMLAppColorSidesElement;
     'app-color-text-background': HTMLAppColorTextBackgroundElement;
     'app-contact': HTMLAppContactElement;
+    'app-contact-form': HTMLAppContactFormElement;
     'app-create-slide': HTMLAppCreateSlideElement;
     'app-custom-data': HTMLAppCustomDataElement;
     'app-custom-images': HTMLAppCustomImagesElement;
@@ -1251,6 +1259,7 @@ declare namespace LocalJSX {
     'slide'?: boolean;
   }
   interface AppContact {}
+  interface AppContactForm {}
   interface AppCreateSlide {
     'onSignIn'?: (event: CustomEvent<void>) => void;
   }
@@ -1535,6 +1544,7 @@ declare namespace LocalJSX {
     'app-color-sides': AppColorSides;
     'app-color-text-background': AppColorTextBackground;
     'app-contact': AppContact;
+    'app-contact-form': AppContactForm;
     'app-create-slide': AppCreateSlide;
     'app-custom-data': AppCustomData;
     'app-custom-images': AppCustomImages;
@@ -1653,6 +1663,7 @@ declare module "@stencil/core" {
       'app-color-sides': LocalJSX.AppColorSides & JSXBase.HTMLAttributes<HTMLAppColorSidesElement>;
       'app-color-text-background': LocalJSX.AppColorTextBackground & JSXBase.HTMLAttributes<HTMLAppColorTextBackgroundElement>;
       'app-contact': LocalJSX.AppContact & JSXBase.HTMLAttributes<HTMLAppContactElement>;
+      'app-contact-form': LocalJSX.AppContactForm & JSXBase.HTMLAttributes<HTMLAppContactFormElement>;
       'app-create-slide': LocalJSX.AppCreateSlide & JSXBase.HTMLAttributes<HTMLAppCreateSlideElement>;
       'app-custom-data': LocalJSX.AppCustomData & JSXBase.HTMLAttributes<HTMLAppCustomDataElement>;
       'app-custom-images': LocalJSX.AppCustomImages & JSXBase.HTMLAttributes<HTMLAppCustomImagesElement>;
diff --git a/studio/src/index.html b/studio/src/index.html
index e233a268b..e49716f9a 100644
--- a/studio/src/index.html
+++ b/studio/src/index.html
@@ -11,7 +11,7 @@
     style-src 'self' 'unsafe-inline' https://cdn.firebase.com https://fonts.googleapis.com;
     font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;
     script-src 'self' blob: <@PRELOADMODULE_LINKS@> <@SW_LOADER@> 'sha256-vay/aAFxtYsaISRoBsVDHCbAzow9u6P2gHHTewRPaJY=' https://cdn.firebase.com https://apis.google.com https://unpkg.com/prismjs@latest/;
-    connect-src 'self' <@API_URLS@> https://deckdeckgo.com/ http://deckdeckgo-studio-beta.web.app/ wss://api.deckdeckgo.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-prod.appspot.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-beta.appspot.com/ https://www.googleapis.com https://securetoken.googleapis.com https://firestore.googleapis.com ws://localhost:3333/ https://raw.githubusercontent.com/PrismJS/ https://raw.githubusercontent.com/deckgo/ https://api.tenor.com/ https://media.tenor.com/;
+    connect-src 'self' <@API_URLS@> https://deckdeckgo.com/ http://deckdeckgo-studio-beta.web.app/ wss://api.deckdeckgo.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-prod.appspot.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-beta.appspot.com/ https://www.googleapis.com https://securetoken.googleapis.com https://firestore.googleapis.com ws://localhost:3333/ https://raw.githubusercontent.com/PrismJS/ https://raw.githubusercontent.com/deckgo/ https://api.tenor.com/ https://media.tenor.com/ https://formspree.io/xjvaebzk;
     frame-src https: http://localhost:3333/~dev-server"
     />
 

From c4dc5cfe0f17cb3833af7b1c27b929ea32ac96f2 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 18:54:11 +0200
Subject: [PATCH 07/29] feat: add footer on enterprise page

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../{ => footer}/app-footer/app-footer.scss   |  2 +
 .../{ => footer}/app-footer/app-footer.tsx    |  2 +-
 .../app-section-footer.scss}                  |  8 +++-
 .../app-section-footer/app-section-footer.tsx | 41 +++++++++++++++++++
 .../enterprise/app-features/app-features.scss | 10 +++--
 .../enterprise/app-features/app-features.tsx  |  1 +
 .../app-landing-footer/app-landing-footer.tsx | 30 --------------
 .../landing/app-landing/app-landing.tsx       |  4 +-
 .../core/app-enterprise/app-enterprise.tsx    |  2 +
 studio/src/components.d.ts                    | 26 +++++++-----
 10 files changed, 77 insertions(+), 49 deletions(-)
 rename studio/src/app/components/core/{ => footer}/app-footer/app-footer.scss (99%)
 rename studio/src/app/components/core/{ => footer}/app-footer/app-footer.tsx (99%)
 rename studio/src/app/components/{landing/app-landing-footer/app-landing-footer.scss => core/footer/app-section-footer/app-section-footer.scss} (79%)
 create mode 100644 studio/src/app/components/core/footer/app-section-footer/app-section-footer.tsx
 delete mode 100644 studio/src/app/components/landing/app-landing-footer/app-landing-footer.tsx

diff --git a/studio/src/app/components/core/app-footer/app-footer.scss b/studio/src/app/components/core/footer/app-footer/app-footer.scss
similarity index 99%
rename from studio/src/app/components/core/app-footer/app-footer.scss
rename to studio/src/app/components/core/footer/app-footer/app-footer.scss
index fda901588..b3da52ea6 100644
--- a/studio/src/app/components/core/app-footer/app-footer.scss
+++ b/studio/src/app/components/core/footer/app-footer/app-footer.scss
@@ -20,6 +20,8 @@
 }
 
 app-footer {
+  display: block;
+
   div.footer-container {
     font-size: var(--font-size-small);
 
diff --git a/studio/src/app/components/core/app-footer/app-footer.tsx b/studio/src/app/components/core/footer/app-footer/app-footer.tsx
similarity index 99%
rename from studio/src/app/components/core/app-footer/app-footer.tsx
rename to studio/src/app/components/core/footer/app-footer/app-footer.tsx
index 8a187c048..9873ceec9 100644
--- a/studio/src/app/components/core/app-footer/app-footer.tsx
+++ b/studio/src/app/components/core/footer/app-footer/app-footer.tsx
@@ -3,7 +3,7 @@ import {Component, h, Prop} from '@stencil/core';
 @Component({
   tag: 'app-footer',
   styleUrl: 'app-footer.scss',
-  shadow: false
+  shadow: false,
 })
 export class AppFooter {
   @Prop()
diff --git a/studio/src/app/components/landing/app-landing-footer/app-landing-footer.scss b/studio/src/app/components/core/footer/app-section-footer/app-section-footer.scss
similarity index 79%
rename from studio/src/app/components/landing/app-landing-footer/app-landing-footer.scss
rename to studio/src/app/components/core/footer/app-section-footer/app-section-footer.scss
index 57cb20980..e9934cfe3 100644
--- a/studio/src/app/components/landing/app-landing-footer/app-landing-footer.scss
+++ b/studio/src/app/components/core/footer/app-section-footer/app-section-footer.scss
@@ -1,10 +1,14 @@
-app-landing-footer {
-  main {
+app-section-footer {
+  footer {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 
+    section {
+      padding: 0;
+    }
+
     section.links {
       margin-top: 48px;
       max-width: 768px;
diff --git a/studio/src/app/components/core/footer/app-section-footer/app-section-footer.tsx b/studio/src/app/components/core/footer/app-section-footer/app-section-footer.tsx
new file mode 100644
index 000000000..c6accbd9d
--- /dev/null
+++ b/studio/src/app/components/core/footer/app-section-footer/app-section-footer.tsx
@@ -0,0 +1,41 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+  tag: 'app-section-footer',
+  styleUrl: 'app-section-footer.scss',
+  shadow: false,
+})
+export class AppSectionFooter {
+  @Prop()
+  action: boolean = true;
+
+  render() {
+    return (
+      <footer>
+        <img src={`/assets/img/landing/wave-remote.svg`} role="presentation" loading="lazy" class="wave-section" />
+
+        {this.renderAction()}
+
+        <section class="ion-padding links">
+          <app-footer display="landing"></app-footer>
+        </section>
+      </footer>
+    );
+  }
+
+  private renderAction() {
+    if (!this.action) {
+      return undefined;
+    }
+
+    return (
+      <section class="ion-padding ion-text-center">
+        <h3>Start now.</h3>
+
+        <ion-button class="ion-margin-top" shape="round" href="/editor" routerDirection="root" mode="md" color="primary">
+          <ion-label>Write a presentation</ion-label>
+        </ion-button>
+      </section>
+    );
+  }
+}
diff --git a/studio/src/app/components/enterprise/app-features/app-features.scss b/studio/src/app/components/enterprise/app-features/app-features.scss
index 20d0b7e66..829131345 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.scss
+++ b/studio/src/app/components/enterprise/app-features/app-features.scss
@@ -10,9 +10,9 @@ app-features {
 
     @media (max-width: 992px) {
       grid-template-columns: repeat(2, 50%);
-      grid-row-gap: 0;
-      grid-column-gap: 16px;
-      width: calc(100% - 16px);
+      grid-row-gap: 8px;
+      grid-column-gap: 32px;
+      width: calc(100% - 32px);
     }
 
     > h2,
@@ -36,5 +36,9 @@ app-features {
         margin-top: 48px;
       }
     }
+
+    a {
+      font-weight: 300;
+    }
   }
 }
diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 9e8545298..788b9615f 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -207,6 +207,7 @@ export class AppFeatures {
             <a href="http://github.com/deckgo/deckdeckgo">
               <ion-icon name="logo-github" area-label="Github"></ion-icon> Github
             </a>
+            .
           </p>
         </article>
 
diff --git a/studio/src/app/components/landing/app-landing-footer/app-landing-footer.tsx b/studio/src/app/components/landing/app-landing-footer/app-landing-footer.tsx
deleted file mode 100644
index 5c5117d4e..000000000
--- a/studio/src/app/components/landing/app-landing-footer/app-landing-footer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {Component, h} from '@stencil/core';
-
-@Component({
-  tag: 'app-landing-footer',
-  styleUrl: 'app-landing-footer.scss',
-  shadow: false
-})
-export class AppLandingFooter {
-  render() {
-    return (
-      <footer>
-        <img src={`/assets/img/landing/wave-remote.svg`} role="presentation" loading="lazy" class="wave-section" />
-
-        <main>
-          <section class="ion-padding ion-text-center">
-            <h3>Start now.</h3>
-
-            <ion-button class="ion-margin-top" shape="round" href="/editor" routerDirection="root" mode="md" color="primary">
-              <ion-label>Write a presentation</ion-label>
-            </ion-button>
-          </section>
-
-          <section class="ion-padding links">
-            <app-footer display="landing"></app-footer>
-          </section>
-        </main>
-      </footer>
-    );
-  }
-}
diff --git a/studio/src/app/components/landing/app-landing/app-landing.tsx b/studio/src/app/components/landing/app-landing/app-landing.tsx
index 4ae28d92b..c924cb925 100644
--- a/studio/src/app/components/landing/app-landing/app-landing.tsx
+++ b/studio/src/app/components/landing/app-landing/app-landing.tsx
@@ -3,7 +3,7 @@ import {Component, Element, h, Host} from '@stencil/core';
 @Component({
   tag: 'app-landing',
   styleUrl: 'app-landing.scss',
-  shadow: false
+  shadow: false,
 })
 export class AppLanding {
   @Element() el: HTMLElement;
@@ -17,7 +17,7 @@ export class AppLanding {
 
         <app-landing-content></app-landing-content>
 
-        <app-landing-footer></app-landing-footer>
+        <app-section-footer></app-section-footer>
       </Host>
     );
   }
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index bf3d0b084..4a964c4ce 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -69,6 +69,8 @@ export class AppEnterprise {
           <img class="separator features" src={`/assets/img/landing/wave-audience.svg`} role="presentation" loading="lazy" />
 
           <app-contact-form ref={(el) => (this.formRef = el as HTMLElement)}></app-contact-form>
+
+          <app-section-footer action={false}></app-section-footer>
         </main>
       </ion-content>,
     ];
diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
index 8c07afab1..ac1162ed8 100644
--- a/studio/src/components.d.ts
+++ b/studio/src/components.d.ts
@@ -253,7 +253,6 @@ export namespace Components {
   interface AppLanding {}
   interface AppLandingContent {}
   interface AppLandingDeck {}
-  interface AppLandingFooter {}
   interface AppList {
     'selectedElement': HTMLElement;
   }
@@ -323,6 +322,9 @@ export namespace Components {
     'selectedElement': HTMLElement;
   }
   interface AppRoot {}
+  interface AppSectionFooter {
+    'action': boolean;
+  }
   interface AppSelectTargetElement {
     'background': boolean;
     'chart': boolean;
@@ -747,12 +749,6 @@ declare global {
     new (): HTMLAppLandingDeckElement;
   };
 
-  interface HTMLAppLandingFooterElement extends Components.AppLandingFooter, HTMLStencilElement {}
-  var HTMLAppLandingFooterElement: {
-    prototype: HTMLAppLandingFooterElement;
-    new (): HTMLAppLandingFooterElement;
-  };
-
   interface HTMLAppListElement extends Components.AppList, HTMLStencilElement {}
   var HTMLAppListElement: {
     prototype: HTMLAppListElement;
@@ -933,6 +929,12 @@ declare global {
     new (): HTMLAppRootElement;
   };
 
+  interface HTMLAppSectionFooterElement extends Components.AppSectionFooter, HTMLStencilElement {}
+  var HTMLAppSectionFooterElement: {
+    prototype: HTMLAppSectionFooterElement;
+    new (): HTMLAppSectionFooterElement;
+  };
+
   interface HTMLAppSelectTargetElementElement extends Components.AppSelectTargetElement, HTMLStencilElement {}
   var HTMLAppSelectTargetElementElement: {
     prototype: HTMLAppSelectTargetElementElement;
@@ -1097,7 +1099,6 @@ declare global {
     'app-landing': HTMLAppLandingElement;
     'app-landing-content': HTMLAppLandingContentElement;
     'app-landing-deck': HTMLAppLandingDeckElement;
-    'app-landing-footer': HTMLAppLandingFooterElement;
     'app-list': HTMLAppListElement;
     'app-logo': HTMLAppLogoElement;
     'app-math': HTMLAppMathElement;
@@ -1128,6 +1129,7 @@ declare global {
     'app-remote-request': HTMLAppRemoteRequestElement;
     'app-reveal': HTMLAppRevealElement;
     'app-root': HTMLAppRootElement;
+    'app-section-footer': HTMLAppSectionFooterElement;
     'app-select-target-element': HTMLAppSelectTargetElementElement;
     'app-services': HTMLAppServicesElement;
     'app-settings': HTMLAppSettingsElement;
@@ -1397,7 +1399,6 @@ declare namespace LocalJSX {
   interface AppLanding {}
   interface AppLandingContent {}
   interface AppLandingDeck {}
-  interface AppLandingFooter {}
   interface AppList {
     'onToggleList'?: (event: CustomEvent<SlotType.OL | SlotType.UL>) => void;
     'selectedElement'?: HTMLElement;
@@ -1473,6 +1474,9 @@ declare namespace LocalJSX {
     'selectedElement'?: HTMLElement;
   }
   interface AppRoot {}
+  interface AppSectionFooter {
+    'action'?: boolean;
+  }
   interface AppSelectTargetElement {
     'background'?: boolean;
     'chart'?: boolean;
@@ -1588,7 +1592,6 @@ declare namespace LocalJSX {
     'app-landing': AppLanding;
     'app-landing-content': AppLandingContent;
     'app-landing-deck': AppLandingDeck;
-    'app-landing-footer': AppLandingFooter;
     'app-list': AppList;
     'app-logo': AppLogo;
     'app-math': AppMath;
@@ -1619,6 +1622,7 @@ declare namespace LocalJSX {
     'app-remote-request': AppRemoteRequest;
     'app-reveal': AppReveal;
     'app-root': AppRoot;
+    'app-section-footer': AppSectionFooter;
     'app-select-target-element': AppSelectTargetElement;
     'app-services': AppServices;
     'app-settings': AppSettings;
@@ -1707,7 +1711,6 @@ declare module "@stencil/core" {
       'app-landing': LocalJSX.AppLanding & JSXBase.HTMLAttributes<HTMLAppLandingElement>;
       'app-landing-content': LocalJSX.AppLandingContent & JSXBase.HTMLAttributes<HTMLAppLandingContentElement>;
       'app-landing-deck': LocalJSX.AppLandingDeck & JSXBase.HTMLAttributes<HTMLAppLandingDeckElement>;
-      'app-landing-footer': LocalJSX.AppLandingFooter & JSXBase.HTMLAttributes<HTMLAppLandingFooterElement>;
       'app-list': LocalJSX.AppList & JSXBase.HTMLAttributes<HTMLAppListElement>;
       'app-logo': LocalJSX.AppLogo & JSXBase.HTMLAttributes<HTMLAppLogoElement>;
       'app-math': LocalJSX.AppMath & JSXBase.HTMLAttributes<HTMLAppMathElement>;
@@ -1738,6 +1741,7 @@ declare module "@stencil/core" {
       'app-remote-request': LocalJSX.AppRemoteRequest & JSXBase.HTMLAttributes<HTMLAppRemoteRequestElement>;
       'app-reveal': LocalJSX.AppReveal & JSXBase.HTMLAttributes<HTMLAppRevealElement>;
       'app-root': LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
+      'app-section-footer': LocalJSX.AppSectionFooter & JSXBase.HTMLAttributes<HTMLAppSectionFooterElement>;
       'app-select-target-element': LocalJSX.AppSelectTargetElement & JSXBase.HTMLAttributes<HTMLAppSelectTargetElementElement>;
       'app-services': LocalJSX.AppServices & JSXBase.HTMLAttributes<HTMLAppServicesElement>;
       'app-settings': LocalJSX.AppSettings & JSXBase.HTMLAttributes<HTMLAppSettingsElement>;

From 00ad454aeb66b98e08a668417733810ecd96eaa6 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 18:58:10 +0200
Subject: [PATCH 08/29] feat: hero background

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 studio/src/app/pages/core/app-enterprise/app-enterprise.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index bc4a2724b..19c88d975 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -59,7 +59,7 @@ app-enterprise {
     section.hero {
       height: calc(100vh - 56px);
 
-      background: var(--ion-color-dark);
+      background: linear-gradient(45deg, var(--ion-color-dark) 5%, var(--ion-color-tertiary) 95%);
       color: var(--ion-color-dark-contrast);
 
       display: grid;

From 5a87250283c21adc50265134af1d7c5b5cf82edc Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 24 Jun 2020 19:02:57 +0200
Subject: [PATCH 09/29] feat: text

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../src/app/components/enterprise/app-features/app-features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 788b9615f..1c2d1bb89 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -212,7 +212,7 @@ export class AppFeatures {
         </article>
 
         <p>
-          <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available for organizations.
+          <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available upon request for organizations.
         </p>
       </section>
     );

From e59f147f78ea5b1e081c057ed18d60aec45e289a Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 26 Jun 2020 12:06:29 +0200
Subject: [PATCH 10/29] fix: wider laptop content and background width

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-contact-form/app-contact-form.scss    |  30 +-
 .../app-contact-form/app-contact-form.tsx     |  58 ++--
 .../enterprise/app-features/app-features.scss |  59 ++--
 .../enterprise/app-features/app-features.tsx  | 288 +++++++++---------
 .../core/app-enterprise/app-enterprise.scss   |  50 ++-
 .../core/app-enterprise/app-enterprise.tsx    |  30 +-
 6 files changed, 274 insertions(+), 241 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
index 1ed0a787d..c9383bb73 100644
--- a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
@@ -1,24 +1,26 @@
 section.contact {
   background: white;
 
-  display: flex;
-  justify-content: center;
+  div.content {
+    display: flex;
+    justify-content: center;
 
-  form {
-    width: 720px;
-    max-width: 100%;
+    form {
+      width: 720px;
+      max-width: 100%;
 
-    display: flex;
-    flex-direction: column;
+      display: flex;
+      flex-direction: column;
 
-    ion-item {
-      margin: 4px 0;
-    }
+      ion-item {
+        margin: 4px 0;
+      }
 
-    ion-button,
-    p {
-      width: fit-content;
-      align-self: center;
+      ion-button,
+      p {
+        width: fit-content;
+        align-self: center;
+      }
     }
   }
 }
diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
index 1fa9776a3..d8cc2801d 100644
--- a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
@@ -32,40 +32,42 @@ export class AppContactForm {
   render() {
     return (
       <section class="contact">
-        <form onSubmit={($event) => this.submitForm($event)} action="https://formspree.io/xjvaebzk" method="POST">
-          <p>Get in touch for a tailored discussion about your needs and pricing.</p>
+        <div class="content">
+          <form onSubmit={($event) => this.submitForm($event)} action="https://formspree.io/xjvaebzk" method="POST">
+            <p>Get in touch for a tailored discussion about your needs and pricing.</p>
 
-          <ion-list class="inputs-list">
-            <ion-item>
-              <ion-input required={true} input-mode="text" name="company" placeholder="Your company"></ion-input>
-            </ion-item>
+            <ion-list class="inputs-list">
+              <ion-item>
+                <ion-input required={true} input-mode="text" name="company" placeholder="Your company"></ion-input>
+              </ion-item>
 
-            <ion-item>
-              <ion-input required={true} input-mode="text" name="name" placeholder="Your name"></ion-input>
-            </ion-item>
+              <ion-item>
+                <ion-input required={true} input-mode="text" name="name" placeholder="Your name"></ion-input>
+              </ion-item>
 
-            <ion-item>
-              <ion-input required={true} input-mode="email" name="_replyto" placeholder="Your email"></ion-input>
-            </ion-item>
+              <ion-item>
+                <ion-input required={true} input-mode="email" name="_replyto" placeholder="Your email"></ion-input>
+              </ion-item>
 
-            <ion-item>
-              <ion-input input-mode="tel" name="phone" placeholder="Your phone"></ion-input>
-            </ion-item>
+              <ion-item>
+                <ion-input input-mode="tel" name="phone" placeholder="Your phone"></ion-input>
+              </ion-item>
 
-            <ion-item>
-              <ion-textarea name="message" placeholder="Your message" rows={4}></ion-textarea>
-            </ion-item>
-          </ion-list>
+              <ion-item>
+                <ion-textarea name="message" placeholder="Your message" rows={4}></ion-textarea>
+              </ion-item>
+            </ion-list>
 
-          {this.status === 'SUCCESS' ? (
-            <p class="ion-margin-top">Thanks!</p>
-          ) : (
-            <ion-button type="submit" color="primary" shape="round" class="ion-margin-top">
-              Submit
-            </ion-button>
-          )}
-          {this.status === 'ERROR' && <p class="ion-margin-top">Ooops! There was an error.</p>}
-        </form>
+            {this.status === 'SUCCESS' ? (
+              <p class="ion-margin-top">Thanks!</p>
+            ) : (
+              <ion-button type="submit" color="primary" shape="round" class="ion-margin-top">
+                Submit
+              </ion-button>
+            )}
+            {this.status === 'ERROR' && <p class="ion-margin-top">Ooops! There was an error.</p>}
+          </form>
+        </div>
       </section>
     );
   }
diff --git a/studio/src/app/components/enterprise/app-features/app-features.scss b/studio/src/app/components/enterprise/app-features/app-features.scss
index 829131345..3a7fee21d 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.scss
+++ b/studio/src/app/components/enterprise/app-features/app-features.scss
@@ -1,44 +1,47 @@
 app-features {
   section.features {
-    display: grid;
-    grid-template-columns: repeat(3, calc(100% / 3));
-    grid-template-rows: auto;
+    div.content {
+      display: grid;
+      grid-template-columns: repeat(3, calc(100% / 3));
+      grid-template-rows: auto;
 
-    grid-gap: 32px;
+      grid-gap: 32px;
 
-    outline: 1px solid var(--ion-color-light);
+      outline: 1px solid var(--ion-color-light);
 
-    @media (max-width: 992px) {
-      grid-template-columns: repeat(2, 50%);
-      grid-row-gap: 8px;
-      grid-column-gap: 32px;
-      width: calc(100% - 32px);
-    }
+      @media (max-width: 992px) {
+        grid-template-columns: repeat(2, 50%);
+        grid-row-gap: 8px;
+        grid-column-gap: 32px;
+        width: calc(100% - 64px);
+        padding: 0 32px 0 0;
+      }
 
-    > h2,
-    > p {
-      grid-column-start: 1;
-      grid-column-end: 4;
+      > h2,
+      > p {
+        grid-column-start: 1;
+        grid-column-end: 4;
 
-      @media (max-width: 992px) {
-        grid-column-end: 3;
+        @media (max-width: 992px) {
+          grid-column-end: 3;
+        }
       }
-    }
 
-    > p {
-      margin-top: 32px;
-    }
+      > p {
+        margin-top: 32px;
+      }
 
-    > h2 {
-      color: rgba(var(--ion-color-medium-rgb), 0.4);
+      > h2 {
+        color: rgba(var(--ion-color-medium-rgb), 0.4);
 
-      &:not(:first-of-type) {
-        margin-top: 48px;
+        &:not(:first-of-type) {
+          margin-top: 48px;
+        }
       }
-    }
 
-    a {
-      font-weight: 300;
+      a {
+        font-weight: 300;
+      }
     }
   }
 }
diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 1c2d1bb89..14934a71a 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -9,211 +9,213 @@ export class AppFeatures {
   render() {
     return (
       <section class="features">
-        <h2>Main features</h2>
+        <div class="content">
+          <h2>Main features</h2>
 
-        <article>
-          <h3>Edit anywhere</h3>
+          <article>
+            <h3>Edit anywhere</h3>
 
-          <p>The editor is available anywhere, it is a Progressive Web Apps!</p>
-        </article>
+            <p>The editor is available anywhere, it is a Progressive Web Apps!</p>
+          </article>
 
-        <article>
-          <h3>Showcase everywhere</h3>
+          <article>
+            <h3>Showcase everywhere</h3>
 
-          <p>Presentations work on any device. These are published are standalone apps.</p>
-        </article>
+            <p>Presentations work on any device. These are published are standalone apps.</p>
+          </article>
 
-        <article>
-          <h3>Privacy per default</h3>
+          <article>
+            <h3>Privacy per default</h3>
 
-          <p>Your presentations and content are private. You can choose to share them publicly anytime, but that's your choice.</p>
-        </article>
+            <p>Your presentations and content are private. You can choose to share them publicly anytime, but that's your choice.</p>
+          </article>
 
-        <article>
-          <h3>Share standalone apps</h3>
+          <article>
+            <h3>Share standalone apps</h3>
 
-          <p>Your presentation are published as standalone Progressive Web Apps. It only needs a link to share them.</p>
-        </article>
+            <p>Your presentation are published as standalone Progressive Web Apps. It only needs a link to share them.</p>
+          </article>
 
-        <article>
-          <h3>
-            Share privately <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Share privately <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>Create private links to restrain the access to your published content.</p>
-        </article>
+            <p>Create private links to restrain the access to your published content.</p>
+          </article>
 
-        <article>
-          <h3>
-            Export to PDF <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Export to PDF <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>If you rather like PDF over apps.</p>
-        </article>
+            <p>If you rather like PDF over apps.</p>
+          </article>
 
-        <article>
-          <h3>Polls</h3>
+          <article>
+            <h3>Polls</h3>
 
-          <p>Engage your audience in real time. Involve them to contribute to your presentations with their smartphones and show the results live.</p>
-        </article>
+            <p>Engage your audience in real time. Involve them to contribute to your presentations with their smartphones and show the results live.</p>
+          </article>
 
-        <article>
-          <h3>Offline</h3>
+          <article>
+            <h3>Offline</h3>
 
-          <p>Present and edit your presentation offline.</p>
-        </article>
+            <p>Present and edit your presentation offline.</p>
+          </article>
 
-        <h2>Editing</h2>
+          <h2>Editing</h2>
 
-        <article>
-          <h3>
-            Unbreakable templates <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Unbreakable templates <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</p>
-        </article>
+            <p>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</p>
+          </article>
 
-        <article>
-          <h3>Highlighted code</h3>
+          <article>
+            <h3>Highlighted code</h3>
 
-          <p>Show syntax highlighted code in beautiful terminal cards.</p>
-        </article>
+            <p>Show syntax highlighted code in beautiful terminal cards.</p>
+          </article>
 
-        <article>
-          <h3>Embed your products</h3>
+          <article>
+            <h3>Embed your products</h3>
 
-          <p>If your products are made with the web too, embed these directly in your slides.</p>
-        </article>
+            <p>If your products are made with the web too, embed these directly in your slides.</p>
+          </article>
 
-        <article>
-          <h3>Cloud library</h3>
+          <article>
+            <h3>Cloud library</h3>
 
-          <p>All images or data your are uploading are saved in your personal cloud storage and available to all your slides.</p>
-        </article>
+            <p>All images or data your are uploading are saved in your personal cloud storage and available to all your slides.</p>
+          </article>
 
-        <article>
-          <h3>Youtube</h3>
+          <article>
+            <h3>Youtube</h3>
 
-          <p>Embed easily Youtube videos. Play and pause through the remote control.</p>
-        </article>
+            <p>Embed easily Youtube videos. Play and pause through the remote control.</p>
+          </article>
 
-        <article>
-          <h3>Unsplash and Giphy</h3>
+          <article>
+            <h3>Unsplash and Giphy</h3>
 
-          <p>Search and integrate freely stock photos and gifs.</p>
-        </article>
+            <p>Search and integrate freely stock photos and gifs.</p>
+          </article>
 
-        <article>
-          <h3>Google fonts</h3>
+          <article>
+            <h3>Google fonts</h3>
 
-          <p>Select a Google Font from a list we have preselected for your.</p>
-        </article>
+            <p>Select a Google Font from a list we have preselected for your.</p>
+          </article>
 
-        <article>
-          <h3>
-            Custom fonts <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Custom fonts <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>Use your brand fonts.</p>
-        </article>
+            <p>Use your brand fonts.</p>
+          </article>
 
-        <article>
-          <h3>Full screen edit</h3>
+          <article>
+            <h3>Full screen edit</h3>
 
-          <p>No more toggle to make a quick change, your slides are editable in full screen mode as well.</p>
-        </article>
+            <p>No more toggle to make a quick change, your slides are editable in full screen mode as well.</p>
+          </article>
 
-        <article>
-          <h3>Transition</h3>
+          <article>
+            <h3>Transition</h3>
 
-          <p>Make individual text element appear one after the others.</p>
-        </article>
+            <p>Make individual text element appear one after the others.</p>
+          </article>
 
-        <article>
-          <h3>Math</h3>
+          <article>
+            <h3>Math</h3>
 
-          <p>Render math formula with Katex in your slides.</p>
-        </article>
+            <p>Render math formula with Katex in your slides.</p>
+          </article>
 
-        <h2>Presenting</h2>
+          <h2>Presenting</h2>
 
-        <article>
-          <h3>Remote control</h3>
+          <article>
+            <h3>Remote control</h3>
 
-          <p>Remote control your presentations, draw over your slides and set timer from your phone, tablet or any devices.</p>
-        </article>
+            <p>Remote control your presentations, draw over your slides and set timer from your phone, tablet or any devices.</p>
+          </article>
 
-        <article>
-          <h3>Speaker notes</h3>
+          <article>
+            <h3>Speaker notes</h3>
 
-          <p>Write notes for your slides. Cherry on top, Markdown is supported.</p>
-        </article>
+            <p>Write notes for your slides. Cherry on top, Markdown is supported.</p>
+          </article>
 
-        <h2>More for enterprise</h2>
+          <h2>More for enterprise</h2>
 
-        <article>
-          <h3>
-            In housing <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              In housing <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>Integrate DeckDeckGo in your infrastructure and private network.</p>
-        </article>
+            <p>Integrate DeckDeckGo in your infrastructure and private network.</p>
+          </article>
 
-        <article>
-          <h3>
-            Custom domain <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Custom domain <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>Publish your decks under with your org domain name.</p>
-        </article>
+            <p>Publish your decks under with your org domain name.</p>
+          </article>
 
-        <article>
-          <h3>
-            Archive <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Archive <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>List and find all your presentations in a single place.</p>
-        </article>
+            <p>List and find all your presentations in a single place.</p>
+          </article>
 
-        <article>
-          <h3>
-            Collaborate <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Collaborate <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>Multiple concurrent users can edit the same presentation at the same time.</p>
-        </article>
+            <p>Multiple concurrent users can edit the same presentation at the same time.</p>
+          </article>
 
-        <article>
-          <h3>
-            Library <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
-          </h3>
+          <article>
+            <h3>
+              Library <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
 
-          <p>Organize your company's media library and share it with your teams.</p>
-        </article>
+            <p>Organize your company's media library and share it with your teams.</p>
+          </article>
 
-        <h2>Developers</h2>
+          <h2>Developers</h2>
 
-        <article>
-          <h3>Developer Kit</h3>
+          <article>
+            <h3>Developer Kit</h3>
 
-          <p>You rather like to code your presentation with HTML or Markdown? All public features used by our editor are available in a developer kit.</p>
-        </article>
+            <p>You rather like to code your presentation with HTML or Markdown? All public features used by our editor are available in a developer kit.</p>
+          </article>
 
-        <article>
-          <h3>Open source</h3>
+          <article>
+            <h3>Open source</h3>
+
+            <p>
+              DeckDeckGo is open source. The code of our applications and components are available on&nbsp;
+              <a href="http://github.com/deckgo/deckdeckgo">
+                <ion-icon name="logo-github" area-label="Github"></ion-icon> Github
+              </a>
+              .
+            </p>
+          </article>
 
           <p>
-            DeckDeckGo is open source. The code of our applications and components are available on&nbsp;
-            <a href="http://github.com/deckgo/deckdeckgo">
-              <ion-icon name="logo-github" area-label="Github"></ion-icon> Github
-            </a>
-            .
+            <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available upon request for organizations.
           </p>
-        </article>
-
-        <p>
-          <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available upon request for organizations.
-        </p>
+        </div>
       </section>
     );
   }
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index 19c88d975..9c65a8e20 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -1,12 +1,18 @@
 app-enterprise {
   display: block;
 
-  main {
+  section {
+    width: 100%;
+
     display: flex;
     flex-direction: column;
 
-    section {
+    div.content {
       width: 100%;
+      max-width: 1400px;
+      margin-left: auto;
+      margin-right: auto;
+
       padding: 0 128px;
 
       position: relative;
@@ -48,23 +54,27 @@ app-enterprise {
         color: var(--ion-color-dark);
         margin-top: 0;
       }
+    }
 
-      img.wave {
-        position: absolute;
-        left: 0;
-        bottom: -1px;
-      }
+    img.wave {
+      position: absolute;
+      left: 0;
+      bottom: -1px;
     }
+  }
 
-    section.hero {
-      height: calc(100vh - 56px);
+  section.hero {
+    height: calc(100vh - 56px);
 
-      background: linear-gradient(45deg, var(--ion-color-dark) 5%, var(--ion-color-tertiary) 95%);
-      color: var(--ion-color-dark-contrast);
+    background: linear-gradient(45deg, var(--ion-color-dark) 5%, var(--ion-color-tertiary) 95%);
+    color: var(--ion-color-dark-contrast);
 
+    div.content {
       display: grid;
       grid-template-columns: repeat(2, 50%);
 
+      height: 100%;
+
       @media (max-width: 992px) {
         grid-template-columns: 100%;
       }
@@ -76,10 +86,12 @@ app-enterprise {
         z-index: 2;
       }
     }
+  }
 
-    section.intro {
-      background: white;
+  section.intro {
+    background: white;
 
+    div.content {
       display: grid;
       grid-template-columns: repeat(2, 50%);
       grid-template-rows: auto;
@@ -132,13 +144,19 @@ app-enterprise {
         }
       }
     }
+  }
 
-    img.separator {
-      &.intro {
+  div.separator {
+    &.intro {
+      img {
         background: white;
       }
+    }
+
+    &.features {
+      background: white;
 
-      &.features {
+      img {
         background: var(--ion-color-light);
       }
     }
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index 4a964c4ce..7b5f1ac2e 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -22,8 +22,8 @@ export class AppEnterprise {
     return [
       <app-navigation presentation={true}></app-navigation>,
       <ion-content>
-        <main>
-          <section class="hero">
+        <section class="hero">
+          <div class="content">
             <div>
               <h1>The unbreakable slides for your corporate communication.</h1>
               <h3 style={{'font-weight': '300'}}>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</h3>
@@ -32,11 +32,13 @@ export class AppEnterprise {
                 <ion-label style={{'text-transform': 'none'}}>Get in touch</ion-label>
               </ion-button>
             </div>
+          </div>
 
-            <img class="wave" src={`/assets/img/landing/wave-start.svg`} role="presentation" />
-          </section>
+          <img class="wave" src={`/assets/img/landing/wave-start.svg`} role="presentation" />
+        </section>
 
-          <section class="intro">
+        <section class="intro">
+          <div class="content">
             <blockquote>
               <span>❝</span>
               <p>Did you had a look to Bob's last presentation? He used our old logo and made it green, again.</p>
@@ -60,18 +62,22 @@ export class AppEnterprise {
                 Discover more features <ion-icon src="/assets/icons/ionicons/arrow-forward.svg"></ion-icon>
               </button>
             </div>
-          </section>
+          </div>
+        </section>
 
-          <img class="separator intro" src={`/assets/img/landing/wave-introducing.svg`} role="presentation" loading="lazy" />
+        <div class="separator intro">
+          <img src={`/assets/img/landing/wave-introducing.svg`} role="presentation" loading="lazy" />
+        </div>
 
-          <app-features ref={(el) => (this.featuresRef = el as HTMLElement)}></app-features>
+        <app-features ref={(el) => (this.featuresRef = el as HTMLElement)}></app-features>
 
-          <img class="separator features" src={`/assets/img/landing/wave-audience.svg`} role="presentation" loading="lazy" />
+        <div class="separator features">
+          <img src={`/assets/img/landing/wave-audience.svg`} role="presentation" loading="lazy" />
+        </div>
 
-          <app-contact-form ref={(el) => (this.formRef = el as HTMLElement)}></app-contact-form>
+        <app-contact-form ref={(el) => (this.formRef = el as HTMLElement)}></app-contact-form>
 
-          <app-section-footer action={false}></app-section-footer>
-        </main>
+        <app-section-footer action={false}></app-section-footer>
       </ion-content>,
     ];
   }

From 4b105dc758e59070bc8a4b569d94fa0e4c0825e1 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 26 Jun 2020 13:07:03 +0200
Subject: [PATCH 11/29] style: font weight

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 studio/src/app/pages/core/app-enterprise/app-enterprise.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index 9c65a8e20..368d78064 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -27,7 +27,7 @@ app-enterprise {
 
       h1 {
         font-size: 48px;
-        font-weight: 600;
+        font-weight: 700;
       }
 
       h2 {
@@ -40,7 +40,7 @@ app-enterprise {
 
       h2,
       h3 {
-        font-weight: 500;
+        font-weight: 400;
       }
 
       p,

From 3812d1630b0960d3449c02eeaa25c86dc05ef7ac Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 27 Jun 2020 18:41:24 +0200
Subject: [PATCH 12/29] feat: not to open source for corporate

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../components/enterprise/app-features/app-features.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 14934a71a..9046438ff 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -204,16 +204,19 @@ export class AppFeatures {
             <h3>Open source</h3>
 
             <p>
-              DeckDeckGo is open source. The code of our applications and components are available on&nbsp;
+              DeckDeckGo is open source. All the code of our applications and components are available on&nbsp;
               <a href="http://github.com/deckgo/deckdeckgo">
                 <ion-icon name="logo-github" area-label="Github"></ion-icon> Github
               </a>
               .
             </p>
+
+            <p>We encourage enterprise to adopt this approach but we do understand if you rather like to keep your corporate templates private.</p>
           </article>
 
           <p>
-            <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available upon request for organizations.
+            * Above features identified as <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available upon request for
+            organizations.
           </p>
         </div>
       </section>

From 85d5c8d626ac0affc491b1417561095134f87bba Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 27 Jun 2020 18:42:47 +0200
Subject: [PATCH 13/29] feat: add charts to list of features

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app/components/enterprise/app-features/app-features.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 9046438ff..0c8b9e1d7 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -136,6 +136,12 @@ export class AppFeatures {
             <p>Render math formula with Katex in your slides.</p>
           </article>
 
+          <article>
+            <h3>Charts</h3>
+
+            <p>Plot simple lines, area, bar, pie or donut charts.</p>
+          </article>
+
           <h2>Presenting</h2>
 
           <article>

From ea092971676535f87d088037f7977a939d900ec8 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 27 Jun 2020 18:54:53 +0200
Subject: [PATCH 14/29] feat: form required fields and number of employees

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-contact-form/app-contact-form.scss         |  4 ++++
 .../app-contact-form/app-contact-form.tsx          | 14 +++++++++++---
 .../enterprise/app-features/app-features.tsx       |  4 ++--
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
index c9383bb73..09e5cb2b6 100644
--- a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
@@ -21,6 +21,10 @@ section.contact {
         width: fit-content;
         align-self: center;
       }
+
+      small {
+        font-weight: 300;
+      }
     }
   }
 }
diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
index d8cc2801d..33700f2a0 100644
--- a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
@@ -38,21 +38,25 @@ export class AppContactForm {
 
             <ion-list class="inputs-list">
               <ion-item>
-                <ion-input required={true} input-mode="text" name="company" placeholder="Your company"></ion-input>
+                <ion-input required={true} input-mode="text" name="company" placeholder="Your company *"></ion-input>
               </ion-item>
 
               <ion-item>
-                <ion-input required={true} input-mode="text" name="name" placeholder="Your name"></ion-input>
+                <ion-input required={true} input-mode="text" name="name" placeholder="Your name *"></ion-input>
               </ion-item>
 
               <ion-item>
-                <ion-input required={true} input-mode="email" name="_replyto" placeholder="Your email"></ion-input>
+                <ion-input required={true} input-mode="email" name="_replyto" placeholder="Your email *"></ion-input>
               </ion-item>
 
               <ion-item>
                 <ion-input input-mode="tel" name="phone" placeholder="Your phone"></ion-input>
               </ion-item>
 
+              <ion-item>
+                <ion-input input-mode="tel" name="employees" placeholder="Number of employees"></ion-input>
+              </ion-item>
+
               <ion-item>
                 <ion-textarea name="message" placeholder="Your message" rows={4}></ion-textarea>
               </ion-item>
@@ -66,6 +70,10 @@ export class AppContactForm {
               </ion-button>
             )}
             {this.status === 'ERROR' && <p class="ion-margin-top">Ooops! There was an error.</p>}
+
+            <div>
+              <small>* required field</small>
+            </div>
           </form>
         </div>
       </section>
diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 0c8b9e1d7..3772c16f3 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -221,8 +221,8 @@ export class AppFeatures {
           </article>
 
           <p>
-            * Above features identified as <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> are available upon request for
-            organizations.
+            <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon> Above features identified with an "enterprise" icon are available upon
+            request for organizations.
           </p>
         </div>
       </section>

From a2180d3a2ef30979bfb7f7e1bfa3d5f76dbdeabb Mon Sep 17 00:00:00 2001
From: Nicolas Mattia <nicolas@nmattia.com>
Date: Mon, 29 Jun 2020 10:47:52 +0200
Subject: [PATCH 15/29] feat: rework enterprise texts

---
 .../enterprise/app-features/app-features.tsx  | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 3772c16f3..bc04cd197 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -15,13 +15,13 @@ export class AppFeatures {
           <article>
             <h3>Edit anywhere</h3>
 
-            <p>The editor is available anywhere, it is a Progressive Web Apps!</p>
+            <p>The editor is available anywhere, it is a Progressive Web App!</p>
           </article>
 
           <article>
             <h3>Showcase everywhere</h3>
 
-            <p>Presentations work on any device. These are published are standalone apps.</p>
+            <p>Presentations work on phones, tablets, computers and more. They are published as standalone apps.</p>
           </article>
 
           <article>
@@ -33,7 +33,7 @@ export class AppFeatures {
           <article>
             <h3>Share standalone apps</h3>
 
-            <p>Your presentation are published as standalone Progressive Web Apps. It only needs a link to share them.</p>
+            <p>Your presentation are published as standalone Progressive Web Apps. Share them by sending your friends a link.</p>
           </article>
 
           <article>
@@ -41,7 +41,7 @@ export class AppFeatures {
               Share privately <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Create private links to restrain the access to your published content.</p>
+            <p>Create private links to prevent access to your published content.</p>
           </article>
 
           <article>
@@ -49,13 +49,13 @@ export class AppFeatures {
               Export to PDF <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>If you rather like PDF over apps.</p>
+            <p>If you like PDF more than apps.</p>
           </article>
 
           <article>
             <h3>Polls</h3>
 
-            <p>Engage your audience in real time. Involve them to contribute to your presentations with their smartphones and show the results live.</p>
+            <p>Engage with your audience in real time. Get them involved during your presentations with their smartphones and show the results live.</p>
           </article>
 
           <article>
@@ -71,7 +71,7 @@ export class AppFeatures {
               Unbreakable templates <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</p>
+            <p>Keep your corporate identity and design up-to-date across all presentations and share them easily.</p>
           </article>
 
           <article>
@@ -89,19 +89,19 @@ export class AppFeatures {
           <article>
             <h3>Cloud library</h3>
 
-            <p>All images or data your are uploading are saved in your personal cloud storage and available to all your slides.</p>
+            <p>All data (text, images, etc) your upload are saved in your personal cloud storage and available to all slides.</p>
           </article>
 
           <article>
             <h3>Youtube</h3>
 
-            <p>Embed easily Youtube videos. Play and pause through the remote control.</p>
+            <p>Embed YouTube videos easily. Play and pause through the remote control.</p>
           </article>
 
           <article>
             <h3>Unsplash and Giphy</h3>
 
-            <p>Search and integrate freely stock photos and gifs.</p>
+            <p>Search and integrate stock photos and gifs.</p>
           </article>
 
           <article>
@@ -127,13 +127,13 @@ export class AppFeatures {
           <article>
             <h3>Transition</h3>
 
-            <p>Make individual text element appear one after the others.</p>
+            <p>Make individual text elements appear one after the others.</p>
           </article>
 
           <article>
             <h3>Math</h3>
 
-            <p>Render math formula with Katex in your slides.</p>
+            <p>Render Math formulas with Katex in your slides.</p>
           </article>
 
           <article>
@@ -147,7 +147,7 @@ export class AppFeatures {
           <article>
             <h3>Remote control</h3>
 
-            <p>Remote control your presentations, draw over your slides and set timer from your phone, tablet or any devices.</p>
+            <p>Control your presentations remotely, draw over your slides and set a timer from your phone or tablet.</p>
           </article>
 
           <article>
@@ -171,7 +171,7 @@ export class AppFeatures {
               Custom domain <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Publish your decks under with your org domain name.</p>
+            <p>Publish your decks under your own domain name.</p>
           </article>
 
           <article>
@@ -187,7 +187,7 @@ export class AppFeatures {
               Collaborate <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Multiple concurrent users can edit the same presentation at the same time.</p>
+            <p>Multiple users can edit a presentation at the same time.</p>
           </article>
 
           <article>
@@ -203,7 +203,7 @@ export class AppFeatures {
           <article>
             <h3>Developer Kit</h3>
 
-            <p>You rather like to code your presentation with HTML or Markdown? All public features used by our editor are available in a developer kit.</p>
+            <p>Would you rather prepare your presentation with HTML or Markdown? All public features used by our editor are available as a developer kit.</p>
           </article>
 
           <article>
@@ -217,7 +217,7 @@ export class AppFeatures {
               .
             </p>
 
-            <p>We encourage enterprise to adopt this approach but we do understand if you rather like to keep your corporate templates private.</p>
+            <p>We encourage enterprise to adopt this approach but we do understand if you prefer to keep your corporate templates private.</p>
           </article>
 
           <p>

From a6d6910939a39a164c044bd9ff573828f4e50fd4 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Mon, 29 Jun 2020 15:38:23 +0200
Subject: [PATCH 16/29] feat: as discussed, small text update

---
 .../app/components/enterprise/app-features/app-features.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index bc04cd197..ac4171eb7 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -21,7 +21,7 @@ export class AppFeatures {
           <article>
             <h3>Showcase everywhere</h3>
 
-            <p>Presentations work on phones, tablets, computers and more. They are published as standalone apps.</p>
+            <p>Presentations work on computers, phones, tablets and more. They are published as standalone apps.</p>
           </article>
 
           <article>
@@ -33,7 +33,7 @@ export class AppFeatures {
           <article>
             <h3>Share standalone apps</h3>
 
-            <p>Your presentation are published as standalone Progressive Web Apps. Share them by sending your friends a link.</p>
+            <p>Your presentation are published as standalone Progressive Web Apps. Share them by sending your colleagues and friends a link.</p>
           </article>
 
           <article>

From 34cbf52ea0a616da34029cfe3b09c375126902cb Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Jul 2020 20:58:13 +0200
Subject: [PATCH 17/29] style: margin top for required fields

---
 .../components/enterprise/app-contact-form/app-contact-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
index 33700f2a0..9b86ff49a 100644
--- a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
@@ -71,7 +71,7 @@ export class AppContactForm {
             )}
             {this.status === 'ERROR' && <p class="ion-margin-top">Ooops! There was an error.</p>}
 
-            <div>
+            <div class="ion-margin-top">
               <small>* required field</small>
             </div>
           </form>

From 9c212e942ec69251b53562f04a9efbed8a5f4835 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Jul 2020 21:07:03 +0200
Subject: [PATCH 18/29] style: opaque background and spacing

---
 .../src/app/pages/core/app-enterprise/app-enterprise.scss   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index 368d78064..c43b54b4c 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -66,7 +66,7 @@ app-enterprise {
   section.hero {
     height: calc(100vh - 56px);
 
-    background: linear-gradient(45deg, var(--ion-color-dark) 5%, var(--ion-color-tertiary) 95%);
+    background: var(--ion-color-dark);
     color: var(--ion-color-dark-contrast);
 
     div.content {
@@ -75,6 +75,10 @@ app-enterprise {
 
       height: 100%;
 
+      h1 {
+        margin-top: 0;
+      }
+
       @media (max-width: 992px) {
         grid-template-columns: 100%;
       }

From 1b564afe4a9d4c0a602f87a803155612a19cc151 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sun, 12 Jul 2020 16:17:23 +0200
Subject: [PATCH 19/29] feat: add address, support and improve title contrast

---
 .../enterprise/app-contact-form/app-contact-form.scss     | 8 ++++++++
 .../enterprise/app-contact-form/app-contact-form.tsx      | 7 +++++++
 .../components/enterprise/app-features/app-features.scss  | 2 --
 .../components/enterprise/app-features/app-features.tsx   | 8 ++++++++
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
index 09e5cb2b6..26d60a903 100644
--- a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.scss
@@ -20,6 +20,14 @@ section.contact {
       p {
         width: fit-content;
         align-self: center;
+
+        &.address {
+          white-space: pre-wrap;
+          text-align: center;
+          margin: 64px 16px 0;
+          font-size: var(--font-size-normal);
+          line-height: calc(var(--font-size-normal) + 8px);
+        }
       }
 
       small {
diff --git a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
index 9b86ff49a..1e4f43ba0 100644
--- a/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
+++ b/studio/src/app/components/enterprise/app-contact-form/app-contact-form.tsx
@@ -74,6 +74,13 @@ export class AppContactForm {
             <div class="ion-margin-top">
               <small>* required field</small>
             </div>
+
+            <p class="ion-margin-top address">
+              {`DeckDeckGo
+c/o The Hub Zürich Association
+Sihlquai 131
+8005 Zürich, Switzerland`}
+            </p>
           </form>
         </div>
       </section>
diff --git a/studio/src/app/components/enterprise/app-features/app-features.scss b/studio/src/app/components/enterprise/app-features/app-features.scss
index 3a7fee21d..ea054a20a 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.scss
+++ b/studio/src/app/components/enterprise/app-features/app-features.scss
@@ -32,8 +32,6 @@ app-features {
       }
 
       > h2 {
-        color: rgba(var(--ion-color-medium-rgb), 0.4);
-
         &:not(:first-of-type) {
           margin-top: 48px;
         }
diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index ac4171eb7..cd5750f47 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -198,6 +198,14 @@ export class AppFeatures {
             <p>Organize your company's media library and share it with your teams.</p>
           </article>
 
+          <article>
+            <h3>
+              Support <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
+
+            <p>Your inquiries have the highest priorities.</p>
+          </article>
+
           <h2>Developers</h2>
 
           <article>

From 6463ee771bd998930a1f4ced5769383f8a2318be Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Mon, 13 Jul 2020 16:23:59 +0200
Subject: [PATCH 20/29] feat: review text with inputs from test panel

---
 .../enterprise/app-features/app-features.tsx          | 10 +++++++++-
 .../app/pages/core/app-enterprise/app-enterprise.scss |  4 ++++
 .../app/pages/core/app-enterprise/app-enterprise.tsx  | 11 ++++++-----
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index cd5750f47..9c91effca 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -71,7 +71,7 @@ export class AppFeatures {
               Unbreakable templates <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Keep your corporate identity and design up-to-date across all presentations and share them easily.</p>
+            <p>Apply your design, colors, fonts, styles and any other options to your templates. These are those used by your collaborators, period.</p>
           </article>
 
           <article>
@@ -174,6 +174,14 @@ export class AppFeatures {
             <p>Publish your decks under your own domain name.</p>
           </article>
 
+          <article>
+            <h3>
+              Always up-to-date <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
+            </h3>
+
+            <p>Spread your corporate design improvements to all your presentations.</p>
+          </article>
+
           <article>
             <h3>
               Archive <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index c43b54b4c..9d34b729d 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -137,6 +137,10 @@ app-enterprise {
           margin: 0 16px;
           color: var(--ion-color-medium);
           font-style: italic;
+
+          &:last-of-type {
+            margin: 16px;
+          }
         }
       }
 
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index 7b5f1ac2e..f0eeaa23d 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -26,7 +26,7 @@ export class AppEnterprise {
           <div class="content">
             <div>
               <h1>The unbreakable slides for your corporate communication.</h1>
-              <h3 style={{'font-weight': '300'}}>Distribute and keep up-to-date your corporate identity and design across all your company's presentations.</h3>
+              <h3 style={{'font-weight': '300'}}>Apply your corporate identity and design to your company's presentations.</h3>
 
               <ion-button class="ion-margin-top" shape="round" onClick={() => this.scrollTo(this.formRef)} mode="md" color="tertiary">
                 <ion-label style={{'text-transform': 'none'}}>Get in touch</ion-label>
@@ -42,15 +42,16 @@ export class AppEnterprise {
             <blockquote>
               <span>❝</span>
               <p>Did you had a look to Bob's last presentation? He used our old logo and made it green, again.</p>
+
+              <p>- A sentence your marketing team wish to not hear anymore.</p>
             </blockquote>
 
             <h2>Templates and options that match your CI/CD.</h2>
 
             <div>
-              <p>
-                Unlike any other editor for presentations, DeckDeckGo assists you in applying your corporate identity to your company's presentations. The
-                templates and set of options you are defining are those your collaborators are using.
-              </p>
+              <p>Unlike any other editor for presentations, DeckDeckGo assists you in applying your corporate identity to your company's presentations.</p>
+
+              <p>The design, colors, fonts, styles and any other options you are defining in your templates are those your collaborators are using.</p>
             </div>
 
             <div>

From efe5c27f61a50a56b9db59ad8d1df97c2edeec2c Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Mon, 13 Jul 2020 16:36:21 +0200
Subject: [PATCH 21/29] feat: always display menu entry discover

---
 studio/src/app/components/core/app-menu/app-menu.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/studio/src/app/components/core/app-menu/app-menu.tsx b/studio/src/app/components/core/app-menu/app-menu.tsx
index df016c495..c63e72eb1 100644
--- a/studio/src/app/components/core/app-menu/app-menu.tsx
+++ b/studio/src/app/components/core/app-menu/app-menu.tsx
@@ -104,10 +104,6 @@ export class AppMenu {
   }
 
   private renderDiscover() {
-    if (authStore.state.loggedIn) {
-      return undefined;
-    }
-
     return (
       <ion-item button class="home" href="/discover" routerDirection="forward">
         <ion-icon lazy={true} name="search-outline" slot="start"></ion-icon>

From 5476b3be3052dd4c88ce0daf41936141cb2fab07 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Mon, 13 Jul 2020 19:08:02 +0200
Subject: [PATCH 22/29] feat: text review

---
 .../app/components/enterprise/app-features/app-features.tsx   | 4 ++--
 studio/src/app/pages/core/app-enterprise/app-enterprise.scss  | 4 ----
 studio/src/app/pages/core/app-enterprise/app-enterprise.tsx   | 4 +---
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 9c91effca..a1e287f70 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -71,7 +71,7 @@ export class AppFeatures {
               Unbreakable templates <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Apply your design, colors, fonts, styles and any other options to your templates. These are those used by your collaborators, period.</p>
+            <p>Apply your design, colors, fonts, styles and any other options to your templates. Those will be used by all your collaborators.</p>
           </article>
 
           <article>
@@ -179,7 +179,7 @@ export class AppFeatures {
               Always up-to-date <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Spread your corporate design improvements to all your presentations.</p>
+            <p>Propagate your corporate design improvements to all your presentations.</p>
           </article>
 
           <article>
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index 9d34b729d..c43b54b4c 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -137,10 +137,6 @@ app-enterprise {
           margin: 0 16px;
           color: var(--ion-color-medium);
           font-style: italic;
-
-          &:last-of-type {
-            margin: 16px;
-          }
         }
       }
 
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index f0eeaa23d..304ab99bc 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -41,9 +41,7 @@ export class AppEnterprise {
           <div class="content">
             <blockquote>
               <span>❝</span>
-              <p>Did you had a look to Bob's last presentation? He used our old logo and made it green, again.</p>
-
-              <p>- A sentence your marketing team wish to not hear anymore.</p>
+              <p>Did you have a look at Bob's presentation? He used the wrong logo, again.</p>
             </blockquote>
 
             <h2>Templates and options that match your CI/CD.</h2>

From dc8886075b1b0d41b4101fcd30bbe7617e38453e Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Tue, 21 Jul 2020 15:56:55 +0200
Subject: [PATCH 23/29] fix: we are using Tenor not Giphy

---
 .../src/app/components/enterprise/app-features/app-features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index a1e287f70..6ef80be3f 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -99,7 +99,7 @@ export class AppFeatures {
           </article>
 
           <article>
-            <h3>Unsplash and Giphy</h3>
+            <h3>Unsplash and Tenor</h3>
 
             <p>Search and integrate stock photos and gifs.</p>
           </article>

From 35eac96ac9db5757a154c3b6810401e656f1cf4f Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Tue, 28 Jul 2020 20:40:33 +0200
Subject: [PATCH 24/29] merge: from master

---
 CHANGELOG.md                                  |  14 +-
 README.md                                     |   2 +-
 docs/CHANGELOG.md                             |   6 +
 .../app-components-color.md                   |  27 ++-
 docs/package-lock.json                        |   2 +-
 docs/package.json                             |   2 +-
 webcomponents/color/CHANGELOG.md              |  12 ++
 webcomponents/color/package-lock.json         | 155 +++++++-----------
 webcomponents/color/package.json              |   8 +-
 webcomponents/color/src/components.d.ts       |   2 +-
 .../src/components/color/deckdeckgo-color.tsx |   2 +-
 11 files changed, 119 insertions(+), 113 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3f70d5c3..60c7c3239 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,18 @@
+<a name="2.1.0"></a>
+
+# [2.1.0](https://github.com/deckgo/deckdeckgo/compare/v2.0.0...v2.1.0) (In progress..)
+
+### Applications
+
+- docs: v1.7.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+
+### Web Components
+
+- color: v2.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
+
 <a name="2.0.0"></a>
 
-# [2.0.0](https://github.com/deckgo/deckdeckgo/compare/v1.5.0...v1.6.0) (In progress...)
+# [2.0.0](https://github.com/deckgo/deckdeckgo/compare/v1.5.0...v2.0.0) (2020-07-23)
 
 ### Breaking Changes
 
diff --git a/README.md b/README.md
index 69437c8b9..1dbb7753e 100644
--- a/README.md
+++ b/README.md
@@ -47,7 +47,7 @@ Are you interested to contribute to our open source project? That would be aweso
 | ------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | :--------------------------------------------------: | :--------------------------------: |
 | **Studio**         | [![version](https://img.shields.io/static/v1.svg?label=production&message=v2.0.0&color=success)](https://deckdeckgo.com)      | [https://deckdeckgo.com](https://deckdeckgo.com)           |             [`README`](studio/README.md)             | [`CHANGELOG`](studio/CHANGELOG.md) |
 | **Remote control** | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.6.0&color=success)](https://deckdeckgo.app)      | [https://deckdeckgo.app](https://deckdeckgo.app)           |             [`README`](remote/README.md)             | [`CHANGELOG`](remote/CHANGELOG.md) |
-| **Documentation**  | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.7.0&color=success)](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) |              [`README`](docs/README.md)              |  [`CHANGELOG`](docs/CHANGELOG.md)  |
+| **Documentation**  | [![version](https://img.shields.io/static/v1.svg?label=production&message=v1.7.1&color=success)](https://docs.deckdeckgo.com) | [https://docs.deckdeckgo.com](https://docs.deckdeckgo.com) |              [`README`](docs/README.md)              |  [`CHANGELOG`](docs/CHANGELOG.md)  |
 | **Demo**           | [![version](https://img.shields.io/static/v1.svg?label=production&message=v2.4.0&color=success)](https://demo.deckdeckgo.com) | [https://demo.deckdeckgo.com](https://demo.deckdeckgo.com) | [`Repo`](https://github.com/deckgo/deckdeckgo-demo/) |                                    |
 
 ## Web Components
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index a9430b16f..279802291 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.7.1 (2020-07-28)
+
+### Features
+
+- `part` option for `@deckdeckgo/color` component
+
 # 1.7.0 (2020-07-11)
 
 ### Features
diff --git a/docs/docs/components/app-components-color/app-components-color.md b/docs/docs/components/app-components-color/app-components-color.md
index efd99754c..15d364988 100644
--- a/docs/docs/components/app-components-color/app-components-color.md
+++ b/docs/docs/components/app-components-color/app-components-color.md
@@ -6,14 +6,21 @@ It is fully configurable in terms of colors, you could define the set of colors
 
 ## Table of contents
 
-- [Showcase](#app-components-color-showcase)
-- [Installation](#app-components-color-installation) - [Using from a CDN](#app-components-color-from-a-cdn) - [Install from NPM](#app-components-color-from-npm) - [Framework integration](#app-components-color-framework-integration)
-- [Usage](#app-components-color-usage)
-  - [Slots](#app-components-color-slots)
-  - [Attributes](#app-components-color-attributes)
-  - [Theming](#app-components-color-theming)
-  - [Methods](#app-components-color-methods)
-- [Trying it out](#app-components-color-trying-it-out)
+- [Color Picker](#color-picker)
+  - [Table of contents](#table-of-contents)
+  - [Showcase](#showcase)
+  - [Installation](#installation)
+    - [Using from a CDN](#using-from-a-cdn)
+    - [Install from NPM](#install-from-npm)
+    - [Framework integration](#framework-integration)
+      - [Import](#import)
+      - [Loader](#loader)
+  - [Usage](#usage)
+    - [Slots](#slots)
+    - [Attributes](#attributes)
+      - [Palette](#palette)
+    - [Theming](#theming)
+    - [Events](#events)
 
 ## Showcase
 
@@ -225,6 +232,10 @@ The following theming options will affect this component if set on its host or p
 | --deckgo-color-label-text-align        | center      | Text alignment of the color description                       |
 | --deckgo-color-label-color-font-weight | 300         | Font weight of the hexadecimal value of the color description |
 
+| Shadow-DOM part | Note                                                   |
+| --------------- | ------------------------------------------------------ |
+| container       | Allows to style the container the color buttons are in |
+
 ### Events
 
 To listen to the selected color you have to subscribe to the following event:
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 6512a2f60..671403a72 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/docs/package.json b/docs/package.json
index bb686c930..a92e55280 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
diff --git a/webcomponents/color/CHANGELOG.md b/webcomponents/color/CHANGELOG.md
index 354b585f5..00a6cad7c 100644
--- a/webcomponents/color/CHANGELOG.md
+++ b/webcomponents/color/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 2.1.1 (2020-07-28)
+
+### Fix
+
+- bump for npmjs publishing
+
+# 2.1.0 (2020-07-28)
+
+### Features
+
+- allow container to be access via `part` ([#811](https://github.com/deckgo/deckdeckgo/pull/811))
+
 # 2.0.0 (2020-05-15)
 
 ### Breaking
diff --git a/webcomponents/color/package-lock.json b/webcomponents/color/package-lock.json
index f95d90b5a..80a43a32c 100644
--- a/webcomponents/color/package-lock.json
+++ b/webcomponents/color/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/color",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -45,12 +45,12 @@
       "integrity": "sha512-/bomB2gBlEuXmLSXCHujABB1EYDTrcK/IQaH9NFh6ZUB+dEfb3L3uCof8RyUvQcEzqhVJJa63ZBnDnitJSOWYg=="
     },
     "@stencil/core": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.13.0.tgz",
-      "integrity": "sha512-++kIXaEgmwm/vq+9QAVHPuLLddCKVdJyI8OfHxknkpu5udxZMYA/vaN/K9i+2NIiTLbGpvHNk9E+RyYzKxS0XQ==",
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.17.2.tgz",
+      "integrity": "sha512-jNEpBxoQFk6J1kSmm84AL/qgN0hySmKN5FZ0Pr16RAZU2TwKRLE1W2V8GcJXOFqd3yDVV+/4Fmyl1DD74/zbiQ==",
       "dev": true,
       "requires": {
-        "typescript": "3.8.3"
+        "typescript": "3.9.7"
       }
     },
     "@stencil/postcss": {
@@ -63,9 +63,9 @@
       }
     },
     "@stencil/sass": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-1.3.1.tgz",
-      "integrity": "sha512-5qsEyhLGTywpG4zlWv6eBhhj/z2Z37nbUGa87Ak0KqfsEiclJCYRA/AMM9FiN1jHfBvr968G4zE8rNlYmiPLsQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-1.3.2.tgz",
+      "integrity": "sha512-w6rkOsRIPY1rBa/13Wf+rMZrOzc6z86/Mkp3inzaYGsxBmLkf4PeP1rfaUB4SFDVRfMduP7FTd4ZJi/+FVrsMw==",
       "dev": true
     },
     "@types/color-name": {
@@ -114,18 +114,31 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.7.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
-      "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
+      "version": "9.8.5",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.5.tgz",
+      "integrity": "sha512-C2p5KkumJlsTHoNv9w31NrBRgXhf6eCMteJuHZi2xhkgC+5Vm40MEtCKPhc0qdgAOhox0YPy1SQHTAky05UoKg==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.11.1",
-        "caniuse-lite": "^1.0.30001039",
-        "chalk": "^2.4.2",
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001097",
+        "colorette": "^1.2.0",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.27",
-        "postcss-value-parser": "^4.0.3"
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        }
       }
     },
     "balanced-match": {
@@ -145,15 +158,15 @@
       }
     },
     "browserslist": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-      "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.13.0.tgz",
+      "integrity": "sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001043",
-        "electron-to-chromium": "^1.3.413",
-        "node-releases": "^1.1.53",
-        "pkg-up": "^2.0.0"
+        "caniuse-lite": "^1.0.30001093",
+        "electron-to-chromium": "^1.3.488",
+        "escalade": "^3.0.1",
+        "node-releases": "^1.1.58"
       }
     },
     "callsites": {
@@ -163,9 +176,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001055",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001055.tgz",
-      "integrity": "sha512-MbwsBmKrBSKIWldfdIagO5OJWZclpJtS4h0Jrk/4HFrXJxTdVdH23Fd+xCiHriVGvYcWyW8mR/CPsYajlH8Iuw==",
+      "version": "1.0.30001107",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001107.tgz",
+      "integrity": "sha512-86rCH+G8onCmdN4VZzJet5uPELII59cUzDphko3thQFgAQG1RNa+sVLDoALIhRYmflo5iSIzWY3vu1XTWtNMQQ==",
       "dev": true
     },
     "chalk": {
@@ -211,6 +224,12 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
+      "dev": true
+    },
     "compare-versions": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
@@ -248,9 +267,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.432",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
-      "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
+      "version": "1.3.510",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.510.tgz",
+      "integrity": "sha512-sLtGB0znXdmo6lM8hy5wTVo+fLqvIuO8hEpgc0DvPmFZqvBu/WB7AarEwhxVKjf3rVbws/rC8Xf+AlsOb36lJQ==",
       "dev": true
     },
     "end-of-stream": {
@@ -271,6 +290,12 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "escalade": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
+      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
+      "dev": true
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -500,9 +525,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.55",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
-      "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
+      "version": "1.1.60",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.60.tgz",
+      "integrity": "sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==",
       "dev": true
     },
     "normalize-range": {
@@ -628,66 +653,6 @@
         "find-up": "^4.0.0"
       }
     },
-    "pkg-up": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
-      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
-      "dev": true,
-      "requires": {
-        "find-up": "^2.1.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "dev": true,
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "dev": true,
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "dev": true,
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "dev": true,
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
-      }
-    },
     "please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -817,9 +782,9 @@
       }
     },
     "typescript": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz",
+      "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
       "dev": true
     },
     "which": {
diff --git a/webcomponents/color/package.json b/webcomponents/color/package.json
index 77df725ff..240a7dc37 100644
--- a/webcomponents/color/package.json
+++ b/webcomponents/color/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/color",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "A color picker developed with Web Components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -23,10 +23,10 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@stencil/core": "^1.13.0",
+    "@stencil/core": "^1.17.2",
     "@stencil/postcss": "^1.0.1",
-    "@stencil/sass": "^1.3.1",
-    "autoprefixer": "^9.7.6",
+    "@stencil/sass": "^1.3.2",
+    "autoprefixer": "^9.8.5",
     "husky": "^4.2.5",
     "prettier": "2.0.5",
     "pretty-quick": "^2.0.1"
diff --git a/webcomponents/color/src/components.d.ts b/webcomponents/color/src/components.d.ts
index 0574bb3a7..4d17491fa 100644
--- a/webcomponents/color/src/components.d.ts
+++ b/webcomponents/color/src/components.d.ts
@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { DeckdeckgoPalette, DeckdeckgoPaletteColor, } from "./utils/deckdeckgo-palette";
+import { DeckdeckgoPalette, DeckdeckgoPaletteColor } from "./utils/deckdeckgo-palette";
 export namespace Components {
     interface DeckgoColor {
         "colorHex": string;
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.tsx b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
index 08b5c693e..7fe779843 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.tsx
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
@@ -237,7 +237,7 @@ export class DeckdeckgoColor {
   render() {
     return (
       <Host>
-        <div class="color-container">
+        <div class="color-container" part="container">
           {this.renderPalette()}
           {this.renderMore()}
         </div>

From 0306166deb0e9224ddd344742fbaa739e4088561 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Tue, 28 Jul 2020 21:00:51 +0200
Subject: [PATCH 25/29] feat: Matt's inputs

---
 .../enterprise/app-features/app-features.tsx           |  2 +-
 .../app/pages/core/app-enterprise/app-enterprise.scss  |  4 ++--
 .../app/pages/core/app-enterprise/app-enterprise.tsx   | 10 ++++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/studio/src/app/components/enterprise/app-features/app-features.tsx b/studio/src/app/components/enterprise/app-features/app-features.tsx
index 6ef80be3f..41af82524 100644
--- a/studio/src/app/components/enterprise/app-features/app-features.tsx
+++ b/studio/src/app/components/enterprise/app-features/app-features.tsx
@@ -163,7 +163,7 @@ export class AppFeatures {
               In housing <ion-icon name="business-outline" aria-label="Enterprise only"></ion-icon>
             </h3>
 
-            <p>Integrate DeckDeckGo in your infrastructure and private network.</p>
+            <p>Integrate DeckDeckGo into your private infrastructure and networks.</p>
           </article>
 
           <article>
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
index c43b54b4c..d693c0fd3 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.scss
@@ -26,7 +26,7 @@ app-enterprise {
       }
 
       h1 {
-        font-size: 48px;
+        font-size: 42px;
         font-weight: 700;
       }
 
@@ -71,7 +71,7 @@ app-enterprise {
 
     div.content {
       display: grid;
-      grid-template-columns: repeat(2, 50%);
+      grid-template-columns: 60% 40%;
 
       height: 100%;
 
diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index 304ab99bc..5eb072957 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -25,8 +25,10 @@ export class AppEnterprise {
         <section class="hero">
           <div class="content">
             <div>
-              <h1>The unbreakable slides for your corporate communication.</h1>
-              <h3 style={{'font-weight': '300'}}>Apply your corporate identity and design to your company's presentations.</h3>
+              <h1>Professional presentation building, custom tailored to your brand.</h1>
+              <h3 style={{'font-weight': '300'}}>
+                Easily apply your corporate identity and design across all your company’s presentations. Secure distribution and maintenance.
+              </h3>
 
               <ion-button class="ion-margin-top" shape="round" onClick={() => this.scrollTo(this.formRef)} mode="md" color="tertiary">
                 <ion-label style={{'text-transform': 'none'}}>Get in touch</ion-label>
@@ -41,7 +43,7 @@ export class AppEnterprise {
           <div class="content">
             <blockquote>
               <span>❝</span>
-              <p>Did you have a look at Bob's presentation? He used the wrong logo, again.</p>
+              <p>Did you see Bob’s presentation? He used the wrong logo, again.</p>
             </blockquote>
 
             <h2>Templates and options that match your CI/CD.</h2>
@@ -53,7 +55,7 @@ export class AppEnterprise {
             </div>
 
             <div>
-              <p>Together with your designers, we create unbreakable slides.</p>
+              <p>Together with your designers, we create unbreakable slides for your design systems.</p>
 
               <p>Moreover, rolling out new design and logo has never been so easy and DeckDeckGo can offer so much more.</p>
 

From 4c8eae63866061c610a31b2dce54681a3bf1fb91 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Tue, 28 Jul 2020 21:07:19 +0200
Subject: [PATCH 26/29] feat: read

---
 studio/src/app/pages/core/app-enterprise/app-enterprise.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
index 5eb072957..cfc8b297a 100644
--- a/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
+++ b/studio/src/app/pages/core/app-enterprise/app-enterprise.tsx
@@ -25,7 +25,7 @@ export class AppEnterprise {
         <section class="hero">
           <div class="content">
             <div>
-              <h1>Professional presentation building, custom tailored to your brand.</h1>
+              <h1>Professional presentation building, tailored to your brand.</h1>
               <h3 style={{'font-weight': '300'}}>
                 Easily apply your corporate identity and design across all your company’s presentations. Secure distribution and maintenance.
               </h3>
@@ -55,7 +55,7 @@ export class AppEnterprise {
             </div>
 
             <div>
-              <p>Together with your designers, we create unbreakable slides for your design systems.</p>
+              <p>Together with your designers, we create unbreakable slides that match your design systems.</p>
 
               <p>Moreover, rolling out new design and logo has never been so easy and DeckDeckGo can offer so much more.</p>
 

From 2728f001963fcc61983854739fb0b769efa58b9b Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 29 Jul 2020 18:05:51 +0200
Subject: [PATCH 27/29] feat: list press coverage

---
 .../pages/core/about/app-press/app-press.scss |  9 +++
 .../pages/core/about/app-press/app-press.tsx  | 57 +++++++++++++++++--
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/studio/src/app/pages/core/about/app-press/app-press.scss b/studio/src/app/pages/core/about/app-press/app-press.scss
index 141e3fdbd..1b7110fbe 100644
--- a/studio/src/app/pages/core/about/app-press/app-press.scss
+++ b/studio/src/app/pages/core/about/app-press/app-press.scss
@@ -1,5 +1,14 @@
 app-press {
   main {
     background: white;
+
+    article {
+      display: flex;
+      flex-direction: column;
+
+      span {
+        color: var(--ion-color-medium);
+      }
+    }
   }
 }
diff --git a/studio/src/app/pages/core/about/app-press/app-press.tsx b/studio/src/app/pages/core/about/app-press/app-press.tsx
index 4bc226f7b..5c8f0f77e 100644
--- a/studio/src/app/pages/core/about/app-press/app-press.tsx
+++ b/studio/src/app/pages/core/about/app-press/app-press.tsx
@@ -2,7 +2,7 @@ import {Component, h} from '@stencil/core';
 
 @Component({
   tag: 'app-press',
-  styleUrl: 'app-press.scss'
+  styleUrl: 'app-press.scss',
 })
 export class AppPress {
   render() {
@@ -13,8 +13,8 @@ export class AppPress {
           <h1>Press</h1>
 
           <p>
-            We don't provide any press kit yet but, as we are open source and open to any contributions, we would be happy to get your help to create such
-            material 😄
+            We don't provide any press kit yet but, as we are open source and are welcoming any contributions, we would be happy to get your help to create such
+            material 😄.
           </p>
 
           <p>
@@ -28,8 +28,57 @@ export class AppPress {
             </ion-router-link>{' '}
             us for any inquiries.
           </p>
+
+          <h1 class="ion-padding-top">Featured Stories</h1>
+
+          <article class="ion-margin-top">
+            <a href="https://medium.com/swlh/deckdeckgo-why-building-presentation-with-web-standards-makes-sense-1b6062a84fa" rel="noopener noreferrer">
+              Why building presentations with web standards makes sense
+            </a>
+            <span>
+              <small>2020-05-06</small>
+            </span>
+          </article>
+
+          <article class="ion-margin-top">
+            <a href="https://qiita.com/berry-clione/items/8826729673fcdc9bd12f" rel="noopener noreferrer">
+              ブラウザ上でスライド作ってプレゼンするDeckDeckGoをローカル環境で構築して脱パワポしてみた
+            </a>
+            <span>
+              <small>2019-10-06</small>
+            </span>
+          </article>
+
+          <article class="ion-margin-top">
+            <a href="https://www.tekcrispy.com/2019/09/25/deckdeckgo/" rel="noopener noreferrer">
+              Crea presentaciones con diapositivas rápidamente
+            </a>
+            <span>
+              <small>2019-09-25</small>
+            </span>
+          </article>
+
+          <article class="ion-margin-top">
+            <a href="https://awards.dinacon.ch/en/shortlist-is-out/" rel="noopener noreferrer">
+              Shortlisted for the DINAcon Awards 2019
+            </a>
+            <span>
+              <small>2019-09-24</small>
+            </span>
+          </article>
+
+          <article class="ion-margin-top">
+            <a
+              href="https://www.moongift.jp/2019/09/deckdeckgo-%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8Bpwa%E3%81%AEhtml%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89/"
+              rel="noopener noreferrer">
+              リモートコントロールもできるPWAのHTMLスライド
+            </a>
+            <span>
+              <small>2019-09-01</small>
+            </span>
+          </article>
         </main>
-      </ion-content>
+      </ion-content>,
     ];
   }
 }

From 4a9c3fe4f430c731ce6fdcd45bb93a3331b1a4fc Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 29 Jul 2020 18:08:40 +0200
Subject: [PATCH 28/29] feat: text

---
 studio/src/app/pages/core/about/app-press/app-press.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/studio/src/app/pages/core/about/app-press/app-press.tsx b/studio/src/app/pages/core/about/app-press/app-press.tsx
index 5c8f0f77e..5a481b3b4 100644
--- a/studio/src/app/pages/core/about/app-press/app-press.tsx
+++ b/studio/src/app/pages/core/about/app-press/app-press.tsx
@@ -13,12 +13,12 @@ export class AppPress {
           <h1>Press</h1>
 
           <p>
-            We don't provide any press kit yet but, as we are open source and are welcoming any contributions, we would be happy to get your help to create such
-            material 😄.
+            We don't provide unfortunately any press kit yet. We are open source and are welcoming any contributions, we would be happy to get your help to
+            create such material 😄.
           </p>
 
           <p>
-            That being said, you could download our logo as a{' '}
+            That being said, you can download our logo as a{' '}
             <a href="https://deckdeckgo.com/assets/img/deckdeckgo-logo.svg" target="_blank">
               svg
             </a>{' '}

From 625aef33836b3f1e8c173876bf06577c51e55521 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 29 Jul 2020 18:19:10 +0200
Subject: [PATCH 29/29] merge: from master

---
 CHANGELOG.md                          | 2 +-
 webcomponents/color/CHANGELOG.md      | 6 ++++++
 webcomponents/color/package-lock.json | 2 +-
 webcomponents/color/package.json      | 2 +-
 webcomponents/color/src/index.ts      | 4 ++--
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60c7c3239..5f821cf5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@
 
 ### Web Components
 
-- color: v2.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
+- color: v2.1.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
 
 <a name="2.0.0"></a>
 
diff --git a/webcomponents/color/CHANGELOG.md b/webcomponents/color/CHANGELOG.md
index 00a6cad7c..70a154e77 100644
--- a/webcomponents/color/CHANGELOG.md
+++ b/webcomponents/color/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.1.2 (2020-07-29)
+
+### Fix
+
+- `Rollup: Unresolved Import Could not resolve './components' from ./node_modules/@deckdeckgo/color/dist/collection/index.js at error`
+
 # 2.1.1 (2020-07-28)
 
 ### Fix
diff --git a/webcomponents/color/package-lock.json b/webcomponents/color/package-lock.json
index 80a43a32c..448755574 100644
--- a/webcomponents/color/package-lock.json
+++ b/webcomponents/color/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/color",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/color/package.json b/webcomponents/color/package.json
index 240a7dc37..f754db55d 100644
--- a/webcomponents/color/package.json
+++ b/webcomponents/color/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/color",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A color picker developed with Web Components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
diff --git a/webcomponents/color/src/index.ts b/webcomponents/color/src/index.ts
index 4f5794296..3f42b019b 100644
--- a/webcomponents/color/src/index.ts
+++ b/webcomponents/color/src/index.ts
@@ -1,3 +1,3 @@
-export * from './components';
+export type {Components, JSX} from './components';
 
-export * from './utils/deckdeckgo-palette';
\ No newline at end of file
+export * from './utils/deckdeckgo-palette';