docs: optimize landing images

docs/components/home/HomeDemo.vue

@@ -19,16 +19,22 @@
             src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
             srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
             alt="benjamincanac"
+            width="40"
+            height="40"
           />
           <UAvatar
             src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
             srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
             alt="Atinux"
+            width="40"
+            height="40"
           />
           <UAvatar
             src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
             srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
             alt="smarroufin"
+            width="40"
+            height="40"
           />
         </UAvatarGroup>
 

docs/content/index.yml

@@ -16,27 +16,39 @@ sections:
         icon: i-heroicons-swatch
         to: /getting-started/theming#colors
         class: 'col-span-7 row-span-3'
-        image: /illustrations/color-palette
+        image:
+          path: /illustrations/color-palette
+          width: 363
+          height: 152
         orientation: 'horizontal'
       - title: Fully Customizable
         description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
         icon: i-heroicons-wrench-screwdriver
         to: /getting-started/theming#components
-        image: /illustrations/fully-customizable
+        image:
+          path: /illustrations/fully-customizable
+          width: 444
+          height: 160
         class: 'col-span-5 row-span-5 lg:mb-10'
         orientation: 'vertical'
       - title: Icons
         description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
         icon: i-heroicons-face-smile
         to: /getting-started/theming#icons
-        image: /illustrations/icon-library
+        image:
+          path: /illustrations/icon-library
+          width: 362
+          height: 184
         class: 'col-span-7 row-span-3'
         orientation: 'horizontal'
       - title: Light & Dark
         description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
         to: /getting-started/theming#dark-mode
         icon: i-heroicons-moon
-        image: /illustrations/dark-mode
+        image:
+          path: /illustrations/dark-mode
+          width: 444
+          height: 160
         class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
         orientation: 'vertical'
       - title: Keyboard Shortcuts
@@ -44,10 +56,13 @@ sections:
         icon: i-heroicons-computer-desktop
         to: /getting-started/shortcuts
         class: 'col-span-7 row-span-3'
-        image: /illustrations/keyboard-shortcuts
+        image:
+          path: /illustrations/keyboard-shortcuts
+          width: 444
+          height: 160
         orientation: 'horizontal'
     links:
-      - label: Learn more
+      - label: Explore the docs
         to: /getting-started/theming
         color: white
         size: lg
@@ -65,27 +80,33 @@ sections:
     categories:
       - label: Elements
         to: /elements/dropdown
-        image: /illustrations/elements
+        image:
+          path: /illustrations/elements
         badge: 9
       - label: Forms
         to: /forms/form
-        image: /illustrations/forms
+        image:
+          path: /illustrations/forms
         badge: 10
       - label: Data
         to: /data/table
-        image: /illustrations/data
+        image:
+          path: /illustrations/data
         badge: 1
       - label: Navigation
         to: /navigation/command-palette
-        image: /illustrations/navigation
+        image:
+          path: /illustrations/navigation
         badge: 4
       - label: Overlays
         to: /overlays/modal
-        image: /illustrations/overlays
+        image:
+          path: /illustrations/overlays
         badge: 6
       - label: Layout
         to: /layout/card
-        image: /illustrations/layout
+        image:
+          path: /illustrations/layout
         badge: 3
 cta:
   title: Trusted and supported by our<br class="hidden lg:block"> amazing community

docs/pages/index.vue

@@ -71,7 +71,14 @@
             class="flex flex-col"
           >
             <div v-if="feature.image">
-              <UColorModeImage :light="`${feature.image}-light.svg`" :dark="`${feature.image}-dark.svg`" :alt="feature.title" class="object-cover w-full" />
+              <UColorModeImage
+                :light="`${feature.image.path}-light.svg`"
+                :dark="`${feature.image.path}-dark.svg`"
+                :width="feature.image.width"
+                :height="feature.image.height"
+                :alt="feature.title"
+                class="object-cover w-full"
+              />
             </div>
           </ULandingCard>
         </ULandingGrid>
@@ -85,7 +92,14 @@
             :to="category.to"
             class="hover:bg-gradient-to-b hover:from-gray-200/50 dark:hover:from-gray-800/50 rounded-lg"
           >
-            <UColorModeImage :light="`${category.image}-light.svg`" :dark="`${category.image}-dark.svg`" :alt="category.label" class="object-cover w-full" />
+            <UColorModeImage
+              :light="`${category.image.path}-light.svg`"
+              :dark="`${category.image.path}-dark.svg`"
+              width="363"
+              height="190"
+              :alt="category.label"
+              class="object-cover w-full"
+            />
 
             <div class="flex items-center justify-center gap-2 mt-1 mb-2">
               <span class="font-semibold text-lg">{{ category.label }}</span>
@@ -131,6 +145,8 @@
                   :src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
                   :srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
                   class="lg:hover:scale-125 lg:hover:ring-2 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
+                  width="40"
+                  height="40"
                   size="md"
                 >
                   <NuxtLink :to="`https://github.com/${contributor.username}`" target="_blank" class="focus:outline-none" tabindex="-1">