docs(app): improve images lazy loading

docs/app/pages/figma/index.vue

@@ -155,7 +155,7 @@ onMounted(async () => {
             :src="item.src"
             :alt="item.alt"
             class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
-            lazy
+            loading="lazy"
           />
         </template>
       </UTabs>
@@ -165,7 +165,7 @@ onMounted(async () => {
         v-if="page.section2.image"
         v-bind="page.section2.image"
         class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
-        lazy
+        loading="lazy"
       />
     </UPageSection>
     <UPageSection v-bind="page.section3" orientation="horizontal" :ui="{ container: 'py-16 sm:pt-16 lg:pt-16' }">
@@ -173,7 +173,7 @@ onMounted(async () => {
         v-if="page.section3.image"
         v-bind="page.section3.image"
         class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
-        lazy
+        loading="lazy"
       />
     </UPageSection>
     <USeparator />
@@ -198,7 +198,7 @@ onMounted(async () => {
             v-if="step.image"
             v-bind="step.image"
             class="rounded-(--ui-radius)"
-            lazy
+            loading="lazy"
           />
           <div>
             <h2 class="font-semibold inline-flex items-center gap-x-1">
@@ -272,6 +272,7 @@ onMounted(async () => {
           :key="index"
           v-bind="logo"
           class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0"
+          loading="lazy"
         >
       </UPageMarquee>
     </UPageCTA>

docs/app/pages/index.vue

@@ -302,8 +302,8 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
             :src="`/pro/blocks/image${i}.png`"
             width="460"
             height="258"
-            :alt="`Nuxt UI Pro Screenshot ${i}`"
             loading="lazy"
+            :alt="`Nuxt UI Pro Screenshot ${i}`"
             class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
           >
         </UPageMarquee>

docs/app/pages/pro/pricing.vue

@@ -81,6 +81,7 @@ useSeoMeta({
           :key="index"
           v-bind="logo"
           class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0"
+          loading="lazy"
         >
       </UPageMarquee>
       <UContainer>

docs/app/pages/pro/templates.vue

@@ -67,7 +67,7 @@ useSeoMeta({
             :items="(template.images as any[])"
             dots
           >
-            <NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
+            <NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" loading="lazy" />
           </UCarousel>
           <Placeholder v-else class="w-full h-full aspect-video" />
         </Motion>

docs/app/pages/showcase.vue

@@ -51,8 +51,9 @@ useSeoMeta({
             <NuxtImg
               :src="`/assets/showcase/${item.name.toLowerCase().replace(/\s/g, '-')}.png`"
               :alt="`Screenshot of ${item.name}`"
-              loading="lazy"
-              class="rounded-[calc(var(--ui-radius)*1.5)]"
+              width="311"
+              height="194"
+              class="rounded-[calc(var(--ui-radius)*1.5)] group-hover:scale-103 duration-200 transition-transform pointer-events-none"
             />
 
             <div class="flex items-center gap-1 px-1">

docs/app/pages/team.vue

@@ -62,7 +62,12 @@ const icons = {
           variant="subtle"
         >
           <template #leading>
-            <UAvatar provider="ipx" :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${user.login}`" :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${user.login} 2x`" size="3xl" class="mx-auto" />
+            <UAvatar
+              :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${user.login}`"
+              :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${user.login} 2x`"
+              size="3xl"
+              class="mx-auto"
+            />
           </template>
 
           <div class="flex items-center justify-center gap-1">
@@ -125,7 +130,6 @@ const icons = {
         >
           <template #leading>
             <UAvatar
-              provider="ipx"
               :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${contributor.username}`"
               :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${contributor.username} 2x`"
               size="3xl"