@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/modals/video-modal.vue

@@ -1,222 +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">Video Modal</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Cinematic video modal with built-in triggers, multiple sizes, and dark overlay.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Thumbnail Trigger -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Thumbnail Trigger</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click the thumbnail to open the video modal. Play button overlay is automatic.</p>
-        <div class="max-w-lg">
-          <XMarkModalVideo
-            src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-            thumbnail="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=600&h=340&fit=crop"
-            title="Sample YouTube Video"
-            description="YouTube videos are automatically embedded with autoplay support."
-          />
-        </div>
-      </section>
-
-      <!-- Modal Sizes -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Modal Sizes</h2>
-        <p class="text-sm text-neutral-500 mb-4">Control the modal width with the size prop.</p>
-        <div class="flex flex-wrap gap-4">
-          <XMarkModalVideo
-            src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-            size="2xl"
-            :button="{ label: 'Size 2xl' }"
-          />
-          <XMarkModalVideo
-            src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-            size="4xl"
-            :button="{ label: 'Size 4xl (default)' }"
-          />
-          <XMarkModalVideo
-            src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-            size="6xl"
-            :button="{ label: 'Size 6xl' }"
-          />
-          <XMarkModalVideo
-            src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-            size="full"
-            :button="{ label: 'Size full (95vw)' }"
-          />
-        </div>
-      </section>
-
-      <!-- Button Object -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Button Object</h2>
-        <p class="text-sm text-neutral-500 mb-4">Configure the trigger button with a single object prop.</p>
-        <div class="flex flex-wrap gap-4">
-          <XMarkModalVideo
-            src="https://vimeo.com/76979871"
-            title="Vimeo Video"
-            :button="{ label: 'Watch Vimeo', color: 'primary' }"
-          />
-          <XMarkModalVideo
-            src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-            :button="{ label: 'Play Video', color: 'secondary', variant: 'outline' }"
-          />
-          <XMarkModalVideo
-            src="https://www.w3schools.com/html/mov_bbb.mp4"
-            title="Direct Video"
-            :button="{ label: 'View Demo', color: 'neutral', size: 'lg', icon: 'i-lucide-video' }"
-            :autoplay="false"
-          />
-        </div>
-      </section>
-
-      <!-- Custom Trigger -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Trigger (Slot)</h2>
-        <p class="text-sm text-neutral-500 mb-4">Use the default slot for a completely custom trigger.</p>
-        <XMarkModalVideo
-          src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          title="Custom Trigger Demo"
-          size="5xl"
-        >
-          <UButton size="lg" label="Watch the Demo" leading-icon="i-lucide-play" />
-        </XMarkModalVideo>
-      </section>
-
-      <!-- Minimal (No Title) -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Minimal Modal (No Footer)</h2>
-        <p class="text-sm text-neutral-500 mb-4">Omit title/description for a clean, video-only modal.</p>
-        <XMarkModalVideo
-          src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          :button="{ label: 'Clean Modal', variant: 'subtle' }"
-        />
-      </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">src</td><td class="py-3 px-4">String</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Video URL (YouTube, Vimeo, or direct)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">thumbnail</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Thumbnail image (shows image with play button)</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">''</td><td class="py-3 px-4">Video title (shown in footer)</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">Video description (shown in footer)</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">'4xl'</td><td class="py-3 px-4">lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">autoplay</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Autoplay when modal opens</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">{}</td><td class="py-3 px-4">{ label, color, variant, size, icon }</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">poster</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Poster image for direct videos</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">captions</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Captions file URL</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Button Object -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Button Object Properties</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">Property</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</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">label</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Watch Video'</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">'primary'</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">'solid'</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></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-play'</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Supported Formats -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Supported Video Sources</h2>
-        <div class="grid md:grid-cols-3 gap-4">
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-medium mb-2">YouTube</h3>
-            <ul class="text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
-              <li>youtube.com/watch?v=...</li>
-              <li>youtu.be/...</li>
-              <li>youtube.com/embed/...</li>
-            </ul>
-          </div>
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-medium mb-2">Vimeo</h3>
-            <ul class="text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
-              <li>vimeo.com/12345</li>
-            </ul>
-          </div>
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-medium mb-2">Direct</h3>
-            <ul class="text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
-              <li>.mp4, .webm, .ogg</li>
-              <li>Any direct video URL</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Video Modal Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- With thumbnail trigger -->
-<XMarkModalVideo
-  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-  thumbnail="/images/video-thumb.jpg"
-  title="Product Demo"
-  description="Watch our 3-minute overview."
-  size="5xl"
-/>
-
-<!-- With button trigger (object) -->
-<XMarkModalVideo
-  src="https://vimeo.com/76979871"
-  title="Customer Story"
-  :button="{
-    label: 'Watch Video',
-    color: 'primary',
-    variant: 'solid',
-    size: 'lg',
-    icon: 'i-lucide-play'
-  }"
-/>
-
-<!-- Large modal size -->
-<XMarkModalVideo
-  src="https://www.youtube.com/watch?v=..."
-  size="full"
-  :button="{ label: 'Full Screen' }"
-/>
-
-<!-- Custom trigger (slot) -->
-<XMarkModalVideo src="https://www.youtube.com/watch?v=...">
-  <UButton size="lg" label="Watch Video" leading-icon="i-lucide-play" />
-</XMarkModalVideo>
-
-<!-- Minimal (no footer) -->
-<XMarkModalVideo
-  src="/videos/demo.mp4"
-  :button="{ label: 'Play' }"
-  :autoplay="false"
-/>`
-</script>

package/.playground/pages/notifications/announcement-bar.vue

@@ -1,164 +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">Announcement Bar</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Top-of-page banner for announcements and promotions.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo Bars -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Variants</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click the buttons to show different announcement bar styles</p>
-        <div class="flex flex-wrap gap-3 mb-6">
-          <UButton @click="showBar('primary')">Primary</UButton>
-          <UButton color="neutral" @click="showBar('neutral')">Neutral</UButton>
-          <UButton color="success" @click="showBar('success')">Success</UButton>
-          <UButton color="warning" @click="showBar('warning')">Warning</UButton>
-          <UButton color="error" @click="showBar('error')">Error</UButton>
-        </div>
-
-        <!-- Demo Container -->
-        <div class="relative bg-neutral-100 dark:bg-neutral-800 rounded-lg overflow-hidden min-h-[200px]">
-          <XMarkLayoutAnnouncementBar
-            v-if="activeBar"
-            :message="barConfig.message"
-            :badge="barConfig.badge"
-            :icon="barConfig.icon"
-            :link="barConfig.link"
-            :link-text="barConfig.linkText"
-            :variant="activeBar"
-            :dismissible="true"
-            storage-key=""
-            @dismiss="activeBar = null"
-          />
-          <div class="p-8 pt-16">
-            <p class="text-neutral-600 dark:text-neutral-400">Page content below announcement bar</p>
-          </div>
-        </div>
-      </section>
-
-      <!-- With Icon and Badge -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">With Icon and Badge</h2>
-        <div class="relative bg-neutral-100 dark:bg-neutral-800 rounded-lg overflow-hidden">
-          <XMarkLayoutAnnouncementBar
-            message="Join us for our annual conference next month"
-            badge="NEW"
-            icon="i-lucide-calendar"
-            link="#"
-            link-text="Register now"
-            variant="primary"
-            :dismissible="false"
-            storage-key=""
-          />
-        </div>
-      </section>
-
-      <!-- Simple Version -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Simple Message</h2>
-        <div class="relative bg-neutral-100 dark:bg-neutral-800 rounded-lg overflow-hidden">
-          <XMarkLayoutAnnouncementBar
-            message="Free shipping on orders over $50"
-            variant="neutral"
-            :dismissible="false"
-            storage-key=""
-          />
-        </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">message</td><td class="py-3 px-4">String</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Main message text</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 before message</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">''</td><td class="py-3 px-4">Icon name (Lucide)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">link</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">CTA link URL</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">linkText</td><td class="py-3 px-4">String</td><td class="py-3 px-4">Learn more</td><td class="py-3 px-4">CTA link text</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">primary</td><td class="py-3 px-4">primary, neutral, success, warning, error</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">dismissible</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show close button</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">storageKey</td><td class="py-3 px-4">String</td><td class="py-3 px-4">announcement-dismissed</td><td class="py-3 px-4">LocalStorage key for dismissed state</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Events -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Events</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">Event</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">@dismiss</td><td class="py-3 px-4">Emitted when user dismisses the bar</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Announcement Bar Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Basic announcement -->
-<XMarkLayoutAnnouncementBar
-  message="Free shipping on orders over $50"
-  variant="neutral"
-/>
-
-<!-- Full featured with icon and link -->
-<XMarkLayoutAnnouncementBar
-  message="Our Black Friday sale is now live!"
-  badge="SALE"
-  icon="i-lucide-percent"
-  link="/sale"
-  link-text="Shop now"
-  variant="primary"
-  :dismissible="true"
-  storage-key="black-friday-2024"
-  @dismiss="handleDismiss"
-/>
-
-<!-- Variants: primary, neutral, success, warning, error -->
-<XMarkLayoutAnnouncementBar
-  message="Your order has been shipped!"
-  variant="success"
-  icon="i-lucide-package"
-/>`
-
-const activeBar = ref('primary')
-
-const barConfig = {
-  message: 'Our Black Friday sale is now live!',
-  badge: 'SALE',
-  icon: 'i-lucide-percent',
-  link: '#',
-  linkText: 'Shop now'
-}
-
-const showBar = (variant) => {
-  activeBar.value = null
-  setTimeout(() => {
-    activeBar.value = variant
-  }, 100)
-}
-</script>

