docs(home): improve community section (#1891)

docs/components/Gradient.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="path-1-inside-1_1086_7239" fill="white">
+      <path d="M0 0H1440V181H0V0Z" />
+    </mask>
+    <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_1086_7239)" fill-opacity="0.22" />
+    <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_1086_7239)" mask="url(#path-1-inside-1_1086_7239)" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_1086_7239"
+        x1="720"
+        y1="0"
+        x2="720"
+        y2="181"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="rgb(var(--color-primary-DEFAULT))" />
+        <stop offset="1" stop-color="rgb(var(--color-primary-DEFAULT))" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_1086_7239"
+        x1="0"
+        y1="90.5"
+        x2="1440"
+        y2="90.5"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="rgb(var(--color-primary-DEFAULT))" stop-opacity="0" />
+        <stop offset="0.395" stop-color="rgb(var(--color-primary-DEFAULT))" />
+        <stop offset="1" stop-color="rgb(var(--color-primary-DEFAULT))" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+</template>

docs/components/home/HomeContributors.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { breakpointsTailwind } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  contributors: {
+    username: string
+  }[]
+  level?: number
+  max?: number
+}>(), {
+  level: 0,
+  max: 4
+})
+
+const contributors = computed(() => props.contributors.slice(0, 5))
+
+const el = ref(null)
+const { width } = useElementSize(el)
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const smallerThanSm = breakpoints.smaller('sm')
+</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-white dark:before:bg-gradient-to-b dark:before:from-gray-950 dark:before:to-gray-900 before:rounded-full z-[--level]"
+    :style="{
+      '--duration': `${((level + 1) * 5)}s`,
+      '--level': level + 1
+    }"
+  >
+    <HomeContributors
+      v-if="(level + 1) < max"
+      :max="max"
+      :level="level + 1"
+      :contributors="props.contributors.slice(5)"
+    />
+
+    <div
+      ref="el"
+      class="avatars absolute inset-0 grid place-items-center"
+      :style="{
+        '--total': contributors.length,
+        '--offset': `${width / 2}px`
+      }"
+    >
+      <div
+        v-for="(contributor, index) in contributors"
+        :key="contributor.username"
+        :style="{
+          '--index': index + 1
+        }"
+        class="avatar flex absolute"
+      >
+        <UTooltip :text="contributor.username">
+          <UAvatar
+            :alt="contributor.username"
+            :src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
+            :srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
+            class="ring-2 ring-gray-200 dark:ring-gray-700 lg:hover:ring-gray-900 dark:lg:hover:ring-white transition"
+            width="40"
+            height="40"
+            :size="smallerThanSm ? 'xs' : 'sm'"
+            loading="lazy"
+          >
+            <NuxtLink :to="`https://github.com/${contributor.username}`" :aria-label="contributor.username" target="_blank" class="focus:outline-none" tabindex="-1">
+              <span class="absolute inset-0" aria-hidden="true" />
+            </NuxtLink>
+          </UAvatar>
+        </UTooltip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.circle:after {
+  --angle: 0deg;
+  --border-color: rgb(var(--color-gray-200));
+  --highlight-color: rgb(var(--color-gray-700));
+
+  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 {
+  --border-color: rgb(var(--color-gray-700));
+  --highlight-color: white;
+}
+
+.avatars {
+  --angle: calc(var(--level) * 36deg);
+
+  transform: rotate(var(--angle));
+  animation: calc(var(--duration) + 60s) rotate linear infinite;
+}
+
+.avatar {
+  --degrees: calc(var(--index) * (360deg / var(--total)));
+  --transformX: calc(cos(var(--degrees)) * var(--offset));
+  --transformY: calc(sin(var(--degrees)) * var(--offset));
+
+  transform: translate(var(--transformX), var(--transformY)) rotate(calc(360deg - var(--angle)));
+}
+
+@keyframes rotate {
+  to {
+    --angle: 360deg;
+  }
+}
+
+@property --angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: true;
+}
+</style>

docs/components/home/HomeDemo.vue

@@ -31,7 +31,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8">
+  <ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8 overflow-hidden p-px">
     <div :ref="(el) => (refs[1] = el)" class="col-span-8 flex items-center animate-top">
       <RangeExample />
     </div>