docs: enhancements for a smoother user experience

Author: sanjaiyan-dev

docs/.vitepress/components/Contributors.vue

@@ -5,7 +5,7 @@ import { contributors } from '../contributors'
 <template>
   <div flex="~ wrap gap2" justify-center>
     <a v-for="{ name, avatar } of contributors" :key="name" :href="`https://github.com/${name}`" m-0 rel="noopener noreferrer" :aria-label="`${name} on GitHub`">
-      <img loading="lazy" :src="avatar" width="50" height="50" rounded-full h-12 w-12 :alt="`${name}'s avatar`">
+      <img loading="lazy" decoding="async" :src="avatar" width="50" height="50" rounded-full h-12 w-12 :alt="`${name}'s avatar`">
     </a>
   </div>
 </template>

docs/.vitepress/components/HomePage.vue

@@ -38,6 +38,7 @@ import { teamMembers } from '../contributors'
                   loading="lazy"
                   src="/sponsors/antfu.svg"
                   alt="Anthony Fu's sponsors"
+                  decoding="async"
                 >
               </a>
             </div>
@@ -52,6 +53,7 @@ import { teamMembers } from '../contributors'
                   loading="lazy"
                   src="/sponsors/sheremet-va.svg"
                   alt="Vladimir's sponsors"
+                  decoding="async"
                 >
               </a>
             </div>
@@ -66,13 +68,14 @@ import { teamMembers } from '../contributors'
                   loading="lazy"
                   src="/sponsors/patak-dev.svg"
                   alt="Patak's sponsors"
+                  decoding="async"
                 >
               </a>
             </div>
           </div>
           <p class="text-center opacity-75">
             <a href="https://www.netlify.com" rel="noopener noreferrer">
-              <img src="/netlify.svg" alt="Deploys by Netlify" width="114" height="151">
+              <img src="/netlify.svg" alt="Deploys by Netlify" width="114" height="151" decoding="async">
             </a>
           </p>
         </div>

packages/ui/client/styles/main.css

@@ -2,6 +2,7 @@ html,
 body {
   height: 100%;
   font-family: 'Readex Pro', sans-serif;
+  scroll-behavior: smooth;
 }
 
 :root {