From 4f51d19e2bef3d6e625cd0b0199f6706ff2af5be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Thu, 6 Mar 2025 12:50:22 +0100
Subject: [PATCH] docs: add landing page (#3448)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/app/components/Footer.vue                |   4 +-
 docs/app/components/SkyBg.vue                 |  91 ++++++
 docs/app/components/StarsBg.vue               | 127 ++++++--
 docs/app/components/home/HomeContributors.vue | 139 ++++++++
 docs/app/composables/useLinks.ts              |  22 +-
 docs/app/layouts/default.vue                  |   4 +-
 docs/app/pages/.index.yml                     | 172 ++++++++++
 docs/app/pages/components.vue                 |  29 +-
 docs/app/pages/index.vue                      | 307 ++++++++++++++++++
 docs/app/pages/pro/.content/templates.yml     |  14 +-
 docs/app/pages/pro/activate.vue               |  23 +-
 docs/app/pages/pro/index.vue                  |  16 +-
 docs/app/pages/pro/pricing.vue                |   5 +-
 docs/app/pages/pro/templates.vue              | 101 +++---
 docs/nuxt.config.ts                           |   1 -
 src/runtime/components/Avatar.vue             |   3 +-
 16 files changed, 917 insertions(+), 141 deletions(-)
 create mode 100644 docs/app/components/SkyBg.vue
 create mode 100644 docs/app/components/home/HomeContributors.vue
 create mode 100644 docs/app/pages/.index.yml
 create mode 100644 docs/app/pages/index.vue

diff --git a/docs/app/components/Footer.vue b/docs/app/components/Footer.vue
index 6b98a2ad..b5bab47a 100644
--- a/docs/app/components/Footer.vue
+++ b/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>
diff --git a/docs/app/components/SkyBg.vue b/docs/app/components/SkyBg.vue
new file mode 100644
index 00000000..bee52f53
--- /dev/null
+++ b/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>
diff --git a/docs/app/components/StarsBg.vue b/docs/app/components/StarsBg.vue
index ab9636a9..ba8af2ed 100644
--- a/docs/app/components/StarsBg.vue
+++ b/docs/app/components/StarsBg.vue
@@ -1,52 +1,115 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  starCount?: number
+  color?: string
+  speed?: 'slow' | 'normal' | 'fast'
+  size?: { min: number, max: number }
+}>(), {
+  starCount: 300,
+  color: 'var(--ui-primary)',
+  speed: 'normal',
+  size: () => ({
+    min: 1,
+    max: 2
+  })
+})
+
+// Generate random star positions and sizes
+const generateStars = (count: number) => {
+  return Array.from({ length: count }, () => ({
+    x: Math.floor(Math.random() * 2000),
+    y: Math.floor(Math.random() * 2000),
+    size: typeof props.size === 'number'
+      ? props.size
+      : Math.random() * (props.size.max - props.size.min) + props.size.min
+  }))
+}
+
+// Compute star layers with different speeds and opacities
+const starLayers = computed(() => {
+  const speedMap = {
+    slow: { duration: 200, opacity: 0.5 },
+    normal: { duration: 150, opacity: 0.75 },
+    fast: { duration: 100, opacity: 1 }
+  }
+
+  return [
+    { stars: generateStars(props.starCount), ...speedMap.fast },
+    { stars: generateStars(Math.floor(props.starCount * 0.6)), ...speedMap.normal },
+    { stars: generateStars(Math.floor(props.starCount * 0.3)), ...speedMap.slow }
+  ]
+})
+</script>
+
 <template>
-  <div class="stars size-full absolute pointer-events-none inset-x-0 top-0 opacity-75">
-    <div class="h-px w-px rounded-full bg-transparent" />
-    <div class="h-px w-px rounded-full bg-transparent" />
-    <div class="h-px w-px rounded-full bg-transparent" />
+  <div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden">
+    <ClientOnly>
+      <div class="stars size-full absolute inset-x-0 top-0">
+        <div
+          v-for="(layer, index) in starLayers"
+          :key="index"
+          class="star-layer"
+          :style="{
+            '--star-duration': `${layer.duration}s`,
+            '--star-opacity': layer.opacity,
+            '--star-color': color
+          }"
+        >
+          <div
+            v-for="(star, starIndex) in layer.stars"
+            :key="starIndex"
+            class="star absolute rounded-full"
+            :style="{
+              left: `${star.x}px`,
+              top: `${star.y}px`,
+              width: `${star.size}px`,
+              height: `${star.size}px`,
+              backgroundColor: 'var(--star-color)',
+              opacity: 'var(--star-opacity)'
+            }"
+          />
+        </div>
+      </div>
+    </ClientOnly>
   </div>
 </template>
 
 <style scoped>
-/* Credits: https://reflect.app/ */
 .stars {
   left: 50%;
-  -webkit-mask-image: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, .8) 25%, #d9d9d9 50%, rgba(217, 217, 217, .8) 75%, rgba(217, 217, 217, 0) 100%);
-  mask-image: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, .8) 25%, #d9d9d9 50%, rgba(217, 217, 217, .8) 75%, rgba(217, 217, 217, 0) 100%);
+  transform: translate(-50%);
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    rgba(217, 217, 217, 0) 0%,
+    rgba(217, 217, 217, 0.8) 25%,
+    #d9d9d9 50%,
+    rgba(217, 217, 217, 0.8) 75%,
+    rgba(217, 217, 217, 0) 100%
+  );
+  mask-image: linear-gradient(
+    180deg,
+    rgba(217, 217, 217, 0) 0%,
+    rgba(217, 217, 217, 0.8) 25%,
+    #d9d9d9 50%,
+    rgba(217, 217, 217, 0.8) 75%,
+    rgba(217, 217, 217, 0) 100%
+  );
   -webkit-mask-size: cover;
   mask-size: cover;
-  transform: translate(-50%);
-
-  --color: var(--ui-primary);
 }
 
