@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/ui/bg-pattern.vue

@@ -1,177 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Background Pattern</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">SVG background patterns for sections.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Pattern Types -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Pattern Types</h2>
-        <div class="grid md:grid-cols-3 gap-4">
-          <div v-for="pattern in patterns" :key="pattern" class="relative h-48 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
-            <XMarkPatternBg :pattern="pattern" :opacity="0.15" :fade="false" />
-            <div class="absolute inset-0 flex items-center justify-center">
-              <span class="px-3 py-1 bg-white dark:bg-neutral-900 rounded-full text-sm font-medium">{{ pattern }}</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Opacity Levels -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Opacity Levels</h2>
-        <div class="grid md:grid-cols-4 gap-4">
-          <div v-for="opacity in [0.03, 0.05, 0.1, 0.2]" :key="opacity" class="relative h-32 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
-            <XMarkPatternBg pattern="dots" :opacity="opacity" />
-            <div class="absolute inset-0 flex items-center justify-center">
-              <span class="px-3 py-1 bg-white dark:bg-neutral-900 rounded-full text-sm font-medium">{{ opacity }}</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- On Colored Backgrounds -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">On Colored Backgrounds</h2>
-        <div class="grid md:grid-cols-2 gap-4">
-          <div class="relative h-48 rounded-lg overflow-hidden bg-gradient-to-br from-primary-500 to-primary-700">
-            <XMarkPatternBg pattern="circuit" :opacity="0.1" color="white" />
-            <div class="absolute inset-0 flex items-center justify-center">
-              <span class="px-3 py-1 bg-white/20 backdrop-blur rounded-full text-sm font-medium text-white">Primary + Circuit</span>
-            </div>
-          </div>
-          <div class="relative h-48 rounded-lg overflow-hidden bg-gradient-to-br from-neutral-800 to-neutral-900">
-            <XMarkPatternBg pattern="topography" :opacity="0.08" color="white" />
-            <div class="absolute inset-0 flex items-center justify-center">
-              <span class="px-3 py-1 bg-white/20 backdrop-blur rounded-full text-sm font-medium text-white">Dark + Topography</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Fade Effect -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Fade Effect</h2>
-        <p class="text-sm text-neutral-500 mb-4">Pattern fades at top and bottom edges (enabled by default)</p>
-        <div class="grid md:grid-cols-2 gap-4">
-          <div class="relative h-64 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
-            <XMarkPatternBg pattern="grid" :opacity="0.15" :fade="true" />
-            <div class="absolute inset-0 flex items-center justify-center">
-              <span class="px-3 py-1 bg-white dark:bg-neutral-900 rounded-full text-sm font-medium">fade: true (default)</span>
-            </div>
-          </div>
-          <div class="relative h-64 rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-800">
-            <XMarkPatternBg pattern="grid" :opacity="0.15" :fade="false" />
-            <div class="absolute inset-0 flex items-center justify-center">
-              <span class="px-3 py-1 bg-white dark:bg-neutral-900 rounded-full text-sm font-medium">fade: false</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Usage with Section -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Usage with Section</h2>
-        <div class="relative rounded-lg overflow-hidden bg-neutral-50 dark:bg-neutral-900 p-12">
-          <XMarkPatternBg pattern="grid" :opacity="0.05" />
-          <div class="relative text-center">
-            <h3 class="text-2xl font-bold mb-4">Section with Pattern</h3>
-            <p class="text-neutral-600 dark:text-neutral-400 max-w-md mx-auto">
-              Add visual interest to your sections with subtle background patterns.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Props -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Props</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Prop</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">pattern</td><td class="py-3 px-4">String</td><td class="py-3 px-4">dots</td><td class="py-3 px-4">See Available Patterns table below</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">opacity</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">0.05</td><td class="py-3 px-4">Pattern opacity (0-1)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">fade</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Fade pattern at top and bottom edges</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">color</td><td class="py-3 px-4">String</td><td class="py-3 px-4">currentColor</td><td class="py-3 px-4">Pattern color (CSS color value)</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Available Patterns -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Available Patterns</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Pattern</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">dots</td><td class="py-3 px-4">Small dots in a grid pattern</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">grid</td><td class="py-3 px-4">Simple square grid lines</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">diagonal</td><td class="py-3 px-4">Diagonal lines</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">topography</td><td class="py-3 px-4">Topographic map-style contour lines</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">circuit</td><td class="py-3 px-4">Circuit board-style pattern</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">waves</td><td class="py-3 px-4">Horizontal wave lines</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">plaid</td><td class="py-3 px-4">Classic plaid/tartan crossing lines</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">diagonalPlaid</td><td class="py-3 px-4">Diagonal crossing lines</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">hexagons</td><td class="py-3 px-4">Honeycomb hexagon pattern</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">triangles</td><td class="py-3 px-4">Geometric triangle pattern</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">crosses</td><td class="py-3 px-4">Small cross/plus symbols</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">zigzag</td><td class="py-3 px-4">Zigzag chevron lines</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">diamonds</td><td class="py-3 px-4">Diamond/rhombus shapes</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Background Pattern Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const basicPatterns = ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves']
-const edgyPatterns = ['plaid', 'diagonalPlaid', 'hexagons', 'triangles', 'crosses', 'zigzag', 'diamonds']
-const patterns = [...basicPatterns, ...edgyPatterns]
-
-const codeExample = `<!-- Basic pattern on a section (fades at edges by default) -->
-<div class="relative">
-  <XMarkPatternBg pattern="dots" :opacity="0.05" />
-  <div class="relative">
-    <!-- Your content here -->
-  </div>
-</div>
-
-<!-- On colored background with white pattern -->
-<div class="relative bg-primary-600">
-  <XMarkPatternBg
-    pattern="circuit"
-    :opacity="0.1"
-    color="white"
-  />
-  <div class="relative text-white">
-    <!-- Content -->
-  </div>
-</div>
-
-<!-- Disable fade for full-coverage pattern -->
-<XMarkPatternBg
-  pattern="grid"
-  :opacity="0.08"
-  :fade="false"
-/>`
-</script>

