docs: add marketing pages (#3308)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/components/Footer.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-const route = useRoute()
-
-// const items = [{
-//   label: 'Figma Kit',
-//   to: 'https://www.figma.com/community/file/1288455405058138934',
-//   target: '_blank'
-// }, {
-//   label: 'Playground',
-//   to: 'https://stackblitz.com/edit/nuxt-ui',
-//   target: '_blank'
-// }, {
-//   label: 'Roadmap',
-//   to: '/roadmap'
-// }, {
-//   label: 'Releases',
-//   to: '/releases'
-// }]
+const links = [{
+  label: 'Figma',
+  to: '/figma'
+}, {
+  label: 'Roadmap',
+  to: '/roadmap'
+}, {
+  label: 'Terms',
+  to: '/pro/terms'
+}, {
+  label: 'Releases',
+  to: 'https://github.com/nuxt/ui/releases',
+  target: '_blank'
+}]
 </script>
 
 <template>
@@ -23,15 +20,12 @@ const route = useRoute()
 
   <UFooter>
     <template #left>
-      <NuxtLink v-if="route.path.startsWith('/pro')" to="https://ui.nuxt.com/pro/purchase" target="_blank" class="text-sm text-(--ui-text-muted)">
-        Purchase <span class="text-(--ui-text-highlighted)">Nuxt UI Pro</span>
-      </NuxtLink>
-      <NuxtLink v-else to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-(--ui-text-muted)">
+      <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="text-sm text-(--ui-text-muted)">
         Published under <span class="text-(--ui-text-highlighted)">MIT License</span>
       </NuxtLink>
     </template>
 
-    <!-- <UNavigationMenu :items="items" variant="link" color="neutral" /> -->
+    <UNavigationMenu :items="links" variant="link" color="neutral" />
 
     <template #right>
       <UButton
@@ -41,6 +35,7 @@ const route = useRoute()
         target="_blank"
         color="neutral"
         variant="ghost"
+        size="sm"
       />
       <UButton
         aria-label="Nuxt UI on Discord"
@@ -49,6 +44,7 @@ const route = useRoute()
         target="_blank"
         color="neutral"
         variant="ghost"
+        size="sm"
       />
       <UButton
         aria-label="Nuxt on X"
@@ -57,6 +53,16 @@ const route = useRoute()
         target="_blank"
         color="neutral"
         variant="ghost"
+        size="sm"
+      />
+      <UButton
+        aria-label="Nuxt on BlueSky"
+        icon="i-simple-icons-bluesky"
+        to="https://bsky.app/profile/nuxt.com"
+        target="_blank"
+        color="neutral"
+        variant="ghost"
+        size="sm"
       />
       <UButton
         aria-label="Nuxt UI on GitHub"
@@ -65,6 +71,7 @@ const route = useRoute()
         target="_blank"
         color="neutral"
         variant="ghost"
+        size="sm"
       />
     </template>
   </UFooter>

docs/app/components/PromotionalVideo.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="relative">
+    <UPageCard
+      variant="subtle"
+      class="rounded-[calc(var(--ui-radius)*6)]"
+    >
+      <video
+        class="rounded-[calc(var(--ui-radius)*2)]"
+        preload="none"
+        poster="https://res.cloudinary.com/nuxt/video/upload/so_3.3/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.jpg"
+        :controls="true"
+      >
+        <source
+          src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.webm"
+          type="video/webm"
+        >
+        <source
+          src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.mp4"
+          type="video/mp4"
+        >
+        <source
+          src="https://res.cloudinary.com/nuxt/video/upload/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.ogg"
+          type="video/ogg"
+        >
+      </video>
+    </UPageCard>
+  </div>
+</template>

docs/app/components/theme-picker/ThemePicker.vue

@@ -42,7 +42,8 @@ const radius = computed({
 
 const modes = [
   { label: 'light', icon: appConfig.ui.icons.light },
-  { label: 'dark', icon: appConfig.ui.icons.dark }
+  { label: 'dark', icon: appConfig.ui.icons.dark },
+  { label: 'system', icon: appConfig.ui.icons.system }
 ]
 const mode = computed({
   get() {
@@ -144,7 +145,7 @@ function setBlackAsPrimary(value: boolean) {
             v-for="m in modes"
             :key="m.label"
             v-bind="m"
-            :selected="mode === m.label"
+            :selected="colorMode.preference === m.label"
             @click="mode = m.label"
           />
         </div>