docs: add video on landing page

docs/content/0.index.yml

@@ -23,9 +23,16 @@ hero:
       icon: i-simple-icons-github
       size: lg
       color: gray
-      variant: ghost
       to: https://github.com/nuxt-hub/core
       target: _blank
+    - label: 3 min intro
+      icon: i-ph-video-duotone
+      color: gray
+      size: lg
+      variant: ghost
+      id: intro-video
+      to: https://www.youtube.com/watch?v=hlmPqDkc3_s
+      target: _blank
 features:
   - name: Automatic scaling
     description: Traffic is routed and load balanced across thousands of servers. Sleep well as your Nuxt app scales.

docs/content/1.docs/1.getting-started/3.deploy.md

@@ -22,7 +22,7 @@ The [NuxtHub Admin](https://admin.hub.nuxt.com) is made to simplify your experie
 
 ## NuxtHub CLI
 
-::warning
+::important
 If you do your first deployment with the NuxtHub CLI, you won't be able to attach your GitHub/GitLab repository later on due to a Cloudflare limitation, but you can use the [Github action](#github-action) to deploy on commit.
 ::
 

docs/pages/index.vue

@@ -5,6 +5,7 @@ import { joinURL } from 'ufo'
 const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
 
 const { url } = useSiteConfig()
+const videoModalOpen = ref(false)
 
 useSeoMeta({
   title: page.value.title,
@@ -14,6 +15,15 @@ useSeoMeta({
   ogImage: joinURL(url, '/social-card.png')
 })
 
+const videoLink = page.value.hero.links.find(link => link.id === 'intro-video')
+videoLink.click = (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    return
+  }
+  e?.preventDefault()
+  videoModalOpen.value = true
+}
+
 onMounted(() => {
   mediumZoom('[data-zoom-src]', {
     margin: 5
@@ -49,6 +59,20 @@ onMounted(() => {
       <template #description>
         <span v-html="page?.hero.description" />
       </template>
+
+      <UModal v-model="videoModalOpen">
+        <div class="p-3">
+          <iframe
+            width="100%"
+            height="315"
+            :src="`https://www.youtube-nocookie.com/embed/${videoLink.to.split('=')[1]}`"
+            title="NuxtHub introduction by LearnVue"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen
+          />
+        </div>
+      </UModal>
     </ULandingHero>
 
     <ULandingSection :ui="{ wrapper: 'py-6 sm:py-12' }">