From c28ef0abb8e0b2f01cb35de6e9f513706d036594 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 18 Jun 2024 17:29:52 +0200
Subject: [PATCH] docs(home): improve community section (#1891)

---
 docs/components/Gradient.vue              |  34 ++++++
 docs/components/home/HomeContributors.vue | 131 ++++++++++++++++++++++
 docs/components/home/HomeDemo.vue         |   2 +-
 docs/content/index.yml                    |  19 ++--
 docs/pages/index.vue                      | 102 ++++++++---------
 5 files changed, 229 insertions(+), 59 deletions(-)
 create mode 100644 docs/components/Gradient.vue
 create mode 100644 docs/components/home/HomeContributors.vue

diff --git a/docs/components/Gradient.vue b/docs/components/Gradient.vue
new file mode 100644
index 00000000..e404ae75
--- /dev/null
+++ b/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>
diff --git a/docs/components/home/HomeContributors.vue b/docs/components/home/HomeContributors.vue
new file mode 100644
index 00000000..ea481333
--- /dev/null
+++ b/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>
diff --git a/docs/components/home/HomeDemo.vue b/docs/components/home/HomeDemo.vue
index ac003621..1cc94ecb 100644
--- a/docs/components/home/HomeDemo.vue
+++ b/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>
diff --git a/docs/content/index.yml b/docs/content/index.yml
index ad16dd9d..940c8fd1 100644
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -67,14 +67,19 @@ sections:
         color: black
         size: lg
         icon: i-heroicons-cube
-      - label: Star on GitHub
-        to: https://github.com/nuxt/ui
-        target: _blank
-        color: white
-        size: lg
-        icon: i-simple-icons-github
 cta:
-  title: Trusted and supported by our<br class="hidden lg:block"> amazing community
+  title: Built and driven by an <span class="text-primary">amazing community</span>
+  align: center
+  users:
+    - name: Benjamin Canac
+      username: benjamincanac
+      to: https://twitter.com/benjamincanac
+    - name: Romain Hamel
+      username: romhml
+      to: https://github.com/romhml
+    - name: Neil Richter
+      username: noook
+      to: https://nook.sh/
 pro:
   title: Upgrade to <span class="text-primary">Nuxt UI Pro</span>
   description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.'
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 355a8ad3..8d5592fc 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -102,77 +102,79 @@
     <ULandingSection class="!pt-0 dark:bg-gradient-to-b from-gray-950/50 to-gray-900">
       <ULandingCTA
         align="left"
-        card
+        :card="false"
         :ui="{
-          background: 'dark:bg-gradient-to-b from-gray-800 to-gray-900',
-          shadow: 'dark:shadow-2xl',
           body: {
-            background: 'bg-gray-50/50 dark:bg-gray-900/50'
+            padding: '!p-0'
           },
-          title: 'text-center lg:text-left',
-          links: 'justify-center lg:justify-start'
+          title: 'text-center lg:text-left lg:text-5xl',
+          description: 'mt-10 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-8 lg:gap-16',
+          links: '-ml-3 justify-center lg:justify-start flex-wrap gap-y-3'
         }"
       >
         <template #title>
           <span v-html="page.cta.title" />
         </template>
 
-        <template #links>
-          <ClientOnly>
-            <UAvatarGroup :max="xlAndLarger ? 13 : lgAndLarger ? 10 : mdAndLarger ? 16 : 8" size="md" class="flex-wrap-reverse [&_span:first-child]:text-xs justify-center">
-              <UTooltip
-                v-for="(contributor, index) of module.contributors"
-                :key="index"
-                :text="contributor.username"
-                class="rounded-full"
-                :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50' }"
-                :popper="{ offsetDistance: 16 }"
-              >
-                <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="lg:hover:scale-125 lg:hover:ring-2 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
-                  width="40"
-                  height="40"
-                  size="md"
-                  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>
-            </UAvatarGroup>
-          </ClientOnly>
-        </template>
-
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
-          <NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
-            <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
+        <template #description>
+          <NuxtLink class="text-center lg:text-left group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
+            <p class="text-5xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
               {{ format(module.stats.downloads) }}+
             </p>
             <p>monthly downloads</p>
           </NuxtLink>
 
-          <NuxtLink class="text-center group" to="https://github.com/nuxt/ui" target="_blank">
-            <p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
+          <NuxtLink class="text-center lg:text-left group" to="https://github.com/nuxt/ui" target="_blank">
+            <p class="text-5xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
               {{ format(module.stats.stars) }}+
             </p>
-            <p>stars</p>
+            <p>GitHub stars</p>
           </NuxtLink>
+        </template>
+
+        <template #links>
+          <UButton
+            v-for="user in page.cta.users"
+            :key="user.username"
+            :to="user.to"
+            size="md"
+            color="gray"
+            variant="ghost"
+            target="_blank"
+          >
+            <UAvatar
+              :alt="user.username"
+              :src="`https://ipx.nuxt.com/s_80x80/gh_avatar/${user.username}`"
+              :srcset="`https://ipx.nuxt.com/s_160x160/gh_avatar/${user.username} 2x`"
+              width="80"
+              height="80"
+              size="md"
+              loading="lazy"
+            />
+
+            <div class="text-left">
+              <p class="font-medium">
+                {{ user.name }}
+              </p>
+              <p class="text-gray-500 dark:text-gray-400 leading-4">
+                {{ `@${user.username}` }}
+              </p>
+            </div>
+          </UButton>
+        </template>
+
+        <div class="p-5 overflow-hidden flex">
+          <HomeContributors :contributors="module.contributors" />
         </div>
       </ULandingCTA>
     </ULandingSection>
 
     <template v-if="navigation.find(item => item._path === '/pro')">
-      <div class="relative">
-        <UDivider class="absolute inset-x-0" />
-
-        <div class="w-full relative overflow-hidden h-px bg-gradient-to-r from-gray-800 via-primary-400 to-gray-800 max-w-5xl mx-auto" />
-      </div>
-
       <ULandingHero id="pro" :links="page.pro.links" :ui="{ title: 'sm:text-6xl' }" class="bg-gradient-to-b from-gray-50 dark:from-gray-950/50 to-white dark:to-gray-900 relative">
+        <template #top>
+          <Gradient class="absolute inset-x-0 top-0 w-full block" />
+        </template>
+
         <template #title>
           <span v-html="page.pro.title" />
         </template>
@@ -438,7 +440,7 @@ useSeoMeta({
 
 const source = ref('npx nuxi@latest module add ui')
 const sectionRef = ref()
-const demoRef = ref()
+const demoRef = ref(null)
 const start = ref(0)
 
 const { height } = useElementSize(demoRef)
@@ -448,9 +450,7 @@ const config = useRuntimeConfig().public
 const { copy, copied } = useClipboard({ source })
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const mdAndLarger = breakpoints.greaterOrEqual('md')
 const lgAndLarger = breakpoints.greaterOrEqual('lg')
-const xlAndLarger = breakpoints.greaterOrEqual('xl')
 
 const { format } = Intl.NumberFormat('en', { notation: 'compact' })