-.stars > div {
+.star-layer {
   animation: risingStarsAnimation linear infinite;
-}
-
-.stars div:nth-child(1) {
-  animation-duration: 100s !important;
-  box-shadow: 693px 8435px var(--color), 1921px 246px var(--color), 1120px 872px var(--color), 1614px 1319px var(--color), 628px 1227px var(--color), 144px 1298px var(--color), 1152px 1529px var(--color), 1486px 1897px var(--color), 401px 1213px var(--color), 1023px 73px var(--color), 122px 509px var(--color), 1264px 1265px var(--color), 235px 1276px var(--color), 514px 1138px var(--color), 1019px 1915px var(--color), 1214px 1058px var(--color), 1740px 1354px var(--color), 1947px 791px var(--color), 1046px 438px var(--color), 695px 1209px var(--color), 58px 442px var(--color), 1143px 1489px var(--color), 1486px 607px var(--color), 730px 1396px var(--color), 402px 1177px var(--color), 1533px 657px var(--color), 1436px 657px var(--color), 1567px 1081px var(--color), 1632px 295px var(--color), 460px 1293px var(--color), 196px 800px var(--color), 1554px 1284px var(--color), 645px 1441px var(--color), 467px 502px var(--color), 1413px 497px var(--color), 1468px 434px var(--color), 34px 619px var(--color), 1858px 1004px var(--color), 834px 511px var(--color), 693px 916px var(--color), 330px 91px var(--color), 1686px 1366px var(--color), 36px 56px var(--color), 390px 1355px var(--color), 656px 99px var(--color), 1695px 1869px var(--color), 321px 1219px var(--color), 271px 1082px var(--color), 1730px 407px var(--color), 1769px 1790px var(--color), 1072px 780px var(--color), 630px 1561px var(--color), 1238px 1991px var(--color), 26px 440px var(--color), 998px 1604px var(--color), 1865px 631px var(--color), 289px 1635px var(--color), 689px 547px var(--color), 1691px 1147px var(--color), 113px 1933px var(--color), 1656px 949px var(--color), 903px 1220px var(--color), 1214px 503px var(--color), 505px 1391px var(--color), 1300px 1766px var(--color), 56px 194px var(--color), 1920px 572px var(--color), 1704px 945px var(--color), 1627px 278px var(--color), 1659px 793px var(--color), 1249px 1495px var(--color), 1029px 1187px var(--color), 1555px 408px var(--color), 1030px 250px var(--color), 725px 1744px var(--color), 1787px 1643px var(--color), 627px 199px var(--color), 1151px 698px var(--color), 1862px 81px var(--color), 166px 1098px var(--color), 896px 1022px var(--color), 1313px 123px var(--color), 1097px 1047px var(--color), 1288px 1258px var(--color), 691px 348px var(--color), 573px 862px var(--color), 277px 1220px var(--color), 1039px 1041px var(--color), 105px 634px var(--color), 389px 1046px var(--color), 1452px 914px var(--color), 1636px 1264px var(--color), 1809px 1362px var(--color), 1796px 1460px var(--color), 758px 131px var(--color), 1116px 891px var(--color), 837px 844px var(--color), 996px 497px var(--color), 270px 990px var(--color), 1646px 1943px var(--color), 1896px 734px var(--color), 1237px 154px var(--color), 795px 796px var(--color), 1773px 1527px var(--color), 1262px 1316px var(--color), 1949px 499px var(--color), 1987px 1438px var(--color), 993px 1583px var(--color), 1371px 423px var(--color), 1596px 388px var(--color), 878px 498px var(--color), 1571px 1310px var(--color), 1339px 290px var(--color), 1323px 1028px var(--color), 1224px 1001px var(--color), 1211px 1638px var(--color), 1877px 85px var(--color), 300px 787px var(--color), 1699px 1559px var(--color), 506px 8px var(--color), 703px 228px var(--color), 1903px 233px var(--color), 1740px 963px var(--color), 1901px 1551px var(--color), 34px 440px var(--color), 660px 713px var(--color), 953px 1397px var(--color), 1292px 1730px var(--color), 1733px 922px var(--color), 844px 1972px var(--color), 292px 85px var(--color), 786px 284px var(--color), 1716px 1293px var(--color), 111px 1807px var(--color), 1787px 1462px var(--color), 1190px 1837px var(--color), 224px 1552px var(--color), 1532px 1693px var(--color), 819px 594px var(--color), 1441px 1037px var(--color), 11px 1657px var(--color), 580px 645px var(--color), 1469px 330px var(--color), 1532px 1057px var(--color), 1146px 860px var(--color), 1438px 784px var(--color), 1365px 1858px var(--color), 271px 1335px var(--color), 1118px 712px var(--color), 1261px 48px var(--color), 1045px 447px var(--color), 1325px 1454px var(--color), 1517px 406px var(--color), 1339px 386px var(--color), 1375px 1652px var(--color), 1719px 966px var(--color), 581px 765px var(--color), 1222px 599px var(--color), 1567px 666px var(--color), 1154px 1378px var(--color), 1709px 480px var(--color), 1862px 285px var(--color), 286px 1888px var(--color), 587px 870px var(--color), 46px 832px var(--color), 1036px 286px var(--color), 1376px 261px var(--color), 1794px 981px var(--color), 1530px 1004px var(--color), 1700px 1617px var(--color), 1810px 253px var(--color), 578px 521px var(--color), 37px 1207px var(--color), 1126px 151px var(--color), 644px 603px var(--color), 1897px 1995px var(--color), 415px 579px var(--color), 929px 718px var(--color), 1025px 1952px var(--color), 1779px 1959px var(--color), 1955px 1752px var(--color), 1991px 136px var(--color), 659px 1463px var(--color), 1113px 1052px var(--color), 1628px 1806px var(--color), 1891px 1064px var(--color), 1782px 1329px var(--color), 510px 526px var(--color), 1348px 599px var(--color), 1157px 1994px var(--color), 936px 260px var(--color), 227px 251px var(--color), 24px 1290px var(--color), 1944px 701px var(--color), 1665px 745px var(--color), 1648px 1817px var(--color), 1446px 1941px var(--color), 1552px 802px var(--color), 483px 264px var(--color), 974px 537px var(--color), 966px 941px var(--color), 1960px 1542px var(--color), 281px 930px var(--color), 1000px 863px var(--color), 800px 1257px var(--color), 1949px 1845px var(--color), 43px 1126px var(--color), 981px 36px var(--color), 1355px 1949px var(--color), 797px 43px var(--color), 110px 906px var(--color), 829px 853px var(--color), 845px 1999px var(--color), 565px 1058px var(--color), 1424px 1028px var(--color), 903px 1574px var(--color), 1670px 632px var(--color), 1417px 1997px var(--color), 592px 1967px var(--color), 843px 1894px var(--color), 111px 341px var(--color), 1868px 1896px var(--color), 1846px 832px var(--color), 1627px 1557px var(--color), 1331px 723px var(--color), 707px 770px var(--color), 1589px 1422px var(--color), 1960px 1137px var(--color), 304px 572px var(--color), 1275px 459px var(--color), 707px 866px var(--color), 914px 1524px var(--color), 796px 551px var(--color), 896px 1655px var(--color), 1051px 182px var(--color), 1834px 636px var(--color), 278px 1663px var(--color), 1197px 1203px var(--color), 482px 1601px var(--color), 199px 924px var(--color), 1974px 1084px var(--color), 1676px 668px var(--color), 858px 1226px var(--color), 1375px 1873px var(--color), 415px 1817px var(--color), 1112px 312px var(--color), 1011px 1629px var(--color), 1217px 991px var(--color), 1418px 1998px var(--color), 1645px 1226px var(--color), 186px 1661px var(--color), 1614px 1374px var(--color), 732px 544px var(--color), 458px 72px var(--color), 1137px 1584px var(--color), 1704px 1103px var(--color), 329px 1958px var(--color), 17px 141px var(--color), 308px 1980px var(--color), 1975px 675px var(--color), 555px 330px var(--color), 787px 712px var(--color), 1062px 39px var(--color), 1586px 1771px var(--color), 1022px 1632px var(--color), 559px 1316px var(--color), 1254px 294px var(--color), 799px 865px var(--color), 672px 116px var(--color), 1994px 575px var(--color), 1733px 652px var(--color), 1233px 894px var(--color), 1369px 573px var(--color), 237px 262px var(--color), 1980px 200px var(--color), 657px 1489px var(--color), 1871px 1364px var(--color), 1571px 891px var(--color), 115px 617px var(--color), 1711px 1178px var(--color), 463px 183px var(--color), 1148px 841px var(--color), 566px 782px var(--color), 844px 1056px var(--color), 811px 1855px var(--color), 97px 842px var(--color), 1097px 10px var(--color), 886px 1066px var(--color), 1590px 1707px var(--color), 1884px 1313px var(--color), 1719px 408px var(--color), 256px 319px var(--color), 116px 253px var(--color), 132px 1237px var(--color), 912px 1912px var(--color), 568px 1053px var(--color), 840px 1523px var(--color), 521px 1780px var(--color), 1092px 554px var(--color), 1833px 1018px var(--color), 1897px 514px var(--color), 1765px 1236px var(--color), 415px 1512px var(--color), 1457px 1382px var(--color), 567px 1294px var(--color), 777px 505px var(--color), 1502px 635px var(--color), 422px 933px var(--color), 1609px 1030px var(--color), 124px 550px var(--color), 1839px 895px var(--color), 671px 1187px var(--color), 1445px 1668px var(--color), 1457px 633px var(--color), 363px 1250px var(--color), 1770px 1598px var(--color), 1802px 82px var(--color), 1784px 1798px var(--color), 1275px 1504px var(--color), 888px 264px var(--color), 157px 209px var(--color), 1803px 1572px var(--color), 722px 851px var(--color), 732px 365px var(--color), 485px 1277px var(--color), 155px 974px var(--color), 986px 339px var(--color), 283px 49px var(--color), 1605px 727px var(--color), 55px 359px var(--color), 468px 987px var(--color), 789px 283px var(--color), 97px 623px var(--color), 237px 432px var(--color), 577px 619px var(--color), 891px 623px var(--color), 861px 373px var(--color), 510px 1655px var(--color), 808px 1413px var(--color), 1626px 1241px var(--color), 368px 53px var(--color), 796px 852px var(--color), 1832px 152px var(--color), 575px 1066px var(--color), 1374px 1739px var(--color), 951px 1313px var(--color), 1305px 742px var(--color), 607px 1560px var(--color), 1735px 682px var(--color), 827px 805px var(--color), 270px 1759px var(--color), 606px 1115px var(--color), 569px 1730px var(--color), 742px 158px var(--color), 261px 1861px var(--color), 1926px 1332px var(--color), 461px 1982px var(--color), 380px 855px var(--color), 194px 1920px var(--color), 423px 228px var(--color), 498px 75px var(--color), 480px 27px var(--color), 1842px 769px var(--color), 1587px 605px var(--color), 721px 371px var(--color), 1248px 20px var(--color), 457px 1734px var(--color), 1642px 895px var(--color), 37px 282px var(--color), 139px 856px var(--color), 1863px 1254px var(--color), 728px 419px var(--color), 1930px 1638px var(--color), 587px 1392px var(--color), 52px 228px var(--color), 483px 1150px var(--color), 1127px 970px var(--color), 20px 1909px var(--color), 1427px 1208px var(--color), 421px 951px var(--color), 1552px 259px var(--color), 688px 1070px var(--color), 1618px 1896px var(--color), 1422px 942px var(--color), 902px 741px var(--color), 340px 916px var(--color), 1392px 1128px var(--color), 1713px 539px var(--color), 1213px 1312px var(--color), 170px 1565px var(--color), 1603px 719px var(--color), 1504px 1666px var(--color), 880px 440px var(--color), 1611px 1247px var(--color), 408px 1211px var(--color), 624px 371px var(--color), 1309px 531px var(--color), 1913px 955px var(--color), 170px 1921px var(--color), 40px 1967px var(--color), 1074px 1194px var(--color), 1025px 632px var(--color), 165px 277px var(--color), 1685px 1842px var(--color), 1840px 1925px var(--color), 1534px 859px var(--color), 411px 780px var(--color), 1814px 618px var(--color), 802px 1791px var(--color), 724px 1305px var(--color), 692px 603px var(--color), 662px 1720px var(--color), 682px 333px var(--color), 962px 170px var(--color), 845px 1277px var(--color), 1692px 650px var(--color), 810px 1576px var(--color), 1812px 1536px var(--color), 1031px 641px var(--color), 1794px 1450px var(--color), 496px 1923px var(--color), 1410px 998px var(--color), 1984px 1904px var(--color), 989px 1970px var(--color), 926px 1826px var(--color), 1063px 1831px var(--color), 586px 59px var(--color), 769px 1816px var(--color), 789px 993px var(--color), 1228px 1880px var(--color), 12px 1624px var(--color), 1706px 787px var(--color), 763px 1189px var(--color), 1066px 1139px var(--color), 1927px 182px var(--color), 1058px 927px var(--color), 463px 938px var(--color), 1608px 564px var(--color), 681px 1082px var(--color), 1681px 1704px var(--color), 499px 1586px var(--color), 1270px 184px var(--color), 731px 233px var(--color), 500px 916px var(--color), 1488px 1864px var(--color), 38px 1593px var(--color), 155px 639px var(--color), 1210px 435px var(--color), 671px 1152px var(--color), 1671px 473px var(--color), 424px 101px var(--color), 1456px 1419px var(--color), 1791px 1837px var(--color), 1783px 411px var(--color), 1355px 11px var(--color), 1840px 536px var(--color), 555px 538px var(--color), 71px 683px var(--color), 1375px 674px var(--color), 269px 545px var(--color), 1523px 79px var(--color), 1960px 602px var(--color), 828px 732px var(--color), 723px 771px var(--color), 712px 1505px var(--color), 285px 606px var(--color), 286px 1741px var(--color), 1233px 778px var(--color), 1717px 1221px var(--color), 1225px 981px var(--color), 691px 752px var(--color), 829px 78px var(--color), 1211px 1365px var(--color), 1701px 1323px var(--color), 1614px 87px var(--color), 1974px 1744px var(--color), 1227px 873px var(--color), 549px 1357px var(--color), 881px 1414px var(--color), 321px 1381px var(--color), 1378px 1339px var(--color), 1331px 1263px var(--color), 1997px 50px var(--color), 149px 776px var(--color), 1297px 1054px var(--color), 1183px 757px var(--color), 421px 58px var(--color), 1847px 217px var(--color), 1128px 1490px var(--color), 681px 485px var(--color), 486px 1455px var(--color), 224px 804px var(--color), 1971px 210px var(--color), 699px 1124px var(--color), 1210px 799px var(--color), 521px 18px var(--color), 1793px 1493px var(--color), 36px 815px var(--color), 1776px 462px var(--color), 1701px 196px var(--color);
-}
-
-.stars div:nth-child(2) {
-  animation-duration: 150s !important;
-  box-shadow: 1432px 8687px var(--color), 281px 1550px var(--color), 797px 588px var(--color), 1219px 1750px var(--color), 291px 20px var(--color), 989px 1462px var(--color), 321px 1536px var(--color), 660px 1179px var(--color), 630px 1097px var(--color), 138px 1129px var(--color), 317px 982px var(--color), 1005px 692px var(--color), 594px 770px var(--color), 817px 1325px var(--color), 1750px 516px var(--color), 306px 784px var(--color), 103px 1251px var(--color), 1035px 897px var(--color), 1598px 760px var(--color), 1671px 1684px var(--color), 473px 120px var(--color), 1871px 422px var(--color), 1416px 1596px var(--color), 664px 469px var(--color), 1706px 1842px var(--color), 1830px 647px var(--color), 1494px 831px var(--color), 386px 209px var(--color), 1804px 1120px var(--color), 439px 1000px var(--color), 1089px 7px var(--color), 1293px 560px var(--color), 102px 1926px var(--color), 1219px 1667px var(--color), 1364px 1107px var(--color), 1270px 619px var(--color), 1180px 1657px var(--color), 1208px 521px var(--color), 807px 1325px var(--color), 478px 396px var(--color), 995px 327px var(--color), 1067px 352px var(--color), 1620px 1648px var(--color), 114px 1380px var(--color), 24px 883px var(--color), 1589px 883px var(--color), 1365px 139px var(--color), 778px 1926px var(--color), 1390px 1943px var(--color), 1755px 193px var(--color), 1575px 292px var(--color), 214px 1095px var(--color), 372px 1011px var(--color), 251px 31px var(--color), 1249px 1150px var(--color), 1481px 520px var(--color), 1716px 499px var(--color), 937px 1934px var(--color), 743px 494px var(--color), 1341px 1953px var(--color), 670px 1523px var(--color), 441px 940px var(--color), 1056px 944px var(--color), 1963px 1467px var(--color), 1543px 852px var(--color), 225px 763px var(--color), 957px 1937px var(--color), 1344px 460px var(--color), 497px 512px var(--color), 1676px 1196px var(--color), 961px 438px var(--color), 1721px 1580px var(--color), 418px 1874px var(--color), 316px 1597px var(--color), 1897px 526px var(--color), 640px 1420px var(--color), 50px 1211px var(--color), 1871px 726px var(--color), 1672px 1990px var(--color), 1258px 864px var(--color), 62px 614px var(--color), 314px 882px var(--color), 878px 1076px var(--color), 1724px 1142px var(--color), 543px 46px var(--color), 641px 425px var(--color), 76px 57px var(--color), 227px 927px var(--color), 816px 1130px var(--color), 1064px 1389px var(--color), 1915px 671px var(--color), 407px 1527px var(--color), 257px 605px var(--color), 983px 1012px var(--color), 1576px 388px var(--color), 1575px 1935px var(--color), 68px 1594px var(--color), 311px 107px var(--color), 832px 144px var(--color), 349px 1401px var(--color), 1150px 1652px var(--color), 627px 1663px var(--color), 922px 1119px var(--color), 720px 1629px var(--color), 305px 642px var(--color), 1125px 146px var(--color), 898px 750px var(--color), 642px 1538px var(--color), 88px 782px var(--color), 723px 1320px var(--color), 355px 785px var(--color), 1149px 1949px var(--color), 1522px 1885px var(--color), 1984px 957px var(--color), 256px 1165px var(--color), 1216px 1415px var(--color), 777px 408px var(--color), 819px 510px var(--color), 1239px 1325px var(--color), 1202px 326px var(--color), 225px 384px var(--color), 291px 498px var(--color), 1349px 535px var(--color), 1927px 1931px var(--color), 1673px 507px var(--color), 584px 1285px var(--color), 486px 743px var(--color), 1391px 1091px var(--color), 541px 947px var(--color), 1505px 1612px var(--color), 231px 1371px var(--color), 1336px 1722px var(--color), 729px 1068px var(--color), 1179px 1525px var(--color), 203px 76px var(--color), 1878px 736px var(--color), 1704px 1381px var(--color), 551px 1527px var(--color), 1110px 1859px var(--color), 313px 596px var(--color), 543px 9px var(--color), 1091px 951px var(--color), 1178px 1081px var(--color), 137px 1930px var(--color), 705px 1554px var(--color), 1427px 1999px var(--color), 988px 1968px var(--color), 271px 1720px var(--color), 1234px 1857px var(--color), 1559px 1284px var(--color), 1353px 1409px var(--color), 298px 1591px var(--color), 602px 1198px var(--color), 1451px 106px var(--color), 1835px 1119px var(--color), 1098px 324px var(--color), 946px 842px var(--color), 1308px 1879px var(--color), 1013px 57px var(--color), 1856px 1163px var(--color), 266px 1889px var(--color), 361px 657px var(--color), 1450px 873px var(--color), 1008px 644px var(--color), 632px 1115px var(--color), 45px 1126px var(--color), 845px 1090px var(--color), 582px 974px var(--color), 671px 82px var(--color), 561px 1442px var(--color), 1417px 594px var(--color), 931px 984px var(--color), 1677px 1052px var(--color), 1698px 844px var(--color), 1043px 1059px var(--color), 861px 1672px var(--color), 1922px 1111px var(--color), 1261px 310px var(--color), 1940px 1966px var(--color), 391px 1960px var(--color), 1116px 158px var(--color), 639px 1471px var(--color), 526px 1349px var(--color), 888px 1053px var(--color), 547px 563px var(--color), 1005px 1053px var(--color), 67px 98px var(--color), 9px 872px var(--color), 693px 1422px var(--color), 1303px 1524px var(--color), 1765px 655px var(--color), 66px 188px var(--color), 1929px 1145px var(--color), 1158px 1423px var(--color), 1897px 302px var(--color), 1421px 630px var(--color), 120px 240px var(--color), 777px 1748px var(--color), 802px 1919px var(--color), 1039px 745px var(--color), 1739px 897px var(--color), 327px 972px var(--color), 426px 1450px var(--color), 1900px 1785px var(--color), 431px 87px var(--color), 394px 1871px var(--color), 226px 1776px var(--color), 698px 757px var(--color), 944px 274px var(--color), 1764px 899px var(--color), 736px 858px var(--color), 1581px 867px var(--color), 1760px 594px var(--color), 315px 1572px var(--color), 612px 69px var(--color), 491px 1784px var(--color), 1487px 1998px var(--color), 371px 1477px var(--color), 1770px 638px var(--color), 606px 1666px var(--color), 347px 1014px var(--color), 659px 585px var(--color), 1762px 1819px var(--color), 1795px 823px var(--color), 486px 1488px var(--color), 1424px 977px var(--color), 1441px 1377px var(--color), 372px 1103px var(--color), 1736px 1114px var(--color), 883px 789px var(--color), 760px 456px var(--color), 1475px 1368px var(--color), 343px 415px var(--color), 1221px 823px var(--color), 894px 513px var(--color), 1016px 713px var(--color), 751px 22px var(--color), 875px 595px var(--color), 1999px 1266px var(--color), 1340px 652px var(--color), 1872px 540px var(--color), 1957px 753px var(--color), 308px 1242px var(--color), 1551px 1124px var(--color), 1417px 305px var(--color), 1701px 1843px var(--color), 539px 1505px var(--color), 404px 1442px var(--color), 146px 248px var(--color), 1942px 602px var(--color), 1019px 1240px var(--color), 813px 1300px var(--color), 1259px 1092px var(--color), 1820px 10px var(--color), 27px 222px var(--color), 278px 1838px var(--color), 1420px 1702px var(--color), 367px 61px var(--color), 433px 518px var(--color), 253px 1444px var(--color), 791px 954px var(--color), 1768px 1504px var(--color), 709px 1529px var(--color), 198px 246px var(--color), 1228px 131px var(--color), 812px 1859px var(--color), 1145px 784px var(--color), 165px 377px var(--color), 847px 535px var(--color), 71px 1404px var(--color), 1364px 1168px var(--color), 410px 1120px var(--color), 1265px 261px var(--color), 1678px 1845px var(--color), 305px 873px var(--color), 1524px 1720px var(--color), 608px 682px var(--color), 1277px 991px var(--color), 1865px 1097px var(--color), 1426px 197px var(--color), 435px 1774px var(--color), 42px 470px var(--color), 27px 453px var(--color), 306px 1691px var(--color), 60px 1692px var(--color), 1097px 1408px var(--color), 992px 136px var(--color), 1082px 1688px var(--color), 1925px 1301px var(--color), 156px 1675px var(--color), 164px 1147px var(--color), 109px 480px var(--color), 1597px 1391px var(--color), 238px 1553px var(--color), 1609px 303px var(--color), 1932px 1158px var(--color), 127px 891px var(--color), 279px 1047px var(--color), 909px 1389px var(--color), 1517px 1647px var(--color), 394px 1866px var(--color), 1351px 838px var(--color), 787px 660px var(--color), 138px 871px var(--color), 1228px 1149px var(--color), 1251px 1946px var(--color), 1766px 1350px var(--color), 230px 1552px var(--color), 1412px 1835px var(--color), 1465px 1476px var(--color), 288px 1472px var(--color), 1608px 1698px var(--color), 1503px 1254px var(--color), 888px 1080px var(--color), 962px 1952px var(--color), 987px 249px var(--color), 1516px 1971px var(--color), 598px 1683px var(--color), 740px 12px var(--color), 1017px 1917px var(--color), 1094px 894px var(--color), 596px 71px var(--color), 745px 1504px var(--color), 1234px 1514px var(--color), 13px 25px var(--color), 1981px 758px var(--color), 714px 853px var(--color), 1964px 637px var(--color), 373px 1568px var(--color), 1580px 1172px var(--color), 130px 605px var(--color), 1736px 1281px var(--color), 65px 1793px var(--color), 436px 861px var(--color), 33px 161px var(--color), 1530px 1981px var(--color), 1199px 1707px var(--color), 1118px 1175px var(--color), 470px 1959px var(--color), 1552px 233px var(--color), 1450px 1039px var(--color), 1012px 543px var(--color), 722px 621px var(--color), 777px 1365px var(--color), 1510px 1339px var(--color), 95px 896px var(--color), 60px 1765px var(--color), 62px 1148px var(--color), 720px 763px var(--color), 1434px 1114px var(--color), 250px 400px var(--color), 1903px 490px var(--color), 715px 762px var(--color), 185px 1156px var(--color), 1993px 907px var(--color), 389px 95px var(--color), 347px 1342px var(--color), 189px 1186px var(--color), 1498px 1760px var(--color), 1525px 358px var(--color), 479px 1712px var(--color), 483px 418px var(--color), 317px 815px var(--color), 380px 1413px var(--color), 1486px 922px var(--color), 1379px 894px var(--color), 1149px 1911px var(--color), 1360px 1819px var(--color), 140px 1776px var(--color), 1167px 875px var(--color), 332px 1193px var(--color), 1252px 1232px var(--color), 1713px 1820px var(--color), 455px 58px var(--color), 1045px 555px var(--color), 377px 1058px var(--color), 900px 1396px var(--color), 288px 592px var(--color), 399px 762px var(--color), 590px 460px var(--color), 126px 1925px var(--color), 1429px 890px var(--color), 1841px 1712px var(--color), 1975px 182px var(--color), 1559px 1169px var(--color), 1661px 1463px var(--color), 1723px 1948px var(--color), 1280px 1703px var(--color), 713px 1205px var(--color), 334px 1816px var(--color), 460px 724px var(--color), 1573px 1084px var(--color), 1543px 1086px var(--color), 1319px 1241px var(--color), 1014px 880px var(--color), 1492px 18px var(--color), 330px 153px var(--color), 3px 1416px var(--color), 1396px 166px var(--color), 1482px 1299px var(--color), 819px 1966px var(--color), 281px 3px var(--color), 1072px 1199px var(--color), 510px 456px var(--color), 1521px 1731px var(--color), 1801px 643px var(--color), 446px 529px var(--color), 1888px 1169px var(--color), 893px 683px var(--color), 1588px 348px var(--color), 1748px 566px var(--color), 232px 481px var(--color), 769px 200px var(--color), 1649px 1016px var(--color), 1675px 1930px var(--color), 1018px 1607px var(--color), 1137px 825px var(--color), 491px 608px var(--color), 28px 1383px var(--color), 329px 746px var(--color), 273px 1846px var(--color), 1257px 1139px var(--color), 258px 1278px var(--color), 821px 1393px var(--color), 237px 1117px var(--color), 172px 771px var(--color), 120px 608px var(--color), 670px 939px var(--color), 1412px 1095px var(--color), 1257px 1094px var(--color), 996px 1308px var(--color), 953px 1799px var(--color), 769px 11px var(--color), 1586px 864px var(--color), 1217px 1677px var(--color), 1276px 1159px var(--color), 1961px 488px var(--color), 1888px 676px var(--color), 1965px 634px var(--color), 1372px 1360px var(--color), 875px 1653px var(--color), 939px 408px var(--color), 1632px 1895px var(--color), 1858px 802px var(--color), 574px 1280px var(--color), 1800px 1240px var(--color), 1484px 537px var(--color), 926px 1379px var(--color), 1436px 1123px var(--color), 136px 506px var(--color), 920px 1692px var(--color), 1640px 1581px var(--color), 426px 528px var(--color), 1531px 45px var(--color), 634px 991px var(--color), 629px 319px var(--color), 808px 1818px var(--color), 144px 1357px var(--color), 69px 409px var(--color), 284px 1280px var(--color), 1975px 546px var(--color), 817px 261px var(--color), 1794px 575px var(--color), 1747px 1141px var(--color), 997px 1824px var(--color), 783px 1897px var(--color), 597px 1756px var(--color), 464px 1327px var(--color), 1041px 1795px var(--color), 1341px 699px var(--color), 1155px 1249px var(--color), 1801px 1098px var(--color), 1224px 922px var(--color), 1548px 85px var(--color), 1446px 1746px var(--color), 898px 625px var(--color), 1374px 742px var(--color), 1587px 1468px var(--color), 1720px 1268px var(--color), 776px 667px var(--color), 867px 128px var(--color), 841px 1808px var(--color), 1825px 1805px var(--color), 411px 1851px var(--color), 455px 1033px var(--color), 1103px 612px var(--color), 1066px 1433px var(--color), 1068px 835px var(--color), 1497px 1510px var(--color), 1517px 1457px var(--color), 793px 363px var(--color), 983px 613px var(--color), 655px 1820px var(--color), 1244px 1592px var(--color), 625px 264px var(--color), 744px 248px var(--color), 423px 1810px var(--color), 36px 428px var(--color), 797px 489px var(--color), 152px 1855px var(--color);
-  opacity: .75;
-}
-
-.stars div:nth-child(3) {
-  animation-duration: 200s !important;
-  box-shadow: 1101px 12446px var(--color), 1029px 11px var(--color), 1085px 961px var(--color), 1767px 1121px var(--color), 78px 1112px var(--color), 1969px 440px var(--color), 743px 1548px var(--color), 1005px 1473px var(--color), 1843px 1450px var(--color), 1062px 547px var(--color), 1105px 1501px var(--color), 316px 1466px var(--color), 831px 1071px var(--color), 879px 1157px var(--color), 1400px 1368px var(--color), 1491px 1832px var(--color), 833px 1040px var(--color), 1788px 1114px var(--color), 312px 406px var(--color), 447px 1127px var(--color), 312px 1249px var(--color), 577px 1906px var(--color), 1673px 1170px var(--color), 926px 1822px var(--color), 1378px 770px var(--color), 55px 1592px var(--color), 1377px 419px var(--color), 577px 933px var(--color), 668px 576px var(--color), 1347px 1630px var(--color), 1994px 1661px var(--color), 856px 1426px var(--color), 262px 1304px var(--color), 736px 895px var(--color), 419px 329px var(--color), 1248px 187px var(--color), 1584px 1841px var(--color), 789px 603px var(--color), 1831px 1181px var(--color), 1972px 11px var(--color), 567px 1408px var(--color), 203px 1943px var(--color), 502px 961px var(--color), 1992px 284px var(--color), 153px 1236px var(--color), 1395px 491px var(--color), 133px 153px var(--color), 699px 61px var(--color), 511px 1467px var(--color), 1069px 909px var(--color), 1534px 1962px var(--color), 561px 866px var(--color), 1392px 1318px var(--color), 1524px 369px var(--color), 195px 1687px var(--color), 707px 1428px var(--color), 1528px 208px var(--color), 1658px 669px var(--color), 1579px 161px var(--color), 757px 766px var(--color), 72px 4px var(--color), 372px 1622px var(--color), 515px 1062px var(--color), 581px 89px var(--color), 818px 860px var(--color), 1949px 779px var(--color), 1085px 1014px var(--color), 1677px 551px var(--color), 502px 371px var(--color), 1034px 1401px var(--color), 1745px 1621px var(--color), 857px 1349px var(--color), 946px 1184px var(--color), 376px 1131px var(--color), 781px 1298px var(--color), 481px 1846px var(--color), 1052px 370px var(--color), 1499px 872px var(--color), 1606px 905px var(--color), 363px 1429px var(--color), 319px 177px var(--color), 1119px 1019px var(--color), 1056px 1981px var(--color), 64px 1192px var(--color), 572px 1714px var(--color), 569px 1206px var(--color), 795px 29px var(--color), 1125px 1133px var(--color), 1495px 862px var(--color), 1298px 587px var(--color), 1938px 1234px var(--color), 1009px 1328px var(--color), 1882px 684px var(--color), 682px 1022px var(--color), 844px 936px var(--color), 1246px 1933px var(--color), 1044px 1128px var(--color), 1973px 395px var(--color), 482px 1715px var(--color), 695px 528px var(--color), 1806px 1908px var(--color), 1578px 998px var(--color), 143px 1347px var(--color), 998px 1688px var(--color), 890px 1063px var(--color), 1355px 1564px var(--color), 1349px 350px var(--color), 1225px 1779px var(--color), 1841px 1934px var(--color), 314px 1913px var(--color), 143px 1167px var(--color), 1974px 25px var(--color), 615px 1143px var(--color), 416px 1967px var(--color), 1504px 1977px var(--color), 1017px 1660px var(--color), 580px 1086px var(--color), 1974px 1626px var(--color), 1014px 1610px var(--color), 266px 1343px var(--color), 963px 1117px var(--color), 82px 1048px var(--color), 1963px 1702px var(--color), 1294px 1845px var(--color), 1758px 1448px var(--color), 1829px 1691px var(--color), 1299px 279px var(--color), 446px 1018px var(--color), 1228px 1952px var(--color), 1369px 1924px var(--color), 1416px 532px var(--color), 263px 1688px var(--color), 1437px 792px var(--color), 469px 692px var(--color), 1904px 34px var(--color), 1618px 1580px var(--color), 663px 1204px var(--color), 816px 1628px var(--color), 340px 529px var(--color), 1404px 287px var(--color), 1149px 1846px var(--color), 1883px 1682px var(--color), 1637px 1057px var(--color), 570px 951px var(--color), 1623px 205px var(--color), 988px 439px var(--color), 519px 316px var(--color), 1510px 1127px var(--color), 120px 115px var(--color), 145px 853px var(--color), 772px 1379px var(--color), 852px 155px var(--color), 1741px 817px var(--color), 593px 1083px var(--color), 456px 260px var(--color), 527px 393px var(--color), 1763px 1510px var(--color), 1643px 1437px var(--color), 997px 1537px var(--color), 1320px 1844px var(--color), 611px 892px var(--color), 1242px 879px var(--color), 1556px 1491px var(--color), 882px 264px var(--color), 1632px 1402px var(--color), 206px 378px var(--color), 745px 1042px var(--color), 1734px 26px var(--color), 996px 352px var(--color), 181px 634px var(--color), 1609px 1890px var(--color), 1995px 1687px var(--color), 381px 547px var(--color), 1779px 225px var(--color), 1790px 1496px var(--color), 1368px 1212px var(--color), 140px 1516px var(--color), 992px 1470px var(--color), 748px 98px var(--color), 1682px 1653px var(--color), 21px 823px var(--color), 539px 789px var(--color), 1158px 1232px var(--color), 437px 1554px var(--color), 1224px 1078px var(--color), 262px 254px var(--color), 1618px 349px var(--color), 945px 1054px var(--color), 780px 131px var(--color), 605px 157px var(--color), 1586px 617px var(--color), 1120px 1794px var(--color), 1533px 751px var(--color), 1391px 1941px var(--color), 1920px 1852px var(--color), 1860px 1543px var(--color), 1621px 695px var(--color), 42px 1618px var(--color), 362px 428px var(--color), 1354px 688px var(--color), 1347px 228px var(--color), 1956px 1145px var(--color), 1160px 1979px var(--color), 124px 597px var(--color), 1491px 1234px var(--color), 1552px 876px var(--color), 1066px 1057px var(--color), 1420px 316px var(--color), 179px 590px var(--color), 435px 142px var(--color), 772px 861px var(--color), 878px 53px var(--color), 1172px 1627px var(--color), 1847px 580px var(--color), 1574px 1056px var(--color), 281px 1326px var(--color), 443px 1159px var(--color), 1768px 1225px var(--color), 1883px 1368px var(--color), 1957px 1304px var(--color), 1666px 1523px var(--color), 1607px 593px var(--color), 413px 549px var(--color), 878px 1579px var(--color), 1041px 766px var(--color), 638px 1178px var(--color), 1985px 534px var(--color), 537px 142px var(--color), 1376px 1133px var(--color), 990px 430px var(--color), 1062px 839px var(--color), 1658px 1871px var(--color), 20px 29px var(--color), 336px 219px var(--color), 1793px 323px var(--color), 1538px 176px var(--color), 558px 1227px var(--color), 1826px 1132px var(--color), 572px 1461px var(--color), 1900px 1647px var(--color), 1126px 1972px var(--color), 703px 358px var(--color), 1444px 1988px var(--color), 980px 721px var(--color), 240px 674px var(--color), 1731px 1607px var(--color), 49px 293px var(--color), 1392px 1831px var(--color), 101px 1661px var(--color), 1834px 1163px var(--color), 1709px 1336px var(--color), 88px 1546px var(--color), 1688px 1721px var(--color), 624px 1058px var(--color), 1347px 352px var(--color), 1262px 677px var(--color), 948px 1820px var(--color), 1222px 224px var(--color), 365px 633px var(--color), 747px 1162px var(--color), 527px 1874px var(--color), 1146px 1467px var(--color), 949px 1127px var(--color), 92px 1714px var(--color), 546px 657px var(--color), 172px 1489px var(--color), 587px 970px var(--color), 359px 1225px var(--color), 641px 1px var(--color), 1577px 926px var(--color), 608px 111px var(--color), 46px 1967px var(--color), 1339px 1895px var(--color), 723px 1320px var(--color), 329px 1730px var(--color), 1485px 247px var(--color), 824px 944px var(--color), 1441px 1462px var(--color), 1790px 193px var(--color), 909px 219px var(--color), 1161px 1469px var(--color), 1037px 501px var(--color), 1397px 999px var(--color), 1863px 1019px var(--color), 1956px 406px var(--color), 1424px 1301px var(--color), 1036px 676px var(--color), 1080px 1177px var(--color), 3px 696px var(--color), 488px 311px var(--color), 1907px 334px var(--color), 174px 1634px var(--color), 1975px 1271px var(--color), 947px 64px var(--color), 669px 767px var(--color), 721px 1159px var(--color), 1119px 902px var(--color), 1498px 2px var(--color), 372px 434px var(--color), 1658px 1144px var(--color), 178px 1549px var(--color), 1207px 1874px var(--color), 254px 393px var(--color), 1965px 1954px var(--color), 1688px 1283px var(--color), 359px 1700px var(--color), 1518px 394px var(--color), 77px 1612px var(--color), 216px 387px var(--color), 1435px 1841px var(--color), 1110px 1563px var(--color), 1828px 1710px var(--color), 527px 973px var(--color), 1471px 674px var(--color), 486px 851px var(--color), 926px 1590px var(--color), 1566px 1940px var(--color), 1638px 76px var(--color), 1369px 1201px var(--color), 1852px 1309px var(--color), 675px 1153px var(--color), 75px 1758px var(--color), 583px 1871px var(--color), 170px 655px var(--color), 710px 12px var(--color), 908px 1634px var(--color), 63px 1219px var(--color), 974px 1654px var(--color), 855px 1576px var(--color), 655px 1377px var(--color), 980px 1494px var(--color), 45px 100px var(--color), 1347px 969px var(--color), 212px 1349px var(--color), 676px 1443px var(--color), 1727px 738px var(--color), 1724px 513px var(--color), 295px 1126px var(--color), 582px 722px var(--color), 222px 291px var(--color), 1264px 731px var(--color), 1895px 1348px var(--color), 1234px 76px var(--color), 47px 1101px var(--color), 774px 1279px var(--color), 1251px 1960px var(--color), 1113px 1422px var(--color), 1025px 1581px var(--color), 1195px 953px var(--color), 1402px 1616px var(--color), 537px 92px var(--color), 832px 887px var(--color), 95px 1596px var(--color), 351px 270px var(--color), 1231px 1562px var(--color), 830px 364px var(--color), 664px 128px var(--color), 1792px 879px var(--color), 1847px 287px var(--color), 1140px 615px var(--color), 122px 69px var(--color), 1881px 1138px var(--color), 1221px 1144px var(--color), 338px 1372px var(--color), 1222px 1110px var(--color), 1245px 1334px var(--color), 775px 824px var(--color), 1829px 1036px var(--color), 966px 1438px var(--color), 1256px 1511px var(--color), 1313px 1398px var(--color), 1641px 1165px var(--color), 1112px 355px var(--color), 69px 1672px var(--color), 1251px 453px var(--color), 733px 244px var(--color), 665px 527px var(--color), 829px 975px var(--color), 332px 1765px var(--color), 1332px 1562px var(--color), 1445px 803px var(--color), 899px 1365px var(--color), 1791px 1417px var(--color), 1766px 1682px var(--color), 1995px 234px var(--color), 407px 660px var(--color), 97px 88px var(--color), 158px 1614px var(--color), 1474px 321px var(--color), 776px 889px var(--color), 199px 83px var(--color), 1999px 1201px var(--color), 1591px 1090px var(--color), 640px 404px var(--color), 92px 1325px var(--color), 1802px 1062px var(--color), 389px 1731px var(--color), 64px 1986px var(--color), 334px 25px var(--color), 682px 1235px var(--color), 19px 1285px var(--color), 761px 259px var(--color), 1129px 494px var(--color), 1272px 677px var(--color), 285px 1943px var(--color), 938px 1838px var(--color), 1942px 66px var(--color), 1921px 595px var(--color), 1767px 843px var(--color), 1018px 1857px var(--color), 1487px 904px var(--color), 1541px 338px var(--color), 842px 593px var(--color), 1643px 1017px var(--color), 463px 329px var(--color), 1903px 1984px var(--color), 105px 663px var(--color), 975px 116px var(--color), 274px 955px var(--color), 1421px 1158px var(--color), 784px 596px var(--color), 218px 796px var(--color), 763px 1015px var(--color), 494px 36px var(--color), 99px 1630px var(--color), 91px 21px var(--color), 929px 1894px var(--color), 670px 1560px var(--color), 1096px 1824px var(--color), 313px 1784px var(--color), 1512px 251px var(--color), 1020px 1738px var(--color), 714px 671px var(--color), 278px 1287px var(--color), 1251px 886px var(--color), 1852px 545px var(--color), 209px 1270px var(--color), 128px 1874px var(--color), 853px 1429px var(--color), 150px 1984px var(--color), 991px 709px var(--color), 417px 1871px var(--color), 1439px 1133px var(--color), 702px 1448px var(--color), 827px 1661px var(--color), 630px 103px var(--color), 589px 894px var(--color), 1178px 297px var(--color), 1202px 1982px var(--color), 1728px 679px var(--color), 1936px 1470px var(--color), 1161px 1711px var(--color), 1661px 1092px var(--color), 46px 1100px var(--color), 187px 388px var(--color), 636px 1445px var(--color), 171px 1213px var(--color), 1646px 1200px var(--color), 1182px 157px var(--color), 1217px 1015px var(--color), 1936px 807px var(--color), 1743px 890px var(--color), 1825px 27px var(--color), 545px 21px var(--color), 1895px 993px var(--color), 1631px 1180px var(--color), 1634px 411px var(--color), 1998px 886px var(--color), 1479px 906px var(--color), 528px 970px var(--color), 861px 1238px var(--color), 881px 361px var(--color), 960px 916px var(--color), 280px 950px var(--color), 1310px 986px var(--color), 768px 1796px var(--color), 1187px 980px var(--color), 612px 1279px var(--color), 377px 1876px var(--color), 1170px 736px var(--color), 1331px 733px var(--color), 450px 233px var(--color), 1875px 1317px var(--color), 1868px 1315px var(--color), 1874px 1018px var(--color), 1062px 1949px var(--color), 1266px 797px var(--color), 1087px 443px var(--color), 1984px 369px var(--color), 1209px 1726px var(--color), 1626px 501px var(--color), 1991px 986px var(--color), 1467px 356px var(--color), 1163px 964px var(--color), 1671px 1944px var(--color), 374px 1634px var(--color), 1556px 820px var(--color), 1800px 1600px var(--color), 1314px 1935px var(--color), 1174px 1293px var(--color);
-  opacity: .5;
+  animation-duration: var(--star-duration);
+  will-change: transform;
 }
 
 @keyframes risingStarsAnimation {
   0% {
-    transform: translateZ(0) translateY(0)
+    transform: translateY(0);
   }
-
-  to {
-    transform: translateZ(0) translateY(-2000px)
+  100% {
+    transform: translateY(-2000px);
   }
 }
 </style>
diff --git a/docs/app/components/home/HomeContributors.vue b/docs/app/components/home/HomeContributors.vue
new file mode 100644
index 00000000..6389d0fa
--- /dev/null
+++ b/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>
diff --git a/docs/app/composables/useLinks.ts b/docs/app/composables/useLinks.ts
index 390b20da..fe5fcbb4 100644
--- a/docs/app/composables/useLinks.ts
+++ b/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',
diff --git a/docs/app/layouts/default.vue b/docs/app/layouts/default.vue
index 56a8b72d..ba4672f5 100644
--- a/docs/app/layouts/default.vue
+++ b/docs/app/layouts/default.vue
@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <slot />
-  </div>
+  <slot />
 </template>
diff --git a/docs/app/pages/.index.yml b/docs/app/pages/.index.yml
new file mode 100644
index 00000000..ac32c881
--- /dev/null
+++ b/docs/app/pages/.index.yml
@@ -0,0 +1,172 @@
+title: The Intuitive Vue UI Library
+description: Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI.
+hero:
+  title: The Intuitive Vue UI Library
+  description: Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI.
+  links:
+    - label: Get started
+      to: /getting-started/installation
+    - label: Explore components
+      to: /components
+      variant: outline
+      color: neutral
+      trailingIcon: i-lucide-arrow-right
+  features:
+    - icon: i-logos-tailwindcss-icon
+      title: Styled with Tailwind CSS v4
+      description: Beautifully styled by default, overwrite any style you want.
+    - icon: i-custom-reka-ui
+      title: Accessible with Reka UI
+      description: Robust accessibility out of the box.
+    - icon: i-logos-typescript-icon
+      title: Type-safe with TypeScript
+      description: Auto-complete and type safety for all components.
+features:
+  - title: Build for the modern web
+    description: Powered by Tailwind CSS v4 and Reka UI for top performance and accessibility.
+    icon: i-lucide-rocket
+    to: /getting-started
+  - title: Flexible design system
+    description: Beautiful by default and easily customizable with design tokens to your brand.
+    icon: i-lucide-swatch-book
+    to: /getting-started/theme#design-system
+  - title: Internationalization (i18n)
+    description: Nuxt UI is translated into 30+ languages, works well with i18n and multi-directional support (LTR/RTL).
+    icon: i-lucide-globe
+    to: /getting-started/i18n/nuxt
+  - title: Easy font customization
+    description: Performance-optimized fonts with first-class @nuxt/fonts integration.
+    icon: i-lucide-a-large-small
+    to: /getting-started/fonts
+  - title: Large icons sets
+    description: Access to over 200,000 customizable icons from Iconify, seamlessly integrated with Iconify.
+    icon: i-lucide-smile
+    to: /getting-started/icons
+  - title: Light & Dark
+    description: Dark mode-ready components, seamless integration with @nuxtjs/color-mode.
+    icon: i-lucide-sun-moon
+    to: /getting-started/color-mode/nuxt
+design_system:
+  title: Flexible design system
+  description: Build your next project faster with Nuxt UI's comprehensive design system. Featuring semantic color aliases, comprehensive design tokens, and automatic light/dark mode support for accessible components out of the box.
+  links:
+    - label: Learn more
+      to: /getting-started/theme#design-system
+      variant: outline
+      color: neutral
+      trailingIcon: i-lucide-arrow-right
+  features:
+    - title: Color aliases via AppConfig
+      description: Configure 7 semantic color aliases (primary, secondary, success, info, warning, error, neutral) at runtime through AppConfig without rebuilding your application
+      icon: i-lucide-palette
+    - title: Comprehensive design tokens
+      description: Extensive set of neutral palette tokens for text, backgrounds, and borders with automatic light/dark mode support via CSS variables like --ui-text, --ui-bg, --ui-border
+      icon: i-lucide-component
+    - title: Global style variables
+      description: Customize global styling with --ui-radius for consistent border rounding and --ui-container for layout widths across your entire application
+      icon: i-lucide-ruler
+  code: |
+    ::code-group
+
+    ```ts [app.config.ts]
+    export default defineAppConfig({
+      ui: {
+        colors: {
+          primary: 'indigo',
+          secondary: 'pink',
+          success: 'green',
+          info: 'blue',
+          warning: 'orange',
+          error: 'red',
+          neutral: 'zinc'
+        }
+      }
+    })
+
+
+    ```
+
+    ```css [main.css]
+    @import "tailwindcss" theme(static);
+    @import "@nuxt/ui";
+
+    :root {
+      --ui-radius: var(--radius-sm);
+      --ui-container: 90rem;
+      --ui-bg: var(--ui-color-neutral-50);
+      --ui-text: var(--ui-color-neutral-900);
+    }
+    .dark {
+      --ui-bg: var(--ui-color-neutral-950);
+      --ui-border: var(--ui-color-neutral-900);
+    }
+    ```
+
+    ::
+component_customization:
+  title: Powerful component customization
+  description: Nuxt UI leverages [Tailwind Variants](https://www.tailwind-variants.org/) to provide a powerful, maintainable system for managing component styles and intelligently merging Tailwind CSS classes without conflicts.
+  links:
+    - label: Learn more
+      to: /getting-started/theme#customize-theme
+      variant: outline
+      color: neutral
+      trailingIcon: i-lucide-arrow-right
+  features:
+    - title: Powerful slot and variant system
+      description: Customize component parts with slots and apply different styles based on props, creating consistent UI patterns with granular control over styling
+      icon: i-lucide-layout-grid
+    - title: Global theme with AppConfig
+      description: Configure component styles project-wide with a centralized AppConfig that maintains consistency across your application without rebuilding
+      icon: i-lucide-settings-2
+    - title: Per-component customization
+      description: Fine-tune individual components with the ui prop for slot-specific styling and class prop for root element overrides, providing maximum flexibility
+      icon: i-lucide-component
+  code: |
+    ::code-group
+
+    ```ts [app.config.ts]
+    export default defineAppConfig({
+      ui: {
+        button: {
+          slots: {
+            base: 'group font-bold',
+            trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+          },
+          defaultVariants: {
+            color: 'neutral',
+            variant: 'subtle'
+          }
+        }
+      }
+    })
+    ```
+
+    ```vue [Collapsible.vue]
+    <template>
+      <UCollapsible>
+        <UButton
+          label="Open"
+          color="neutral"
+          variant="subtle"
+          trailing-icon="i-lucide-chevron-down"
+          :ui="{
+            trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+          }"
+            class="group font-bold"
+          />
+      </UCollapsible>
+    </template>
+    ```
+
+    ::
+community:
+  title: Nuxt UI open-source community
+  description: Join our thriving community to contribute code, report issues, suggest features, or help with documentation. Every contribution makes Nuxt UI better for everyone.
+  links:
+    - label: Star on GitHub
+      color: neutral
+      variant: outline
+      to: https://github.com/nuxt/ui
+      target: _blank
+      icon: i-lucide-star
diff --git a/docs/app/pages/components.vue b/docs/app/pages/components.vue
index b2d426e2..2d6d8be4 100644
--- a/docs/app/pages/components.vue
+++ b/docs/app/pages/components.vue
@@ -15,7 +15,7 @@ useSeoMeta({
   ogImage: joinURL(url, '/og-image.png')
 })
 
-const { data: components } = await useAsyncData('components', () => {
+const { data: components } = await useAsyncData('all-components', () => {
   return queryCollection('content')
     .where('path', 'LIKE', '/components/%')
     .where('extension', '=', 'md')
@@ -31,17 +31,13 @@ const componentsPerCategory = computed(() => {
 })
 
 const categories = [{
-  id: 'layout',
-  title: 'Layout',
-  description: 'Structural components for organizing content, including containers, grids, dividers, and responsive layout systems.'
+  id: 'element',
+  title: 'Element',
+  description: 'Core UI building blocks like buttons, badges, icons, avatars, and other fundamental interface elements.'
 }, {
   id: 'form',
   title: 'Form',
   description: 'Interactive form elements including inputs, selects, checkboxes, radio buttons, and advanced form validation components.'
-}, {
-  id: 'element',
-  title: 'Element',
-  description: 'Core UI building blocks like buttons, badges, icons, avatars, and other fundamental interface elements.'
 }, {
   id: 'data',
   title: 'Data',
@@ -54,6 +50,10 @@ const categories = [{
   id: 'overlay',
   title: 'Overlay',
   description: 'Floating UI elements like modals, dialogs, tooltips, popovers, and other components that overlay the main content.'
+}, {
+  id: 'layout',
+  title: 'Layout',
+  description: 'Structural components for organizing content, including containers, grids, dividers, and responsive layout systems.'
 }]
 
 const { y } = useWindowScroll()
@@ -81,7 +81,10 @@ onMounted(() => {
       orientation="vertical"
       :ui="{ title: 'text-balance', container: 'relative' }"
     >
-      <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" />
+      <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>
+
       <template #headline>
         <UButton
           to="https://tailwindcss.com"
@@ -96,6 +99,7 @@ onMounted(() => {
       <template #title>
         Build beautiful UI with <span class="text-(--ui-primary)">{{ components!.length }}+</span> powerful components
       </template>
+
       <template #links>
         <UButton
           to="/getting-started/installation/vue"
@@ -114,10 +118,11 @@ onMounted(() => {
           size="xl"
         />
       </template>
-      <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" />
+
+      <div class="absolute inset-y-0 inset-x-4 sm:inset-x-6 lg:inset-x-8">
         <StarsBg />
-      </template>
+      </div>
+      <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" />
     </UPageHero>
 
     <div v-for="category in categories" :key="category.id">
diff --git a/docs/app/pages/index.vue b/docs/app/pages/index.vue
new file mode 100644
index 00000000..9a82a363
--- /dev/null
+++ b/docs/app/pages/index.vue
@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import { joinURL } from 'ufo'
+// @ts-expect-error yaml is not typed
+import page from '.index.yml'
+
+const { url } = useSiteConfig()
+
+useSeoMeta({
+  titleTemplate: `%s - Nuxt UI`,
+  title: page.title,
+  description: page.description,
+  ogTitle: `${page.title} - Nuxt UI`,
+  ogDescription: page.description,
+  ogImage: joinURL(url, '/og-image.png')
+})
+
+const { data: components } = await useAsyncData('ui-components', () => {
+  return queryCollection('content')
+    .where('path', 'LIKE', '/components/%')
+    .where('extension', '=', 'md')
+    .where('module', 'IS NULL')
+    .select('path', 'title', 'description', 'category', 'module')
+    .all()
+})
+
+const { data: module } = await useFetch<{
+  stats: {
+    downloads: number
+    stars: number
+  }
+  contributors: {
+    username: string
+  }[]
+}>('https://api.nuxt.com/modules/ui', {
+  key: 'stats',
+  transform: ({ stats, contributors }) => ({ stats, contributors })
+})
+
+const { format } = Intl.NumberFormat('en', { notation: 'compact' })
+
+const contributorsRef = ref(null)
+const isContributorsInView = ref(false)
+const isContributorsHovered = useElementHover(contributorsRef)
+
+useIntersectionObserver(contributorsRef, ([entry]) => {
+  isContributorsInView.value = entry?.isIntersecting || false
+})
+</script>
+
+<template>
+  <UMain>
+    <UPageHero
+      orientation="horizontal"
+      :ui="{
+        container: 'pb-0 sm:pb-0 lg:py-0',
+        title: 'lg:mt-16',
+        links: 'lg:mb-16',
+        description: 'text-balance'
+      }"
+    >
+      <template #title>
+        The Intuitive <br> <span class="text-(--ui-primary)">Vue UI Library</span>
+      </template>
+      <template #description>
+        {{ page.hero.description }}
+      </template>
+
+      <template #links>
+        <UButton v-for="link of page.hero.links" :key="link.label" v-bind="link" size="xl" />
+        <div class="w-full my-6">
+          <USeparator class="w-1/2" type="dashed" />
+        </div>
+        <div class="flex flex-col gap-4">
+          <Motion
+            v-for="(feature, index) in page.hero.features"
+            :key="feature.title"
+            as-child
+            :initial="{ opacity: 0, transform: 'translateX(-10px)' }"
+            :in-view="{ opacity: 1, transform: 'translateX(0)' }"
+            :transition="{ delay: 0.2 + 0.4 * index }"
+            :in-view-options="{ once: true }"
+          >
+            <UPageFeature v-bind="feature" class="opacity-0" />
+          </Motion>
+        </div>
+      </template>
+
+      <SkyBg />
+
+      <div class="h-[344px] lg:h-full lg:relative w-full lg:min-h-[calc(100vh-var(--ui-header-height)-1px)] overflow-hidden">
+        <UPageMarquee
+          pause-on-hover
+          :overlay="false"
+          :ui="{
+            root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) absolute w-full left-0 border-y lg:border-x lg:border-y-0 lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:flex-col',
+            content: 'lg:w-auto lg:h-full lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content]'
+          }"
+        >
+          <ULink
+            v-for="component of components?.slice(0, 10)"
+            :key="component.path"
+            class="relative group/link aspect-video border-(--ui-border) w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
+            :to="component.path"
+          >
+            <UColorModeImage
+
+              :light="`${component.path.replace('/components/', '/components/light/')}.png`"
+              :dark="`${component.path.replace('/components/', '/components/dark/')}.png`"
+              class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-(--ui-border) 2xl:border-y-0"
+            />
+            <UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
+          </ULink>
+        </UPageMarquee>
+
+        <UPageMarquee
+          pause-on-hover
+          reverse
+          :overlay="false"
+          :ui="{
+            root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) absolute w-full mt-[180px] left-0 border-y lg:mt-auto lg:left-auto lg:border-y-0 lg:border-x lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:right-0 lg:flex-col',
+            content: 'lg:w-auto lg:h-full lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content] lg:[animation-direction:reverse]'
+          }"
+        >
+          <ULink
+            v-for="component of components?.slice(10, 20)"
+            :key="component.path"
+            class="relative group/link aspect-video border-(--ui-border) w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
+            :to="component.path"
+          >
+            <UColorModeImage
+              :light="`${component.path.replace('/components/', '/components/light/')}.png`"
+              :dark="`${component.path.replace('/components/', '/components/dark/')}.png`"
+              class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-(--ui-border) 2xl:border-y-0"
+            />
+            <UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
+          </ULink>
+        </UPageMarquee>
+      </div>
+    </UPageHero>
+
+    <USeparator />
+
+    <UPageSection :ui="{ container: 'lg:py-16' }">
+      <ul class="grid grid-cols-1 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 gap-y-6 lg:gap-x-8 lg:gap-y-8 xl:gap-y-10">
+        <Motion
+          v-for="(feature, index) in page?.features"
+          :key="feature.title"
+          as="li"
+          :initial="{ opacity: 0, transform: 'translateY(10px)' }"
+          :in-view="{ opacity: 1, transform: 'translateY(0)' }"
+          :transition="{ delay: 0.1 * index }"
+          :in-view-options="{ once: true }"
+          class="flex items-start gap-x-3 relative group"
+        >
+          <NuxtLink v-if="feature.to" :to="feature.to" class="absolute inset-0 z-10" />
+
+          <div class="relative p-3">
+            <svg class="absolute inset-0" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <line x1="6.5" x2="6.5" y2="44" stroke="var(--ui-border)" />
+              <line x1="38.5" x2="38.5" y2="44" stroke="var(--ui-border)" />
+              <line y1="5.5" x2="44" y2="5.5" stroke="var(--ui-border)" />
+              <line y1="37.5" x2="44" y2="37.5" stroke="var(--ui-border)" />
+              <circle cx="6.53613" cy="5.45508" r="1.5" fill="var(--ui-border-accented)" />
+              <circle cx="38.5957" cy="5.45508" r="1.5" fill="var(--ui-border-accented)" />
+              <circle cx="6.53711" cy="37.4551" r="1.5" fill="var(--ui-border-accented)" />
+              <circle cx="38.5957" cy="37.4551" r="1.5" fill="var(--ui-border-accented)" />
+            </svg>
+            <UIcon :name="feature.icon" class="size-5 flex-shrink-0" />
+          </div>
+          <div class="flex flex-col">
+            <h2 class="font-medium text-(--ui-text-highlighted) inline-flex items-center gap-x-1">
+              {{ feature.title }}
+              <UIcon v-if="feature.to" 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" />
+            </h2>
+            <p class="text-sm text-(--ui-text-muted)">
+              {{ feature.description }}
+            </p>
+          </div>
+        </Motion>
+      </ul>
+    </UPageSection>
+
+    <USeparator />
+
+    <UPageSection
+      :title="page.design_system.title"
+      :description="page.design_system.description"
+      :features="page.design_system.features"
+      :links="page.design_system.links"
+      orientation="horizontal"
+    >
+      <MDC :value="page.design_system.code" />
+    </UPageSection>
+
+    <USeparator />
+
+    <UPageSection
+      :title="page.component_customization.title"
+      :features="page.component_customization.features"
+      :links="page.component_customization.links"
+      orientation="horizontal"
+    >
+      <template #description>
+        <MDC :value="page.component_customization.description" />
+      </template>
+
+      <MDC :value="page.component_customization.code" />
+    </UPageSection>
+
+    <USeparator />
+
+    <UPageSection
+      :title="page.community.title"
+      :description="page.community.description"
+      :links="page.community.links"
+      orientation="horizontal"
+      :ui="{ features: 'flex items-center gap-4 lg:gap-8' }"
+      class="border-b border-(--ui-border)"
+    >
+      <template #features>
+        <NuxtLink to="https://npm.chart.dev/@nuxt/ui" target="_blank" class="min-w-0">
+          <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
+            {{ format(module?.stats?.downloads ?? 0) }}+
+          </p>
+          <p class="text-(--ui-text-muted) text-sm truncate">monthly downloads</p>
+        </NuxtLink>
+
+        <NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="min-w-0">
+          <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
+            {{ format(module?.stats?.stars ?? 0) }}+
+          </p>
+          <p class="text-(--ui-text-muted) text-sm truncate">GitHub stars</p>
+        </NuxtLink>
+
+        <NuxtLink to="https://github.com/nuxt/ui/graphs/contributors" target="_blank" class="min-w-0">
+          <p class="text-4xl font-semibold text-(--ui-text-highlighted) truncate">
+            175+
+          </p>
+          <p class="text-(--ui-text-muted) text-sm truncate">Contributors</p>
+        </NuxtLink>
+      </template>
+
+      <div ref="contributorsRef" class="p-4 sm:px-6 md:px-8 lg:px-12 xl:px-14 overflow-hidden flex relative">
+        <LazyHomeContributors :contributors="module?.contributors" :paused="!isContributorsInView || isContributorsHovered" />
+      </div>
+    </UPageSection>
+
+    <UPageSection :ui="{ container: 'relative !pb-0 overflow-hidden' }">
+      <template #title>
+        Build faster with Nuxt UI <span class="text-(--ui-primary)">Pro</span>.
+      </template>
+      <template #description>
+        A collection of premium Vue components, composables and utils built on top of Nuxt UI. <br> Focused on structure and layout, these <span class="text-(--ui-text)">responsive components</span> are designed to be the perfect <span class="text-(--ui-text)">building blocks for your next idea</span>.
+      </template>
+      <template #links>
+        <UButton to="/pro" size="lg">
+          Discover Nuxt UI Pro
+        </UButton>
+        <UButton to="/pro/templates" size="lg" variant="outline" trailing-icon="i-lucide-arrow-right" color="neutral">
+          Explore templates
+        </UButton>
+      </template>
+
+      <StarsBg />
+
+      <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="relative h-[400px] border border-(--ui-border) bg-(--ui-bg-muted) overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">
+        <UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -left-[100px] -top-[300px] h-[940px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
+          <img
+            v-for="i in 4"
+            :key="i"
+            :src="`/pro/blocks/image${i}.png`"
+            width="460"
+            height="258"
+            loading="lazy"
+            :alt="`Nuxt UI Pro Screenshot ${i}`"
+            class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
+          >
+        </UPageMarquee>
+        <UPageMarquee orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -top-[400px] left-[480px] h-[1160px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
+          <img
+            v-for="i in [5, 6, 7, 8]"
+            :key="i"
+            :src="`/pro/blocks/image${i}.png`"
+            width="460"
+            height="258"
+            loading="lazy"
+            :alt="`Nuxt UI Pro Screenshot ${i}`"
+            class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
+          >
+        </UPageMarquee>
+        <UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: 'hidden md:flex [--duration:40s] absolute w-[460px] -top-[300px] left-[1020px] h-[1060px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
+          <img
+            v-for="i in [9, 10, 11, 12]"
+            :key="i"
+            :src="`/pro/blocks/image${i}.png`"
+            width="460"
+            height="258"
+            :alt="`Nuxt UI Pro Screenshot ${i}`"
+            loading="lazy"
+            class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
+          >
+        </UPageMarquee>
+      </div>
+    </UPageSection>
+  </UMain>
+</template>
diff --git a/docs/app/pages/pro/.content/templates.yml b/docs/app/pages/pro/.content/templates.yml
index 0c2d6a69..eddf7c67 100644
--- a/docs/app/pages/pro/.content/templates.yml
+++ b/docs/app/pages/pro/.content/templates.yml
@@ -30,7 +30,7 @@ templates:
       - title: Resizable multi-column layout
         icon: i-lucide-columns-3
     links:
-      - label: Live Preview
+      - label: Preview
         to: https://dashboard-template.nuxt.dev
         target: _blank
         leadingIcon: i-logos-nuxt-icon
@@ -42,7 +42,7 @@ templates:
         icon: i-simple-icons-github
         color: neutral
         variant: outline
-      - label: Live Preview
+      - label: Preview
         to: https://vue-dashboard-template.nuxt.dev
         target: _blank
         leadingIcon: i-logos-vue
@@ -68,7 +68,7 @@ templates:
       - title: Authentication pages (login, register)
         icon: i-lucide-user-round-check
     links:
-      - label: Live Preview
+      - label: Preview
         to: https://saas-template.nuxt.dev
         target: _blank
         leadingIcon: i-logos-nuxt-icon
@@ -94,7 +94,7 @@ templates:
       - title: Write content in YAML
         icon: i-simple-icons-yaml
     links:
-      - label: Live Preview
+      - label: Preview
         to: https://landing-template.nuxt.dev
         target: _blank
         leadingIcon: i-logos-nuxt-icon
@@ -120,7 +120,7 @@ templates:
       - title: Full-text search out of the box
         icon: i-lucide-search
     links:
-      - label: Live Preview
+      - label: Preview
         to: https://docs-template.nuxt.dev
         target: _blank
         leadingIcon: i-logos-nuxt-icon
@@ -144,7 +144,7 @@ templates:
       - title: Nuxt 4 Compatibility Enabled
         icon: i-simple-icons-nuxtdotjs
     links:
-      - label: Live Preview
+      - label: Preview
         to: https://ui-pro-starter.nuxt.dev
         target: _blank
         leadingIcon: i-logos-nuxt-icon
@@ -156,7 +156,7 @@ templates:
         variant: outline
         icon: i-simple-icons-github
         color: neutral
-      - label: Live Preview
+      - label: Preview
         to: https://ui-pro-starter-vue.nuxt.dev
         target: _blank
         leadingIcon: i-logos-vue
diff --git a/docs/app/pages/pro/activate.vue b/docs/app/pages/pro/activate.vue
index d0b9b2fb..6d1ab316 100644
--- a/docs/app/pages/pro/activate.vue
+++ b/docs/app/pages/pro/activate.vue
@@ -70,14 +70,12 @@ onMounted(() => {
 
 <template>
   <UMain>
-    <UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative' }">
-      <template #top>
-        <StarsBg />
-      </template>
+    <UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative overflow-hidden', wrapper: 'lg:px-12', description: 'text-pretty' }">
+      <StarsBg />
       <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="lg:border-y border-(--ui-border)">
-        <UCard class="lg:w-1/2 m-auto lg:rounded-none overflow-hidden" variant="outline" :ui="{ footer: 'bg-(--ui-bg-muted)' }">
+      <div class="px-4 py-10 lg:border border-(--ui-border) bg-(--ui-bg)">
+        <div class="max-w-xl mx-auto">
           <UForm
             :schema="schema"
             :validate-on="['blur']"
@@ -107,12 +105,13 @@ onMounted(() => {
             </UAlert>
             <UAlert v-else-if="errorMessage" color="error" variant="subtle" :title="errorMessage" />
           </UForm>
-          <template #footer>
-            <p class="text-sm text-center text-neutral-500 dark:text-neutral-400">
-              If you purchased a license with multiple seats, activate the license key for each member of your team.
-            </p>
-          </template>
-        </UCard>
+
+          <ProseHr />
+
+          <ProseNote>
+            If you purchased a license with multiple seats, activate the license key for each member of your team.
+          </ProseNote>
+        </div>
       </div>
     </UPageHero>
   </UMain>
diff --git a/docs/app/pages/pro/index.vue b/docs/app/pages/pro/index.vue
index 45278c13..b0e9dd72 100644
--- a/docs/app/pages/pro/index.vue
+++ b/docs/app/pages/pro/index.vue
@@ -26,15 +26,14 @@ useSeoMeta({
       }"
     >
       <template #title>
-        <MDC :value="page.hero.title" unwrap="p" />
+        <MDC :value="page.hero.title" tag="span" unwrap="p" />
       </template>
       <template #description>
-        <MDC :value="page.hero.description" unwrap="p" />
-      </template>
-      <template #top>
-        <StarsBg />
+        <MDC :value="page.hero.description" tag="span" unwrap="p" />
       </template>
 
+      <StarsBg />
+
       <Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
         <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" />
       </Motion>
@@ -84,7 +83,7 @@ useSeoMeta({
     >
       <template #description>
         <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.2 }">
-          <MDC :value="page.testimonial.quote" unwrap="p" class="before:content-[open-quote] after:content-[close-quote] " />
+          <MDC :value="page.testimonial.quote" tag="span" unwrap="p" class="before:content-[open-quote] after:content-[close-quote] " />
         </Motion>
       </template>
       <Motion :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0)' }" :in-view-options="{ once: true }" :transition="{ delay: 0.3 }">
@@ -120,10 +119,10 @@ useSeoMeta({
       class="rounded-none border-t border-(--ui-border) bg-gradient-to-b from-(--ui-bg-muted) to-(--ui-bg)"
     >
       <template #title>
-        <MDC :value="page.mainSection.title" unwrap="p" />
+        <MDC :value="page.mainSection.title" tag="span" unwrap="p" />
       </template>
       <template #description>
-        <MDC :value="page.mainSection.description" unwrap="p" />
+        <MDC :value="page.mainSection.description" tag="span" unwrap="p" />
       </template>
     </UPageCTA>
     <UPageSection
@@ -198,6 +197,7 @@ useSeoMeta({
       orientation="horizontal"
     >
       <StarsBg />
+
       <video
         class="rounded-[var(--ui-radius)] z-10"
         preload="none"
diff --git a/docs/app/pages/pro/pricing.vue b/docs/app/pages/pro/pricing.vue
index 596747b7..a698b93f 100644
--- a/docs/app/pages/pro/pricing.vue
+++ b/docs/app/pages/pro/pricing.vue
@@ -26,9 +26,8 @@ useSeoMeta({
       <template #title>
         <MDC :value="page.pricing.title" unwrap="p" />
       </template>
-      <template #top>
-        <StarsBg />
-      </template>
+
+      <StarsBg />
       <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="flex flex-col bg-(--ui-bg) gap-8 lg:gap-0">
         <UPricingPlan
diff --git a/docs/app/pages/pro/templates.vue b/docs/app/pages/pro/templates.vue
index e4fae686..9169fa85 100644
--- a/docs/app/pages/pro/templates.vue
+++ b/docs/app/pages/pro/templates.vue
@@ -16,59 +16,60 @@ useSeoMeta({
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <UPageHero :links="page.links" :ui="{ container: 'relative' }">
-    <template #top>
+  <div class="relative">
+    <UPageHero :links="page.links" :ui="{ container: 'relative' }">
       <StarsBg />
-    </template>
-    <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 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" />
 
-    <template #title>
-      <MDC :value="page.hero.title" unwrap="p" />
-    </template>
+      <template #title>
+        <MDC :value="page.hero.title" unwrap="p" />
+      </template>
 
-    <template #description>
-      <MDC :value="page.hero.description" unwrap="p" />
-    </template>
-  </UPageHero>
+      <template #description>
+        <MDC :value="page.hero.description" unwrap="p" />
+      </template>
+    </UPageHero>
 
-  <UPageSection
-    v-for="(template, index) in page.templates"
-    :key="index"
-    :title="template.title"
-    :links="template.links"
-    :features="template.features"
-    orientation="horizontal"
-    class="lg:border-t border-(--ui-border)"
-    :ui="{
-      title: 'lg:text-4xl',
-      wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
-      container: 'lg:py-0'
-    }"
-  >
-    <template #description>
-      <MDC :value="template.description" unwrap="p" />
-    </template>
+    <UPageSection
+      v-for="(template, index) in page.templates"
+      :key="index"
+      :title="template.title"
+      :links="template.links"
+      :features="template.features"
+      orientation="horizontal"
+      class="lg:border-t border-(--ui-border)"
+      :ui="{
+        title: 'lg:text-4xl',
+        wrapper: 'lg:py-16 lg:border-r border-(--ui-border) order-last lg:pr-16',
+        container: 'lg:py-0',
+        links: 'gap-x-3'
+      }"
+    >
+      <template #description>
+        <MDC :value="template.description" unwrap="p" />
+      </template>
 
-    <div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
-      <Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
-        <UColorModeImage
-          v-if="template.thumbnail"
-          v-bind="template.thumbnail"
-          class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
-          width="656"
-          height="369"
-          loading="lazy"
-        />
-        <UCarousel
-          v-else-if="template.images"
-          v-slot="{ item }"
-          :items="(template.images as any[])"
-          dots
-        >
-          <NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
-        </UCarousel>
-        <Placeholder v-else class="w-full h-full aspect-video" />
-      </Motion>
-    </div>
-  </UPageSection>
+      <div class="lg:border-x border-(--ui-border) h-full flex items-center lg:bg-(--ui-bg-muted)/20">
+        <Motion class="flex-1" :initial="{ opacity: 0, transform: 'translateY(10px)' }" :in-view="{ opacity: 1, transform: 'translateY(0px)' }" :in-view-options="{ once: true }" :transition="{ duration: 0.5, delay: 0.2 }">
+          <UColorModeImage
+            v-if="template.thumbnail"
+            v-bind="template.thumbnail"
+            class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
+            width="656"
+            height="369"
+            loading="lazy"
+          />
+          <UCarousel
+            v-else-if="template.images"
+            v-slot="{ item }"
+            :items="(template.images as any[])"
+            dots
+          >
+            <NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" />
+          </UCarousel>
+          <Placeholder v-else class="w-full h-full aspect-video" />
+        </Motion>
+      </div>
+    </UPageSection>
+  </div>
 </template>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 8b3bdc76..afdea9be 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -85,7 +85,6 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    '/': { redirect: '/getting-started', prerender: false },
     '/getting-started/installation': { redirect: '/getting-started/installation/nuxt', prerender: false },
     '/getting-started/icons': { redirect: '/getting-started/icons/nuxt', prerender: false },
     '/getting-started/color-mode': { redirect: '/getting-started/color-mode/nuxt', prerender: false },
diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 35860c6a..5e8d794c 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -29,6 +29,7 @@ export interface AvatarProps {
    */
   size?: AvatarVariants['size']
   class?: any
+  style?: any
   ui?: Partial<typeof avatar.slots>
 }
 
@@ -83,7 +84,7 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :style="props.style">
     <component
       :is="ImageComponent"
       v-if="src && !error"