@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/layouts/docs-layout.vue

@@ -1,161 +0,0 @@
-<template>
-	<div class="min-h-screen bg-white dark:bg-gray-950">
-		<NuxtLoadingIndicator />
-
-		<DocsHeader />
-
-		<div class="flex h-[calc(100vh-3.5rem)]">
-			<!-- Collapsible Sidebar -->
-			<aside
-				class="hidden lg:flex lg:flex-col lg:border-r lg:border-gray-200 dark:lg:border-gray-800 transition-all duration-300"
-				:class="sidebarCollapsed ? 'lg:w-20' : 'lg:w-64'"
-			>
-				<!-- Toggle Button -->
-				<div
-					class="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-800"
-				>
-					<span
-						v-if="!sidebarCollapsed"
-						class="text-sm font-semibold text-gray-900 dark:text-white"
-					>
-						Navigation
-					</span>
-					<button
-						@click="sidebarCollapsed = !sidebarCollapsed"
-						class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
-						:title="sidebarCollapsed ? 'Expand' : 'Collapse'"
-					>
-						<UIcon
-							:name="
-								sidebarCollapsed
-									? 'i-lucide-chevron-right'
-									: 'i-lucide-chevron-left'
-							"
-							class="w-5 h-5"
-						/>
-					</button>
-				</div>
-
-				<!-- Navigation Menu -->
-				<nav class="flex-1 overflow-y-auto">
-					<UNavigationMenu
-						:items="navigationItems"
-						orientation="vertical"
-						:collapsed="sidebarCollapsed"
-						:tooltip="sidebarCollapsed"
-						:popover="sidebarCollapsed"
-						variant="link"
-						class="w-full"
-					/>
-				</nav>
-
-				<!-- Sidebar Footer -->
-				<div class="border-t border-gray-200 dark:border-gray-800 px-4 py-4">
-					<NuxtLink
-						to="/"
-						class="flex items-center gap-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-						:title="sidebarCollapsed ? 'Back to Demo' : ''"
-					>
-						<UIcon name="i-lucide-arrow-left" class="w-4 h-4 shrink-0" />
-						<span v-if="!sidebarCollapsed">Back to Demo</span>
-					</NuxtLink>
-				</div>
-			</aside>
-
-			<!-- Main Content - Full Screen -->
-			<main class="flex-1 overflow-y-auto">
-				<div class="w-full h-full px-4 sm:px-6 lg:px-8 py-8">
-					<slot />
-				</div>
-			</main>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { NavigationMenuItem } from "@nuxt/ui";
-
-const route = useRoute();
-const sidebarCollapsed = ref(false);
-
-const navigationItems: NavigationMenuItem[][] = [
-	[
-		{
-			label: "Getting Started",
-			icon: "i-lucide-book-open",
-			defaultOpen: true,
-			children: [
-				{ label: "Introduction", to: "/docs" },
-				{ label: "Quick Start", to: "/docs/quick-start" },
-				{ label: "Installation", to: "/docs/installation" },
-			],
-		},
-		{
-			label: "Hero Sections",
-			icon: "i-lucide-image",
-			children: [
-				{ label: "Hero Centered", to: "/docs/components/hero/centered" },
-				{ label: "Hero Split", to: "/docs/components/hero/split" },
-				{ label: "Hero Image", to: "/docs/components/hero/image" },
-				{ label: "Hero Video", to: "/docs/components/hero/video" },
-				{ label: "Hero Slider", to: "/docs/components/hero/slider" },
-			],
-		},
-		{
-			label: "Features",
-			icon: "i-lucide-sparkles",
-			children: [
-				{ label: "Feature Grid", to: "/docs/components/feature/grid" },
-				{ label: "Feature Card", to: "/docs/components/feature/card" },
-				{ label: "Feature Showcase", to: "/docs/components/feature/showcase" },
-				{ label: "Feature Preview", to: "/docs/components/feature/preview" },
-			],
-		},
-		{
-			label: "CTA & Conversion",
-			icon: "i-lucide-zap",
-			children: [
-				{ label: "CTA Section", to: "/docs/components/cta/section" },
-				{ label: "CTA Card", to: "/docs/components/cta/card" },
-				{ label: "CTA Banner", to: "/docs/components/cta/banner" },
-			],
-		},
-		{
-			label: "Content",
-			icon: "i-lucide-file-text",
-			children: [
-				{ label: "Testimonials", to: "/docs/components/testimonial" },
-				{ label: "Blog Grid", to: "/docs/components/blog/grid" },
-				{ label: "Blog Card", to: "/docs/components/blog/card" },
-				{ label: "FAQ", to: "/docs/components/faq" },
-			],
-		},
-		{
-			label: "Stats & Metrics",
-			icon: "i-lucide-bar-chart-3",
-			children: [
-				{ label: "Stats Section", to: "/docs/components/stats/section" },
-				{ label: "Stats Grid", to: "/docs/components/stats/grid" },
-			],
-		},
-		{
-			label: "Navigation & Layout",
-			icon: "i-lucide-layout",
-			children: [
-				{ label: "Header App", to: "/docs/components/header/app" },
-				{ label: "Header Nav", to: "/docs/components/header/nav" },
-				{ label: "Footer", to: "/docs/components/footer" },
-			],
-		},
-		{
-			label: "State",
-			icon: "i-lucide-inbox",
-			children: [
-				{ label: "Empty State", to: "/docs/components/state/empty" },
-				{ label: "Loading State", to: "/docs/components/state/loading" },
-			],
-		},
-	],
-];
-</script>
-

