diff --git a/docs/content/1.docs/1.getting-started/1.introduction.md b/docs/content/1.docs/1.getting-started/1.introduction.md
index a56b8a626e..35364d7319 100644
--- a/docs/content/1.docs/1.getting-started/1.introduction.md
+++ b/docs/content/1.docs/1.getting-started/1.introduction.md
@@ -3,20 +3,54 @@ navigation.icon: uil:info-circle
description: Nuxt's goal is to make web development intuitive and performant with a great DX in mind.
---
-# Introduction
-
+::docs-hero
+---
+imagePath: '/assets/docs/getting-started/views/hero'
+---
+#title
+Introduction
+#description
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.
+::
## What is Nuxt?
To understand what Nuxt is, we need to understand what we need to create a modern application:
+::docs-card-list
+ ::docs-card
+ #extraTitle
+ JavaScript framework
+ #description
+ A JavaScript framework to bring reactivity and web components, we chose Vue.js.
+ ::
-::list{type=success}
-- A JavaScript framework to bring reactivity and web components, we chose [Vue.js](https://v3.vuejs.org).
-- 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/).
-- A transpiler to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
-- 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.
-- A routing library to handle client-side navigation, we chose [vue-router](https://router.vuejs.org/).
+ ::docs-card
+ #extraTitle
+ 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
+ #extraTitle
+ 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
+ #extraTitle
+ 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
+ #extraTitle
+ Routing library
+ #description
+ A routing library to handle client-side navigation, we chose [vue-router](https://router.vuejs.org/).
+ ::
::
This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application.
@@ -101,16 +135,35 @@ 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.
-## Are you Nuxt?
+::docs-card-list
+ ::docs-card
+ ---
+ imagePath: '/assets/docs/getting-started/views/are-you-nuxt'
+ descriptionClass: 'md:mr-[64px] w-[90%]'
+ ---
+ #title
+ Are you Nuxt?
+ #description
+ Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
-Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
+ Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.
+
+
+ Ready to try? Head over to the [Installation section](/docs/getting-started/installation).
-Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.
+ ::
-::alert{type=info icon=👍}
-Ready to try? Head over to the [Installation section](/docs/getting-started/installation).
+ ::docs-card{.mb-8}
+ ---
+ imagePath: '/assets/docs/getting-started/views/contribute'
+ fontSizeClass: 'text-2xl'
+ descriptionClass: 'md:mr-[64px]'
+ ---
+ #extraTitle
+ Contribute
+ #description
+ Do you want to get involved in the evolution of Nuxt?
+
+ Follow the [contribution guide](/docs/community/contribution)
+ ::
::
-
-### Contribute
-
-Do you want to get involved in the evolution of Nuxt? [Follow the contribution guide 👉](/docs/community/contribution)
diff --git a/docs/public/assets/docs/getting-started/views/are-you-nuxt-dark.png b/docs/public/assets/docs/getting-started/views/are-you-nuxt-dark.png
new file mode 100644
index 0000000000..bbe03305e0
Binary files /dev/null and b/docs/public/assets/docs/getting-started/views/are-you-nuxt-dark.png differ
diff --git a/docs/public/assets/docs/getting-started/views/are-you-nuxt-light.png b/docs/public/assets/docs/getting-started/views/are-you-nuxt-light.png
new file mode 100644
index 0000000000..0e0496ad9b
Binary files /dev/null and b/docs/public/assets/docs/getting-started/views/are-you-nuxt-light.png differ
diff --git a/docs/public/assets/docs/getting-started/views/contribute-dark.png b/docs/public/assets/docs/getting-started/views/contribute-dark.png
new file mode 100644
index 0000000000..5579c00559
Binary files /dev/null and b/docs/public/assets/docs/getting-started/views/contribute-dark.png differ
diff --git a/docs/public/assets/docs/getting-started/views/contribute-light.png b/docs/public/assets/docs/getting-started/views/contribute-light.png
new file mode 100644
index 0000000000..5686f5c396
Binary files /dev/null and b/docs/public/assets/docs/getting-started/views/contribute-light.png differ
diff --git a/docs/public/assets/docs/getting-started/views/hero-dark.png b/docs/public/assets/docs/getting-started/views/hero-dark.png
new file mode 100644
index 0000000000..50342ffd24
Binary files /dev/null and b/docs/public/assets/docs/getting-started/views/hero-dark.png differ
diff --git a/docs/public/assets/docs/getting-started/views/hero-light.png b/docs/public/assets/docs/getting-started/views/hero-light.png
new file mode 100644
index 0000000000..98cbb27a90
Binary files /dev/null and b/docs/public/assets/docs/getting-started/views/hero-light.png differ