docs: new landing page

docs/components/AppHeader.vue

@@ -73,7 +73,7 @@ onMounted(async () => {
         <UButton color="gray" variant="ghost" icon="i-simple-icons-github" to="https://github.com/nuxt-hub/core" target="_blank" />
         <UColorModeButton class="hidden md:inline-flex" />
         <UButton v-if="ready && !authenticated" size="sm" variant="ghost" label="Log in" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=login" color="gray" class="hidden sm:inline-flex" external />
-        <UButton v-if="ready && !authenticated" size="sm" variant="solid" label="Sign up" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=signup" class="hidden sm:inline-flex" external />
+        <UButton v-if="ready && !authenticated" size="sm" variant="solid" label="Get started" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=signup" class="hidden sm:inline-flex" external />
         <UButton v-if="ready && authenticated" size="sm" icon="i-ph-app-window-duotone" label="Dashboard" to="https://admin.hub.nuxt.com/?utm_source=hub-docs&utm_medium=header&utm_campaign=dashboard" color="green" class="hidden sm:inline-flex" external />
       </div>
     </template>

docs/components/HeroBackground.vue

@@ -1,20 +1,29 @@
 <template>
-  <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="pointer-events-none">
-    <mask id="path-1-inside-1_414_5526" fill="white">
-      <path d="M0 0H1440V181H0V0Z" />
-    </mask>
-    <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" />
-    <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" />
-    <defs>
-      <linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse">
-        <stop stop-color="currentColor" />
-        <stop offset="1" stop-color="currentColor" stop-opacity="0" />
-      </linearGradient>
-      <linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse">
-        <stop stop-color="currentColor" stop-opacity="0" />
-        <stop offset="0.395" stop-color="currentColor" />
-        <stop offset="1" stop-color="currentColor" stop-opacity="0" />
-      </linearGradient>
-    </defs>
-  </svg>
+  <div>
+    <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="pointer-events-none">
+      <mask id="path-1-inside-1_414_5526" fill="white">
+        <path d="M0 0H1440V181H0V0Z" />
+      </mask>
+      <path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" />
+      <path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" />
+      <defs>
+        <linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse">
+          <stop stop-color="currentColor" />
+          <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse">
+          <stop stop-color="currentColor" stop-opacity="0" />
+          <stop offset="0.395" stop-color="currentColor" />
+          <stop offset="1" stop-color="currentColor" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+    <ClientOnly>
+      <Sparkles
+        v-if="$route.path === '/'"
+        :density="100"
+        class="absolute inset-x-0 top-0 h-10 lg:h-24 w-full pointer-events-none"
+      />
+    </ClientOnly>
+  </div>
 </template>

docs/components/PageSectionCTA.vue

@@ -1,7 +1,16 @@
+<script setup>
+defineProps({
+  loose: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
 <template>
   <ULandingSection
     :ui="{
-      wrapper: 'mt-10 py-12 sm:py-12 not-prose relative',
+      wrapper: 'mt-10 not-prose relative' + (!loose ? ' py-12 sm:py-12' : ''),
       container: 'gap-8 sm:gap-y-8',
       title: 'lg:text-4xl font-semibold'
     }"
@@ -12,7 +21,7 @@
         trailingIcon: 'i-ph-arrow-right'
       },
       {
-        label: 'Read docs',
+        label: 'Read the docs',
         to: '/docs/getting-started',
         variant: 'ghost',
         color: 'gray'
@@ -39,6 +48,12 @@
         </linearGradient>
       </defs>
     </svg>
+    <ClientOnly>
+      <Sparkles
+        :density="100"
+        class="absolute inset-0 w-full pointer-events-none"
+      />
+    </ClientOnly>
 
     <template #title>
       <span>Start with NuxtHub <span class="text-primary">today</span></span>

docs/components/Sparkles.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { tsParticles } from '@tsparticles/engine'
+import { loadSlim } from '@tsparticles/slim'
+
+const props = defineProps({
+  size: {
+    type: Number,
+    default: 1
+  },
+  minSize: {
+    type: Number,
+    default: 0.4
+  },
+  density: {
+    type: Number,
+    default: 800
+  },
+  speed: {
+    type: Number,
+    default: 1
+  },
+  minSpeed: {
+    type: Number,
+    required: false
+  },
+  opacity: {
+    type: Number,
+    default: 1
+  },
+  opacitySpeed: {
+    type: Number,
+    default: 3
+  },
+  color: {
+    type: String,
+    default: '#00DC82'
+  },
+  background: {
+    type: String,
+    default: 'transparent'
+  },
+  options: {
+    type: Object,
+    required: false
+  }
+})
+
+const defaultOptions = {
+  background: {
+    color: {
+      value: props.background
+    }
+  },
+  fullScreen: {
+    enable: false,
+    zIndex: 1
+  },
+  fpsLimit: 120,
+  particles: {
+    color: {
+      value: props.color
+    },
+    move: {
+      enable: true,
+      direction: 'none',
+      speed: {
+        min: props.minSpeed || props.speed / 10,
+        max: props.speed
+      },
+      straight: false
+    },
+    number: {
+      value: props.density
+    },
+    opacity: {
+      value: {
+        min: props.minOpacity || props.opacity / 10,
+        max: props.opacity
+      },
+      animation: {
+        enable: true,
+        sync: false,
+        speed: props.opacitySpeed
+      }
+    },
+    size: {
+      value: {
+        min: props.minSize || props.size / 2.5,
+        max: props.size
+      }
+    }
+  },
+  detectRetina: true
+}
+
+let container
+
+const id = useId()
+onMounted(async () => {
+  await loadSlim(tsParticles)
+
+  container = await tsParticles.load({
+    id,
+    options: props.options || defaultOptions
+  })
+})
+
+onUnmounted(() => {
+  if (!container) {
+    return
+  }
+
+  container.destroy()
+})
+</script>
+
+<template>
+  <div :id="id" />
+</template>