docs: add marketing pages

docs/app/app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { withoutTrailingSlash } from 'ufo'
+// import { withoutTrailingSlash } from 'ufo'
 import colors from 'tailwindcss/colors'
 // import { debounce } from 'perfect-debounce'
 
@@ -22,32 +22,7 @@ const searchTerm = ref('')
 //   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
 // }, 500))
 
-const links = computed(() => [{
-  label: 'Docs',
-  icon: 'i-lucide-square-play',
-  to: '/getting-started',
-  active: route.path.startsWith('/getting-started')
-}, {
-  label: 'Components',
-  icon: 'i-lucide-square-code',
-  to: '/components',
-  active: route.path.startsWith('/components')
-}, {
-  label: 'Roadmap',
-  icon: 'i-lucide-map',
-  to: '/roadmap'
-}, {
-  label: 'Figma',
-  icon: 'i-lucide-figma',
-  to: 'https://www.figma.com/community/file/1288455405058138934',
-  target: '_blank'
-}, {
-  label: 'Releases',
-  icon: 'i-lucide-rocket',
-  to: 'https://github.com/nuxt/ui/releases',
-  target: '_blank'
-}].filter(Boolean))
-
+const links = useLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -58,8 +33,8 @@ useHead({
     { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
-    { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' }
+    // { rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
   ],
   style: [
     { innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
@@ -83,7 +58,7 @@ provide('navigation', mappedNavigation)
 
 <template>
   <UApp :toaster="appConfig.toaster">
-    <NuxtLoadingIndicator color="#FFF" />
+    <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
     <template v-if="!route.path.startsWith('/examples')">
       <!-- <Banner /> -->
@@ -96,7 +71,7 @@ provide('navigation', mappedNavigation)
     </NuxtLayout>
 
     <template v-if="!route.path.startsWith('/examples')">
-      <!-- <Footer /> -->
+      <Footer />
 
       <ClientOnly>
         <LazyUContentSearch

docs/app/components/Footer.vue

@@ -1,37 +1,31 @@
 <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>
   <USeparator icon="i-simple-icons-nuxtdotjs" class="h-px" />
 
   <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>