docs: add landing page

docs/app/components/Footer.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const route = useRoute()
+
 const links = [{
   label: 'Figma',
   to: '/figma'
@@ -16,7 +18,7 @@ const links = [{
 </script>
 
 <template>
-  <USeparator icon="i-simple-icons-nuxtdotjs" class="h-px" />
+  <USeparator :icon="route.path === '/' ? undefined : 'i-simple-icons-nuxtdotjs'" class="h-px" />
 
   <UFooter>
     <template #left>

docs/app/components/SkyBg.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+interface Star {
+  x: number
+  y: number
+  size: number
+  twinkleDelay: number
+  id: string
+}
+
+const props = withDefaults(defineProps<{
+  starCount?: number
+  color?: string
+  size?: { min: number, max: number }
+  speed?: 'slow' | 'normal' | 'fast'
+}>(), {
+  starCount: 50,
+  color: 'var(--ui-primary)',
+  size: () => ({
+    min: 1,
+    max: 3
+  }),
+  speed: 'normal'
+})
+
+// Generate random stars
+const generateStars = (count: number): Star[] => {
+  return Array.from({ length: count }, () => {
+    const x = Math.floor(Math.random() * 100)
+    const y = Math.floor(Math.random() * 100)
+    const size = Math.random() * (props.size.max - props.size.min) + props.size.min
+    const twinkleDelay = Math.random() * 5
+
+    return { x, y, size, twinkleDelay, id: Math.random().toString(36).substring(2, 9) }
+  })
+}
+
+// Generate all stars
+const stars = ref<Star[]>(generateStars(props.starCount))
+
+// Compute twinkle animation duration based on speed
+const twinkleDuration = computed(() => {
+  const speedMap: Record<string, string> = {
+    slow: '4s',
+    normal: '2s',
+    fast: '1s'
+  }
+  return speedMap[props.speed]
+})
+</script>
+
+<template>
+  <div class="absolute pointer-events-none z-[-1] inset-y-0 left-4 right-4 lg:right-[50%] overflow-hidden">
+    <ClientOnly>
+      <div
+        v-for="star in stars"
+        :key="star.id"
+        class="star absolute"
+        :style="{
+          'left': `${star.x}%`,
+          'top': `${star.y}%`,
+          'transform': 'translate(-50%, -50%)',
+          '--star-size': `${star.size}px`,
+          '--star-color': color,
+          '--twinkle-delay': `${star.twinkleDelay}s`,
+          '--twinkle-duration': twinkleDuration
+        }"
+      />
+    </ClientOnly>
+  </div>
+</template>
+
+<style scoped>
+.star {
+  width: var(--star-size);
+  height: var(--star-size);
+  background-color: var(--star-color);
+  border-radius: 50%;
+  animation: twinkle var(--twinkle-duration) ease-in-out infinite;
+  animation-delay: var(--twinkle-delay);
+  will-change: opacity;
+}
+
+@keyframes twinkle {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+</style>

docs/app/components/home/HomeContributors.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  contributors?: {
+    username: string
+  }[]
+  level?: number
+  max?: number
+  paused?: boolean
+}>(), {
+  level: 0,
+  max: 4,
+  paused: false
+})
+
+const contributors = computed(() => props.contributors?.slice(0, 5) ?? [])
+
+const el = ref(null)
+const { width } = useElementSize(el)
+</script>
+
+<template>
+  <div
+    class="isolate rounded-full relative circle w-full aspect-[1/1] p-8 sm:p-12 md:p-14 lg:p-10 xl:p-16 before:absolute before:inset-px before:bg-(--ui-bg) before:rounded-full z-(--level)"
+    :class="{ 'animation-paused': paused }"
+    :style="{
+      '--duration': `${((level + 1) * 8)}s`,
+      '--level': level + 1
+    }"
+  >
+    <HomeContributors
+      v-if="(level + 1) < max"
+      :max="max"
+      :level="level + 1"
+      :contributors="props.contributors?.slice(5) ?? []"
+      :paused="paused"
+    />
+
+    <div
+      ref="el"
+      class="avatars absolute inset-0 grid"
+      :style="{
+        '--total': contributors.length,
+        '--offset': `${width / 2}px`
+      }"
+    >
+      <UTooltip
+        v-for="(contributor, index) in contributors"
+        :key="contributor.username"
+        :text="contributor.username"
+        :delay-duration="0"
+      >
+        <NuxtLink
+          :to="`https://github.com/${contributor.username}`"
+          :aria-label="contributor.username"
+          target="_blank"
+          class="avatar flex absolute top-1/2 left-1/2"
+          tabindex="-1"
+          :style="{
+            '--index': index + 1
+          }"
+        >
+          <img
+            width="56"
+            height="56"
+            :src="`https://ipx.nuxt.com/s_56x56/gh_avatar/${contributor.username}`"
+            :srcset="`https://ipx.nuxt.com/s_112x112/gh_avatar/${contributor.username} 2x`"
+            :alt="contributor.username"
+            class="ring-2 ring-(--ui-border) lg:hover:ring-(--ui-border-inverted) transition rounded-full size-7"
+            loading="lazy"
+          >
+        </NuxtLink>
+      </UTooltip>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.circle:after {
+  --start: 0deg;
+  --end: 360deg;
+  --border-color: var(--ui-border);
+  --highlight-color: var(--ui-color-neutral-400);
+
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: -1px;
+  opacity: 1;
+  border-radius: 9999px;
+  z-index: -1;
+  background: var(--border-color);
+
+  @supports (background: paint(houdini)) {
+    background: linear-gradient(var(--angle), var(--border-color), var(--border-color), var(--border-color), var(--border-color), var(--highlight-color));
+    animation: var(--duration) rotate linear infinite;
+  }
+}
+
+.dark .circle:after {
+  --highlight-color: var(--color-white);
+}
+
+.animation-paused.circle:after,
+.animation-paused .avatars {
+  animation-play-state: paused;
+}
+
+.avatars {
+  --start: calc(var(--level) * 36deg);
+  --end: calc(360deg + (var(--level) * 36deg));
+  transform: rotate(var(--angle));
+  animation: calc(var(--duration) + 60s) rotate linear infinite;
+}
+
+.avatar {
+  --deg: calc(var(--index) * (360deg / var(--total)));
+  --transformX: calc(cos(var(--deg)) * var(--offset));
+  --transformY: calc(sin(var(--deg)) * var(--offset));
+  transform: translate(calc(-50% + var(--transformX)), calc(-50% + var(--transformY))) rotate(calc(360deg - var(--angle)));
+}
+
+@keyframes rotate {
+  from {
+    --angle: var(--start);
+  }
+  to {
+    --angle: var(--end);
+  }
+}
+
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: true;
+}
+</style>

