From 204cbe6fa6770157e8dda14855972d8b00c35c5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 15 Sep 2022 11:09:59 +0200
Subject: [PATCH 01/11] docs(wip): add views page

---
 docs/content/1.getting-started/3.views.md | 123 +++++++++++++++++++++-
 1 file changed, 119 insertions(+), 4 deletions(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 53bf6eb1386..963d0530804 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -1,13 +1,128 @@
+---
+description: "Nuxt provides 4 layers to manage the User Interface of your application. Each View is composed of Vue Single File Components (SFCs)"
+---
 # Views
 
-::NeedContribution
+## `App.vue`
+
+![The app.vue file is the entry point of your application](/3.x/img/views/app.png)
+
+By default, Nuxt will treat this file as the **entrypoint** and serve its content at the `/` **route** of our application.
+
+```vue [App.vue]
+<template>
+  <div>
+   <HelloNuxt />
+  </div>
+</template>
+```
+
+::alert
+💡 If you are familiar with Vue, you might wonder where is the `main.js` file that creates a Vue app. Nuxt does this behind the scene.
 ::
 
-::ReadMore{link="/guide/directory-structure/components"}
+## Components
+
+![Components are reusable pieces of UI](/3.x/img/views/components.png)
+
+Unlike `app.vue`, most components are not pages of our application, but reusable pieces of user interface, like buttons or menus. In Nuxt, you can create these components in the `components/` directory for them to be available across your application without having to explicitly import them, contrary to Vue.js.
+
+::code-group
+
+```vue [App.vue]
+<template>
+  <div>
+   <AppAlert>
+    This is an auto-imported component
+   </AppAlert>
+  </div>
+</template>
+```
+
+```vue [components/AppAlert.vue]
+<template>
+  <span>
+    <slot />
+  </span>
+</template>
+```
+
 ::
 
-::ReadMore{link="/guide/directory-structure/pages"}
+## Pages
+
+![Pages are views tied to a specific route](/3.x/img/views/pages.png)
+
+Pages represent views tied to a specific route. Every file in the `pages/` directory represents a different route displaying its content. 
+
+To use pages, replace the content of `App.vue` with the built-in `<NuxtPage />` component.
+
+::code-group
+
+```vue [App.vue]
+<template>
+  <div>
+   <NuxtPage />
+  </div>
+</template>
+```
+
+```vue [pages/about.vue]
+<template>
+  <section>
+    <p>This page will be displayed at the /about route.</p>
+  </section>
+</template>
+```
+
+::
+
+::alert
+You will learn more about pages in the Routing section
+::
+
+## Layouts
+
+![Layouts are wrapper around pages](/3.x/img/views/layouts.png)
+
+Layouts are wrapper around pages that contain a User Interface that is common to several pages, such as a header and footer display. Layouts are used by adding `<NuxtLayout>` built-in component to your `App.vue` file, and setting a layout property as part of your page metadata.
+
+::alert
+If you only have a single layout in your application, we recommend using app.vue instead.
 ::
 
-::ReadMore{link="/guide/directory-structure/layouts"}
+::code-group
+
+```vue [App.vue]
+<template>
+  <div>
+   <NuxtLayout />
+  </div>
+</template>
+```
+
+```vue [layouts/Blog.vue]
+<template>
+  <div>
+   <BlogHeader />
+    <slot />
+   <BlogFooter />
+  </div> 
+</template>
+```
+
+```vue [pages/Article.vue]
+<template>
+  <p>
+    This content will be displayed in the <slot/> of the 'blog' layout
+  </p>
+</template>
+
+<script>
+  definePageMeta({
+    layout: 'blog'
+  });
+</script>
+```
+
 ::

From c46c1fc934bcbe5ae5f75c93d9629c2d4e0fd286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 15 Sep 2022 14:39:31 +0200
Subject: [PATCH 02/11] chore: lint docs

---
 docs/content/1.getting-started/3.views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 963d0530804..ccf454dd8c7 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -53,7 +53,7 @@ Unlike `app.vue`, most components are not pages of our application, but reusable
 
 ![Pages are views tied to a specific route](/3.x/img/views/pages.png)
 
-Pages represent views tied to a specific route. Every file in the `pages/` directory represents a different route displaying its content. 
+Pages represent views tied to a specific route. Every file in the `pages/` directory represents a different route displaying its content.
 
 To use pages, replace the content of `App.vue` with the built-in `<NuxtPage />` component.
 

From c9effe347a641bef5d7ebfd7264fd124d9390061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 15 Sep 2022 14:50:29 +0200
Subject: [PATCH 03/11] docs: add description for views page

---
 docs/content/1.getting-started/3.views.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index ccf454dd8c7..44971012886 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -1,8 +1,7 @@
----
-description: "Nuxt provides 4 layers to manage the User Interface of your application. Each View is composed of Vue Single File Components (SFCs)"
----
 # Views
 
+Nuxt provides 4 layers to manage the User Interface of your application. Each View is composed of Vue Single File Components (SFCs)
+
 ## `App.vue`
 
 ![The app.vue file is the entry point of your application](/3.x/img/views/app.png)

From 656646aaaff2ec0601a1e40c60e13d50ae335e61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 15 Sep 2022 14:56:32 +0200
Subject: [PATCH 04/11] docs: add link to routing section

---
 docs/content/1.getting-started/3.views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 44971012886..6d005993a8f 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -77,7 +77,7 @@ To use pages, replace the content of `App.vue` with the built-in `<NuxtPage />`
 ::
 
 ::alert
-You will learn more about pages in the Routing section
+You will learn more about pages in the [Routing section](/getting-started/routing)
 ::
 
 ## Layouts

From c37769220a4e2730ea324985b52f269b01146ded Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 15 Sep 2022 14:58:13 +0200
Subject: [PATCH 05/11] docs: remove hellonuxt component from example

---
 docs/content/1.getting-started/3.views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 6d005993a8f..df2b9772b5c 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -11,7 +11,7 @@ By default, Nuxt will treat this file as the **entrypoint** and serve its conten
 ```vue [App.vue]
 <template>
   <div>
-   <HelloNuxt />
+   <!-- Homepage -->
   </div>
 </template>
 ```

From 6caee733ce40b63b94f2056956135fe45c3a51a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 15 Sep 2022 15:10:46 +0200
Subject: [PATCH 06/11] docs: update layouts explanation

---
 docs/content/1.getting-started/3.views.md | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index df2b9772b5c..fd0d096e913 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -54,14 +54,14 @@ Unlike `app.vue`, most components are not pages of our application, but reusable
 
 Pages represent views tied to a specific route. Every file in the `pages/` directory represents a different route displaying its content.
 
-To use pages, replace the content of `App.vue` with the built-in `<NuxtPage />` component.
+To use pages, delete the `App.vue` file and move its content in a `pages/index.vue` file. You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
 
 ::code-group
 
-```vue [App.vue]
+```vue [pages/index.vue]
 <template>
   <div>
-   <NuxtPage />
+   <!-- Homepage -->
   </div>
 </template>
 ```
@@ -84,18 +84,20 @@ You will learn more about pages in the [Routing section](/getting-started/routin
 
 ![Layouts are wrapper around pages](/3.x/img/views/layouts.png)
 
-Layouts are wrapper around pages that contain a User Interface that is common to several pages, such as a header and footer display. Layouts are used by adding `<NuxtLayout>` built-in component to your `App.vue` file, and setting a layout property as part of your page metadata.
+Layouts are wrapper around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **pages** content. The `layout/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
 
 ::alert
-If you only have a single layout in your application, we recommend using app.vue instead.
+If you only have a single layout in your application, we recommend using app.vue with the [`<NuxtPage />` component](/api/components/nuxt-page) instead.
 ::
 
 ::code-group
 
-```vue [App.vue]
+```vue [layouts/default.vue]
 <template>
   <div>
-   <NuxtLayout />
+    <AppHeader />
+      <slot />
+    <AppFooter />
   </div>
 </template>
 ```
@@ -103,9 +105,9 @@ If you only have a single layout in your application, we recommend using app.vue
 ```vue [layouts/Blog.vue]
 <template>
   <div>
-   <BlogHeader />
-    <slot />
-   <BlogFooter />
+    <BlogHeader />
+      <slot />
+    <BlogFooter />
   </div> 
 </template>
 ```

From e972f2842778618bfcaeb99fae21524c7002d396 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 15 Sep 2022 15:48:03 +0200
Subject: [PATCH 07/11] docs: update layouts section

---
 docs/.gitignore                           |  1 +
 docs/content/1.getting-started/3.views.md | 41 ++++++++++++-----------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/docs/.gitignore b/docs/.gitignore
index b4a500fb84f..988de6ce14a 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -1,2 +1,3 @@
 schema
 **/*.configuration/nuxt.config.md
+**/*.configuration/nuxt-config.md
diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index fd0d096e913..800cb546868 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -11,7 +11,7 @@ By default, Nuxt will treat this file as the **entrypoint** and serve its conten
 ```vue [App.vue]
 <template>
   <div>
-   <!-- Homepage -->
+   <h1>Welcome to the homepage</h1>
   </div>
 </template>
 ```
@@ -31,9 +31,10 @@ Unlike `app.vue`, most components are not pages of our application, but reusable
 ```vue [App.vue]
 <template>
   <div>
-   <AppAlert>
-    This is an auto-imported component
-   </AppAlert>
+    <h1>Welcome to the homepage</h1>
+    <AppAlert>
+      This is an auto-imported component
+    </AppAlert>
   </div>
 </template>
 ```
@@ -61,7 +62,10 @@ To use pages, delete the `App.vue` file and move its content in a `pages/index.v
 ```vue [pages/index.vue]
 <template>
   <div>
-   <!-- Homepage -->
+   <h1>Welcome to the homepage</h1>
+    <AppAlert>
+      This is an auto-imported component
+    </AppAlert>
   </div>
 </template>
 ```
@@ -102,28 +106,25 @@ If you only have a single layout in your application, we recommend using app.vue
 </template>
 ```
 
-```vue [layouts/Blog.vue]
+```vue [pages/index.vue]
 <template>
   <div>
-    <BlogHeader />
-      <slot />
-    <BlogFooter />
-  </div> 
+   <h1>Welcome to the homepage</h1>
+    <AppAlert>
+      This is an auto-imported component
+    </AppAlert>
+  </div>
 </template>
 ```
 
-```vue [pages/Article.vue]
+```vue [pages/about.vue]
 <template>
-  <p>
-    This content will be displayed in the <slot/> of the 'blog' layout
-  </p>
+  <section>
+    <p>This page will be displayed at the /about route.</p>
+  </section>
 </template>
-
-<script>
-  definePageMeta({
-    layout: 'blog'
-  });
-</script>
 ```
 
 ::
+
+If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/guide/directory-structure/layouts).

From 32b6083e1ef9deb9df73b3f9362a3157ce000778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Mon, 19 Sep 2022 12:08:34 +0200
Subject: [PATCH 08/11] docs(views): add images

---
 docs/content/1.getting-started/3.views.md            | 8 ++++----
 docs/static/img/getting-started/views/app.svg        | 1 +
 docs/static/img/getting-started/views/components.svg | 1 +
 docs/static/img/getting-started/views/layouts.svg    | 1 +
 docs/static/img/getting-started/views/pages.svg      | 1 +
 5 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 docs/static/img/getting-started/views/app.svg
 create mode 100644 docs/static/img/getting-started/views/components.svg
 create mode 100644 docs/static/img/getting-started/views/layouts.svg
 create mode 100644 docs/static/img/getting-started/views/pages.svg

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 800cb546868..7d54dfa4d5b 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -4,7 +4,7 @@ Nuxt provides 4 layers to manage the User Interface of your application. Each Vi
 
 ## `App.vue`
 
-![The app.vue file is the entry point of your application](/3.x/img/views/app.png)
+![The app.vue file is the entry point of your application](/img/getting-started/views/app.svg)
 
 By default, Nuxt will treat this file as the **entrypoint** and serve its content at the `/` **route** of our application.
 
@@ -22,7 +22,7 @@ By default, Nuxt will treat this file as the **entrypoint** and serve its conten
 
 ## Components
 
-![Components are reusable pieces of UI](/3.x/img/views/components.png)
+![Components are reusable pieces of UI](/img/getting-started/views/components.svg)
 
 Unlike `app.vue`, most components are not pages of our application, but reusable pieces of user interface, like buttons or menus. In Nuxt, you can create these components in the `components/` directory for them to be available across your application without having to explicitly import them, contrary to Vue.js.
 
@@ -51,7 +51,7 @@ Unlike `app.vue`, most components are not pages of our application, but reusable
 
 ## Pages
 
-![Pages are views tied to a specific route](/3.x/img/views/pages.png)
+![Pages are views tied to a specific route](/img/getting-started/views/pages.svg)
 
 Pages represent views tied to a specific route. Every file in the `pages/` directory represents a different route displaying its content.
 
@@ -86,7 +86,7 @@ You will learn more about pages in the [Routing section](/getting-started/routin
 
 ## Layouts
 
-![Layouts are wrapper around pages](/3.x/img/views/layouts.png)
+![Layouts are wrapper around pages](/img/getting-started/views/layouts.svg)
 
 Layouts are wrapper around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **pages** content. The `layout/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
 
diff --git a/docs/static/img/getting-started/views/app.svg b/docs/static/img/getting-started/views/app.svg
new file mode 100644
index 00000000000..9732919e3e2
--- /dev/null
+++ b/docs/static/img/getting-started/views/app.svg
@@ -0,0 +1 @@
+<svg fill="none" height="513" viewBox="0 0 754 513" width="754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="195.721" width="183.053" x="563.973" y="320.674"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84040"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84040" mode="normal" result="shape"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="142.436" width="134.053" x="99.9733" y="-13.1947"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84040"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84040" mode="normal" result="shape"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="482" width="754" x="0" y="31"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84040"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84040" mode="normal" result="effect2_dropShadow_7267_84040"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84040" mode="normal" result="shape"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="86.2449" width="82.0535" x="-.026739" y="343.889"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84040"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84040" mode="normal" result="shape"/></filter><linearGradient id="e"><stop offset="0" stop-color="#00dc82"/><stop offset=".5" stop-color="#36e4da"/><stop offset="1" stop-color="#0047e1"/></linearGradient><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="655.41" x2="557.503" xlink:href="#e" y1="504" y2="296.381"/><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="166.939" x2="100.608" xlink:href="#e" y1="116" y2="-24.9445"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="40.9694" x2="7.80399" xlink:href="#e" y1="416" y2="345.528"/><g filter="url(#a)"><path d="m645.319 498.982-57.788-34.893c-5.295-3.197-8.531-8.931-8.531-15.117v-.347-59.686-.341c0-6.15 3.197-11.857 8.441-15.068l57.79-35.387c5.205-3.188 11.63-3.258 16.898-.187l61.118 35.639c5.42 3.161 8.753 8.963 8.753 15.237v.359 59.184.364c0 6.309-3.372 12.138-8.842 15.283l-61.12 35.143c-5.221 3.002-11.559 2.933-16.719-.183z" fill="url(#f)" fill-opacity=".3"/></g><g filter="url(#b)"><path d="m160.079 112.596-39.28-23.6698c-3.599-2.1686-5.799-6.0635-5.799-10.2651v-.2252-40.4886-.222c0-4.1771 2.174-8.0531 5.738-10.2313l39.282-24.00548c3.538-2.16202 7.905-2.21008 11.486-.12639l41.544 24.17607c3.684 2.1437 5.95 6.0844 5.95 10.3465v.233 40.1483.2362c0 4.2862-2.293 8.245-6.01 10.3783l-41.546 23.8395c-3.549 2.037-7.857 1.99-11.365-.124z" fill="url(#g)" fill-opacity=".3"/></g><g filter="url(#c)"><rect fill="#00dc82" height="394" rx="12" width="666" x="60" y="55"/></g><path d="m109.112 98.9098h9.427c.299.0001.593-.0776.852-.2253.26-.1476.475-.36.625-.6157.149-.2557.228-.5458.228-.841 0-.2953-.079-.5853-.229-.8409l-6.331-10.8128c-.15-.2557-.365-.468-.624-.6156s-.553-.2254-.853-.2254c-.299 0-.593.0778-.852.2254-.26.1476-.475.3599-.625.6156l-1.618 2.7666-3.165-5.4101c-.15-.2556-.365-.4679-.625-.6155-.259-.1476-.553-.2253-.853-.2253-.299 0-.593.0777-.853.2253-.259.1476-.474.3599-.624.6155l-7.878 13.4563c-.1499.2556-.2289.5456-.229.8409-.0001.2952.0786.5853.2282.841.1497.2557.365.4681.6243.6157.2593.1477.5534.2254.8529.2253h5.9176c2.344 0 4.073-1.0155 5.263-2.9967l2.889-4.9326 1.547-2.6398 4.643 7.9293h-6.19zm-6.701-2.6425-4.1293-.0009 6.1903-10.5718 3.089 5.2859-2.068 3.533c-.79 1.2855-1.688 1.7538-3.082 1.7538z" fill="#27272a"/><g fill="#fff"><rect height="22" rx="6" width="49" x="645" y="80"/><rect height="6" rx="3" width="41" x="246" y="88"/><rect height="6" rx="3" width="41" x="309" y="88"/><rect height="6" rx="3" width="41" x="372" y="88"/><rect height="6" rx="3" width="41" x="435" y="88"/><rect height="6" rx="3" width="41" x="498" y="88"/><rect height="132" rx="12" width="239" x="455" y="138"/></g><g filter="url(#d)"><path d="m37.5397 414.298-19.6401-11.835c-1.7994-1.084-2.8996-3.032-2.8996-5.132v-.113-20.244-.111c0-2.089 1.0869-4.027 2.869-5.116l19.6409-12.003c1.7689-1.081 3.9527-1.105 5.743-.063l20.7721 12.088c1.8419 1.072 2.975 3.042 2.975 5.173v.117 20.074.118c0 2.143-1.1463 4.123-3.0051 5.189l-20.7729 11.92c-1.7744 1.018-3.9287.995-5.6823-.062z" fill="url(#h)" fill-opacity=".3"/></g><rect fill="#fff" height="105" rx="12" width="169" x="93" y="300"/><rect fill="#fff" height="105" rx="12" width="169" x="309" y="300"/><rect fill="#fff" height="105" rx="12" width="169" x="525" y="300"/><rect fill="#fff" height="32" rx="12" width="170" x="93" y="138"/><rect fill="#fff" height="14" rx="7" width="252" x="93" y="187"/><rect fill="#fff" height="14" rx="7" width="199" x="93" y="210"/></svg>
\ No newline at end of file
diff --git a/docs/static/img/getting-started/views/components.svg b/docs/static/img/getting-started/views/components.svg
new file mode 100644
index 00000000000..7b14322db1f
--- /dev/null
+++ b/docs/static/img/getting-started/views/components.svg
@@ -0,0 +1 @@
+<svg fill="none" height="513" viewBox="0 0 754 513" width="754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="195.721" width="183.053" x="563.973" y="320.674"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84037"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84037" mode="normal" result="shape"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="142.436" width="134.053" x="99.9733" y="-13.1947"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84037"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84037" mode="normal" result="shape"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="482" width="754" x="0" y="31"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84037"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84037" mode="normal" result="effect2_dropShadow_7267_84037"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84037" mode="normal" result="shape"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="190" width="308" x="419" y="110"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="11"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/><feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_7267_84037"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_7267_84037" mode="normal" result="shape"/></filter><filter id="e" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="86.2449" width="82.0535" x="-.026739" y="343.889"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84037"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84037" mode="normal" result="shape"/></filter><linearGradient id="f"><stop offset="0" stop-color="#00dc82"/><stop offset=".5" stop-color="#36e4da"/><stop offset="1" stop-color="#0047e1"/></linearGradient><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="655.41" x2="557.503" xlink:href="#f" y1="504" y2="296.381"/><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="166.939" x2="100.608" xlink:href="#f" y1="116" y2="-24.9445"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="40.9694" x2="7.80399" xlink:href="#f" y1="416" y2="345.528"/><g filter="url(#a)"><path d="m645.319 498.982-57.788-34.893c-5.295-3.197-8.531-8.931-8.531-15.117v-.347-59.686-.341c0-6.15 3.197-11.857 8.441-15.068l57.79-35.387c5.205-3.188 11.63-3.258 16.898-.187l61.118 35.639c5.42 3.161 8.753 8.963 8.753 15.237v.359 59.184.364c0 6.309-3.372 12.138-8.842 15.283l-61.12 35.143c-5.221 3.002-11.559 2.933-16.719-.183z" fill="url(#g)" fill-opacity=".3"/></g><g filter="url(#b)"><path d="m160.079 112.596-39.28-23.6698c-3.599-2.1686-5.799-6.0635-5.799-10.2651v-.2252-40.4886-.222c0-4.1771 2.174-8.0531 5.738-10.2313l39.282-24.00548c3.538-2.16202 7.905-2.21008 11.486-.12639l41.544 24.17607c3.684 2.1437 5.95 6.0844 5.95 10.3465v.233 40.1483.2362c0 4.2862-2.293 8.245-6.01 10.3783l-41.546 23.8395c-3.549 2.037-7.857 1.99-11.365-.124z" fill="url(#h)" fill-opacity=".3"/></g><g filter="url(#c)"><rect fill="#e4e4e7" fill-opacity=".3" height="394" rx="12" shape-rendering="crispEdges" width="666" x="60" y="55"/></g><g filter="url(#d)"><rect fill="#00dc82" height="146" rx="12" width="264" x="441" y="128"/></g><path d="m109.112 98.9098h9.427c.299.0001.593-.0776.852-.2253.26-.1476.475-.36.625-.6157.149-.2557.228-.5458.228-.841 0-.2953-.079-.5853-.229-.8409l-6.331-10.8128c-.15-.2557-.365-.468-.624-.6156s-.553-.2254-.853-.2254c-.299 0-.593.0778-.852.2254-.26.1476-.475.3599-.625.6156l-1.618 2.7666-3.165-5.4101c-.15-.2556-.365-.4679-.625-.6155-.259-.1476-.553-.2253-.853-.2253-.299 0-.593.0777-.853.2253-.259.1476-.474.3599-.624.6155l-7.878 13.4563c-.1499.2556-.2289.5456-.229.8409-.0001.2952.0786.5853.2282.841.1497.2557.365.4681.6243.6157.2593.1477.5534.2254.8529.2253h5.9176c2.344 0 4.073-1.0155 5.263-2.9967l2.889-4.9326 1.547-2.6398 4.643 7.9293h-6.19zm-6.701-2.6425-4.1293-.0009 6.1903-10.5718 3.089 5.2859-2.068 3.533c-.79 1.2855-1.688 1.7538-3.082 1.7538z" fill="#27272a" opacity=".7"/><g fill="#e4e4e7"><rect height="22" opacity=".7" rx="6" width="49" x="645" y="80"/><rect height="6" opacity=".7" rx="3" width="41" x="246" y="88"/><rect height="6" opacity=".7" rx="3" width="41" x="309" y="88"/><rect height="6" opacity=".7" rx="3" width="41" x="372" y="88"/><rect height="6" opacity=".7" rx="3" width="41" x="435" y="88"/><rect height="6" opacity=".7" rx="3" width="41" x="498" y="88"/></g><g filter="url(#e)"><path d="m37.5397 414.298-19.6401-11.835c-1.7994-1.084-2.8996-3.032-2.8996-5.132v-.113-20.244-.111c0-2.089 1.0869-4.027 2.869-5.116l19.6409-12.003c1.7689-1.081 3.9527-1.105 5.743-.063l20.7721 12.088c1.8419 1.072 2.975 3.042 2.975 5.173v.117 20.074.118c0 2.143-1.1463 4.123-3.0051 5.189l-20.7729 11.92c-1.7744 1.018-3.9287.995-5.6823-.062z" fill="url(#i)" fill-opacity=".3"/></g><rect fill="#e4e4e7" height="105" opacity=".7" rx="12" width="169" x="93" y="300"/><rect fill="#e4e4e7" height="105" opacity=".7" rx="12" width="169" x="309" y="300"/><rect fill="#e4e4e7" height="105" opacity=".7" rx="12" width="169" x="525" y="300"/><rect fill="#e4e4e7" height="32" opacity=".7" rx="12" width="170" x="93" y="138"/><rect fill="#e4e4e7" height="14" opacity=".7" rx="7" width="252" x="93" y="187"/><rect fill="#e4e4e7" height="14" opacity=".7" rx="7" width="199" x="93" y="210"/></svg>
\ No newline at end of file
diff --git a/docs/static/img/getting-started/views/layouts.svg b/docs/static/img/getting-started/views/layouts.svg
new file mode 100644
index 00000000000..afe8f72a66c
--- /dev/null
+++ b/docs/static/img/getting-started/views/layouts.svg
@@ -0,0 +1 @@
+<svg fill="none" height="513" viewBox="0 0 754 513" width="754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="195.721" width="183.053" x="563.973" y="320.674"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84039" mode="normal" result="shape"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="142.436" width="134.053" x="99.9733" y="-13.1947"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84039" mode="normal" result="shape"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="482" width="754" x="0" y="31"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="220" width="327" x="395" y="114"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><filter id="e" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="86.2449" width="82.0535" x="-.026739" y="343.889"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84039" mode="normal" result="shape"/></filter><filter id="f" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="193" width="257" x="33" y="276"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><filter id="g" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="193" width="257" x="249" y="276"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><filter id="h" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="193" width="257" x="465" y="276"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><filter id="i" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="120" width="258" x="33" y="114"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><filter id="j" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="102" width="340" x="33" y="163"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><filter id="k" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="102" width="287" x="33" y="186"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84039"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84039" mode="normal" result="effect2_dropShadow_7267_84039"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84039" mode="normal" result="shape"/></filter><linearGradient id="l"><stop offset="0" stop-color="#00dc82"/><stop offset=".5" stop-color="#36e4da"/><stop offset="1" stop-color="#0047e1"/></linearGradient><linearGradient id="m" gradientUnits="userSpaceOnUse" x1="655.41" x2="557.503" xlink:href="#l" y1="504" y2="296.381"/><linearGradient id="n" gradientUnits="userSpaceOnUse" x1="166.939" x2="100.608" xlink:href="#l" y1="116" y2="-24.9445"/><linearGradient id="o" gradientUnits="userSpaceOnUse" x1="40.9694" x2="7.80399" xlink:href="#l" y1="416" y2="345.528"/><g filter="url(#a)"><path d="m645.319 498.982-57.788-34.893c-5.295-3.197-8.531-8.931-8.531-15.117v-.347-59.686-.341c0-6.15 3.197-11.857 8.441-15.068l57.79-35.387c5.205-3.188 11.63-3.258 16.898-.187l61.118 35.639c5.42 3.161 8.753 8.963 8.753 15.237v.359 59.184.364c0 6.309-3.372 12.138-8.842 15.283l-61.12 35.143c-5.221 3.002-11.559 2.933-16.719-.183z" fill="url(#m)" fill-opacity=".3"/></g><g filter="url(#b)"><path d="m160.079 112.596-39.28-23.6698c-3.599-2.1686-5.799-6.0635-5.799-10.2651v-.2252-40.4886-.222c0-4.1771 2.174-8.0531 5.738-10.2313l39.282-24.00548c3.538-2.16202 7.905-2.21008 11.486-.12639l41.544 24.17607c3.684 2.1437 5.95 6.0844 5.95 10.3465v.233 40.1483.2362c0 4.2862-2.293 8.245-6.01 10.3783l-41.546 23.8395c-3.549 2.037-7.857 1.99-11.365-.124z" fill="url(#n)" fill-opacity=".3"/></g><g filter="url(#c)"><rect fill="#e4e4e7" fill-opacity=".3" height="394" rx="12" shape-rendering="crispEdges" width="666" x="60" y="55"/></g><rect fill="#00dc82" height="50" rx="8" width="636" x="75" y="66"/><path d="m109.112 98.9098h9.427c.299.0001.593-.0776.852-.2253.26-.1476.475-.36.625-.6157.149-.2557.228-.5458.228-.841 0-.2953-.079-.5853-.229-.8409l-6.331-10.8128c-.15-.2557-.365-.468-.624-.6156s-.553-.2254-.853-.2254c-.299 0-.593.0778-.852.2254-.26.1476-.475.3599-.625.6156l-1.618 2.7666-3.165-5.4101c-.15-.2556-.365-.4679-.625-.6155-.259-.1476-.553-.2253-.853-.2253-.299 0-.593.0777-.853.2253-.259.1476-.474.3599-.624.6155l-7.878 13.4563c-.1499.2556-.2289.5456-.229.8409-.0001.2952.0786.5853.2282.841.1497.2557.365.4681.6243.6157.2593.1477.5534.2254.8529.2253h5.9176c2.344 0 4.073-1.0155 5.263-2.9967l2.889-4.9326 1.547-2.6398 4.643 7.9293h-6.19zm-6.701-2.6425-4.1293-.0009 6.1903-10.5718 3.089 5.2859-2.068 3.533c-.79 1.2855-1.688 1.7538-3.082 1.7538z" fill="#18181b"/><g fill="#fff"><rect height="22" rx="6" width="49" x="645" y="80"/><rect height="6" rx="3" width="41" x="246" y="88"/><rect height="6" rx="3" width="41" x="309" y="88"/><rect height="6" rx="3" width="41" x="372" y="88"/><rect height="6" rx="3" width="41" x="435" y="88"/><rect height="6" rx="3" width="41" x="498" y="88"/></g><g filter="url(#d)" opacity=".1"><rect fill="#27272a" height="132" rx="12" width="239" x="455" y="138"/></g><g filter="url(#e)"><path d="m37.5397 414.298-19.6401-11.835c-1.7994-1.084-2.8996-3.032-2.8996-5.132v-.113-20.244-.111c0-2.089 1.0869-4.027 2.869-5.116l19.6409-12.003c1.7689-1.081 3.9527-1.105 5.743-.063l20.7721 12.088c1.8419 1.072 2.975 3.042 2.975 5.173v.117 20.074.118c0 2.143-1.1463 4.123-3.0051 5.189l-20.7729 11.92c-1.7744 1.018-3.9287.995-5.6823-.062z" fill="url(#o)" fill-opacity=".3"/></g><g filter="url(#f)" opacity=".1"><rect fill="#27272a" height="105" rx="12" width="169" x="93" y="300"/></g><g filter="url(#g)" opacity=".1"><rect fill="#27272a" height="105" rx="12" width="169" x="309" y="300"/></g><g filter="url(#h)" opacity=".1"><rect fill="#27272a" height="105" rx="12" width="169" x="525" y="300"/></g><g filter="url(#i)" opacity=".1"><rect fill="#27272a" height="32" rx="6" width="170" x="93" y="138"/></g><g filter="url(#j)" opacity=".1"><rect fill="#27272a" height="14" rx="7" width="252" x="93" y="187"/></g><g filter="url(#k)" opacity=".1"><rect fill="#27272a" height="14" rx="7" width="199" x="93" y="210"/></g></svg>
\ No newline at end of file
diff --git a/docs/static/img/getting-started/views/pages.svg b/docs/static/img/getting-started/views/pages.svg
new file mode 100644
index 00000000000..14e5d34fa29
--- /dev/null
+++ b/docs/static/img/getting-started/views/pages.svg
@@ -0,0 +1 @@
+<svg fill="none" height="513" viewBox="0 0 754 513" width="754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="195.721" width="183.053" x="563.973" y="320.674"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84038" mode="normal" result="shape"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="142.436" width="134.053" x="99.9733" y="-13.1947"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84038" mode="normal" result="shape"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="482" width="754" x="0" y="31"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="220" width="327" x="395" y="114"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><filter id="e" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="86.2449" width="82.0535" x="-.026739" y="343.889"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="7.51337"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_7267_84038" mode="normal" result="shape"/></filter><filter id="f" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="193" width="257" x="33" y="276"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><filter id="g" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="193" width="257" x="249" y="276"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><filter id="h" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="193" width="257" x="465" y="276"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><filter id="i" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="120" width="258" x="33" y="114"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><filter id="j" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="102" width="340" x="33" y="163"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><filter id="k" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="102" width="287" x="33" y="186"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImage" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7267_84038"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-16" dy="20"/><feGaussianBlur stdDeviation="22"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/><feBlend in2="effect1_backgroundBlur_7267_84038" mode="normal" result="effect2_dropShadow_7267_84038"/><feBlend in="SourceGraphic" in2="effect2_dropShadow_7267_84038" mode="normal" result="shape"/></filter><linearGradient id="l"><stop offset="0" stop-color="#00dc82"/><stop offset=".5" stop-color="#36e4da"/><stop offset="1" stop-color="#0047e1"/></linearGradient><linearGradient id="m" gradientUnits="userSpaceOnUse" x1="655.41" x2="557.503" xlink:href="#l" y1="504" y2="296.381"/><linearGradient id="n" gradientUnits="userSpaceOnUse" x1="166.939" x2="100.608" xlink:href="#l" y1="116" y2="-24.9445"/><linearGradient id="o" gradientUnits="userSpaceOnUse" x1="40.9694" x2="7.80399" xlink:href="#l" y1="416" y2="345.528"/><g filter="url(#a)"><path d="m645.319 498.982-57.788-34.893c-5.295-3.197-8.531-8.931-8.531-15.117v-.347-59.686-.341c0-6.15 3.197-11.857 8.441-15.068l57.79-35.387c5.205-3.188 11.63-3.258 16.898-.187l61.118 35.639c5.42 3.161 8.753 8.963 8.753 15.237v.359 59.184.364c0 6.309-3.372 12.138-8.842 15.283l-61.12 35.143c-5.221 3.002-11.559 2.933-16.719-.183z" fill="url(#m)" fill-opacity=".3"/></g><g filter="url(#b)"><path d="m160.079 112.596-39.28-23.6698c-3.599-2.1686-5.799-6.0635-5.799-10.2651v-.2252-40.4886-.222c0-4.1771 2.174-8.0531 5.738-10.2313l39.282-24.00548c3.538-2.16202 7.905-2.21008 11.486-.12639l41.544 24.17607c3.684 2.1437 5.95 6.0844 5.95 10.3465v.233 40.1483.2362c0 4.2862-2.293 8.245-6.01 10.3783l-41.546 23.8395c-3.549 2.037-7.857 1.99-11.365-.124z" fill="url(#n)" fill-opacity=".3"/></g><g filter="url(#c)"><rect fill="#e4e4e7" fill-opacity=".3" height="394" rx="12" shape-rendering="crispEdges" width="666" x="60" y="55"/></g><g opacity=".1"><path d="m109.112 98.9098h9.427c.299.0001.593-.0776.852-.2253.26-.1476.475-.36.625-.6157.149-.2557.228-.5458.228-.841 0-.2953-.079-.5853-.229-.8409l-6.331-10.8128c-.15-.2557-.365-.468-.624-.6156s-.553-.2254-.853-.2254c-.299 0-.593.0778-.852.2254-.26.1476-.475.3599-.625.6156l-1.618 2.7666-3.165-5.4101c-.15-.2556-.365-.4679-.625-.6155-.259-.1476-.553-.2253-.853-.2253-.299 0-.593.0777-.853.2253-.259.1476-.474.3599-.624.6155l-7.878 13.4563c-.1499.2556-.2289.5456-.229.8409-.0001.2952.0786.5853.2282.841.1497.2557.365.4681.6243.6157.2593.1477.5534.2254.8529.2253h5.9176c2.344 0 4.073-1.0155 5.263-2.9967l2.889-4.9326 1.547-2.6398 4.643 7.9293h-6.19zm-6.701-2.6425-4.1293-.0009 6.1903-10.5718 3.089 5.2859-2.068 3.533c-.79 1.2855-1.688 1.7538-3.082 1.7538z" fill="#18181b"/><g fill="#27272a"><rect height="22" rx="6" width="49" x="645" y="80"/><rect height="6" rx="3" width="41" x="246" y="88"/><rect height="6" rx="3" width="41" x="309" y="88"/><rect height="6" rx="3" width="41" x="372" y="88"/><rect height="6" rx="3" width="41" x="435" y="88"/><rect height="6" rx="3" width="41" x="498" y="88"/></g></g><rect fill="#00dc82" height="307" rx="8" width="633" x="77" y="119"/><g filter="url(#d)"><rect fill="#fff" height="132" rx="12" width="239" x="455" y="138"/></g><g filter="url(#e)"><path d="m37.5397 414.298-19.6401-11.835c-1.7994-1.084-2.8996-3.032-2.8996-5.132v-.113-20.244-.111c0-2.089 1.0869-4.027 2.869-5.116l19.6409-12.003c1.7689-1.081 3.9527-1.105 5.743-.063l20.7721 12.088c1.8419 1.072 2.975 3.042 2.975 5.173v.117 20.074.118c0 2.143-1.1463 4.123-3.0051 5.189l-20.7729 11.92c-1.7744 1.018-3.9287.995-5.6823-.062z" fill="url(#o)" fill-opacity=".3"/></g><g filter="url(#f)"><rect fill="#fff" height="105" rx="12" width="169" x="93" y="300"/></g><g filter="url(#g)"><rect fill="#fff" height="105" rx="12" width="169" x="309" y="300"/></g><g filter="url(#h)"><rect fill="#fff" height="105" rx="12" width="169" x="525" y="300"/></g><g filter="url(#i)"><rect fill="#fff" height="32" rx="6" width="170" x="93" y="138"/></g><g filter="url(#j)"><rect fill="#fff" height="14" rx="7" width="252" x="93" y="187"/></g><g filter="url(#k)"><rect fill="#fff" height="14" rx="7" width="199" x="93" y="210"/></g></svg>
\ No newline at end of file

From decd5e77d2dd6eec44dc2f6d3be88e1596b059de Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Tue, 20 Sep 2022 11:18:33 +0200
Subject: [PATCH 09/11] small tweaks

---
 docs/content/1.getting-started/3.views.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 7d54dfa4d5b..9f97754e4ed 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -1,14 +1,14 @@
 # Views
 
-Nuxt provides 4 layers to manage the User Interface of your application. Each View is composed of Vue Single File Components (SFCs)
+Nuxt provides several component layers to implement the user interface of your application.
 
-## `App.vue`
+## `app.vue`
 
-![The app.vue file is the entry point of your application](/img/getting-started/views/app.svg)
+![The `app.vue` file is the entry point of your application](/img/getting-started/views/app.svg)
 
-By default, Nuxt will treat this file as the **entrypoint** and serve its content at the `/` **route** of our application.
+By default, Nuxt will treat this file as the **entrypoint** and render it's content for every route of the application.
 
-```vue [App.vue]
+```vue [app.vue]
 <template>
   <div>
    <h1>Welcome to the homepage</h1>
@@ -17,14 +17,14 @@ By default, Nuxt will treat this file as the **entrypoint** and serve its conten
 ```
 
 ::alert
-💡 If you are familiar with Vue, you might wonder where is the `main.js` file that creates a Vue app. Nuxt does this behind the scene.
+If you are familiar with Vue, you might wonder where is the `main.js` file that creates a Vue app. Nuxt does this behind the scene.
 ::
 
 ## Components
 
 ![Components are reusable pieces of UI](/img/getting-started/views/components.svg)
 
-Unlike `app.vue`, most components are not pages of our application, but reusable pieces of user interface, like buttons or menus. In Nuxt, you can create these components in the `components/` directory for them to be available across your application without having to explicitly import them, contrary to Vue.js.
+Most of the components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory for them to be automatically available across your application without having to explicitly import them.
 
 ::code-group
 
@@ -33,7 +33,7 @@ Unlike `app.vue`, most components are not pages of our application, but reusable
   <div>
     <h1>Welcome to the homepage</h1>
     <AppAlert>
-      This is an auto-imported component
+      This is an auto-imported component.
     </AppAlert>
   </div>
 </template>
@@ -53,9 +53,9 @@ Unlike `app.vue`, most components are not pages of our application, but reusable
 
 ![Pages are views tied to a specific route](/img/getting-started/views/pages.svg)
 
-Pages represent views tied to a specific route. Every file in the `pages/` directory represents a different route displaying its content.
+Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying it's content.
 
-To use pages, delete the `App.vue` file and move its content in a `pages/index.vue` file. You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
+To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
 
 ::code-group
 

From 5842cfb3371bb3ca1b761addb9a1bf3f7d7a592c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 20 Sep 2022 10:29:28 +0100
Subject: [PATCH 10/11] docs: tweaks

---
 docs/content/1.getting-started/3.views.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 9f97754e4ed..709e2862f6b 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -17,14 +17,14 @@ By default, Nuxt will treat this file as the **entrypoint** and render it's cont
 ```
 
 ::alert
-If you are familiar with Vue, you might wonder where is the `main.js` file that creates a Vue app. Nuxt does this behind the scene.
+If you are familiar with Vue, you might wonder where `main.js` is (the file is that normally creates a Vue app). Nuxt does this behind the scene.
 ::
 
 ## Components
 
 ![Components are reusable pieces of UI](/img/getting-started/views/components.svg)
 
-Most of the components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory for them to be automatically available across your application without having to explicitly import them.
+Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
 
 ::code-group
 
@@ -53,7 +53,7 @@ Most of the components are reusable pieces of the user interface, like buttons a
 
 ![Pages are views tied to a specific route](/img/getting-started/views/pages.svg)
 
-Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying it's content.
+Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
 
 To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory.
 
@@ -88,7 +88,7 @@ You will learn more about pages in the [Routing section](/getting-started/routin
 
 ![Layouts are wrapper around pages](/img/getting-started/views/layouts.svg)
 
-Layouts are wrapper around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **pages** content. The `layout/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
+Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **page** content. The `layout/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
 
 ::alert
 If you only have a single layout in your application, we recommend using app.vue with the [`<NuxtPage />` component](/api/components/nuxt-page) instead.

From 8503bcb9e98a8e60983b3cbec80d5056f1fb4dfc Mon Sep 17 00:00:00 2001
From: pooya parsa <pyapar@gmail.com>
Date: Tue, 20 Sep 2022 11:29:38 +0200
Subject: [PATCH 11/11] Update docs/content/1.getting-started/3.views.md

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 docs/content/1.getting-started/3.views.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/3.views.md b/docs/content/1.getting-started/3.views.md
index 709e2862f6b..2673172ca07 100644
--- a/docs/content/1.getting-started/3.views.md
+++ b/docs/content/1.getting-started/3.views.md
@@ -6,7 +6,7 @@ Nuxt provides several component layers to implement the user interface of your a
 
 ![The `app.vue` file is the entry point of your application](/img/getting-started/views/app.svg)
 
-By default, Nuxt will treat this file as the **entrypoint** and render it's content for every route of the application.
+By default, Nuxt will treat this file as the **entrypoint** and render its content for every route of the application.
 
 ```vue [app.vue]
 <template>