@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

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

@@ -0,0 +1,179 @@
+<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

@@ -0,0 +1,179 @@
+<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>

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

@@ -0,0 +1,259 @@
+<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">Promo Card</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Story-style promotional cards with background images.</p>
+    </div>
+
+    <div class="p-8 space-y-12">
+      <!-- Basic Grid -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Promo Card Grid</h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <XMarkCardPromo
+            v-for="card in promoCards"
+            :key="card.title"
+            :img="{ src: card.image }"
+            :title="card.title"
+            :badge="card.badge"
+          >
+            {{ card.description }}
+          </XMarkCardPromo>
+        </div>
+      </section>
+
+      <!-- Alignment Options -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Content Alignment</h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=400&h=600&fit=crop' }"
+            title="Bottom Left"
+            align="bottomLeft"
+          />
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400&h=600&fit=crop' }"
+            title="Bottom Right"
+            align="bottomRight"
+          />
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1557682268-e3955ed5d83f?w=400&h=600&fit=crop' }"
+            title="Bottom Center"
+            align="bottomCenter"
+          />
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?w=400&h=600&fit=crop' }"
+            title="Top Left"
+            badge="NEW"
+            align="topLeft"
+          />
+        </div>
+      </section>
+
+      <!-- Overlay Styles -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Overlay Styles</h2>
+        <div class="grid grid-cols-3 gap-4">
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1533134486753-c833f0ed4866?w=400&h=600&fit=crop' }"
+            title="Light Overlay"
+            overlay="light"
+          >
+            30% opacity
+          </XMarkCardPromo>
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1533134486753-c833f0ed4866?w=400&h=600&fit=crop' }"
+            title="Gradient Overlay"
+            overlay="gradient"
+          >
+            Default gradient
+          </XMarkCardPromo>
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1533134486753-c833f0ed4866?w=400&h=600&fit=crop' }"
+            title="Heavy Overlay"
+            overlay="heavy"
+          >
+            60% opacity
+          </XMarkCardPromo>
+        </div>
+      </section>
+
+      <!-- With CTA Button -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">With CTA Button</h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?w=400&h=600&fit=crop' }"
+            title="Summer Sale"
+            badge="50% OFF"
+            :button="{ label: 'Shop Now', color: 'white' }"
+          >
+            Limited time offer
+          </XMarkCardPromo>
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1614850523296-d8c1af93d400?w=400&h=600&fit=crop' }"
+            title="New Collection"
+            :button="{ label: 'Explore', variant: 'outline', color: 'white' }"
+          >
+            Fresh arrivals
+          </XMarkCardPromo>
+        </div>
+      </section>
+
+      <!-- Title Sizes -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Title Sizes</h2>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=400&h=600&fit=crop' }"
+            title="Small Title"
+            title-size="lg"
+          />
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400&h=600&fit=crop' }"
+            title="Default XL"
+            title-size="xl"
+          />
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1557682268-e3955ed5d83f?w=400&h=600&fit=crop' }"
+            title="Large 3XL"
+            title-size="3xl"
+          />
+          <XMarkCardPromo
+            :img="{ src: 'https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?w=400&h=600&fit=crop' }"
+            title="Hero 5XL"
+            title-size="5xl"
+          />
+        </div>
+      </section>
+
+      <!-- As Links -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">As Navigation Links</h2>
+        <p class="text-sm text-neutral-500 mb-4">Use the `to` prop to make cards navigable with NuxtLink</p>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <XMarkCardPromo
+            to="/blog"
+            :img="{ src: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=400&h=600&fit=crop' }"
+            title="Blog"
+            badge="NEW"
+            :button="{ label: 'Read More' }"
+          >
+            Latest articles
+          </XMarkCardPromo>
+          <XMarkCardPromo
+            to="/docs"
+            :img="{ src: 'https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=400&h=600&fit=crop' }"
+            title="Documentation"
+            :button="{ label: 'Get Started' }"
+          >
+            Learn the basics
+          </XMarkCardPromo>
+        </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">to</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Navigation URL (uses NuxtLink)</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">img</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">required</td><td class="py-3 px-4">{ src: string, alt?: string }</td></tr>
+            <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">required</td><td class="py-3 px-4">Card title</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">badge</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Optional badge text</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">button</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">null</td><td class="py-3 px-4">{ label: string, color?: string, variant?: string }</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">align</td><td class="py-3 px-4">String</td><td class="py-3 px-4">bottomLeft</td><td class="py-3 px-4">bottomLeft, bottomRight, bottomCenter, topLeft</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">overlay</td><td class="py-3 px-4">String</td><td class="py-3 px-4">gradient</td><td class="py-3 px-4">light, heavy, gradient</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">hoverable</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Enable lift on hover</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">titleSize</td><td class="py-3 px-4">String</td><td class="py-3 px-4">xl</td><td class="py-3 px-4">xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl</td></tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- Code Example -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
+        <CodeExample title="Promo Card Usage" :code="codeExample" />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const codeExample = `<!-- Basic promo card -->
+<XMarkCardPromo
+  :img="{ src: 'https://images.unsplash.com/photo-...' }"
+  title="Summer Sale"
+  badge="50% OFF"
+>
+  Limited time offer
+</XMarkCardPromo>
+
+<!-- With large title -->
+<XMarkCardPromo
+  :img="{ src: 'https://images.unsplash.com/photo-...' }"
+  title="Big Impact"
+  title-size="5xl"
+/>
+
+<!-- With CTA button -->
+<XMarkCardPromo
+  :img="{ src: 'https://images.unsplash.com/photo-...' }"
+  title="New Collection"
+  :button="{ label: 'Shop Now' }"
+  overlay="gradient"
+/>
+
+<!-- As navigation link -->
+<XMarkCardPromo
+  to="/products"
+  :img="{ src: 'https://images.unsplash.com/photo-...', alt: 'Products' }"
+  title="Browse Products"
+  :button="{ label: 'View All' }"
+/>
+
+<!-- Grid layout -->
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+  <XMarkCardPromo
+    v-for="card in cards"
+    :key="card.title"
+    :to="card.url"
+    :img="{ src: card.image, alt: card.title }"
+    :title="card.title"
+    :badge="card.badge"
+  />
+</div>`
+
+const promoCards = [
+  {
+    image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=600&fit=crop',
+    title: 'Design',
+    badge: 'NEW',
+    description: 'Modern aesthetics'
+  },
+  {
+    image: 'https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&h=600&fit=crop',
+    title: 'Development',
+    description: 'Clean code'
+  },
+  {
+    image: 'https://images.unsplash.com/photo-1618172193763-c511deb635ca?w=400&h=600&fit=crop',
+    title: 'Marketing',
+    badge: 'HOT',
+    description: 'Growth focused'
+  },
+  {
+    image: 'https://images.unsplash.com/photo-1618336753974-aae8e04506aa?w=400&h=600&fit=crop',
+    title: 'Analytics',
+    description: 'Data driven'
+  }
+]
+</script>