add demos home page

demos/src/home.css

@@ -1 +1,44 @@
 @import './_variables.css';
+
+.demo-card {
+  width: 100%;
+  max-width: 1000px;
+  margin: 30px auto;
+  background: white;
+  border: 2px solid white;
+  border-radius: 10px;
+  transition: border-color 0.2s ease-in;
+  cursor: default;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+
+  &:hover {
+    border-color: $color-1;
+    cursor: pointer;
+
+    .demo-card-heading {
+      color: $color-1;
+    }
+  }
+
+  .demo-card-heading {
+    flex: 1;
+    padding: 20px;
+    text-align: center;
+    color: $color-2;
+    font-family: $font-1;
+    font-size: 20px;
+    transition: color 0.2s ease-in;
+  }
+
+  .demo-card-image {
+    img {
+      width: 200px;
+      height: auto;
+    }
+  }
+}

demos/src/home.js

@@ -1,6 +1,60 @@
 /* global Vue */
 import './home.css'
 
+const DEMO_INFO_DEV = [
+  {
+    title: 'Basic Convnet for MNIST',
+    imagePath: '/demos/assets/mnist-cnn.png'
+  },
+  {
+    title: 'Convolutional Variational Autoencoder, trained on MNIST',
+    imagePath: '/demos/assets/mnist-vae.png'
+  },
+  {
+    title: '50-layer Residual Network, trained on ImageNet',
+    imagePath: '/demos/assets/resnet50.png'
+  },
+  {
+    title: 'Inception V3, trained on ImageNet',
+    imagePath: '/demos/assets/inception-v3.png'
+  },
+  {
+    title: 'Bidirectional LSTM for IMDB sentiment classification',
+    imagePath: '/demos/assets/imdb-bidirectional-lstm.png'
+  }
+]
+
+const DEMO_INFO_PROD = [
+  {
+    title: 'Basic Convnet for MNIST',
+    imagePath: 'demos/assets/mnist-cnn.png'
+  },
+  {
+    title: 'Convolutional Variational Autoencoder, trained on MNIST',
+    imagePath: 'demos/assets/mnist-vae.png'
+  },
+  {
+    title: '50-layer Residual Network, trained on ImageNet',
+    imagePath: 'demos/assets/resnet50.png'
+  },
+  {
+    title: 'Inception V3, trained on ImageNet',
+    imagePath: 'demos/assets/inception-v3.png'
+  },
+  {
+    title: 'Bidirectional LSTM for IMDB sentiment classification',
+    imagePath: 'demos/assets/imdb-bidirectional-lstm.png'
+  }
+]
+
+const DEMO_INFO = (process.env.NODE_ENV === 'production') ? DEMO_INFO_PROD : DEMO_INFO_DEV
+
 export const Home = Vue.extend({
-  template: require('raw!./home.template.html')
+  template: require('raw!./home.template.html'),
+
+  data: function () {
+    return {
+      demoInfo: DEMO_INFO
+    }
+  }
 })

demos/src/home.template.html

@@ -1,3 +1,7 @@
 <div class="demo home">
   <div class="title"><span>Home</span></div>
+  <div class="demo-card" v-for="info in demoInfo">
+    <div class="demo-card-heading">{{ info.title }}</div>
+    <div class="demo-card-image"><img :src="info.imagePath" /></div>
+  </div>
 </div>