docs: add YouTube link

Author: atinux

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

@@ -1,5 +1,6 @@
 ---
-navigation.title: Introduction
+navigation:
+  title: Introduction
 title: What is NuxtHub?
 description: NuxtHub helps you build and deploy full-stack Nuxt applications globally.
 ---
@@ -13,52 +14,75 @@ It leverages Cloudflare features such as Pages, Workers Analytics, AI, KV, D1, R
 It also deploys to your Cloudflare account so you stay in control of your data and billing as we don't mark-up Cloudflare prices.
 ::
 
+::callout
+---
+color: red
+icon: i-logos-youtube-icon
+target: _blan
+to: https://www.youtube.com/watch?v=hlmPqDkc3_s
+---
+Watch a 3 minute introduction video by **LearnVue**.
+::
+
 ## Features
 
 NuxtHub provides optional features to help you build full-stack applications:
+
 - [AI Models](/docs/features/ai) to run machine learning models, such as LLMs in Nuxt.
 - [Blob storage](/docs/features/blob) to store static assets, such as images, videos and more
 - [Caching system](/docs/features/cache) for your Nuxt pages, API routes or server functions
 - [SQL database](/docs/features/database) to store your application's data
 - [Key-Value](/docs/features/kv) to store JSON data accessible globally with low-latency
 - [Open API](/docs/features/open-api) to generate your API documentation with [Scalar](https://scalar.com)
 
-::tip{icon="i-ph-plugs-connected-duotone" to="/docs/getting-started/remote-storage"}
+::tip
+---
+icon: i-ph-plugs-connected-duotone
+to: /docs/getting-started/remote-storage
+---
 NuxtHub comes with a powerful proxy system to connect to your project's resources from your local environment, allowing you to work with your remote storage as if it was local with `npx nuxi dev --remote`.
 ::
 
 ## NuxtHub Admin
 
 ::tabs
-::div{label="Projects"}
-:nuxt-img{src="/images/landing/nuxthub-admin.png" alt="NuxtHub Admin" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin.png"}
-::
-::div{label="Deployments"}
-:nuxt-img{src="/images/landing/nuxthub-admin-project.png" alt="NuxtHub Admin Deployments" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-project.png"}
-::
-::div{label="Database"}
-:nuxt-img{src="/images/landing/nuxthub-admin-database.png" alt="NuxtHub Admin Database" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-database.png"}
-::
-::div{label="KV"}
-:nuxt-img{src="/images/landing/nuxthub-admin-kv.png" alt="NuxtHub Admin KV" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-kv.png"}
-::
-::div{label="Blob"}
-:nuxt-img{src="/images/landing/nuxthub-admin-blob.png" alt="NuxtHub Admin Blob" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-blob.png"}
-::
-::div{label="Logs"}
-:nuxt-img{src="/images/landing/nuxthub-admin-server-logs.png" alt="NuxtHub Admin Logs" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-server-logs.png"}
-::
-::div{label="Open API"}
-:nuxt-img{src="/images/landing/nuxthub-admin-open-api.png" alt="NuxtHub Admin Open API" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-open-api.png"}
-::
-::div{label="Cache"}
-:nuxt-img{src="/images/landing/nuxthub-admin-cache.png" alt="NuxtHub Admin Cache" width="915" height="515" data-zoom-src="/images/landing/nuxthub-admin-cache.png"}
-::
+  :::div{label="Projects"}
+  :nuxt-img{alt="NuxtHub Admin" dataZoomSrc="/images/landing/nuxthub-admin.png" height="515" src="/images/landing/nuxthub-admin.png" width="915"}
+  :::
+
+  :::div{label="Deployments"}
+  :nuxt-img{alt="NuxtHub Admin Deployments" dataZoomSrc="/images/landing/nuxthub-admin-project.png" height="515" src="/images/landing/nuxthub-admin-project.png" width="915"}
+  :::
+
+  :::div{label="Database"}
+  :nuxt-img{alt="NuxtHub Admin Database" dataZoomSrc="/images/landing/nuxthub-admin-database.png" height="515" src="/images/landing/nuxthub-admin-database.png" width="915"}
+  :::
+
+  :::div{label="KV"}
+  :nuxt-img{alt="NuxtHub Admin KV" dataZoomSrc="/images/landing/nuxthub-admin-kv.png" height="515" src="/images/landing/nuxthub-admin-kv.png" width="915"}
+  :::
+
+  :::div{label="Blob"}
+  :nuxt-img{alt="NuxtHub Admin Blob" dataZoomSrc="/images/landing/nuxthub-admin-blob.png" height="515" src="/images/landing/nuxthub-admin-blob.png" width="915"}
+  :::
+
+  :::div{label="Logs"}
+  :nuxt-img{alt="NuxtHub Admin Logs" dataZoomSrc="/images/landing/nuxthub-admin-server-logs.png" height="515" src="/images/landing/nuxthub-admin-server-logs.png" width="915"}
+  :::
+
+  :::div{label="Open API"}
+  :nuxt-img{alt="NuxtHub Admin Open API" dataZoomSrc="/images/landing/nuxthub-admin-open-api.png" height="515" src="/images/landing/nuxthub-admin-open-api.png" width="915"}
+  :::
+
+  :::div{label="Cache"}
+  :nuxt-img{alt="NuxtHub Admin Cache" dataZoomSrc="/images/landing/nuxthub-admin-cache.png" height="515" src="/images/landing/nuxthub-admin-cache.png" width="915"}
+  :::
 ::
 
 The [NuxtHub admin](https://admin.hub.nuxt.com) is a web based dashboard to manage your NuxtHub apps. It helps you deploy your NuxtHub apps with a single command on your Cloudflare account while provisioning all the necessary resources for you.
 
 It abstracts the complexity of managing full-stack Nuxt applications on Cloudflare:
+
 - Link your Cloudflare account and stay in control, we never mark-up Cloudflare prices
 - [Deploy your application](/docs/getting-started/deploy) with `nuxthub deploy` command or with Cloudflare Pages CI
 - Relax while it provisions all the necessary resources (ai, blob, cache, database, kv)
@@ -76,15 +100,17 @@ Get started with NuxtHub Admin.
 NuxtHub also integrates with the [Nuxt DevTools](https://devtools.nuxt.com/) to provide a complete development experience.
 
 ::tabs
-::div{label="Database"}
-:nuxt-img{src="/images/landing/nuxt-devtools-database.png" alt="Nuxt DevTools Database" width="915" height="515" data-zoom-src="/images/landing/nuxt-devtools-database.png"}
-::
-::div{label="KV"}
-:nuxt-img{src="/images/landing/nuxt-devtools-kv.png" alt="Nuxt DevTools KV" width="915" height="515" data-zoom-src="/images/landing/nuxt-devtools-kv.png"}
-::
-::div{label="Blob"}
-:nuxt-img{src="/images/landing/nuxt-devtools-blob.png" alt="Nuxt DevTools Blob" width="915" height="515" data-zoom-src="/images/landing/nuxt-devtools-blob.png"}
-::
+  :::div{label="Database"}
+  :nuxt-img{alt="Nuxt DevTools Database" dataZoomSrc="/images/landing/nuxt-devtools-database.png" height="515" src="/images/landing/nuxt-devtools-database.png" width="915"}
+  :::
+
+  :::div{label="KV"}
+  :nuxt-img{alt="Nuxt DevTools KV" dataZoomSrc="/images/landing/nuxt-devtools-kv.png" height="515" src="/images/landing/nuxt-devtools-kv.png" width="915"}
+  :::
+
+  :::div{label="Blob"}
+  :nuxt-img{alt="Nuxt DevTools Blob" dataZoomSrc="/images/landing/nuxt-devtools-blob.png" height="515" src="/images/landing/nuxt-devtools-blob.png" width="915"}
+  :::
 ::
 
 ## Upcoming Packages
@@ -94,6 +120,7 @@ We plan to provide a complete backend experience for Nuxt apps through various `
 - [`@nuxthub/core`](https://github.com/nuxt-hub/core): Main package to provide storage features
 - `@nuxthub/auth`: Add authentication for user management (soon)
 - `@nuxthub/email`: Send transactional emails to your users (soon)
+- `@nuxthub/forms`: Collect forms from users (soon)
 - `@nuxthub/analytics`: Understand your traffic and track events within your application and API (soon)
 - `@nuxthub/...`: You name it!