docs: landing page (#611)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/components/Header.vue

@@ -1,26 +1,34 @@
 <template>
-  <UHeader>
+  <UHeader
+    :links="links"
+    :class="{
+      'border-primary-200/75 dark:border-primary-900/50': $route.path === '/',
+      'border-gray-200 dark:border-gray-800': $route.path !== '/'
+    }"
+  >
     <template #left>
-      <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
+      <NuxtLink to="/" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
         <Logo class="w-auto h-6" />
       </NuxtLink>
     </template>
 
-    <template #center>
+    <template v-if="$route.path !== '/'" #center>
       <UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
     </template>
 
     <template #right>
       <ColorPicker />
 
-      <UColorModeButton />
+      <UDocsSearchButton v-if="$route.path === '/'" icon-only />
+
+      <UColorModeButton v-if="!$colorMode.forced" />
 
-      <USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
       <USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
     </template>
 
     <template #panel>
       <BranchSelect />
+
       <UNavigationTree :links="mapContentNavigation(navigation)" />
     </template>
   </UHeader>
@@ -29,7 +37,30 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
+const route = useRoute()
 const { mapContentNavigation } = useElementsHelpers()
 
 const navigation = inject<Ref<NavItem[]>>('navigation')
+
+const links = computed(() => {
+  if (route.path !== '/') {
+    return []
+  }
+
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open-solid',
+    to: '/getting-started'
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: 'https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue',
+    target: '_blank'
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch-solid',
+    to: 'https://github.com/nuxtlabs/ui/releases',
+    target: '_blank'
+  }]
+})
 </script>