docs: add showcase page (#3659)

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

docs/app/components/SkyBg.vue

@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<{
   color?: string
   size?: { min: number, max: number }
   speed?: 'slow' | 'normal' | 'fast'
+  isIndex?: boolean
 }>(), {
   starCount: 50,
   color: 'var(--ui-primary)',
@@ -21,7 +22,8 @@ const props = withDefaults(defineProps<{
     min: 1,
     max: 3
   }),
-  speed: 'normal'
+  speed: 'normal',
+  isIndex: false
 })
 
 const route = useRoute()
@@ -53,7 +55,7 @@ const twinkleDuration = computed(() => {
 </script>
 
 <template>
-  <div class="absolute pointer-events-none z-[-1] inset-y-0 left-4 right-4 lg:right-[50%] overflow-hidden">
+  <div class="absolute pointer-events-none z-[-1] overflow-hidden" :class="isIndex ? 'inset-y-0 left-4 right-4 lg:right-[50%]' : 'inset-0'">
     <div
       v-for="star in stars"
       :key="star.id"

docs/app/composables/useLinks.ts

@@ -84,15 +84,10 @@ export function useLinks() {
     label: 'Community',
     icon: 'i-lucide-users',
     children: [{
-      label: 'Roadmap',
-      description: 'Track our development progress in real-time.',
-      icon: 'i-lucide-map',
-      to: '/roadmap'
-    }, {
-      label: 'Contribution',
-      description: 'Learn how to contribute to Nuxt UI.',
-      icon: 'i-lucide-git-pull-request-arrow',
-      to: '/getting-started/contribution'
+      icon: 'i-lucide-presentation',
+      label: 'Showcase',
+      description: 'Check out some amazing projects built with Nuxt UI.',
+      to: '/showcase'
     }, {
       label: 'Devtools Integration',
       description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
@@ -111,11 +106,6 @@ export function useLinks() {
       icon: 'i-simple-icons-figma',
       to: 'https://github.com/Justineo/tempad-dev-plugin-nuxt-ui',
       target: '_blank'
-    }, {
-      label: 'Team',
-      description: 'Meet the team behind Nuxt UI.',
-      icon: 'i-lucide-users',
-      to: '/team'
     }]
   }, {
     label: 'Releases',

docs/app/composables/useSearchLinks.ts

@@ -31,6 +31,11 @@ export function useSearchLinks() {
     label: 'Figma',
     icon: 'i-simple-icons-figma',
     to: '/figma'
+  }, {
+    icon: 'i-lucide-presentation',
+    label: 'Community > Showcase',
+    description: 'Check out some of the amazing projects built with Nuxt UI.',
+    to: '/showcase'
   }, {
     label: 'Community > Contribution',
     description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.',

docs/app/pages/index.vue

@@ -74,7 +74,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
         </div>
       </template>
 
-      <LazySkyBg />
+      <LazySkyBg is-index />
 
       <div class="h-[344px] lg:h-full lg:relative w-full lg:min-h-[calc(100vh-var(--ui-header-height)-1px)] overflow-hidden">
         <UPageMarquee

docs/app/pages/showcase.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { joinURL } from 'ufo'
+
+const { data: page } = await useAsyncData('showcase', () => queryCollection('showcase').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const { url } = useSiteConfig()
+
+useSeoMeta({
+  titleTemplate: `%s - Nuxt UI`,
+  title: page.value.title,
+  description: page.value.description,
+  ogTitle: `${page.value.title} - Nuxt UI`,
+  ogDescription: page.value.description,
+  ogImage: joinURL(url, '/og-image.png')
+})
+</script>
+
+<template>
+  <UMain v-if="page">
+    <UPageHero
+      :title="page.hero.title"
+      :description="page.hero.description"
+      :links="page.hero.links"
+      :ui="{
+        wrapper: 'lg:px-12',
+        container: 'relative'
+      }"
+    >
+      <template #top>
+        <div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
+      </template>
+
+      <LazyStarsBg />
+
+      <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
+
+      <div class="border border-(--ui-border) bg-(--ui-bg)">
+        <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center">
+          <li
+            v-for="item in page.items"
+            :key="item.name"
+            class="relative flex flex-col gap-y-4 justify-start group h-full p-4 hover:bg-(--ui-bg-elevated)/50 border-(--ui-border) border-b max-sm:last:border-b-0 border-r max-sm:border-r-0 sm:even:border-r-0 lg:even:border-r lg:border-r lg:[&:nth-child(4n)]:border-r-0 lg:[&:nth-child(5n)]:border-b-0 lg:[&:nth-child(6n)]:border-b-0"
+          >
+            <NuxtLink class="inset-0 absolute" :to="item.url" target="_blank">
+              <span class="sr-only">Go to {{ item.name }}</span>
+            </NuxtLink>
+
+            <NuxtImg
+              :src="`/assets/showcase/${item.name.toLowerCase().replace(/\s/g, '-')}.png`"
+              :alt="`Screenshot of ${item.name}`"
+              loading="lazy"
+              class="rounded-[calc(var(--ui-radius)*1.5)]"
+            />
+
+            <div class="flex items-center gap-1 px-1">
+              <span class="font-medium text-(--ui-text-highlighted)">
+                {{ item.name }}
+              </span>
+              <UIcon name="i-lucide-arrow-right" class="size-4 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-200 -translate-x-1 group-hover:translate-x-0 text-(--ui-text-muted)" />
+            </div>
+          </li>
+        </ul>
+      </div>
+    </UPageHero>
+  </UMain>
+</template>