diff --git a/docs/app/app.vue b/docs/app/app.vue
index 2bba45200..2493301f5 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -1,36 +1,15 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from 'ufo'
-import colors from 'tailwindcss/colors'
 
 const route = useRoute()
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
 
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
   server: false,
 })
 
-const searchTerm = ref('')
-
-// watch(searchTerm, debounce((query: string) => {
-//   if (!query) {
-//     return
-//   }
-
-//   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
-// }, 500))
-
-const links = computed(() => {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-book',
-    to: '/docs/getting-started',
-    active: route.path.startsWith('/docs'),
-  }].filter(Boolean)
-})
-
-const color = computed(() => colorMode.value === 'dark' ? colors[appConfig.ui.colors.neutral as keyof typeof colors][900] : 'white')
+const links = useNavLinks()
+const color = useThemeColor()
 
 useHead({
   meta: [
@@ -39,7 +18,7 @@ useHead({
   ],
   link: [
     { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
-    { rel: 'canonical', href: `https://content.nuxt.com${withoutTrailingSlash(route.path)}` },
+    { rel: 'canonical', href: `https://content3.nuxt.dev${withoutTrailingSlash(route.path)}` },
   ],
   htmlAttrs: {
     lang: 'en',
@@ -69,7 +48,6 @@ provide('navigation', navigation)
 
     <ClientOnly>
       <LazyUContentSearch
-        v-model:search-term="searchTerm"
         :files="files"
         :navigation="navigation"
         :fuse="{ resultLimit: 42 }"
diff --git a/docs/app/components/AppHeader.vue b/docs/app/components/AppHeader.vue
index 577f7a453..a43a25ff5 100644
--- a/docs/app/components/AppHeader.vue
+++ b/docs/app/components/AppHeader.vue
@@ -8,9 +8,10 @@ const props = defineProps<{
 
 const config = useRuntimeConfig().public
 
-const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+const nav = inject<Ref<ContentNavigationItem[]>>('navigation')
 
 const items = computed(() => props.links.map(({ icon, ...link }) => link))
+const navigation = computed(() => nav?.value.find(item => item.path === '/docs')?.children || [])
 
 defineShortcuts({
   meta_g: () => {
@@ -33,18 +34,26 @@ defineShortcuts({
           :label="`v${config.version}`"
           variant="subtle"
           size="sm"
-          class="-mb-[2px] font-semibold inline-block truncate"
+          class="hidden -mb-[2px] font-semibold sm:inline-block truncate"
         />
       </NuxtLink>
     </template>
 
-    <UNavigationMenu
+    <!-- <UNavigationMenu
       :items="items"
       variant="link"
-    />
+    /> -->
 
     <template #right>
-      <UColorModeButton />
+      <UButton
+        v-if="$route.path === '/'"
+        label="Get started"
+        to="/docs/getting-started"
+        size="sm"
+        class="hidden sm:inline-flex"
+      />
+
+      <UColorModeButton class="hidden sm:inline-flex" />
 
       <UTooltip
         text="Search"
diff --git a/docs/app/components/example/ExampleLandingHero.vue b/docs/app/components/example/ExampleLandingHero.vue
new file mode 100644
index 000000000..9c169f218
--- /dev/null
+++ b/docs/app/components/example/ExampleLandingHero.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  image: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col sm:flex-row sm:items-center flex-col-reverse gap-4 py-8 sm:gap-12 sm:py-12">
+    <div>
+      <h1 class="text-4xl font-semibold">
+        <slot name="title" />
+      </h1>
+      <div class="text-base text-gray-600 dark:text-gray-300">
+        <slot name="description" />
+      </div>
+    </div>
+    <img
+      :src="image"
+      class="w-1/2 rounded-lg"
+    >
+  </section>
+</template>
diff --git a/docs/app/composables/nav.ts b/docs/app/composables/nav.ts
new file mode 100644
index 000000000..441173aba
--- /dev/null
+++ b/docs/app/composables/nav.ts
@@ -0,0 +1,19 @@
+import colors from 'tailwindcss/colors'
+
+export const useNavLinks = () => {
+  const route = useRoute()
+
+  return computed(() => [{
+    label: 'Documentation',
+    icon: 'i-lucide-book',
+    to: '/docs/getting-started',
+    active: route.path.startsWith('/docs'),
+  }])
+}
+
+export const useThemeColor = () => {
+  const colorMode = useColorMode()
+  const appConfig = useAppConfig()
+
+  return computed(() => colorMode.value === 'dark' ? colors[appConfig.ui.colors.neutral as keyof typeof colors][900] : 'white')
+}
diff --git a/docs/app/error.vue b/docs/app/error.vue
index 71745e244..b5c85af32 100644
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -1,28 +1,15 @@
 <script setup lang="ts">
-import colors from 'tailwindcss/colors'
 import type { NuxtError } from '#app'
 
 const props = defineProps<{
   error: NuxtError
 }>()
 
-const route = useRoute()
-const appConfig = useAppConfig()
-const colorMode = useColorMode()
-
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
 const { data: files } = await useAsyncData('files', () => queryCollectionSearchSections('docs', { ignoredTags: ['style'] }))
 
-const color = computed(() => colorMode.value === 'dark' ? colors[appConfig.ui.colors.neutral as keyof typeof colors][900] : 'white')
-
-const links = computed(() => {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-book',
-    to: '/docs/getting-started',
-    active: route.path.startsWith('/docs'),
-  }].filter(Boolean)
-})
+const links = useNavLinks()
+const color = useThemeColor()
 
 useHead({
   meta: [
diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue
index 03dc10d45..7723303a9 100644
--- a/docs/app/pages/index.vue
+++ b/docs/app/pages/index.vue
@@ -42,6 +42,8 @@ if (!page.value) {
       :ui="{
         title: 'font-semibold lg:text-4xl',
         featureLeadingIcon: 'text-[var(--ui-text-highlighted)]',
+        container: section.code ? 'lg:items-start' : '',
+        wrapper: section.code ? 'pt-10' : '',
         ...(section.ui || {}),
       }"
     >
diff --git a/docs/app/plugins/home.ts b/docs/app/plugins/home.ts
new file mode 100644
index 000000000..1d1786de4
--- /dev/null
+++ b/docs/app/plugins/home.ts
@@ -0,0 +1,8 @@
+import { ExampleLandingHero, PreviewCard } from '#components'
+
+// Fix error on components not found in landing page
+// maybe because it's within a .yml file?
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('ExampleLandingHero', ExampleLandingHero)
+  nuxtApp.vueApp.component('PreviewCard', PreviewCard)
+})
diff --git a/docs/content/docs/.navigation.yml b/docs/content/docs/.navigation.yml
new file mode 100644
index 000000000..8be96735b
--- /dev/null
+++ b/docs/content/docs/.navigation.yml
@@ -0,0 +1,2 @@
+
+title: Documentation
diff --git a/docs/content/docs/1.getting-started/3.configuration.md b/docs/content/docs/1.getting-started/3.configuration.md
index 0d22f755f..445811d4f 100644
--- a/docs/content/docs/1.getting-started/3.configuration.md
+++ b/docs/content/docs/1.getting-started/3.configuration.md
@@ -73,9 +73,9 @@ export default defineNuxtConfig({
 })
 ```
 
-### `LibSQL` / `Turso`
+### `LibSQL`
 
-If you plan to deploy your application using LibSQL/Turso database you need to use `libsql` database adapter. 
+If you plan to deploy your application using LibSQL database you need to use `libsql` database adapter. 
 
 First, make sure to install the `@libsql/client` package:
 
@@ -97,6 +97,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::note
+The most popular LibSQL hosting services is [Turso](https://turso.tech/).
+::
+
 ## `build`
 
 Nuxt Content read and parse all the available contents at built time. This option let you control over parsing contents.
diff --git a/docs/content/docs/2.collections/1.collections.md b/docs/content/docs/2.collections/1.collections.md
index 4a58b32e4..62fc3963f 100644
--- a/docs/content/docs/2.collections/1.collections.md
+++ b/docs/content/docs/2.collections/1.collections.md
@@ -54,7 +54,7 @@ import { defineCollection, z } from '@nuxt/content'
 
 export const collections = {
   blog: defineCollection({
-    source: 'blog/**.md',
+    source: 'blog/*.md',
     type: 'page',
     // Define custom schema for docs collection
     schema: z.object({
diff --git a/docs/content/docs/2.collections/2.types.md b/docs/content/docs/2.collections/2.types.md
index dd08a23ad..c3a74f78c 100644
--- a/docs/content/docs/2.collections/2.types.md
+++ b/docs/content/docs/2.collections/2.types.md
@@ -16,7 +16,7 @@ For both types, built-in fields are generated. Every collection includes these d
 
 ```ts
 defineCollection({
-  source: '**.md',
+  source: '**/*.md',
   type: 'page'
 })
 ```
diff --git a/docs/content/docs/3.files/1.markdown.md b/docs/content/docs/3.files/1.markdown.md
index 5de50001a..07ded7063 100644
--- a/docs/content/docs/3.files/1.markdown.md
+++ b/docs/content/docs/3.files/1.markdown.md
@@ -11,7 +11,7 @@ description: "Create and query Markdown files in your Nuxt applications and use
 export const collections = {
   blog: defineCollection({
     type: 'page',
-    source: 'blog/**.md',
+    source: 'blog/*.md',
     schema: z.object({
       date: z.string()
     })
@@ -171,7 +171,7 @@ In a markdown file, use the component with the **`::`** identifier.
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-card
     The content of the card
     ::
@@ -206,7 +206,7 @@ A component's slots can accept content or another components.
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-hero
     My Page Title
 
@@ -237,7 +237,7 @@ You can use Markdown inside your components slots:
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-title
     A [rich text](/) will be **rendered** by the component.
     ::
@@ -273,7 +273,7 @@ The `{}` identifier passes props to components in a terse way by using a `key=va
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-alert{type="warning"}
     The **alert** component.
     ::
@@ -364,7 +364,7 @@ The YAML method uses the `---` identifier to declare one prop per line, that can
   </template>
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
     ::example-icon-card
     ---
     icon: IconNuxt
@@ -386,7 +386,7 @@ Possible values ​​are all named attributes, classes with the notation `.clas
   Hello [World]{style="color: green;" .custom-class #custom-id}!
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   Hello [World]{style="color: green;" .custom-class #custom-id}!
   ::
 ::
diff --git a/docs/content/docs/4.components/2.prose.md b/docs/content/docs/4.components/2.prose.md
index d645b4e0b..129fe3097 100644
--- a/docs/content/docs/4.components/2.prose.md
+++ b/docs/content/docs/4.components/2.prose.md
@@ -24,7 +24,7 @@ Prose components are originally part of [`@nuxtjs/mdc`](https://github.com/nuxt-
   [Link](/docs/components/prose)
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   [Link](/docs/components/prose)
   ::
 ::
@@ -36,7 +36,7 @@ Prose components are originally part of [`@nuxtjs/mdc`](https://github.com/nuxt-
   > Block quote
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   > Block quote
   ::
 ::
@@ -52,7 +52,7 @@ Prose components are originally part of [`@nuxtjs/mdc`](https://github.com/nuxt-
     ```
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   ```js [file.js]{2}
   export default () => {
     console.log('Code block')
@@ -88,7 +88,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   `const code: string = 'highlighted code inline'`{lang="ts"}
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   `code`
 
   `const code: string = 'highlighted code inline'`{lang="ts"}
@@ -114,7 +114,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   ## H2 Heading
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   ## H2 Heading
   ::
 ::
@@ -126,7 +126,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   ### H3 Heading
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   ### H3 Heading
   ::
 ::
@@ -138,7 +138,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   #### H4 Heading
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   #### H4 Heading
   ::
 ::
@@ -150,7 +150,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   ##### H5 Heading
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   ##### H5 Heading
   ::
 ::
@@ -162,7 +162,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   ###### H6 Heading
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   ###### H6 Heading
   ::
 ::
@@ -178,7 +178,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   Divider above.
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   Divider under.
 
   ---
@@ -194,7 +194,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   ![A Cool Image](https://nuxt.com/assets/design-kit/icon-green.png)
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   ![A Cool Image](https://nuxt.com/assets/design-kit/icon-green.png)
   ::
 ::
@@ -209,7 +209,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   - List
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   - Just
   - An
   - Unordered
@@ -224,7 +224,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   - List element
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   - List element
   ::
 ::
@@ -238,7 +238,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   3. Baz
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   1. Foo
   2. Bar
   3. Baz
@@ -252,7 +252,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   Just a paragraph.
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   Just a paragraph.
   ::
 ::
@@ -264,7 +264,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   **Just a strong paragraph.**
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   **Just a strong paragraph.**
   ::
 ::
@@ -276,7 +276,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   _Just an italic paragraph._
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   _Just an italic paragraph._
   ::
 ::
@@ -292,7 +292,7 @@ If you want to use `]` in the filename, you need to escape it with 2 backslashes
   | 3   | Wonderful | Website     |
   ```
 
-  ::preview-card{label="Preview"}
+  ::preview-card{label="Preview" icon="i-lucide-eye"}
   | Key | Type      | Description |
   | --- | --------- | ----------- |
   | 1   | Wonderful | Table       |
diff --git a/docs/content/docs/5.deploy/0.node.md b/docs/content/docs/5.deploy/0.node.md
deleted file mode 100644
index 3bbd61234..000000000
--- a/docs/content/docs/5.deploy/0.node.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Node.js
-navigation:
-  icon: i-simple-icons-nodedotjs
----
-
-Node preset is the default preset for Nuxt and Nuxt Content. It is used to build and run Nuxt applications on Node.js.
-
-Build project with Nuxt build command:
-
-```bash [Terminal]
-nuxi build
-```
-
-When running `nuxi build`{lang="ts-type"} with the Node server preset, the result will be an entry point that launches a ready-to-run Node server. To try output:
-
-```bash [Terminal]
-$ node .output/server/index.mjs
-Listening on http://localhost:3000
-```
diff --git a/docs/content/docs/5.deploy/1.cloudflare.md b/docs/content/docs/5.deploy/1.cloudflare.md
deleted file mode 100644
index 14227d926..000000000
--- a/docs/content/docs/5.deploy/1.cloudflare.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Cloudflare
-description: How to deploy Nuxt Content to Cloudflare Pages with D1 database.
-navigation:
-  icon: i-simple-icons-cloudflare
----
-
-Nuxt Content uses Nuxt deployment presets to adjust the build process for different hosting platforms.
-
-If you use the [Cloudflare Pages GitHub/GitLab integration][1]{target="_blank"} Nuxt will detect it and use the `cloudflare-pages`{lang="ts-type"} preset automatically.
-
-In order to publish your project, you need to create a Cloudflare D1 database and connect it to your project.
-
-- [Create a D1 database][d1]
-- Link it to your Cloudflare Pages project using the `DB` binding name
-
-Redeploy your project.
-
-::tip
-Checkout the [**NuxtHub Integration**](/docs/deploy/nuxthub) to deploy your Nuxt Content project on your Cloudflare account with zero configuration and maximum performance.
-::
-
-[1]: https://developers.cloudflare.com/pages/get-started/#connect-your-git-provider-to-pages
-[d1]: https://developers.cloudflare.com/d1/get-started/
diff --git a/docs/content/docs/5.deploy/2.nuxthub.md b/docs/content/docs/5.deploy/2.nuxthub.md
deleted file mode 100644
index a475fcdbc..000000000
--- a/docs/content/docs/5.deploy/2.nuxthub.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: NuxtHub
-description: How to deploy Nuxt Content to NuxtHub.
-navigation:
-  icon: i-simple-icons-nuxtdotjs
----
-
-TODO
diff --git a/docs/content/docs/5.deploy/2.vercel.md b/docs/content/docs/5.deploy/2.vercel.md
deleted file mode 100644
index 9d67ae2ca..000000000
--- a/docs/content/docs/5.deploy/2.vercel.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Vercel
-description: How to deploy Nuxt Content to Vercel.
-navigation:
-  icon: i-simple-icons-vercel
----
-
-Nuxt Content uses Nuxt deployment presets to adjust the build process for different hosting platforms. To deploy your Nuxt Content to Vercel, you can use the `vercel`{lang="ts-type"} preset.
-
-Note that you don't need to change project configuration to deploy on Vercel. Nuxt and Nuxt Content automatically detect the vercel environment and adjust build configuration for you.
-
-You can either use [Vercel git integration][1] or [Vercel CLI][2].
-
-## Database
-
-Unfortunately sqlite database is not supported in Vercel environment and you should use another database.
-You can simply create a [Vercel Postgres][3] database and use Content Module's Postgres adapter.
-
-Checkout [official documentation][4] to create a Vercel Postgress database and connect it to your Vercel project. Nuxt Content will automatically detect connection url from environment variables in production.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  content: {
-    database: {
-      type: 'postgres',
-      url: process.env.POSTGRES_URL,
-      /* Other options for `pg` */
-    }
-  }
-})
-```
-
-[1]: https://vercel.com/docs/deployments/git
-[2]: https://vercel.com/docs/cli
-[3]: https://vercel.com/storage/postgres
-[4]: https://vercel.com/docs/storage/vercel-postgres/quickstart#quickstart
diff --git a/docs/content/docs/5.deploy/server.md b/docs/content/docs/5.deploy/server.md
new file mode 100644
index 000000000..c7fa5dabd
--- /dev/null
+++ b/docs/content/docs/5.deploy/server.md
@@ -0,0 +1,29 @@
+---
+title: Server Hosting
+description: Node preset is the default preset for Nuxt and Nuxt Content. It is used to build and run Nuxt applications on Node.js.
+navigation:
+  title: Server
+---
+
+## What is Node.js preset?
+
+Node preset is the default preset for Nuxt, when building your project, Nuxt will output a Node.js server that you can run with `node .output/server/index.mjs`{lang="ts-type"}.
+
+## Building with Node.js preset
+
+Build project with Nuxt build command:
+
+```bash [Terminal]
+nuxi build
+```
+
+When running `nuxi build`{lang="ts-type"} with the Node server preset, the result will be an entry point that launches a ready-to-run Node server.
+
+```bash [Terminal]
+$ node .output/server/index.mjs
+Listening on http://localhost:3000
+```
+
+::note
+The SQLite database will be loaded on the server side when booting the server as well as in the browser for client-side navigation or actions.
+::
diff --git a/docs/content/docs/5.deploy/serverless.md b/docs/content/docs/5.deploy/serverless.md
new file mode 100644
index 000000000..f1ff9eba8
--- /dev/null
+++ b/docs/content/docs/5.deploy/serverless.md
@@ -0,0 +1,112 @@
+---
+title: Serverless Hosting
+description: How to deploy Nuxt Content on various serverless platforms.
+navigation:
+  title: Serverless
+---
+
+## What is Serverless Hosting?
+
+Serverless hosting lets you run code and applications without managing servers directly - you just upload your code and the cloud provider automatically handles all the infrastructure, scaling, and maintenance while charging you only for the actual compute resources you use.
+
+**In serverless environments, each user request triggers a fresh instance of your Nuxt server, meaning it starts from scratch every time.** This "stateless" nature means you can't store data in server memory or use file-based databases like SQLite. That's why we need to use external database services (like D1, Turso, or PostgreSQL) that persist data independently of your server instances.
+
+## Deploy with Serverless
+
+### 1. Select a database service
+
+Before deploying your project, you need to select a database service:
+
+::code-group
+
+```ts [PostgreSQL]
+// 1. Create a PostgreSQL database
+// 2. And add the `POSTGRES_URL` to the env variables
+export default defineNuxtConfig({
+  content: {
+    database: {
+      type: 'postgres',
+      url: process.env.POSTGRES_URL
+    }
+  }
+})
+```
+```ts [Cloudflare D1]
+// 1. Create a D1 database in your CF account
+// 2. Link it to your project with the same binding name
+export default defineNuxtConfig({
+  content: {
+    database: {
+      type: 'd1',
+      binding: '<YOUR_BINDING_NAME>'
+    }
+  }
+})
+```
+```ts [LibSQL]
+// 1. Create a LibSQL database on Turso.tech
+// 2. And add the `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN` env variables
+export default defineNuxtConfig({
+  modules: ['@nuxt/content'],
+  content: {
+    database: {
+      type: 'libsql',
+      url: process.env.TURSO_DATABASE_URL,
+      authToken: process.env.TURSO_AUTH_TOKEN,
+    }
+  }
+})
+```
+```ts [NuxtHub]
+// Install the NuxtHub module (see hub.nuxt.com)
+export default defineNuxtConfig({
+  modules: ['@nuxt/content', '@nuxthub/core'],
+  content: {
+    database: {
+      type: 'd1',
+      binding: 'DB'
+    }
+  },
+  hub: {
+    database: true
+  }
+})
+```
+::
+
+### 2. Deploy your project
+
+Nuxt Content uses Nuxt deployment presets to adjust the build process for different hosting platforms.
+
+Various serverless platform are supported with zero configuration:
+
+- [Cloudflare](https://nuxt.com/deploy/cloudflare)
+- [NuxtHub](https://nuxt.com/deploy/nuxthub)
+- [Vercel](https://nuxt.com/deploy/vercel)
+- [Netlify](https://nuxt.com/deploy/netlify)
+
+All you need to do is to set the build command to:
+
+```bash [Terminal]
+nuxi build
+```
+
+The generated output will be compatible with the selected platform.
+
+### 3. Optimize with pre-rendering
+
+As each request trigger a fresh instance of your Nuxt server, the performance of your serverless application will be impacted if you don't pre-render some pages.
+
+To optimize your serverless application, you can pre-render your pages using the `routeRules` option:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  routeRules: {
+    '/': { prerender: true }
+  }
+})
+```
+
+::tip{to="https://hub.nuxt.com/docs/recipes/pre-rendering"}
+We recommend to checkout **NuxtHub's Pre-rendering guide** to learn more about the different strategies to optimize your serverless application, it applies to all serverless platforms.
+::
diff --git a/docs/content/docs/5.deploy/static.md b/docs/content/docs/5.deploy/static.md
new file mode 100644
index 000000000..86113e4d3
--- /dev/null
+++ b/docs/content/docs/5.deploy/static.md
@@ -0,0 +1,34 @@
+---
+title: Static Hosting
+description: How to deploy Nuxt Content to static hosting with static site generation.
+navigation:
+  title: Static
+---
+
+## What is Static Hosting?
+
+Static hosting is a type of hosting where your website is built and served as static files (HTML, CSS, JS) that can be served by any static file server.
+
+Nuxt Content can be deployed to static hosting using Nuxt prerendering.
+
+## Building with SSG
+
+To build your app with static site generation, run the following command:
+
+```bash
+npx nuxi generate
+```
+
+::tip{icon="i-lucide-check"}
+This command will create a `dist/` directory with your static site. You can upload it to any static hosting service.
+::
+
+Nuxt will automatically pre-render all pages using an internal crawler, you can customize it's behavior with the `nitro.prerender` options.
+
+::note{to="https://nuxt.com/docs/getting-started/prerendering"}
+Learn more about pre-rendering in Nuxt.
+::
+
+## What about the Database?
+
+Nuxt Content will load the database in the browser using [WASM SQLite](/docs/advanced/database#wasm-sqlite-in-browser), this way, the content queries happening on client-side navigation or actions will run in the browser.
diff --git a/docs/content/index.yml b/docs/content/index.yml
index 5181eaf7b..7f84c6a2c 100644
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -8,7 +8,7 @@ hero:
   links:
     - label: Get Started
       trailingIcon: i-lucide-arrow-right
-      to: /docs/getting-started
+      to: /docs/getting-started/installation
     - label: Open Visual Editor
       to: https://nuxt.studio
       target: _blank
@@ -67,39 +67,57 @@ sections:
         trailingIcon: i-lucide-arrow-right
         color: neutral
         variant: subtle
-      - label: Watch 3min demo
-        trailingIcon: i-lucide-circle-play
-        color: neutral
-        variant: ghost
     code: |
       ::code-group
+      :::preview-card{label="Preview" icon="i-lucide-eye"}
+        ::example-landing-hero
+        ---
+        image: /images/everest.jpg
+        ---
+        #title
+        The Everest.
 
+        #description
+        The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
+        ::
+      :::
       ```mdc [content/index.md]
       ---
-      title: Nuxt Content
-      description: An open source blog theme powered by Nuxt.
+      title: The Mountains Website
+      description: A website about the most iconic mountains in the world.
       ---
 
       ::landing-hero
       ---
-      image: /images/mountain.png
+      image: /images/everest.png
       ---
       #title
-      Welcome to Alpine
+      The Everest.
 
       #description
-      An [open source blog theme](https://github.com/nuxt-themes/alpine) powered by [Nuxt Content](https://content.nuxtjs.org), editable on [Nuxt Studio](https://nuxt.studio).
+      The Everest is the highest mountain in the world, standing at 8,848 meters above sea level.
       ::
       ```
 
       ```vue [components/LandingHero.vue]
+      <script setup lang="ts">
+      defineProps<{ image: string }>()
+      </script>
+
       <template>
-        <div>
-          <h1>{{ title }}</h1>
-        </div>
+        <section class="flex items-center gap-12">
+          <div class="flex flex-col gap-2">
+            <h1 class="text-4xl">
+              <MDCSlot unwrap="p" />
+            </h1>
+            <div class="text-base text-gray-500 dark:text-gray-400">
+              <slot name="description" />
+            </div>
+          </div>
+          <img :src="image" class="w-1/2 rounded-lg">
+        </section>
       </template>
       ```
-
       ::
   - title: Query with [Type-Safety]{class="text-[var(--ui-secondary)]"}
     description: Define your content structure with collections and query them with schema validation and full type-safety.
@@ -112,37 +130,47 @@ sections:
       - title: Get auto-completion in your Vue files
         icon: i-lucide-text-cursor
     links:
-      - label: Learn more about query
-        to: /docs/utils/query-collection
+      - label: Learn more about content collections
+        to: /docs/collections/collections
         trailingIcon: i-lucide-arrow-right
         color: neutral
         variant: subtle
     code: |
       ::code-group
-
       ```vue [pages/blog.vue]
       <script setup lang="ts">
-      const { data: posts } = await useAsyncData('posts', () => {
-        return queryCollection('blog')
-          .order('date', 'DESC')
-          .select('title', 'path', 'description')
-          .all()
+      const { data: posts } = await useAsyncData('blog', () => {
+        return queryCollection('blog').all()
       })
       </script>
 
       <template>
-        <div v-for="post in posts" :key="post.path">
-          <h2>{{ doc.title }}</div>
-          <p>{{ doc.description }}</p>
-          <NuxtLink :to="doc.path">Read post →</NuxtLink>
+        <div>
+          <h1>Blog</h1>
+          <ul>
+            <li v-for="post in posts" :key="post.id">
+              <NuxtLink :to="post.path">{{ post.title }}</NuxtLink>
+            </li>
+          </ul>
         </div>
       </template>
       ```
 
       ```ts [content.config.ts]
-      export default defineContent({
-        collections: ['blog'],
-      })
+      import { defineCollection, z } from '@nuxt/content'
+
+      export const collections = {
+        blog: defineCollection({
+          source: 'blog/*.md',
+          type: 'page',
+          // Define custom schema for docs collection
+          schema: z.object({
+            tags: z.array(z.string()),
+            image: z.string(),
+            date: z.Date()
+          })
+        })
+      }
       ```
 
       ::
@@ -169,7 +197,7 @@ sections:
   - title: Add a git-based CMS to your Nuxt project.
     links:
       - label: Start reading docs
-        to: /docs/getting-started
+        to: /docs/getting-started/installation
         trailingIcon: i-lucide-arrow-right
       - label: Open Visual Editor
         to: https://nuxt.studio
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 76b1b0377..46cde598a 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,9 +1,6 @@
 import { defineNuxtConfig } from 'nuxt/config'
-import { createResolver } from '@nuxt/kit'
 import pkg from '../package.json'
 
-const { resolve } = createResolver(import.meta.url)
-
 export default defineNuxtConfig({
   modules: [
     '@nuxt/ui-pro',
diff --git a/docs/public/images/everest.jpg b/docs/public/images/everest.jpg
new file mode 100644
index 000000000..90248a300
Binary files /dev/null and b/docs/public/images/everest.jpg differ