docs: add showcase page (#3659)

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

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>