package/.playground/pages/ui/glass-card.vue

@@ -1,179 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Glass Card</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Glassmorphism card with frosted background effect.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Basic -->
-      <section class="bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl p-12">
-        <h2 class="text-lg font-semibold mb-4 text-white">Basic Card</h2>
-        <div class="max-w-md">
-          <XMarkCardGlass title="Glass Effect" subtitle="Frosted glass aesthetic">
-            <p class="text-gray-600 dark:text-gray-300">
-              This card uses backdrop blur and semi-transparent backgrounds for a modern glass effect.
-            </p>
-          </XMarkCardGlass>
-        </div>
-      </section>
-
-      <!-- Size Options -->
-      <section class="bg-gradient-to-br from-neutral-800 to-neutral-900 rounded-2xl p-12">
-        <h2 class="text-lg font-semibold mb-6 text-white">Size Options</h2>
-        <p class="text-sm text-neutral-400 mb-8">Different padding sizes for various use cases. Each card contains the same content to show the padding difference.</p>
-        <div class="space-y-6">
-          <div class="flex flex-wrap items-start gap-6">
-            <div class="text-center">
-              <p class="text-xs text-neutral-400 mb-2 font-mono">size="xs" (p-3)</p>
-              <XMarkCardGlass title="Extra Small" size="xs">
-                <p class="text-sm text-gray-300">Compact cards for tight spaces, sidebars, or dense layouts.</p>
-              </XMarkCardGlass>
-            </div>
-            <div class="text-center">
-              <p class="text-xs text-neutral-400 mb-2 font-mono">size="sm" (p-4)</p>
-              <XMarkCardGlass title="Small" size="sm">
-                <p class="text-sm text-gray-300">Compact cards for tight spaces, sidebars, or dense layouts.</p>
-              </XMarkCardGlass>
-            </div>
-            <div class="text-center">
-              <p class="text-xs text-neutral-400 mb-2 font-mono">size="md" (p-6)</p>
-              <XMarkCardGlass title="Medium" size="md">
-                <p class="text-sm text-gray-300">Compact cards for tight spaces, sidebars, or dense layouts.</p>
-              </XMarkCardGlass>
-            </div>
-          </div>
-          <div class="flex flex-wrap items-start gap-6">
-            <div class="text-center">
-              <p class="text-xs text-neutral-400 mb-2 font-mono">size="lg" (p-8)</p>
-              <XMarkCardGlass title="Large" size="lg">
-                <p class="text-sm text-gray-300">Compact cards for tight spaces, sidebars, or dense layouts.</p>
-              </XMarkCardGlass>
-            </div>
-            <div class="text-center">
-              <p class="text-xs text-neutral-400 mb-2 font-mono">size="xl" (p-10)</p>
-              <XMarkCardGlass title="Extra Large" size="xl">
-                <p class="text-sm text-gray-300">Compact cards for tight spaces, sidebars, or dense layouts.</p>
-              </XMarkCardGlass>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- With Glow -->
-      <section class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 rounded-2xl p-12">
-        <h2 class="text-lg font-semibold mb-4 text-white">With Glow Border</h2>
-        <div class="grid md:grid-cols-2 gap-6">
-          <XMarkCardGlass title="Standard Card">
-            <p class="text-gray-300">Without glow effect</p>
-          </XMarkCardGlass>
-          <XMarkCardGlass title="Glow Card" :glow="true">
-            <p class="text-gray-300">With animated glow border</p>
-          </XMarkCardGlass>
-        </div>
-      </section>
-
-      <!-- With Slots -->
-      <section class="bg-gradient-to-br from-cyan-600 to-blue-700 rounded-2xl p-12">
-        <h2 class="text-lg font-semibold mb-4 text-white">Using Slots</h2>
-        <div class="max-w-md">
-          <XMarkCardGlass>
-            <template #header>
-              <div class="flex items-center gap-3">
-                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
-                  <UIcon name="i-lucide-star" class="w-5 h-5 text-white" />
-                </div>
-                <div>
-                  <h3 class="font-semibold text-white">Custom Header</h3>
-                  <p class="text-sm text-white/70">Using the header slot</p>
-                </div>
-              </div>
-            </template>
-            <p class="text-gray-200">
-              Custom header content with icon and text layout.
-            </p>
-            <template #footer>
-              <div class="flex justify-between items-center">
-                <span class="text-sm text-white/60">Footer slot</span>
-                <UButton size="sm" color="white" variant="outline">Action</UButton>
-              </div>
-            </template>
-          </XMarkCardGlass>
-        </div>
-      </section>
-
-      <!-- Props -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Props</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Prop</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">title</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Card title</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">subtitle</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Card subtitle</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">size</td><td class="py-3 px-4">String</td><td class="py-3 px-4">md</td><td class="py-3 px-4">xs, sm, md, lg, xl</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">glow</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">false</td><td class="py-3 px-4">Add animated glow border</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Slots -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Slots</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Slot</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">default</td><td class="py-3 px-4">Main card content</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">header</td><td class="py-3 px-4">Custom header (overrides title/subtitle)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">footer</td><td class="py-3 px-4">Footer with border separator</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Glass Card Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Basic glass card -->
-<XMarkCardGlass title="Features" subtitle="What we offer">
-  <p>Your content here...</p>
-</XMarkCardGlass>
-
-<!-- With glow effect -->
-<XMarkCardGlass title="Premium" :glow="true" size="lg">
-  <p>Highlighted card with animated glow border</p>
-</XMarkCardGlass>
-
-<!-- Using slots for custom layout -->
-<XMarkCardGlass>
-  <template #header>
-    <div class="flex items-center gap-3">
-      <UIcon name="i-lucide-star" class="w-5 h-5" />
-      <h3 class="font-semibold">Custom Header</h3>
-    </div>
-  </template>
-
-  <p>Main content goes here</p>
-
-  <template #footer>
-    <UButton size="sm">Action</UButton>
-  </template>
-</XMarkCardGlass>`
-</script>

package/.playground/pages/ui/glow-divider.vue

@@ -1,179 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Glow Divider</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Horizontal divider with layered glow effect.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Basic -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Basic Divider</h2>
-        <div class="bg-neutral-900 rounded-lg p-8">
-          <p class="text-neutral-400 mb-4">Content above divider</p>
-          <XMarkDividerGlow />
-          <p class="text-neutral-400 mt-4">Content below divider</p>
-        </div>
-      </section>
-
-      <!-- Color Options -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Color Options</h2>
-        <div class="space-y-8">
-          <div class="bg-neutral-900 rounded-lg p-8">
-            <p class="text-white mb-2 text-sm">Primary (default)</p>
-            <XMarkDividerGlow color="primary" spacing="py-4" />
-          </div>
-          <div class="bg-neutral-900 rounded-lg p-8">
-            <p class="text-white mb-2 text-sm">Cyan</p>
-            <XMarkDividerGlow color="cyan" spacing="py-4" />
-          </div>
-          <div class="bg-neutral-900 rounded-lg p-8">
-            <p class="text-white mb-2 text-sm">Blue</p>
-            <XMarkDividerGlow color="blue" spacing="py-4" />
-          </div>
-          <div class="bg-neutral-900 rounded-lg p-8">
-            <p class="text-white mb-2 text-sm">Purple</p>
-            <XMarkDividerGlow color="purple" spacing="py-4" />
-          </div>
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-8">
-            <p class="text-neutral-600 dark:text-neutral-400 mb-2 text-sm">Neutral</p>
-            <XMarkDividerGlow color="neutral" spacing="py-4" />
-          </div>
-          <div class="bg-neutral-900 rounded-lg p-8">
-            <p class="text-white mb-2 text-sm">White</p>
-            <XMarkDividerGlow color="white" spacing="py-4" />
-          </div>
-        </div>
-      </section>
-
-      <!-- Intensity -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Glow Intensity</h2>
-        <div class="bg-neutral-900 rounded-lg p-8 space-y-8">
-          <div>
-            <p class="text-white mb-2 text-sm">None (line only)</p>
-            <XMarkDividerGlow intensity="none" spacing="py-4" />
-          </div>
-          <div>
-            <p class="text-white mb-2 text-sm">Subtle</p>
-            <XMarkDividerGlow intensity="subtle" spacing="py-4" />
-          </div>
-          <div>
-            <p class="text-white mb-2 text-sm">Medium (default)</p>
-            <XMarkDividerGlow intensity="medium" spacing="py-4" />
-          </div>
-          <div>
-            <p class="text-white mb-2 text-sm">Strong</p>
-            <XMarkDividerGlow intensity="strong" spacing="py-4" />
-          </div>
-        </div>
-      </section>
-
-      <!-- Height -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Line Height</h2>
-        <div class="bg-neutral-900 rounded-lg p-8 space-y-8">
-          <div>
-            <p class="text-white mb-2 text-sm">Thin (1px)</p>
-            <XMarkDividerGlow height="thin" spacing="py-4" />
-          </div>
-          <div>
-            <p class="text-white mb-2 text-sm">Default (2px)</p>
-            <XMarkDividerGlow height="default" spacing="py-4" />
-          </div>
-          <div>
-            <p class="text-white mb-2 text-sm">Thick (4px)</p>
-            <XMarkDividerGlow height="thick" spacing="py-4" />
-          </div>
-        </div>
-      </section>
-
-      <!-- Spacing -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Vertical Spacing</h2>
-        <div class="bg-neutral-900 rounded-lg p-8">
-          <p class="text-neutral-400">Small spacing (py-4)</p>
-          <XMarkDividerGlow spacing="py-4" />
-          <p class="text-neutral-400">Medium spacing (py-8)</p>
-          <XMarkDividerGlow spacing="py-8" />
-          <p class="text-neutral-400">Large spacing (py-16)</p>
-          <XMarkDividerGlow spacing="py-16" />
-          <p class="text-neutral-400">End</p>
-        </div>
-      </section>
-
-      <!-- Combined Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Combined Example</h2>
-        <div class="bg-neutral-900 rounded-lg p-8">
-          <p class="text-white text-center text-lg mb-2">Section Title</p>
-          <p class="text-neutral-400 text-center text-sm">Some descriptive content here</p>
-          <XMarkDividerGlow color="cyan" intensity="strong" height="thick" spacing="py-12" />
-          <p class="text-neutral-400 text-center text-sm">Next section content</p>
-        </div>
-      </section>
-
-      <!-- Props -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Props</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Prop</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">color</td><td class="py-3 px-4">String</td><td class="py-3 px-4">primary</td><td class="py-3 px-4">Any Tailwind color, white, or neutral</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">spacing</td><td class="py-3 px-4">String</td><td class="py-3 px-4">py-16</td><td class="py-3 px-4">Tailwind padding class (e.g., py-8)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">intensity</td><td class="py-3 px-4">String</td><td class="py-3 px-4">medium</td><td class="py-3 px-4">none, subtle, medium, strong</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">height</td><td class="py-3 px-4">String</td><td class="py-3 px-4">default</td><td class="py-3 px-4">thin (1px), default (2px), thick (4px)</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Glow Divider Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Basic divider with glow -->
-<XMarkDividerGlow />
-
-<!-- Different colors -->
-<XMarkDividerGlow color="primary" />
-<XMarkDividerGlow color="cyan" />
-<XMarkDividerGlow color="white" />
-<XMarkDividerGlow color="neutral" />
-
-<!-- Intensity levels -->
-<XMarkDividerGlow intensity="none" />
-<XMarkDividerGlow intensity="subtle" />
-<XMarkDividerGlow intensity="medium" />
-<XMarkDividerGlow intensity="strong" />
-
-<!-- Line height -->
-<XMarkDividerGlow height="thin" />
-<XMarkDividerGlow height="default" />
-<XMarkDividerGlow height="thick" />
-
-<!-- Custom spacing (padding) -->
-<XMarkDividerGlow spacing="py-8" />
-<XMarkDividerGlow spacing="py-24" />
-
-<!-- Combined -->
-<XMarkDividerGlow
-  color="cyan"
-  intensity="strong"
-  height="thick"
-  spacing="py-12"
-/>`
-</script>