chingu-voyage7 · peoray · Dec 12, 2018 · Dec 13, 2018 · Dec 13, 2018
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "vue": "^2.5.17",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.2.0",
@@ -26,6 +27,10 @@
     "babel-jest": "^23.6.0",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0-0",
-    "vue-template-compiler": "^2.5.17"
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-vuetify": "^0.4.6",
+    "vue-template-compiler": "^2.5.17",
+    "vuetify-loader": "^1.0.5"
   }
 }
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,17 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>client</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>client</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,31 +1,19 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
+  <v-app>
+    <v-content>
+      <app-home/>
+    </v-content>
+  </v-app>
 </template>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
+<script>
+import Home from './components/Landing'
+export default {
+  components: {
+    appHome: Home
+  }
 }
+</script>
 
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
+<style>
 </style>
diff --git a/client/src/assets/logo.svg b/client/src/assets/logo.svg
diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue
diff --git a/client/src/components/Landing.vue b/client/src/components/Landing.vue
@@ -0,0 +1,25 @@
+<template>
+      <v-container grid-list-xs fill-height>
+        <v-layout row wrap justify-space-around align-center>
+          <v-flex xs12 sm5>
+            <div class='text-xs-center'>
+              <v-icon size='300' color='grey darekn-1'>chat</v-icon>
+            </div>
+          </v-flex>
+          <v-flex xs12 sm5>
+            <div class='text-xs-center'>
+              <h1 class='pb-3 display-1 font-weight-medium'>Lorem ipsum dolort.</h1>
+              <p class='font-weight-thin body-1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quibusdam ea, dolor suscipit doloribus voluptatem quasi fugit quas quos nisi accusamus, maiores nulla omnis. Rem expedita natus repudiandae illum harum.</p>
+              <v-btn color="success" class='mt-3 px-5' depressed>Get Started</v-btn>
+            </div>
+          </v-flex>
+        </v-layout>
+      </v-container>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>
diff --git a/client/src/main.js b/client/src/main.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import './plugins/vuetify'
 import App from './App.vue'
 import router from './router'
 

diff --git a/client/src/plugins/vuetify.js b/client/src/plugins/vuetify.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import 'vuetify/src/stylus/app.styl'
+
+Vue.use(Vuetify, {
+  iconfont: 'md'
+})
diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
@@ -1,18 +1,13 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <Landing/>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import Landing from '../components/Landing'
 
 export default {
-  name: 'home',
   components: {
-    HelloWorld
+    Landing
   }
 }
 </script>