Improve UX when user is logged in

Author: AchoArnold

web/layouts/website.vue

@@ -37,7 +37,10 @@
               Blog
             </v-btn>
             <v-btn
-              v-if="$vuetify.breakpoint.lgAndUp"
+              v-if="
+                $vuetify.breakpoint.lgAndUp &&
+                $store.getters.getAuthUser === null
+              "
               large
               text
               color="primary"
@@ -47,15 +50,26 @@
               Login
             </v-btn>
             <v-btn
+              v-if="$store.getters.getAuthUser === null"
               exact-path
               color="primary"
-              class="my-5"
+              class="mt-5"
               :large="$vuetify.breakpoint.lgAndUp"
               :to="{ name: 'login' }"
             >
               Get Started
               <span v-if="$vuetify.breakpoint.lgAndUp">&nbsp;For Free</span>
             </v-btn>
+            <v-btn
+              v-if="$store.getters.getAuthUser !== null"
+              exact-path
+              color="primary"
+              class="mt-5"
+              :large="$vuetify.breakpoint.lgAndUp"
+              :to="{ name: 'threads' }"
+            >
+              Dashboard
+            </v-btn>
           </v-col>
         </v-row>
       </v-container>

web/pages/index.vue

@@ -1,7 +1,38 @@
 <template>
   <div>
     <v-container>
-      <v-row :class="{ 'py-16': $vuetify.breakpoint.lgAndUp }">
+      <v-row class="mt-16 pt-8 mb-n8">
+        <v-col>
+          <v-alert
+            text
+            :icon="$vuetify.breakpoint.mdAndUp ? mdiSale : undefined"
+            :prominent="$vuetify.breakpoint.mdAndUp"
+            color="success"
+          >
+            <v-row align="center">
+              <v-col class="grow">
+                <p class="text-h6 mb-0">Black Friday Deal</p>
+                <p class="mb-0">
+                  Get <b>40%</b> off all yearly plans on httpSMS until on
+                  December 2<sup>nd</sup> by using the discount code
+                  <b>BF2024</b> at checkout
+                </p>
+                <v-btn
+                  v-if="!$vuetify.breakpoint.mdAndUp"
+                  to="/billing"
+                  block
+                  color="pink"
+                  >Upgrade Now</v-btn
+                >
+              </v-col>
+              <v-col v-if="$vuetify.breakpoint.mdAndUp" class="shrink">
+                <v-btn color="pink" to="/billing">Upgrade Now</v-btn>
+              </v-col>
+            </v-row>
+          </v-alert>
+        </v-col>
+      </v-row>
+      <v-row :class="{ 'pb-16 pt-0': $vuetify.breakpoint.lgAndUp }">
         <v-col
           cols="12"
           md="6"
@@ -826,6 +857,7 @@ import {
   mdiForum,
   mdiCreation,
   mdiNumeric1,
+  mdiSale,
   mdiLanguagePython,
   mdiNumeric2,
   mdiNumeric3,
@@ -858,6 +890,7 @@ export default Vue.extend({
       mdiNumeric2,
       mdiNumeric3,
       mdiTallyMark1,
+      mdiSale,
       mdiTallyMark2,
 
       mdiTallyMark3,