Layout/datasets page

web/locales/en/messages.ftl

@@ -815,4 +815,18 @@ read-more-about = Read more on our About page
 ## DemoLayout
 demo-get-started = Let's Get Started
 demo-welcome = Welcome to Common Voice
-demo-welcome-subheader = Interested in learning more and contributing to the project?
+demo-welcome-subheader = Interested in learning more and contributing to the project?
+
+## Demo Datasets
+demo-language-select-card-header = Common Voice is the world’s largest publicly available, multi-language voice dataset.
+demo-language-select-card-body = Thanks to contributions from over 259k people in over 50 languages, this data is being used to train speech-enabled applications to better respond to the human voice.
+demo-language-select-card-button = Next
+demo-language-select-label = Browse Languages
+demo-download-dataset = Common Voice Dataset
+demo-datasets-building = We're building
+demo-datasets-body = an open-source, multi-language dataset of voices that anyone can use to train speech-enabled applications.
+demo-datasets-box-link = Read more
+demo-dataset-download-lang-select =  Language
+demo-eofy-header = 2019 End-of-Year Release
+demo-eofy-sub_header = Voice Dataset, Ready for Download
+demo-subscribe = Want updates when we release a new version of the Common Voice dataset?

web/src/components/app.tsx

@@ -219,7 +219,7 @@ let LocalizedPage: any = class extends React.Component<
 
   render() {
     const { locale, notifications, toLocaleRoute, location } = this.props;
-    const { bundleGenerator, l10n, uploadPercentage } = this.state;
+    const { l10n, uploadPercentage } = this.state;
 
     if (!l10n) return null;
 
@@ -278,7 +278,7 @@ let LocalizedPage: any = class extends React.Component<
                   }
                 />
               ))}
-              {location.pathname.includes(URLS.DEMO) ? (
+              {location.pathname.includes('/demo') ? (
                 <DemoLayout />
               ) : (
                 <Layout />

web/src/components/demo-pages/Intro/intro.css

@@ -1,57 +1,57 @@
 @import url('../../vars.css');
 
-#intro-container {
+.container {
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
+    height: 100vh;
     width: 100vw;
+    padding-top: 2.5vh;
     background: var(--white) url('./assets/waves.svg') no-repeat center;
     background-size: contain;
 }
 
-#intro-container--text-box {
+.text {
     text-align: center;
     font-weight: normal;
 }
 
-#intro-container--text-box__text-header {
+.text-header {
     font-size: var(--font-size-xxl);
 }
 
-#intro-container--text-box__text-body {
+.text-body {
     font-weight: 300;
     font-size: var(--font-size-lg);
-    letter-spacing: 0.0625rem;
-    margin-top: 0.625rem;
+    letter-spacing: 1px;
+    margin-top: 10px;
 }
 
-#intro-container--btn-get-started {
+.btn-get-started {
     background: var(--blue);
     border-color: var(--blue);
-    margin: 1.875rem auto;
+    margin: 30px auto;
     width: auto;
-    padding: 1rem 2.3125rem;
+    padding: 18px 37px;
 
-    path {
+    & path {
         fill: var(--white);
     }
 
     &:hover {
-        background-color: var(--white);
-        path {
+        & path {
             fill: var(--black);
         }
     }
 }
 
 #robot {
-    margin: 1.875rem auto;
+    margin: 30px auto;
     /* fixed height enables the full page layout to render first before the image loads into view */
-    height: 32.8rem;
+    height: 525px;
 }
 
-#intro-container--gradient-layer {
-    min-height: 100vh;
+.layer {
+    height: 100vh;
     position: absolute;
     width: 100%;
     background: linear-gradient(

web/src/components/demo-pages/Intro/intro.tsx

@@ -1,28 +1,25 @@
 import * as React from 'react';
-import robot from './assets/red-robot.svg';
+import robot from './assets/Red.svg';
 import './intro.css';
-import { Localized, withLocalization } from 'fluent-react/compat';
+import { Localized, withLocalization } from '@fluent/react';
 import { LinkButton } from '../../ui/ui';
 import { ArrowRight } from '../../ui/icons';
 import URLS from '../../../urls';
 
 export default withLocalization(function Intro() {
   return (
-    <div id="intro-container">
-      <div id="intro-container--gradient-layer"></div>
+    <div className="container">
+      <div className="layer"></div>
       <img src={robot} id="robot" alt="red robot" />
-      <div id="intro-container--text-box">
+      <div className="text">
         <Localized id="demo-welcome">
-          <h1 id="intro-container--text-box__text-header" />
+          <h1 className="text-header" />
         </Localized>
         <Localized id="demo-welcome-subheader">
-          <p id="intro-container--text-box__text-body" />
+          <p className="text-body" />
         </Localized>
       </div>
-      <LinkButton
-        rounded
-        to={URLS.DEMO_DATASETS}
-        id="intro-container--btn-get-started">
+      <LinkButton rounded to={URLS.DEMO_DATASETS} className="btn-get-started">
         <Localized id="demo-get-started">
           <span />
         </Localized>

web/src/components/demo-pages/kiosk/dashboard.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { PageContentType } from './types';
+import { withLocalization } from '@fluent/react';
+
+const dashboard = (): PageContentType => {
+  const ContentComponent = () => {
+    return <h1>Hi</h1>;
+  };
+
+  const CardComponent = () => <h1>Bye</h1>;
+
+  return {
+    Content: withLocalization(ContentComponent),
+    Card: withLocalization(CardComponent),
+  };
+};
+
+export default dashboard;