feat(HelloWorld): update design and add footer

template/javascript/default/src/App.vue

@@ -3,6 +3,8 @@
     <v-main>
       <HelloWorld />
     </v-main>
+
+    <AppFooter />
   </v-app>
 </template>
 

template/javascript/default/src/components/AppFooter.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-footer height="40" app>
+    <a
+      v-for="item in items"
+      :key="item.title"
+      :href="item.href"
+      :title="item.title"
+      class="d-inline-block mx-2 social-link"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <v-icon
+        :icon="item.icon"
+        :size="item.icon === '$vuetify' ? 24 : 16"
+      />
+    </a>
+
+    <div
+      class="text-caption text-disabled"
+      style="position: absolute; right: 16px;"
+    >
+      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
+      —
+      <a
+        class="text-decoration-none on-surface"
+        href="https://vuetifyjs.com/about/licensing/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        MIT License
+      </a>
+    </div>
+  </v-footer>
+</template>
+
+<script setup>
+  const items = [
+    {
+      title: 'Vuetify Documentation',
+      icon: `$vuetify`,
+      href: 'https://vuetifyjs.com/',
+    },
+    {
+      title: 'Vuetify Support',
+      icon: 'mdi-shield-star-outline',
+      href: 'https://support.vuetifyjs.com/',
+    },
+    {
+      title: 'Vuetify X',
+      icon: `svg:M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z`,
+      href: 'https://x.com/vuetifyjs',
+    },
+    {
+      title: 'Vuetify GitHub',
+      icon: `mdi-github`,
+      href: 'https://github.com/vuetifyjs/vuetify',
+    },
+    {
+      title: 'Vuetify Discord',
+      icon: `mdi-discord`,
+      href: 'https://community.vuetifyjs.com/',
+    },
+    {
+      title: 'Vuetify Reddit',
+      icon: `mdi-reddit`,
+      href: 'https://reddit.com/r/vuetifyjs',
+    },
+  ]
+</script>
+
+<style scoped lang="sass">
+  .social-link :deep(.v-icon)
+    color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
+    text-decoration: none
+    transition: .2s ease-in-out
+
+    &:hover
+      color: rgba(25, 118, 210, 1)
+</style>

template/javascript/default/src/components/HelloWorld.vue

@@ -1,69 +1,151 @@
 <template>
   <v-container class="fill-height">
-    <v-responsive class="align-center text-center fill-height">
-      <v-img height="300" src="@/assets/logo.svg" />
+    <v-responsive
+      class="align-centerfill-height mx-auto"
+      max-width="900"
+    >
+      <v-img
+        class="mb-4"
+        height="150"
+        src="@/assets/logo.png"
+      />
 
-      <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
+      <div class="text-center">
+        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
 
-      <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
+      </div>
 
-      <div class="py-14" />
+      <div class="py-4" />
 
-      <v-row class="d-flex align-center justify-center">
-        <v-col cols="auto">
-          <v-btn
-            href="https://vuetifyjs.com/components/all/"
-            min-width="164"
+      <v-row>
+        <v-col cols="12">
+          <v-card
+            class="py-4"
+            color="surface-variant"
+            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
+            prepend-icon="mdi-rocket-launch-outline"
+            rounded="lg"
+            variant="outlined"
+          >
+            <template #image>
+              <v-img position="top right" />
+            </template>
+
+            <template #title>
+              <h2 class="text-h5 font-weight-bold">Get started</h2>
+            </template>
+
+            <template #subtitle>
+              <div class="text-subtitle-1">
+                Replace this page by removing <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>pages/index.vue</v-kbd>.
+              </div>
+            </template>
+
+            <v-overlay
+              opacity=".12"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
+        </v-col>
+
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/"
+            prepend-icon="mdi-text-box-outline"
             rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Learn about all things Vuetify in our documentation."
             target="_blank"
+            title="Documentation"
             variant="text"
           >
-            <v-icon
-              icon="mdi-view-dashboard"
-              size="large"
-              start
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
             />
-
-            Components
-          </v-btn>
+          </v-card>
         </v-col>
 
-        <v-col cols="auto">
-          <v-btn
-            color="primary"
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
             href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            min-width="228"
+            prepend-icon="mdi-star-circle-outline"
             rel="noopener noreferrer"
-            size="x-large"
+            rounded="lg"
+            subtitle="Explore available framework Features."
             target="_blank"
-            variant="flat"
+            title="Features"
+            variant="text"
           >
-            <v-icon
-              icon="mdi-speedometer"
-              size="large"
-              start
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
             />
-
-            Get Started
-          </v-btn>
+          </v-card>
         </v-col>
 
-        <v-col cols="auto">
-          <v-btn
-            href="https://community.vuetifyjs.com/"
-            min-width="164"
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://vuetifyjs.com/components/all"
+            prepend-icon="mdi-widgets-outline"
             rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Discover components in the API Explorer."
             target="_blank"
+            title="Components"
             variant="text"
           >
-            <v-icon
-              icon="mdi-account-group"
-              size="large"
-              start
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
             />
+          </v-card>
+        </v-col>
 
-            Community
-          </v-btn>
+        <v-col cols="6">
+          <v-card
+            append-icon="mdi-open-in-new"
+            class="py-4"
+            color="surface-variant"
+            href="https://discord.vuetifyjs.com"
+            prepend-icon="mdi-account-group-outline"
+            rel="noopener noreferrer"
+            rounded="lg"
+            subtitle="Connect with Vuetify developers."
+            target="_blank"
+            title="Community"
+            variant="text"
+          >
+            <v-overlay
+              opacity=".06"
+              scrim="primary"
+              contained
+              model-value
+              persistent
+            />
+          </v-card>
         </v-col>
       </v-row>
     </v-responsive>

template/javascript/essentials/src/layouts/default.vue

@@ -1,12 +1,13 @@
 <template>
   <v-app>
-    <DefaultBar />
+    <v-main>
+      <router-view />
+    </v-main>
 
-    <DefaultView />
+    <AppFooter />
   </v-app>
 </template>
 
 <script setup>
-  import DefaultBar from './default/AppBar.vue'
-  import DefaultView from './default/View.vue'
+  //
 </script>