package/.playground/layouts/docs.vue

@@ -1,11 +0,0 @@
-<template>
-	<div>
-		<script setup>
-			definePageMeta({
-				layout: "docs-layout",
-			});
-		</script>
-		<slot />
-	</div>
-</template>
-

package/.playground/nuxt.config.ts

@@ -1,5 +0,0 @@
-export default defineNuxtConfig({
-  extends: ['..'],
-
-  compatibilityDate: "2024-10-23",
-});

package/.playground/package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": ".playground",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

package/.playground/pages/blog/author.vue

@@ -1,145 +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">Blog Author</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Author bios in inline, card, and full variants.</p>
-    </div>
-
-    <div class="space-y-0">
-      <!-- Inline Variant -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">variant="inline"</span>
-          <h2 class="xText-headline">Inline Variant</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Compact author info for post headers and bylines</p>
-        </div>
-        <div class="max-w-2xl mx-auto">
-          <XMarkBlogAuthor :author="author" variant="inline" />
-        </div>
-      </XMarkSection>
-
-      <!-- Card Variant -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">variant="card"</span>
-          <h2 class="xText-headline">Card Variant</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Author card for sidebars or author grids</p>
-        </div>
-        <div class="max-w-sm mx-auto">
-          <XMarkBlogAuthor :author="author" variant="card" />
-        </div>
-      </XMarkSection>
-
-      <!-- Full Variant -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">variant="full"</span>
-          <h2 class="xText-headline">Full Variant</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Complete author bio for post footers</p>
-        </div>
-        <div class="max-w-2xl mx-auto">
-          <XMarkBlogAuthor :author="author" variant="full" />
-        </div>
-      </XMarkSection>
-
-      <!-- Props -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-6">Props</h2>
-        <div class="overflow-x-auto">
-          <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 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">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">author</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">required</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Author data object</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">variant</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'inline'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">inline, sm, full, card</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Author Object Structure -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Author Object Structure</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
-          <pre>{
-  name: "Sarah Chen",
-  avatar: "https://...",
-  title: "Senior Developer",
-  bio: "Sarah specializes in Vue.js and Nuxt...",
-  social: {
-    twitter: "https://twitter.com/sarahchen",
-    linkedin: "https://linkedin.com/in/sarahchen",
-    github: "https://github.com/sarahchen"
-  }
-}</pre>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Blog Author Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<!-- Inline - for post headers -->
-<XMarkBlogAuthor :author="author" variant="inline" />
-
-<!-- Small - compact byline -->
-<XMarkBlogAuthor :author="author" variant="sm" />
-
-<!-- Card - for sidebars -->
-<XMarkBlogAuthor :author="author" variant="card" />
-
-<!-- Full - for post footers -->
-<XMarkBlogAuthor :author="author" variant="full" />
-
-<!-- Author data structure -->
-<script setup>
-const author = {
-  name: 'Sarah Chen',
-  avatar: 'https://...',
-  title: 'Senior Developer',
-  bio: 'Sarah specializes in Vue.js and Nuxt...',
-  social: {
-    twitter: 'https://twitter.com/sarahchen',
-    linkedin: 'https://linkedin.com/in/sarahchen',
-    github: 'https://github.com/sarahchen'
-  }
-}
-<\/script>`
-
-const author = {
-  name: 'Sarah Chen',
-  avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop',
-  title: 'Senior Developer',
-  bio: 'Sarah is a frontend developer with 8+ years of experience. She specializes in Vue.js and Nuxt, and loves creating beautiful, performant web applications. When not coding, she enjoys hiking and photography.',
-  social: {
-    twitter: 'https://twitter.com/sarahchen',
-    linkedin: 'https://linkedin.com/in/sarahchen',
-    github: 'https://github.com/sarahchen'
-  }
-}
-</script>

package/.playground/pages/blog/card.vue

@@ -1,149 +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">Blog Card</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Blog post cards with image, metadata, and excerpts.</p>
-    </div>
-
-    <div class="p-8">
-      <!-- Default Cards -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Default Cards</h2>
-        <div class="grid md:grid-cols-3 gap-8 max-w-6xl">
-          <XMarkBlogCard
-            v-for="post in posts"
-            :key="post.slug"
-            :post="post"
-          />
-        </div>
-      </section>
-
-      <!-- With Button -->
-      <section class="mt-12">
-        <h2 class="text-lg font-semibold mb-4">With Button</h2>
-        <p class="text-sm text-neutral-500 mb-4">Add a full-width button below the card content</p>
-        <div class="grid md:grid-cols-3 gap-8 max-w-6xl">
-          <XMarkBlogCard
-            v-for="post in posts"
-            :key="`btn-${post.slug}`"
-            :post="post"
-            :button="{ label: 'Read More', icon: 'i-lucide-arrow-right' }"
-          />
-        </div>
-      </section>
-
-      <div class="mt-12">
-        <h2 class="text-lg font-semibold mb-4">Post Object Shape</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
-          <pre>{
-  title: "Post Title",
-  description: "Brief description...",
-  img: { src: "https://...", alt: "Image description" },
-  slug: "post-slug",
-  date: "2024-01-15",
-  readingTime: 5,
-  author: { name: "Author", avatar: "https://..." },
-  category: "Tutorial"
-}</pre>
-        </div>
-      </div>
-
-      <div class="mt-8">
-        <h2 class="text-lg font-semibold mb-4">Component 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">post</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Blog post object (see shape above)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">hasCategory</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show category badge</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">hasAuthor</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show author info</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">hasExcerpt</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show description</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, color?, variant?, icon? }</td></tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Code Example -->
-      <section class="mt-12">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Blog Card Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<!-- Single blog card -->
-<XMarkBlogCard
-  :post="{
-    title: 'Getting Started with Nuxt',
-    description: 'Learn the basics of building modern web apps.',
-    img: { src: 'https://images.unsplash.com/...', alt: 'Code on screen' },
-    slug: 'getting-started',
-    date: '2024-01-15',
-    readingTime: 5,
-    author: { name: 'Sarah Chen', avatar: 'https://...' },
-    category: 'Tutorial'
-  }"
-/>
-
-<!-- With button -->
-<XMarkBlogCard
-  :post="post"
-  :button="{ label: 'Read More', icon: 'i-lucide-arrow-right' }"
-/>
-
-<!-- Without author -->
-<XMarkBlogCard :post="post" :has-author="false" />
-
-<!-- Grid of blog cards -->
-<div class="grid md:grid-cols-3 gap-8">
-  <XMarkBlogCard
-    v-for="post in posts"
-    :key="post.slug"
-    :post="post"
-  />
-</div>`
-
-const posts = [
-  {
-    title: 'Getting Started with Nuxt',
-    description: 'Learn the basics of building modern web applications with Nuxt 3.',
-    img: { src: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&h=300&fit=crop', alt: 'Code on laptop' },
-    slug: 'getting-started',
-    date: '2024-01-15',
-    readingTime: 5,
-    author: { name: 'Sarah Chen', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&fit=crop' },
-    category: 'Tutorial'
-  },
-  {
-    title: 'Vue 3 Composition API',
-    description: 'Mastering the composition API for cleaner, more reusable code.',
-    img: { src: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop', alt: 'Programming code' },
-    slug: 'composition-api',
-    date: '2024-01-10',
-    readingTime: 8,
-    author: { name: 'Michael Torres', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50&h=50&fit=crop' },
-    category: 'Development'
-  },
-  {
-    title: 'Building Design Systems',
-    description: 'Create consistent, scalable design systems for your projects.',
-    img: { src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop', alt: 'Design dashboard' },
-    slug: 'design-systems',
-    date: '2024-01-05',
-    readingTime: 6,
-    author: { name: 'Emma Williams', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop' },
-    category: 'Design'
-  }
-]
-</script>

package/.playground/pages/blog/cta.vue

@@ -1,131 +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">Blog Newsletter CTA</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">In-article call-to-action for newsletter signups.</p>
-    </div>
-
-    <div class="p-8 space-y-16">
-      <div class="space-y-12">
-        <!-- Default -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Default</h3>
-          <div class="max-w-2xl">
-            <XMarkBlogCTANewsletter
-              title="Enjoying this article?"
-              description="Subscribe to get notified when we publish new content."
-              :button="{ label: 'Subscribe' }"
-            />
-          </div>
-        </section>
-
-        <!-- Featured -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Featured</h3>
-          <div class="max-w-2xl">
-            <XMarkBlogCTANewsletter
-              title="Join our newsletter"
-              description="Get the latest posts delivered right to your inbox."
-              :button="{ label: 'Subscribe Now' }"
-              variant="featured"
-            />
-          </div>
-        </section>
-
-        <!-- Inline -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Inline</h3>
-          <div class="max-w-2xl">
-            <XMarkBlogCTANewsletter
-              title="Stay updated"
-              description="New posts every week."
-              :button="{ label: 'Join' }"
-              variant="inline"
-            />
-          </div>
-        </section>
-
-        <!-- Compact -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Compact (for sidebars)</h3>
-          <div class="max-w-xs">
-            <XMarkBlogCTANewsletter
-              title="Subscribe"
-              description="Get notified about new posts."
-              :button="{ label: 'Subscribe' }"
-              variant="compact"
-            />
-          </div>
-        </section>
-      </div>
-
-      <!-- Props Documentation -->
-      <div class="border-t border-neutral-200 dark:border-neutral-800 pt-16">
-        <h2 class="text-lg font-semibold mb-6">Props</h2>
-        <div class="overflow-x-auto">
-          <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 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">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">'Subscribe to our newsletter'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">CTA heading</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">description</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Get the latest posts...'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Supporting 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">{ label: 'Subscribe' }</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Button config { label, color? }</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">placeholder</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Enter your email'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Email input placeholder</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">variant</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'default'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">default, featured, inline, compact</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">icon</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'i-lucide-mail'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Optional icon name</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">hasPrivacy</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Show privacy note</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">privacyText</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'No spam. Unsubscribe anytime.'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Privacy note text</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">successMessage</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Thanks for subscribing!'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Message shown on success</td></tr>
-            </tbody>
-          </table>
-        </div>
-
-        <h2 class="text-lg font-semibold mt-12 mb-4">Events</h2>
-        <div class="space-y-4">
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">@submit</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Emitted with email address when newsletter form is submitted</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Blog Newsletter CTA" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Default -->
-<XMarkBlogCTANewsletter
-  title="Enjoying this article?"
-  description="Subscribe to get notified."
-  :button="{ label: 'Subscribe' }"
-  @submit="handleSubscribe"
-/>
-
-<!-- Featured -->
-<XMarkBlogCTANewsletter
-  title="Join our newsletter"
-  :button="{ label: 'Subscribe Now' }"
-  variant="featured"
-  @submit="handleSubscribe"
-/>
-
-<!-- Compact (for sidebars) -->
-<XMarkBlogCTANewsletter
-  title="Subscribe"
-  :button="{ label: 'Join' }"
-  variant="compact"
-  @submit="handleSubscribe"
-/>`
-</script>