@xenterprises/nuxt-x-marketing 1.0.3 → 1.1.0

package/.playground/pages/content/features.vue

@@ -1,217 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <!-- Page Header -->
-    <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">Features</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Feature grids with icons, images, and multiple layout options.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="space-y-0">
-      <!-- Grid Layout - 3 Columns -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-12">
-          <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">layout="grid" columns="3"</span>
-          <h2 class="xText-headline">Grid Layout - 3 Columns</h2>
-        </div>
-        <XMarkFeatures
-          :features="featuresWithIcons"
-          layout="grid"
-          :columns="3"
-        />
-      </XMarkSection>
-
-      <!-- Grid Layout - 2 Columns -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-12">
-          <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">layout="grid" columns="2"</span>
-          <h2 class="xText-headline">Grid Layout - 2 Columns</h2>
-        </div>
-        <XMarkFeatures
-          :features="featuresWithIcons.slice(0, 4)"
-          layout="grid"
-          :columns="2"
-        />
-      </XMarkSection>
-
-      <!-- Grid Layout - 4 Columns -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-12">
-          <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">layout="grid" columns="4"</span>
-          <h2 class="xText-headline">Grid Layout - 4 Columns</h2>
-        </div>
-        <XMarkFeatures
-          :features="featuresWithIcons.slice(0, 4)"
-          layout="grid"
-          :columns="4"
-        />
-      </XMarkSection>
-
-      <!-- List Layout -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-12">
-          <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">layout="list"</span>
-          <h2 class="xText-headline">List Layout</h2>
-        </div>
-        <XMarkFeatures
-          :features="featuresWithIcons.slice(0, 3)"
-          layout="list"
-        />
-      </XMarkSection>
-
-      <!-- With Images -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-12">
-          <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">With Images</span>
-          <h2 class="xText-headline">Features with Images</h2>
-        </div>
-        <XMarkFeatures
-          :features="featuresWithImages"
-          layout="grid"
-          :columns="3"
-        />
-      </XMarkSection>
-
-      <!-- Props Documentation -->
-      <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">features</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">required</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Array of { icon?, img?: { src, alt? }, title, description, link?: string | { to, label?, target? } }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">layout</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'grid'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">grid, list, alternating</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">columns</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">3</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">2, 3, or 4 columns</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Features Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<XMarkFeatures
-  :features="[
-    {
-      icon: 'i-lucide-zap',
-      title: 'Lightning Fast',
-      description: 'Optimized for performance.',
-      link: '/features/speed'
-    },
-    {
-      icon: 'i-lucide-shield',
-      title: 'Secure',
-      description: 'Built with security best practices.',
-      link: '/features/security'
-    },
-    {
-      icon: 'i-lucide-palette',
-      title: 'Customizable',
-      description: 'Easy to customize with Tailwind.',
-      link: '/features/design'
-    }
-  ]"
-  layout="grid"
-  :columns="3"
-/>
-
-<!-- With images instead of icons -->
-<XMarkFeatures
-  :features="featuresWithImages"
-  layout="list"
-/>`
-
-const featuresWithIcons = [
-  {
-    icon: 'i-lucide-zap',
-    title: 'Lightning Fast',
-    description: 'Optimized for performance with minimal overhead and maximum efficiency.',
-    link: '#'
-  },
-  {
-    icon: 'i-lucide-shield',
-    title: 'Secure by Default',
-    description: 'Built with security best practices and regular vulnerability assessments.',
-    link: '#'
-  },
-  {
-    icon: 'i-lucide-palette',
-    title: 'Highly Customizable',
-    description: 'Easy to customize with Tailwind CSS and design tokens.',
-    link: '#'
-  },
-  {
-    icon: 'i-lucide-code',
-    title: 'Developer Friendly',
-    description: 'Clean APIs and comprehensive documentation for rapid development.',
-    link: '#'
-  },
-  {
-    icon: 'i-lucide-globe',
-    title: 'Globally Available',
-    description: 'Edge-deployed for low latency access from anywhere in the world.',
-    link: '#'
-  },
-  {
-    icon: 'i-lucide-headphones',
-    title: '24/7 Support',
-    description: 'Round-the-clock support to help you succeed with our platform.',
-    link: '#'
-  }
-]
-
-const featuresWithImages = [
-  {
-    img: { src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop', alt: 'Analytics dashboard' },
-    title: 'Analytics Dashboard',
-    description: 'Gain insights with our powerful analytics and reporting tools.',
-    link: '#'
-  },
-  {
-    img: { src: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop', alt: 'Team collaboration' },
-    title: 'Team Collaboration',
-    description: 'Work together seamlessly with real-time collaboration features.',
-    link: '#'
-  },
-  {
-    img: { src: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop', alt: 'API integration' },
-    title: 'API Integration',
-    description: 'Connect with your favorite tools through our robust API.',
-    link: '#'
-  }
-]
-</script>

package/.playground/pages/content/newsletter-section.vue

@@ -1,260 +0,0 @@
-<template>
-	<div>
-		<!-- Page Header -->
-		<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">Newsletter Section</h1>
-			<p class="mt-2 text-neutral-600 dark:text-neutral-400">
-				A newsletter signup section designed to fit between Footer and LegalFooter.
-			</p>
-		</div>
-
-		<div class="space-y-16 pb-16">
-			<!-- Dark Variant (Default) -->
-			<section>
-				<div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-					<h2 class="text-lg font-semibold">Dark Variant (Default)</h2>
-					<p class="text-sm text-neutral-600 dark:text-neutral-400">
-						Matches the footer dark background
-					</p>
-				</div>
-				<XMarkSectionNewsletter
-					title="Subscribe to our newsletter"
-					description="Get the latest news and updates."
-					@submit="handleSubmit"
-				/>
-			</section>
-
-			<!-- Light Variant -->
-			<section>
-				<div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-					<h2 class="text-lg font-semibold">Light Variant</h2>
-					<p class="text-sm text-neutral-600 dark:text-neutral-400">
-						For use with light backgrounds
-					</p>
-				</div>
-				<XMarkSectionNewsletter
-					variant="light"
-					title="Stay in the loop"
-					description="Weekly insights delivered to your inbox."
-					:button="{ label: 'Join' }"
-					@submit="handleSubmit"
-				/>
-			</section>
-
-			<!-- Custom Content -->
-			<section>
-				<div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-					<h2 class="text-lg font-semibold">Custom Content</h2>
-					<p class="text-sm text-neutral-600 dark:text-neutral-400">
-						All text is customizable
-					</p>
-				</div>
-				<XMarkSectionNewsletter
-					title="Join 10,000+ subscribers"
-					description="Get exclusive content, early access, and special offers."
-					placeholder="you@company.com"
-					:button="{ label: 'Get Started' }"
-					privacy-text="We respect your privacy. Read our privacy policy."
-					success-message="You're on the list!"
-					@submit="handleSubmit"
-				/>
-			</section>
-
-			<!-- Full Page Example -->
-			<section>
-				<div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-					<h2 class="text-lg font-semibold">Full Layout Example</h2>
-					<p class="text-sm text-neutral-600 dark:text-neutral-400">
-						How it looks between Footer and LegalFooter
-					</p>
-				</div>
-				<div class="border border-dashed border-neutral-300 dark:border-neutral-700">
-					<!-- Simulated Footer Content -->
-					<div class="bg-neutral-950 text-white px-8 py-12">
-						<div class="max-w-7xl mx-auto">
-							<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
-								<div class="col-span-2">
-									<div class="text-xl font-bold">Your Logo</div>
-									<p class="mt-4 text-neutral-400 max-w-xs">
-										Building the future of digital experiences.
-									</p>
-								</div>
-								<div>
-									<h4 class="font-semibold text-sm uppercase tracking-wider text-neutral-300 mb-4">Product</h4>
-									<ul class="space-y-2 text-sm text-neutral-400">
-										<li>Features</li>
-										<li>Pricing</li>
-										<li>Documentation</li>
-									</ul>
-								</div>
-								<div>
-									<h4 class="font-semibold text-sm uppercase tracking-wider text-neutral-300 mb-4">Company</h4>
-									<ul class="space-y-2 text-sm text-neutral-400">
-										<li>About</li>
-										<li>Blog</li>
-										<li>Careers</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<!-- Newsletter Section -->
-					<XMarkSectionNewsletter
-						title="Subscribe to our newsletter"
-						description="Get the latest news and updates."
-						@submit="handleSubmit"
-					/>
-
-					<!-- Simulated Legal Footer -->
-					<div class="bg-neutral-950 border-t border-neutral-800 px-8 py-6">
-						<div class="max-w-7xl mx-auto flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-							<p class="text-sm text-neutral-500">© 2024 Your Company. All rights reserved.</p>
-							<nav class="flex gap-6">
-								<span class="text-sm text-neutral-500">Privacy Policy</span>
-								<span class="text-sm text-neutral-500">Terms of Service</span>
-							</nav>
-						</div>
-					</div>
-				</div>
-			</section>
-
-			<!-- Props Documentation -->
-			<section class="px-8">
-				<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">Section title</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 news and updates.'</td>
-								<td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Section description</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">Input placeholder 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">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 after submission</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">'dark'</td>
-								<td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">'dark' or 'light'</td>
-							</tr>
-							<tr>
-								<td class="py-3 px-4 font-mono text-xs">resetDelay</td>
-								<td class="py-3 px-4">Number</td>
-								<td class="py-3 px-4">5000</td>
-								<td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Reset form after delay (ms), 0 to not reset</td>
-							</tr>
-							<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">null</td>
-								<td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">dots, grid, diagonal, topography, circuit, waves</td>
-							</tr>
-							<tr>
-								<td class="py-3 px-4 font-mono text-xs">patternOpacity</td>
-								<td class="py-3 px-4">Number</td>
-								<td class="py-3 px-4">0.05</td>
-								<td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Pattern opacity (0 to 1)</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-			</section>
-
-			<!-- Events -->
-			<section class="px-8">
-				<h2 class="text-lg font-semibold mb-4">Events</h2>
-				<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 when form is submitted. Payload: email address (string)
-					</p>
-				</div>
-			</section>
-
-			<!-- Code Example -->
-			<section class="px-8">
-				<h2 class="text-lg font-semibold mb-4">Code Example</h2>
-				<CodeExample title="Newsletter Section Usage" :code="codeExample" />
-			</section>
-		</div>
-	</div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Dark variant (between Footer and LegalFooter) -->
-<XMarkLayoutFooter ... />
-<XMarkSectionNewsletter
-  title="Subscribe to our newsletter"
-  description="Get the latest news and updates."
-  @submit="handleSubmit"
-/>
-<XMarkLayoutFooterLegal />
-
-<!-- Light variant -->
-<XMarkSectionNewsletter
-  variant="light"
-  title="Stay in the loop"
-  :button="{ label: 'Join' }"
-  @submit="handleSubmit"
-/>
-
-<!-- Custom content -->
-<XMarkSectionNewsletter
-  title="Join 10,000+ subscribers"
-  description="Get exclusive content and early access."
-  placeholder="you@company.com"
-  :button="{ label: 'Get Started' }"
-  privacy-text="We respect your privacy."
-  success-message="You're on the list!"
-  :reset-delay="3000"
-  @submit="handleSubmit"
-/>`
-
-const handleSubmit = (email) => {
-	console.log('Newsletter signup:', email)
-}
-</script>