package/.playground/pages/notifications/cookie-banner.vue

@@ -1,210 +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">Cookie Banner</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Bottom cookie consent banner with accept/reject options.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Cookie Banner Demo</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click the button to show the cookie banner (appears at bottom of page)</p>
-        <div class="flex gap-3">
-          <UButton @click="showBanner">Show Cookie Banner</UButton>
-          <UButton color="neutral" variant="outline" @click="resetConsent">Reset Consent</UButton>
-        </div>
-      </section>
-
-      <!-- Preview -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Preview</h2>
-        <div class="relative bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6 min-h-[300px]">
-          <p class="text-neutral-600 dark:text-neutral-400 mb-4">The banner appears at the bottom of the viewport:</p>
-          <!-- Static preview -->
-          <div class="absolute bottom-4 left-4 right-4">
-            <div class="bg-white dark:bg-neutral-900 rounded-xl shadow-2xl border border-neutral-200 dark:border-neutral-700 p-6">
-              <div class="flex flex-col lg:flex-row lg:items-center gap-4">
-                <div class="flex-1">
-                  <h4 class="font-semibold">We use cookies</h4>
-                  <p class="text-sm text-neutral-500 mt-1">
-                    We use cookies to improve your experience on our site.
-                    <NuxtLink to="#" class="text-primary-500 hover:underline">Learn more</NuxtLink>
-                  </p>
-                </div>
-                <div class="flex flex-wrap gap-3">
-                  <UButton variant="outline">Reject All</UButton>
-                  <UButton>Accept All</UButton>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- With Customize -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">With Customize Button</h2>
-        <UButton @click="showCustomizableBanner">Show with Customize Option</UButton>
-        <p class="text-sm text-neutral-500 mt-2">Includes a "Customize" button that can open GDPR preferences modal</p>
-      </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">We use cookies</td><td class="py-3 px-4">Banner title</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">message</td><td class="py-3 px-4">String</td><td class="py-3 px-4">We use cookies to...</td><td class="py-3 px-4">Banner message</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">policyLink</td><td class="py-3 px-4">String</td><td class="py-3 px-4">/privacy</td><td class="py-3 px-4">Privacy policy URL</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">policyLabel</td><td class="py-3 px-4">String</td><td class="py-3 px-4">Learn more</td><td class="py-3 px-4">Privacy link text</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">hasCustomize</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">false</td><td class="py-3 px-4">Show customize button</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">hasReject</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show reject button</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">storageKey</td><td class="py-3 px-4">String</td><td class="py-3 px-4">cookie-consent</td><td class="py-3 px-4">LocalStorage key</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Events -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Events</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">Event</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">@accept</td><td class="py-3 px-4">Emitted when user accepts all cookies</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">@reject</td><td class="py-3 px-4">Emitted when user rejects cookies</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">@customize</td><td class="py-3 px-4">Emitted when user clicks customize</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Cookie Banner Usage" :code="codeExample" />
-      </section>
-    </div>
-
-    <!-- Actual Banner Components -->
-    <XMarkPrivacyCookieBanner
-      v-if="bannerVisible"
-      title="We use cookies"
-      message="We use cookies to improve your experience on our site."
-      policy-link="/privacy"
-      :has-customize="false"
-      :has-reject="true"
-      storage-key="demo-cookie-consent"
-      @accept="handleAccept"
-      @reject="handleReject"
-    />
-
-    <XMarkPrivacyCookieBanner
-      v-if="customizableBannerVisible"
-      title="Cookie Preferences"
-      message="We use cookies to personalize content and analyze traffic."
-      :has-customize="true"
-      :has-reject="true"
-      storage-key="demo-customizable-consent"
-      @accept="handleAccept"
-      @reject="handleReject"
-      @customize="handleCustomize"
-    />
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Basic cookie banner -->
-<XMarkPrivacyCookieBanner
-  title="We use cookies"
-  message="We use cookies to improve your experience."
-  policy-link="/privacy"
-  @accept="handleAccept"
-  @reject="handleReject"
-/>
-
-<!-- With customize option -->
-<XMarkPrivacyCookieBanner
-  title="Cookie Preferences"
-  message="We use cookies to personalize content."
-  :has-customize="true"
-  :has-reject="true"
-  storage-key="cookie-consent"
-  @accept="handleAccept"
-  @reject="handleReject"
-  @customize="openGDPRModal"
-/>
-
-<!-- In your layout -->
-<template>
-  <div>
-    <NuxtPage />
-    <XMarkPrivacyCookieBanner
-      @accept="enableAnalytics"
-      @customize="gdprModalOpen = true"
-    />
-    <XMarkPrivacyGDPR v-model="gdprModalOpen" />
-  </div>
-</template>`
-
-const bannerVisible = ref(false)
-const customizableBannerVisible = ref(false)
-
-const showBanner = () => {
-  localStorage.removeItem('demo-cookie-consent')
-  bannerVisible.value = true
-  // Force re-render by toggling
-  nextTick(() => {
-    bannerVisible.value = false
-    nextTick(() => {
-      bannerVisible.value = true
-    })
-  })
-}
-
-const showCustomizableBanner = () => {
-  localStorage.removeItem('demo-customizable-consent')
-  customizableBannerVisible.value = true
-  nextTick(() => {
-    customizableBannerVisible.value = false
-    nextTick(() => {
-      customizableBannerVisible.value = true
-    })
-  })
-}
-
-const resetConsent = () => {
-  localStorage.removeItem('demo-cookie-consent')
-  localStorage.removeItem('demo-customizable-consent')
-  bannerVisible.value = false
-  customizableBannerVisible.value = false
-}
-
-const handleAccept = () => {
-  console.log('Cookies accepted')
-  bannerVisible.value = false
-  customizableBannerVisible.value = false
-}
-
-const handleReject = () => {
-  console.log('Cookies rejected')
-  bannerVisible.value = false
-  customizableBannerVisible.value = false
-}
-
-const handleCustomize = () => {
-  console.log('Open GDPR preferences modal')
-}
-</script>