A11Y and engagement tweaks

components/AppHeader.vue

@@ -56,15 +56,16 @@
         <li v-if="user"><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
         <li><NuxtLink to="/pricing">Pricing</NuxtLink></li>
         <li v-if="!user"><NuxtLink to="/signin">Sign In</NuxtLink></li>
-        <li v-if="!user"><a href="https://github.com/JavascriptMick/nuxt3-boilerplate"><Icon name="mdi:github"/></a></li>
+        <li v-if="!user"><NuxtLink to="/signup">Start for free</NuxtLink></li>
+        <li v-if="!user"><a title="github" href="https://github.com/JavascriptMick/nuxt3-boilerplate"><Icon name="mdi:github"/></a></li>
       </ul>
     </div>
     <div class="navbar-end" v-if="user">
       <div class="dropdown dropdown-end">
         <label tabindex="0" class="btn btn-ghost btn-circle avatar">
           <div class="w-10 rounded-full">
-            <img v-if="user.user_metadata.avatar_url" :src="user.user_metadata.avatar_url" />
+            <img v-if="user.user_metadata.avatar_url" :src="user.user_metadata.avatar_url" alt="avatar image"/>
-            <img v-else src="~/assets/images/avatar.svg"/>
+            <img v-else src="~/assets/images/avatar.svg" alt="default avatar image"/>
           </div>
         </label>
         <ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">

nuxt.config.ts

@@ -11,6 +11,14 @@ export default defineNuxtConfig({
   imports: {
     dirs: ['./stores'],
   },
+  app:{
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+      title: 'Nuxt 3 SAAS Boilerplate',
+    },
+  },
   runtimeConfig:{
     stripeSecretKey: process.env.STRIPE_SECRET_KEY,
     stripeEndpointSecret: process.env.STRIPE_ENDPOINT_SECRET,

pages/dashboard.vue

@@ -37,11 +37,11 @@
       <textarea v-model="newNoteText" type="text" class="w-full rounded-l-md py-2 px-4 border-gray-400 border-2 focus:outline-none focus:border-blue-500" rows="5" placeholder="Add a note..."/>
       <div class="flex justify-evenly">
         <button @click.prevent="addNote()" type="button"
-          class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
+          class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50">
           Add
         </button>
         <button v-if="activeMembership.account.features.includes('SPECIAL_FEATURE')"  @click.prevent="genNote()" type="button"
-          class="px-4 py-2 text-white bg-orange-500 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50">
+          class="px-4 py-2 text-white bg-purple-600 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50">
           Gen
           <Icon name="mdi:magic" class="h-6 w-6"/>
         </button>
@@ -53,7 +53,7 @@
         <p class="text-gray-600 mb-4">{{ note.note_text }}</p>
         <button @click.prevent="notesStore.deleteNote(note.id)" 
           v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.ADMIN || activeMembership.access === ACCOUNT_ACCESS.OWNER)"
-          class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
+          class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
           Delete
         </button>
       </div>

pages/pricing.vue

@@ -22,6 +22,12 @@
         <h3 class="text-2xl font-bold text-gray-900 mb-4">Free Plan</h3>
         <p class="text-gray-600 mb-4">Single user, 10 notes</p>
         <p class="text-3xl font-bold text-gray-900 mb-4">$0<span class="text-gray-600 text-lg">/mo</span></p>
+        <button 
+            v-if="!activeMembership"
+            @click.prevent="navigateTo('/signup')"
+            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
+            Start for free
+        </button>
       </div>
     
       <!-- Personal Plan -->
@@ -39,7 +45,7 @@
           <input type="hidden" name="account_id" :value="activeMembership?.account_id" />
           <button 
             type="submit" 
-            class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
+            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
             Subscribe
           </button>
         </form>
@@ -47,8 +53,8 @@
         <button 
             v-if="!activeMembership"
             @click.prevent="navigateTo('/signup')"
-            class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
+            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
-            Sign Up
+            Get started
         </button>
       </div>
     
@@ -67,7 +73,7 @@
           <input type="hidden" name="account_id" :value="activeMembership?.account_id" />
           <button 
             type="submit" 
-            class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
+            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
             Subscribe
           </button>
         </form>
@@ -75,8 +81,8 @@
         <button 
             v-if="!activeMembership"
             @click.prevent="navigateTo('/signup')"
-            class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
+            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
-            Sign Up
+            Get started
         </button>
       </div>
     </div>