package/.playground/pages/content/newsletter.vue

@@ -1,200 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <!-- Page Header -->
-    <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">Newsletter</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Email signup forms in multiple layout variants.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="space-y-0">
-      <!-- Default 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="default"</span>
-          <h2 class="text-lg font-semibold">Default Variant</h2>
-          <p class="text-neutral-600 dark:text-neutral-400">Centered layout with title and description</p>
-        </div>
-        <XMarkNewsletterForm
-          title="Subscribe to our newsletter"
-          description="Get the latest updates, articles, and resources delivered to your inbox weekly."
-          :button="{ label: 'Subscribe' }"
-          variant="default"
-          :has-privacy="true"
-        />
-      </XMarkSection>
-
-      <!-- Inline 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="inline"</span>
-          <h2 class="text-lg font-semibold">Inline Variant</h2>
-          <p class="text-neutral-600 dark:text-neutral-400">Side-by-side layout for footers and headers</p>
-        </div>
-        <XMarkNewsletterForm
-          title="Stay up to date"
-          description="No spam, just valuable content."
-          :button="{ label: 'Join' }"
-          variant="inline"
-          :has-privacy="false"
-        />
-      </XMarkSection>
-
-      <!-- Card 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="card"</span>
-          <h2 class="text-lg font-semibold">Card Variant</h2>
-          <p class="text-neutral-600 dark:text-neutral-400">Contained card with background</p>
-        </div>
-        <div class="max-w-2xl mx-auto">
-          <XMarkNewsletterForm
-            title="Join our community"
-            description="Get exclusive content, early access, and special offers."
-            :button="{ label: 'Sign Up' }"
-            variant="card"
-            :has-privacy="true"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Compact 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="compact"</span>
-          <h2 class="text-lg font-semibold">Compact Variant</h2>
-          <p class="text-neutral-600 dark:text-neutral-400">Minimal for sidebars and tight spaces</p>
-        </div>
-        <div class="max-w-sm mx-auto">
-          <XMarkNewsletterForm
-            title="Newsletter"
-            description="Weekly insights delivered to your inbox."
-            :button="{ label: 'Subscribe' }"
-            variant="compact"
-            :has-privacy="true"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Without Privacy Note -->
-      <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">hasPrivacy="false"</span>
-          <h2 class="text-lg font-semibold">Without Privacy Note</h2>
-        </div>
-        <XMarkNewsletterForm
-          title="Get notified"
-          description="Be the first to know when we launch new features."
-          :button="{ label: 'Notify Me' }"
-          variant="default"
-          :has-privacy="false"
-        />
-      </XMarkSection>
-
-      <!-- Props Documentation -->
-      <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">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">Heading text</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">''</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">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, inline, card, compact</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 "No spam" privacy note</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Events -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold 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 form is submitted</p>
-          </div>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Newsletter Form Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<!-- Default centered layout -->
-<XMarkNewsletterForm
-  title="Subscribe to our newsletter"
-  description="Get weekly updates delivered to your inbox."
-  :button="{ label: 'Subscribe' }"
-  @submit="handleSubmit"
-/>
-
-<!-- Inline layout for footers -->
-<XMarkNewsletterForm
-  title="Stay updated"
-  :button="{ label: 'Join', color: 'secondary' }"
-  variant="inline"
-  :has-privacy="false"
-  @submit="handleSubmit"
-/>
-
-<!-- Card variant -->
-<XMarkNewsletterForm
-  title="Join our community"
-  description="Get exclusive content."
-  variant="card"
-  @submit="handleSubmit"
-/>
-
-<!-- Compact for sidebars -->
-<XMarkNewsletterForm
-  title="Newsletter"
-  variant="compact"
-  @submit="handleSubmit"
-/>`
-</script>