feat: new home page, about page, closer to 100% lighthouse PWA score

public/manifest.json

@@ -15,6 +15,6 @@
   ],
   "start_url": "/index.html",
   "display": "standalone",
-  "background_color": "#179AFF",
+  "background_color": "#179aff",
   "theme_color": "#179aff"
 }

src/App.vue

@@ -138,7 +138,7 @@
           item
         >
           <v-img
-            src="@/assets/logo.svg"
+            src="@/assets/logo5.svg"
             alt="Vuetify"
           />
         </v-avatar>

src/router/index.js

@@ -10,7 +10,7 @@ const routes = [
     name: 'home',
     // component: Home
     // component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
-    component: () => import(/* webpackChunkName: "timeline" */ '../views/Timeline.vue')
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
   {
     path: '/timeline',

src/views/About.vue

@@ -3,40 +3,54 @@
     align="center"
     justify="center"
   >
-    <div class="about">
-      <strong>About page content goes here...</strong>
-    </div>
     <v-tooltip right>
       <template v-slot:activator="{ on }">
-        <v-btn
-          href="https://github.com/ambianic"
-          icon
-          large
-          target="_blank"
-          v-on="on"
+        <v-card
+          max-width="344"
+          class="mx-auto"
         >
-          <v-icon large>
-            mdi-code-tags
-          </v-icon>
-        </v-btn>
+          <v-list-item
+            align="center"
+            justify="center"
+          >
+            <v-list-item-content>
+              <v-list-item-title class="headline">Cozy at Home</v-list-item-title>
+              <v-list-item-subtitle>via Ambient Intelligence</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-img
+            src="@/assets/home-screen-logo.png"
+            height="194"
+          ></v-img>
+
+          <v-card-text>
+            Ambianic's mission is to make your home a little cozier.
+            Review your home timeline for notable moments. Configure input sensors and
+            camers for Ambianic to observe.
+            Share, purge
+            or backup your data - it never slips out of your control.
+          </v-card-text>
+
+          <v-card-actions>
+            <v-btn
+              text
+              color="info"
+              :to="'timeline'"
+            >
+              View Timeline
+            </v-btn>
+            <v-spacer></v-spacer>
+            <v-btn
+              text
+              color="info"
+              :to="'settings'"
+            >
+              Settings
+            </v-btn>
+          </v-card-actions>
+        </v-card>
       </template>
-      <span>Source</span>
-    </v-tooltip>
-    <v-tooltip right>
-      <template v-slot:activator="{ on }">
-        <v-btn
-          icon
-          large
-          href="https://codepen.io/johnjleider/pen/MNYLdL"
-          target="_blank"
-          v-on="on"
-        >
-          <v-icon large>
-            mdi-codepen
-          </v-icon>
-        </v-btn>
-      </template>
-      <span>Codepen</span>
     </v-tooltip>
   </v-row>
 </template>

src/views/Home.vue

@@ -3,40 +3,54 @@
     align="center"
     justify="center"
   >
-    <div class="about">
-      <strong>(Home.vue) Home page content goes here...</strong>
-    </div>
     <v-tooltip right>
       <template v-slot:activator="{ on }">
-        <v-btn
-          href="https://github.com/ambianic"
-          icon
-          large
-          target="_blank"
-          v-on="on"
+        <v-card
+          max-width="344"
+          class="mx-auto"
         >
-          <v-icon large>
-            mdi-code-tags
-          </v-icon>
-        </v-btn>
+          <v-list-item
+            align="center"
+            justify="center"
+          >
+            <v-list-item-content>
+              <v-list-item-title class="headline">Cozy at Home</v-list-item-title>
+              <v-list-item-subtitle>via Ambient Intelligence</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+
+          <v-img
+            src="@/assets/home-screen-logo.png"
+            height="194"
+          ></v-img>
+
+          <v-card-text>
+            Ambianic's mission is to make your home a little cozier.
+            Review your home timeline for notable moments. Configure input sensors and
+            camers for Ambianic to observe.
+            Share, purge
+            or backup your data - it never slips out of your control.
+          </v-card-text>
+
+          <v-card-actions>
+            <v-btn
+              text
+              color="info"
+              :to="'timeline'"
+            >
+              View Timeline
+            </v-btn>
+            <v-spacer></v-spacer>
+            <v-btn
+              text
+              color="info"
+              :to="'settings'"
+            >
+              Settings
+            </v-btn>
+          </v-card-actions>
+        </v-card>
       </template>
-      <span>Source</span>
-    </v-tooltip>
-    <v-tooltip right>
-      <template v-slot:activator="{ on }">
-        <v-btn
-          icon
-          large
-          href="https://codepen.io/johnjleider/pen/MNYLdL"
-          target="_blank"
-          v-on="on"
-        >
-          <v-icon large>
-            mdi-codepen
-          </v-icon>
-        </v-btn>
-      </template>
-      <span>Codepen</span>
     </v-tooltip>
   </v-row>
 </template>

src/views/Timeline.vue

@@ -8,8 +8,8 @@
     class="pa-0 ma-0"
   >
     <v-col
-      align="left"
-      justify="left"
+      align="center"
+      justify="center"
       cols="12"
       class="pa-0 ma-0 fill-height"
     >