docs: refactor cards (#9935)

* refactor: cards

* refactor: update image props

* docs(version): update to 0.2.5

docs/content/0.index.md

@@ -32,22 +32,26 @@ Deliver an optimized [User Experience]{.text-transparent .bg-clip-text .bg-gradi
 #description
 How a user interacts with and experiences your website will determine your impact. Utility, ease of use, and efficiency are key. **Nuxt is built with a set of features that make this possible.**
 #cards
-  :::home-card-item
+  :::card-item
   ---
   image:
-    light: 'ux-fast-light.svg'
+    path: '/assets/home/ux-fast'
-    dark: 'ux-fast.svg'
+    width: '341'
+    height: '164'
+    format: 'svg'
   ---
   #title
   Fast and Furious
   #description
   Optimized with code-splitting, tree-shaking, optimized cold-start, link prefetching, payload extraction, just to name a few. Fast by default so you can focus on building.
   :::
-  :::home-card-item
+  :::card-item
   ---
   image:
-    light: 'ux-hybrid-light.svg'
+    path: '/assets/home/ux-hybrid'
-    dark: 'ux-hybrid.svg'
+    width: '341'
+    height: '164'
+    format: 'svg'
   ---
   #title
   On-demand Rendering
@@ -55,11 +59,13 @@ How a user interacts with and experiences your website will determine your impac
   Decide what rendering strategy at the route level: SSR, SSG, CSR, ISR, ESR, SWR.
   Build any kind of website or web application with optimized performance in mind.
   :::
-  :::home-card-item
+  :::card-item
   ---
   image:
-    light: 'ux-seo-light.svg'
+    path: '/assets/home/ux-seo'
-    dark: 'ux-seo.svg'
+    width: '341'
+    height: '164'
+    format: 'svg'
   ---
   #title
   SEO & Web Vitals
@@ -97,33 +103,39 @@ Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradie
 #description
 Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
 #cards
-  :::home-card-item
+  :::card-item
   ---
   image:
-    light: 'dx-plug-and-play-light.svg'
+    path: '/assets/home/dx-plug-and-play'
-    dark: 'dx-plug-and-play.svg'
+    width: '341'
+    height: '164'
+    format: 'svg'
   ---
   #title
   Plug & Play
   #description
   Unlock features by creating folders and files with the [most intuitive directory structure]{.font-semibold} made for developers and teams.
   :::
-  :::home-card-item
+  :::card-item
   ---
   image:
-    light: 'dx-effortless-light.svg'
+    path: '/assets/home/dx-effortless'
-    dark: dx-effortless.svg
+    width: '341'
+    height: '164'
+    format: 'svg'
   ---
   #title
   Automation
   #description
   Repetitive tasks are [automated]{.font-semibold}: auto-imports, code-splitting, typings, minification, bundling for production. and more.
   :::
-  :::home-card-item
+  :::card-item
   ---
   image:
-    light: 'dx-batteries-light.svg'
+    path: '/assets/home/dx-batteries'
-    dark: 'dx-batteries.svg'
+    width: '341'
+    height: '164'
+    format: 'svg'
   ---
   #title
   Batteries Included
@@ -210,40 +222,44 @@ A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r
 #description
 Nuxt is composed of web builders all over the world who like to craft beautiful user experiences with Vue.js.
 #cards
-  :::home-card-item
+  :::card-item
   ---
   icon: 'fa-brands:npm'
   to: 'https://www.npmjs.com/package/nuxt'
+  titleClass: 'text-5xl font-semibold u-text-gray-900'
   ---
   #title
   56M
   #description
   npm downloads
   :::
-  :::home-card-item
+  :::card-item
   ---
   icon: 'fa-brands:discord'
   to: 'https://discord.com/invite/ps2h6QT'
+  titleClass: 'text-5xl font-semibold u-text-gray-900'
   ---
   #title
   20k
   #description
   Discord members
   :::
-  :::home-card-item
+  :::card-item
   ---
   icon: 'fa-brands:github'
   to: 'https://github.com/nuxt'
+  titleClass: 'text-5xl font-semibold u-text-gray-900'
   ---
   #title
   55k
   #description
   GitHub stars
   :::
-  :::home-card-item
+  :::card-item
   ---
   icon: 'fa-brands:twitter'
   to: 'https://twitter.com/nuxt_js'
+  titleClass: 'text-5xl font-semibold u-text-gray-900'
   ---
   #title
   76k
@@ -265,14 +281,14 @@ A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradien
 #description
 Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
 #cards
-  :::home-card-item
+  :::card-item
   ---
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: 'needs-official-agency-light.png'
+    path: '/assets/home/needs-official-agency'
-    dark: 'needs-official-agency.png'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'png'
   contentClass: 'gap-y-2'
   to: '/support/agencies'
   ---
@@ -281,14 +297,14 @@ Developers deserve solutions as well designed as non-technical people. Our focus
   #description
   A carefully built network of trusted agencies from all over the world!
   :::
-  :::home-card-item
+  :::card-item
   ---
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: 'needs-nuxt-expert-light.png'
+    path: '/assets/home/needs-nuxt-expert'
-    dark: 'needs-nuxt-expert.png'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'png'
   contentClass: 'gap-y-2'
   to: '/support/solutions'
   ---
@@ -297,15 +313,15 @@ Developers deserve solutions as well designed as non-technical people. Our focus
   #description
   A network of freelance from all over the world, certified by the NuxtLabs team !
   :::
-  :::home-card-item
+  :::card-item
   ---
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   contentClass: 'gap-y-2'
   image:
-    light: 'needs-community-support-light.png'
+    path: '/assets/home/needs-community-support'
-    dark: 'needs-community-support.png'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'png'
   to: '/support/solutions'
   ---
   #title

docs/content/1.docs/0.index.md

@@ -12,26 +12,27 @@ Nuxt Docs
 Nuxt is an open-source framework under MIT license for building modern and performant web applications that can be deployed on any platform running JavaScript.
 ::
 
-::docs-card
+::card-item
 ---
-component: 'div'
+is: 'div'
+gradientBorder: false
 descriptionClass: 'w-full sm:w-2/3'
-roundedClass: 'rounded-xl'
+backgroundImage:
-image:
   path: '/assets/docs/getting-started/views/getting-started'
   width: '100'
   height: '100'
+  format: 'png'
 buttons:
   - label: 'Get started'
-    size: 'xl'
+    size: 'sm'
     variant: 'primary-gradient'
     to: '/docs/getting-started/introduction'
   - label: 'Explore Examples'
-    size: 'xl'
+    size: 'sm'
     variant: 'secondary'
     to: '/docs/examples/essentials/hello-world'
 ---
-#extraTitle
+#title
 Getting Started
 #description
 Start by learning Nuxt core features, from installation to deployment.
@@ -45,15 +46,16 @@ Guide
 #description
 From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
 #extra
-  ::docs-landing-list
+  ::card-list
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/key-concepts-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/key-concepts'
-    dark: '/assets/docs/getting-started/views/docs-landing/key-concepts-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/guide/concepts/auto-imports'
   ---
@@ -62,14 +64,15 @@ From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
   #description
   Get an overview of the concepts that drive the Nuxt experience.
   :::
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/directory-structure-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/directory-structure'
-    dark: '/assets/docs/getting-started/views/docs-landing/directory-structure-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/guide/directory-structure/nuxt'
   ---
@@ -78,14 +81,15 @@ From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
   #description
   Navigate Nuxt directory structure with this handy guide.
   :::
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/going-further-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/going-further'
-    dark: '/assets/docs/getting-started/views/docs-landing/going-further-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/guide/going-further/internals'
   ---
@@ -103,15 +107,16 @@ API
 #description
 Every Nuxt components, composables and utilities, in details.
 #extra
-  ::docs-landing-list
+  ::card-list
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/composables-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/composables'
-    dark: '/assets/docs/getting-started/views/docs-landing/composables-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/api/composables/use-app-config'
   ---
@@ -120,14 +125,15 @@ Every Nuxt components, composables and utilities, in details.
   #description
   From data fetching to error handling, get familiar with Nuxt built-in composables.
   :::
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/components-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/components'
-    dark: '/assets/docs/getting-started/views/docs-landing/components-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/api/components/client-only'
   ---
@@ -136,14 +142,15 @@ Every Nuxt components, composables and utilities, in details.
   #description
   Nuxt components, auto-imported and ready to use in your application.
   :::
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/utils-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/utils'
-    dark: '/assets/docs/getting-started/views/docs-landing/utils-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/api/utils/dollarfetch'
   ---
@@ -152,14 +159,15 @@ Every Nuxt components, composables and utilities, in details.
   #description
   Use utility functions to get fine-grained control over your app behavior.
   :::
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/advanced-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/advanced'
-    dark: '/assets/docs/getting-started/views/docs-landing/advanced-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/api/advanced/hooks'
   ---
@@ -168,14 +176,15 @@ Every Nuxt components, composables and utilities, in details.
   #description
   Learn about lifecycle hooks and Kit utilities in the advanced section.
   :::
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/commands-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/commands'
-    dark: '/assets/docs/getting-started/views/docs-landing/commands-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/api/commands/add'
   ---
@@ -184,14 +193,15 @@ Every Nuxt components, composables and utilities, in details.
   #description
   Meet Nuxi, Nuxt 3 command-line tool. The essential companion in your journey.
   :::
-  :::docs-landing-card
+  :::card-item
   ---
+  gradientBorder: false
   headerClass: 'justify-start px-4 pt-4 sm:px-6'
   image:
-    light: '/assets/docs/getting-started/views/docs-landing/configuration-light.svg'
+    path: '/assets/docs/getting-started/views/docs-landing/configuration'
-    dark: '/assets/docs/getting-started/views/docs-landing/configuration-dark.svg'
+    width: '52'
-  imageHeight: '58'
+    height: '58'
-  imageWidth: '52'
+    format: 'svg'
   contentClass: 'gap-y-2'
   to: '/docs/api/configuration/nuxt-config'
   ---

docs/content/1.docs/1.getting-started/1.introduction.md

@@ -10,6 +10,7 @@ image:
   path: '/assets/docs/getting-started/views/hero'
   width: '129'
   height: '143'
+  format: 'png'
 ---
 #title
 Introduction
@@ -20,37 +21,75 @@ Nuxt provides both frontend and backend functionality so you can focus on what m
 ## What is Nuxt?
 
 To understand what Nuxt is, we need to understand what we need in order to create a modern application:
-::docs-card-list
+::card-list
-  ::docs-card
+---
-  #extraTitle
+cardListClass: 'grid grid-cols-1 gap-y-2'
+---
+  ::card-item
+  ---
+  gradientBorder: false
+  contentClass: 'gap-y-2'
+  bodyClass: 'p-4'
+  roundedClass: 'rounded-sm'
+  titleClass: 'text-base font-semibold u-text-gray-900'
+  ---
+  #title
   JavaScript framework
   #description
   A JavaScript framework to bring reactivity and web components, we chose Vue.js.
   ::
 
-  ::docs-card
+  ::card-item
-  #extraTitle
+  ---
+  gradientBorder: false
+  contentClass: 'gap-y-2'
+  bodyClass: 'p-4'
+  roundedClass: 'rounded-sm'
+  titleClass: 'text-base font-semibold u-text-gray-900'
+  ---
+  #title
   Webpack and Vite
   #description
   A bundler to support hot module replacement in development and bundle your code for production, we support both [webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/).
   ::
 
-  ::docs-card
+  ::card-item
-  #extraTitle
+  ---
+  gradientBorder: false
+  contentClass: 'gap-y-2'
+  bodyClass: 'p-4'
+  roundedClass: 'rounded-sm'
+  titleClass: 'text-base font-semibold u-text-gray-900'
+  ---
+  #title
   Latest JavaScript syntax
   #description
   A transpiler to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
   ::
 
-  ::docs-card
+  ::card-item
-  #extraTitle
+  ---
+  gradientBorder: false
+  contentClass: 'gap-y-2'
+  bodyClass: 'p-4'
+  roundedClass: 'rounded-sm'
+  titleClass: 'text-base font-semibold u-text-gray-900'
+  ---
+  #title
   Server side
   #description
   A server for serving your application in development, but also to support [server-side rendering](https://vuejs.org/api/ssr.html#server-side-rendering-api) or API routes, Nuxt uses [h3](https://github.com/unjs/h3) for deployment versatility such as serverless, workers, Node.js and unmatched performance.
   ::
 
-  ::docs-card
+  ::card-item
-  #extraTitle
+  ---
+  gradientBorder: false
+  contentClass: 'gap-y-2'
+  bodyClass: 'p-4'
+  roundedClass: 'rounded-sm'
+  titleClass: 'text-base font-semibold u-text-gray-900'
+  ---
+  #title
   Routing library
   #description
   A routing library to handle client-side navigation, we chose [vue-router](https://router.vuejs.org/).
@@ -139,13 +178,19 @@ Nuxt is composed of different [core packages](https://github.com/nuxt/framework/
 
 We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
 
-::docs-card-list
+::card-list
-  ::docs-card
 ---
-  image:
+cardListClass: 'grid grid-cols-1 gap-y-4'
+---
+  :::card-item
+  ---
+  gradientBorder: false
+  backgroundImage:
     path: '/assets/docs/getting-started/views/are-you-nuxt'
     width: '72px'
     height: '92px'
+    format: 'png'
+  titleClass: 'text-5xl font-semibold u-text-gray-900 pb-2'
   descriptionClass: 'md:mr-[64px] w-[90%]'
   ---
   #title
@@ -158,19 +203,18 @@ We recommend reading each concept to have a full vision of Nuxt capabilities and
 <br>
 <br>
   Ready to try? Head over to the [Installation section](/docs/getting-started/installation).
+  :::
 
-  ::
+  :::card-item
-
-  ::docs-landing-card{.mb-8}
   ---
-  image:
+  gradientBorder: false
-    dark: '/assets/docs/getting-started/views/contribute-dark.png'
+  backgroundImage:
-    light: '/assets/docs/getting-started/views/contribute-light.png'
+    path: '/assets/docs/getting-started/views/contribute'
-  imageWidth: '72'
+    width: '72'
-  imageHeight: '92'
+    height: '92'
-  fontSizeClass: 'text-2xl'
+    format: 'png'
+  titleClass: 'text-2xl u-text-gray-900 font-semibold'
   descriptionClass: 'md:mr-[64px]'
-  imageClass: "right-0 bottom-0 absolute"
   ---
   #title
   Contribute
@@ -178,5 +222,5 @@ We recommend reading each concept to have a full vision of Nuxt capabilities and
   Do you want to get involved in the evolution of Nuxt?
   <br>
   Follow the [contribution guide](/docs/community/contribution).
-  ::
+  :::
 ::

docs/content/1.docs/5.community/1.nuxt-community.md

@@ -10,6 +10,7 @@ image:
   path: '/assets/docs/getting-started/nuxt-community/nuxt-community'
   width: '437'
   height: '236'
+  format: 'png'
 ---
 #title
 Nuxt Community
@@ -23,50 +24,75 @@ The journey of an [Open Source Project]{.text-transparent .bg-clip-text .bg-grad
 #description
 The development of Nuxt and its ecosystem is led by an international team. Our committed team and community work every day to move Nuxt forward.
 #extra
-  ::docs-card{.dark:bg-gray-900}
+  ::docs-community-journey-section{.dark:bg-gray-900}
   ---
   fontSizeClass: 'text-2xl'
   ---
   #extraTitle
   Since the creation of Nuxt 3
-    ::stat-card-list
+    ::card-list
     ---
-    gridClass: 'lg:grid-cols-4'
+    cardListClass: 'grid grid-cols-1 gap-1 sm:gap-8 sm:grid-cols-2 lg:grid-cols-4 border-gray-200 dark:border-gray-800 rounded-xl'
-    backgroundImg:
+    backgroundImage:
       path: '/assets/docs/getting-started/nuxt-community/map-nuxters'
-      width: "800"
+      width: '582'
-      height: ""
+      height: '187'
+      format: 'png'
     ---
-      :::stat-card-item
+      :::card-item
       ---
-      descriptionClass: 'text-lg font-medium'
+      contentClass: ''
+      ringClass: ''
+      gradientBorder: false
+      titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
+      descriptionClass: 'u-text-gray-500 text-lg font-medium'
+      bodyClass: 'p-2.5 sm:p-4'
+      backgroundClass: 'bg-transparent'
       ---
       #title
       50M
       #description
       npm downloads
       :::
-      :::stat-card-item
+      :::card-item
       ---
-      descriptionClass: 'text-lg font-medium'
+      contentClass: ''
+      ringClass: ''
+      gradientBorder: false
+      titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
+      descriptionClass: 'u-text-gray-500 text-lg font-medium'
+      bodyClass: 'p-2.5 sm:p-4'
+      backgroundClass: 'bg-transparent'
       ---
       #title
       10,6K
       #description
       Stars
       :::
-      :::stat-card-item
+      :::card-item
       ---
-      descriptionClass: 'text-lg font-medium'
+      contentClass: ''
+      ringClass: ''
+      gradientBorder: false
+      titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
+      descriptionClass: 'u-text-gray-500 text-lg font-medium'
+      bodyClass: 'p-2.5 sm:p-4'
+      backgroundClass: 'bg-transparent'
       ---
       #title
       330
       #description
       Contributors
       :::
-      :::stat-card-item
+      :::card-item
       ---
-      descriptionClass: 'text-lg font-medium'
+      contentClass: ''
+      ringClass: ''
+      gradientBorder: false
+      titleClass: 'text-3xl font-semibold sm:text-5xl u-text-gray-900 mb-2 mt-2'
+      descriptionClass: 'u-text-gray-500 text-lg font-medium'
+      bodyClass: 'p-2.5 sm:p-4'
+      backgroundClass: 'bg-transparent'
       ---
       #title
       998
@@ -83,7 +109,6 @@ From users to [Contributors]{.text-transparent .bg-clip-text .bg-gradient-to-r .
 #description
 From contributors to advocates, the community is made of members with different horizons and skills. We are happy to see new members every day and encourage anyone to help in any way (answering questions, giving a talk, creating modules and contributing to the core).
 #extra
-
     ::contributors-card
     #title
     Sharing is caring
@@ -114,59 +139,86 @@ Join the [journey]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green
 #description
 From user to contributor, these guides will help you get the best out of Nuxt.
 #extra
-  ::journey-card-list
+  ::card-list
-    ::docs-card
   ---
+  cardListClass: 'grid grid-cols-1 pt-6 gap-y-4 sm:gap-y-0 sm:grid-cols-2 border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden'
+  ---
+    ::card-item
+    ---
+    backgroundClass: 'border dark:border-gray-700'
+    roundedClass: 'sm:rounded-r-none sm:rounded-br-none sm:rounded-tl-lg'
+    ringClass: 'ring-0'
+    gradientBorder: false
     descriptionClass: 'w-full sm:w-2/3'
-    roundedClass: 'rounded-t-lg sm:rounded-tl-lg sm:rounded-tr-none'
+    backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
-    image:
+    backgroundImage:
       path: '/assets/docs/getting-started/nuxt-community/community-contribute'
       width: '88'
       height: '88'
+      format: 'png'
+    titleClass: 'text-base font-semibold u-text-gray-900'
     ---
-    #extraTitle
+    #title
     [How to contribute?](/docs/community/contribution)
     #description
     Nuxt is a community project - and so we love contributions of all kinds! ❤️
     ::
-    ::docs-card
+    ::card-item
     ---
+    backgroundClass: 'border dark:border-gray-700'
+    roundedClass: 'sm:rounded-l-none sm:rounded-br-none sm:rounded-tr-lg'
+    ringClass: 'ring-0'
+    gradientBorder: false
     descriptionClass: 'w-full sm:w-2/3'
-    roundedClass: 'sm:rounded-tr-lg'
+    backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
-    image:
+    backgroundImage:
       path: '/assets/docs/getting-started/nuxt-community/roadmap'
       width: '88'
       height: '88'
+      format: 'png'
+    titleClass: 'text-base font-semibold u-text-gray-900'
     ---
-    #extraTitle
+    #title
     [Discover our roadmap](/docs/community/roadmap)
     #description
     Nuxt is constantly evolving, with new features and modules being added all the time.
     ::
-    ::docs-card
+    ::card-item
     ---
+    backgroundClass: 'border dark:border-gray-700'
+    ringClass: 'ring-0'
+    roundedClass: 'sm:rounded-tl-none sm:rounded-r-none sm:rounded-bl-lg'
+    gradientBorder: false
     descriptionClass: 'w-full sm:w-2/3'
-    roundedClass: 'sm:rounded-bl-lg'
+    backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
-    image:
+    backgroundImage:
       path: '/assets/docs/getting-started/nuxt-community/bugs'
       width: '88'
       height: '88'
+      format: 'png'
+    titleClass: 'text-base font-semibold u-text-gray-900'
     ---
-    #extraTitle
+    #title
     [Reporting Bugs](/docs/community/reporting-bugs)
     #description
     One of the most valuable roles in open source is taking the time to report bugs helpfully.
     ::
-    ::docs-card
+    ::card-item
     ---
+    backgroundClass: 'border dark:border-gray-700'
+    ringClass: 'ring-0'
+    roundedClass: 'sm:rounded-l-none sm:rounded-br-lg sm:rounded-tr-none'
+    gradientBorder: false
     descriptionClass: 'w-full sm:w-2/3'
-    roundedClass: 'rounded-b-lg sm:rounded-br-lg sm:rounded-bl-none'
+    backgroundImageClass: 'hidden sm:block absolute bottom-0 right-0'
-    image:
+    backgroundImage:
       path: '/assets/docs/getting-started/nuxt-community/help'
       width: '88'
       height: '88'
+      format: 'png'
+    titleClass: 'text-base font-semibold u-text-gray-900'
     ---
-    #extraTitle
+    #title
     [Getting Help](/docs/community/getting-help)
     #description
     We're a friendly community of developers and we'd love to help you!

docs/content/2.modules.md

@@ -8,7 +8,7 @@ image: '/socials/modules.jpg'
 ::page-hero
 ---
 image:
-  src: '/assets/modules/hero'
+  path: '/assets/modules/hero'
   format: 'webp'
   height: '216'
   width: '400'

docs/content/3.showcase.md

@@ -8,7 +8,7 @@ image: '/socials/showcase.jpg'
 ::page-hero
 ---
 image:
-  src: '/assets/showcase/hero'
+  path: '/assets/showcase/hero'
   format: 'webp'
   height: '216'
   width: '400'

docs/content/4.support/1.solutions.md

@@ -7,7 +7,7 @@ image: '/socials/support.jpg'
 ::page-hero
 ---
 image:
-  src: '/assets/support/solutions/hero'
+  path: '/assets/support/solutions/hero'
   format: 'webp'
   height: '216'
   width: '400'
@@ -20,7 +20,11 @@ Discover the different support offers to answer your questions, get an audit, co
 
 ::support-section
 ---
-image: 'agency'
+image:
+  path: 'agency'
+  width: '73'
+  height: '81'
+  format: 'webp'
 to: '/support/agencies'
 ---
 #title
@@ -36,7 +40,11 @@ If you have any question, we will gladly help you refine your needs and help you
 
 ::support-section
 ---
-image: 'experts'
+image:
+  path: 'experts'
+  width: '73'
+  height: '81'
+  format: 'webp'
 ---
 #title
 Nuxt Experts
@@ -58,7 +66,11 @@ They act as an external workforce for Nuxtlabs and are qualified to take on any
 
 ::support-section
 ---
-image: 'community'
+image:
+  path: 'community'
+  width: '73'
+  height: '81'
+  format: 'webp'
 ---
 #title
 Community Support

docs/content/4.support/2.agencies/1.index.md

@@ -6,7 +6,7 @@ head.titleTemplate: '%s'
 ::page-hero
 ---
 image:
-  src: '/assets/support/agencies/hero'
+  path: '/assets/support/agencies/hero'
   format: 'svg'
   height: '216'
   width: '400'

docs/content/4.support/3.us.md

@@ -7,7 +7,7 @@ image: '/socials/sponsors.jpg'
 ::page-hero
 ---
 image:
-  src: '/assets/support/sponsors/hero'
+  path: '/assets/support/sponsors/hero'
   format: 'webp'
   height: '216'
   width: '400'

docs/content/4.support/4.jobs.md

@@ -7,7 +7,7 @@ image: '/socials/jobs.jpg'
 ::page-hero
 ---
 image:
-  src: '/assets/support/jobs/hero'
+  path: '/assets/support/jobs/hero'
   format: 'webp'
   height: '216'
   width: '400'

docs/content/design-kit.md

@@ -7,7 +7,7 @@ image: '/socials/design-kit.jpg'
 ::page-hero
 ---
 image:
-  src: '/assets/design-kit/hero-designkit'
+  path: '/assets/design-kit/hero-designkit'
   format: 'webp'
   height: '216'
   width: '400'

docs/package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "jiti": "^1.16.1",
     "nuxt": "^3.0.0",
-    "nuxt-website-theme": "^0.2.4",
+    "nuxt-website-theme": "^0.2.5",
     "pathe": "^1.0.0",
     "scule": "^1.0.0",
     "untyped": "^1.2.1"

docs/yarn.lock

@@ -4194,7 +4194,7 @@ __metadata:
   dependencies:
     jiti: ^1.16.1
     nuxt: ^3.0.0
-    nuxt-website-theme: ^0.2.4
+    nuxt-website-theme: ^0.2.5
     pathe: ^1.0.0
     scule: ^1.0.0
     untyped: ^1.2.1
@@ -8996,9 +8996,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nuxt-website-theme@npm:^0.2.4":
+"nuxt-website-theme@npm:^0.2.5":
-  version: 0.2.4
+  version: 0.2.5
-  resolution: "nuxt-website-theme@npm:0.2.4"
+  resolution: "nuxt-website-theme@npm:0.2.5"
   dependencies:
     "@docsearch/css": ^3.3.0
     "@docsearch/js": ^3.3.0
@@ -9022,7 +9022,7 @@ __metadata:
     tailwindcss-border-gradient-radius: ^3.0.1
     three: ^0.147.0
     vue-lite-youtube-embed: ^1.0.4
-  checksum: 3f268953cb17198a0090b4d6c1f0eb6c0e15531ad863f65597ff0aa080823018fd10c342cf7866d11ea5567821740cd44d6712947351071fb08df9221d80fcb7
+  checksum: 5a5ba6b094475edbea83b0583e85bdcbc4435a2378be6e63be4f67f980071686d08c2297400c6eda7bbe9e28d95452863f897012f92cf1eed0c7c3cfe7558d3a
   languageName: node
   linkType: hard