docs/app/composables/useLinks.ts

@@ -12,23 +12,17 @@ export function useLinks() {
     to: '/components',
     active: route.path === '/components',
     children: [{
-      label: 'Layout',
-      to: '/components#layout',
-      description: 'Container, grid, divider and responsive layout.',
-      icon: 'i-lucide-layout',
-      active: route.fullPath === '/components#layout'
+      label: 'Element',
+      to: '/components#element',
+      description: 'Button, badge, icon, alert, and small UI elements.',
+      icon: 'i-lucide-mouse-pointer',
+      active: route.fullPath === '/components#element'
     }, {
       label: 'Form',
       to: '/components#form',
       description: 'Input, select, checkbox, radio and form validation.',
       icon: 'i-lucide-text-cursor-input',
       active: route.fullPath === '/components#form'
-    }, {
-      label: 'Element',
-      to: '/components#element',
-      description: 'Button, badge, icon, alert, and small UI elements.',
-      icon: 'i-lucide-mouse-pointer',
-      active: route.fullPath === '/components#element'
     }, {
       label: 'Data',
       to: '/components#data',
@@ -47,6 +41,12 @@ export function useLinks() {
       description: 'Modal, tooltip, dialog and popover.',
       icon: 'i-lucide-layers',
       active: route.fullPath === '/components#overlay'
+    }, {
+      label: 'Layout',
+      to: '/components#layout',
+      description: 'Container, grid, divider and responsive layout.',
+      icon: 'i-lucide-layout',
+      active: route.fullPath === '/components#layout'
     }]
   }, {
     label: 'Pro',

docs/app/layouts/default.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <slot />
-  </div>
+  <slot />
 </template>