<template>
  <UContainer class="min-h-screen relative">
    <MDottedGlowBackground
      :gap="16"
      :radius="2"
      color-light-var="--color-gray-900"
      color-dark-var="--color-gray-100"
      glow-color-light-var="--color-primary-500"
      glow-color-dark-var="--color-primary-400"
      class="background"
    />

    <div class="relative z-10 py-12">
      <UCard class="max-w-2xl mx-auto backdrop-blur-sm bg-default/80">
        <template #header>
          <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-highlighted">
              Welcome to Nuxt UI
            </h1>
            <UColorModeButton />
          </div>
        </template>
      </UCard>
    </div>
  </UContainer>
</template>

<template>
  <div class="relative h-80 rounded-xl overflow-hidden border border-default">
    <MDottedGlowBackground
      :gap="15"
      :radius="2"
      class="background absolute inset-0"
    />
    <div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-6">
      <div class="mb-6">
        <div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center mx-auto">
          <UIcon
            name="i-lucide-sparkles"
            class="w-8 h-8 text-white"
          />
        </div>
      </div>
      <h2 class="text-3xl font-bold text-highlighted mb-4">
        Dotted Glow
      </h2>
      <p class="text-default max-w-md mb-6">
        Subtle glowing dot patterns that create depth and visual interest in your backgrounds
      </p>
      <UButton
        color="primary"
        variant="solid"
        size="md"
      >
        Customize Pattern
      </UButton>
    </div>
  </div>
</template>