@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/notifications/social-proof-toast.vue

@@ -1,515 +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">
-        Social Proof Toast
-      </h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Automated notifications showing recent customer activity.
-      </p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Live Demo</h2>
-        <p class="text-sm text-neutral-500 mb-4">
-          The social proof notifications will cycle through automatically.
-          Select placement, type, and click Start Demo.
-        </p>
-        <div class="flex flex-wrap items-center gap-3">
-          <UButton @click="startDemo">Start Demo</UButton>
-          <UButton color="neutral" variant="outline" @click="stopDemo"
-            >Stop Demo</UButton
-          >
-          <div class="flex items-center gap-2 ml-4">
-            <span class="text-sm text-neutral-500">Placement:</span>
-            <UButtonGroup>
-              <UButton
-                size="sm"
-                :variant="demoPlacement === 'bottomLeft' ? 'solid' : 'outline'"
-                @click="demoPlacement = 'bottomLeft'"
-                >Bottom Left</UButton
-              >
-              <UButton
-                size="sm"
-                :variant="demoPlacement === 'bottomRight' ? 'solid' : 'outline'"
-                @click="demoPlacement = 'bottomRight'"
-                >Bottom Right</UButton
-              >
-              <UButton
-                size="sm"
-                :variant="demoPlacement === 'topLeft' ? 'solid' : 'outline'"
-                @click="demoPlacement = 'topLeft'"
-                >Top Left</UButton
-              >
-              <UButton
-                size="sm"
-                :variant="demoPlacement === 'topRight' ? 'solid' : 'outline'"
-                @click="demoPlacement = 'topRight'"
-                >Top Right</UButton
-              >
-            </UButtonGroup>
-          </div>
-          <div class="flex items-center gap-2 ml-4">
-            <span class="text-sm text-neutral-500">Type:</span>
-            <UButtonGroup>
-              <UButton
-                size="sm"
-                :variant="demoType === 'success' ? 'solid' : 'outline'"
-                @click="demoType = 'success'"
-                >Success</UButton
-              >
-              <UButton
-                size="sm"
-                :variant="demoType === 'error' ? 'solid' : 'outline'"
-                @click="demoType = 'error'"
-                >Error</UButton
-              >
-              <UButton
-                size="sm"
-                :variant="demoType === 'warning' ? 'solid' : 'outline'"
-                @click="demoType = 'warning'"
-                >Warning</UButton
-              >
-              <UButton
-                size="sm"
-                :variant="demoType === 'info' ? 'solid' : 'outline'"
-                @click="demoType = 'info'"
-                >Info</UButton
-              >
-            </UButtonGroup>
-          </div>
-        </div>
-      </section>
-
-      <!-- Type Examples -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Toast Types</h2>
-        <div class="grid md:grid-cols-2 gap-4">
-          <!-- Success -->
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
-            <h3 class="font-medium mb-4 text-green-600 dark:text-green-400">
-              Success
-            </h3>
-            <div
-              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
-            >
-              <img
-                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-                alt="Customer"
-                class="w-10 h-10 rounded-full object-cover"
-              />
-              <div class="flex-1">
-                <p class="text-sm text-neutral-900 dark:text-white">
-                  <span class="font-medium">Sarah M.</span>
-                  just purchased Pro Plan
-                </p>
-                <p class="text-xs text-neutral-500 mt-0.5">2 minutes ago</p>
-              </div>
-              <UIcon
-                name="i-lucide-badge-check"
-                class="w-5 h-5 text-green-500 flex-shrink-0"
-              />
-            </div>
-          </div>
-
-          <!-- Error -->
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
-            <h3 class="font-medium mb-4 text-red-600 dark:text-red-400">
-              Error
-            </h3>
-            <div
-              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
-            >
-              <div
-                class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
-              >
-                <span class="text-primary-600 dark:text-primary-400 font-medium"
-                  >J</span
-                >
-              </div>
-              <div class="flex-1">
-                <p class="text-sm text-neutral-900 dark:text-white">
-                  <span class="font-medium">John D.</span>
-                  payment failed
-                </p>
-                <p class="text-xs text-neutral-500 mt-0.5">5 minutes ago</p>
-              </div>
-              <UIcon
-                name="i-lucide-x-circle"
-                class="w-5 h-5 text-red-500 flex-shrink-0"
-              />
-            </div>
-          </div>
-
-          <!-- Warning -->
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
-            <h3 class="font-medium mb-4 text-yellow-600 dark:text-yellow-400">
-              Warning
-            </h3>
-            <div
-              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
-            >
-              <div
-                class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
-              >
-                <span class="text-primary-600 dark:text-primary-400 font-medium"
-                  >E</span
-                >
-              </div>
-              <div class="flex-1">
-                <p class="text-sm text-neutral-900 dark:text-white">
-                  <span class="font-medium">Emily R.</span>
-                  subscription expiring soon
-                </p>
-                <p class="text-xs text-neutral-500 mt-0.5">10 minutes ago</p>
-              </div>
-              <UIcon
-                name="i-lucide-alert-triangle"
-                class="w-5 h-5 text-yellow-500 flex-shrink-0"
-              />
-            </div>
-          </div>
-
-          <!-- Info -->
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
-            <h3 class="font-medium mb-4 text-blue-600 dark:text-blue-400">
-              Info
-            </h3>
-            <div
-              class="bg-white dark:bg-neutral-900 rounded-xl shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 flex items-center gap-3"
-            >
-              <img
-                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
-                alt="Customer"
-                class="w-10 h-10 rounded-full object-cover"
-              />
-              <div class="flex-1">
-                <p class="text-sm text-neutral-900 dark:text-white">
-                  <span class="font-medium">James W.</span>
-                  viewed pricing page
-                </p>
-                <p class="text-xs text-neutral-500 mt-0.5">1 minute ago</p>
-              </div>
-              <UIcon
-                name="i-lucide-info"
-                class="w-5 h-5 text-blue-500 flex-shrink-0"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Configuration -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Timing Configuration</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-1">Initial Delay</h3>
-            <p class="text-sm text-neutral-500">
-              Wait before first notification
-            </p>
-            <p class="mt-2 font-mono text-sm">5000ms (5 seconds)</p>
-          </div>
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-medium mb-1">Display Duration</h3>
-            <p class="text-sm text-neutral-500">How long each shows</p>
-            <p class="mt-2 font-mono text-sm">3000ms (3 seconds)</p>
-          </div>
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-medium mb-1">Interval</h3>
-            <p class="text-sm text-neutral-500">Time between notifications</p>
-            <p class="mt-2 font-mono text-sm">4000ms (4 seconds)</p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Props -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Props</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Prop</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr>
-              <td class="py-3 px-4 font-mono text-xs">notifications</td>
-              <td class="py-3 px-4">Array</td>
-              <td class="py-3 px-4">required</td>
-              <td class="py-3 px-4">Array of notification objects</td>
-            </tr>
-            <tr>
-              <td class="py-3 px-4 font-mono text-xs">interval</td>
-              <td class="py-3 px-4">Number</td>
-              <td class="py-3 px-4">4000</td>
-              <td class="py-3 px-4">Time between notifications (ms)</td>
-            </tr>
-            <tr>
-              <td class="py-3 px-4 font-mono text-xs">initialDelay</td>
-              <td class="py-3 px-4">Number</td>
-              <td class="py-3 px-4">5000</td>
-              <td class="py-3 px-4">Delay before first notification (ms)</td>
-            </tr>
-            <tr>
-              <td class="py-3 px-4 font-mono text-xs">displayDuration</td>
-              <td class="py-3 px-4">Number</td>
-              <td class="py-3 px-4">3000</td>
-              <td class="py-3 px-4">How long each notification shows (ms)</td>
-            </tr>
-            <tr>
-              <td class="py-3 px-4 font-mono text-xs">placement</td>
-              <td class="py-3 px-4">String</td>
-              <td class="py-3 px-4">topRight</td>
-              <td class="py-3 px-4">
-                topLeft, topRight, bottomLeft, bottomRight
-              </td>
-            </tr>
-            <tr>
-              <td class="py-3 px-4 font-mono text-xs">type</td>
-              <td class="py-3 px-4">String</td>
-              <td class="py-3 px-4">success</td>
-              <td class="py-3 px-4">success, error, warning, info</td>
-            </tr>
-            <tr>
-              <td class="py-3 px-4 font-mono text-xs">showIcon</td>
-              <td class="py-3 px-4">Boolean</td>
-              <td class="py-3 px-4">true</td>
-              <td class="py-3 px-4">Whether to show the status icon</td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Notification Structure -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">
-          Notification Object Structure
-        </h2>
-        <pre
-          class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"
-        ><code>notifications: [
-  {
-    name: 'Sarah M.',           // Customer name (required)
-    action: 'just purchased Pro Plan',  // Action text (required)
-    time: '2 minutes ago',      // Time string (required)
-    avatar: 'https://...'       // Optional avatar URL
-  },
-  // ... more notifications
-]</code></pre>
-      </section>
-
-      <!-- Sample Data -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Sample Notifications</h2>
-        <div class="grid md:grid-cols-2 gap-4">
-          <div
-            v-for="notification in notifications"
-            :key="notification.name"
-            class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 flex items-center gap-3"
-          >
-            <img
-              v-if="notification.avatar"
-              :src="notification.avatar"
-              :alt="notification.name"
-              class="w-10 h-10 rounded-full object-cover"
-            />
-            <div
-              v-else
-              class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
-            >
-              <span class="text-primary-600 dark:text-primary-400 font-medium">
-                {{ notification.name.charAt(0) }}
-              </span>
-            </div>
-            <div class="flex-1">
-              <p class="text-sm">
-                <span class="font-medium">{{ notification.name }}</span>
-                {{ notification.action }}
-              </p>
-              <p class="text-xs text-neutral-500">{{ notification.time }}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Usage Tips -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Usage Tips</h2>
-        <ul class="space-y-3 text-neutral-600 dark:text-neutral-400">
-          <li class="flex gap-2">
-            <UIcon
-              name="i-lucide-lightbulb"
-              class="w-5 h-5 text-yellow-500 flex-shrink-0"
-            />
-            <span
-              >Use real customer data or realistic fake data for
-              authenticity</span
-            >
-          </li>
-          <li class="flex gap-2">
-            <UIcon
-              name="i-lucide-lightbulb"
-              class="w-5 h-5 text-yellow-500 flex-shrink-0"
-            />
-            <span>Keep action text short and focused on conversions</span>
-          </li>
-          <li class="flex gap-2">
-            <UIcon
-              name="i-lucide-lightbulb"
-              class="w-5 h-5 text-yellow-500 flex-shrink-0"
-            />
-            <span>Use recent-sounding times ("2 minutes ago") for urgency</span>
-          </li>
-          <li class="flex gap-2">
-            <UIcon
-              name="i-lucide-lightbulb"
-              class="w-5 h-5 text-yellow-500 flex-shrink-0"
-            />
-            <span>Include diverse customer names and avatars</span>
-          </li>
-        </ul>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Social Proof Toast Usage" :code="codeExample" />
-      </section>
-
-      <!-- Type Examples Code -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Type Examples</h2>
-        <CodeExample title="Different Toast Types" :code="typeExamplesCode" />
-      </section>
-    </div>
-
-    <!-- Actual Component -->
-    <XMarkSocialProofToast
-      v-if="demoActive"
-      :notifications="notifications"
-      :interval="4000"
-      :initial-delay="1000"
-      :display-duration="3000"
-      :placement="demoPlacement"
-      :type="demoType"
-    />
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<XMarkSocialProofToast
-  :notifications="notifications"
-  :interval="4000"
-  :initial-delay="5000"
-  :display-duration="3000"
-  type="success"
-/>
-
-<script setup>
-const notifications = [
-  {
-    name: 'Sarah M.',
-    action: 'just purchased Pro Plan',
-    time: '2 minutes ago',
-    avatar: 'https://...'
-  },
-  {
-    name: 'James W.',
-    action: 'signed up for a free trial',
-    time: '5 minutes ago',
-    avatar: 'https://...'
-  },
-  {
-    name: 'Emily R.',
-    action: 'upgraded to Enterprise',
-    time: '8 minutes ago'
-  }
-]
-<\/script>`;
-
-const typeExamplesCode = `<!-- Success (default) -->
-<XMarkSocialProofToast
-  :notifications="notifications"
-  type="success"
-/>
-
-<!-- Error -->
-<XMarkSocialProofToast
-  :notifications="notifications"
-  type="error"
-/>
-
-<!-- Warning -->
-<XMarkSocialProofToast
-  :notifications="notifications"
-  type="warning"
-/>
-
-<!-- Info -->
-<XMarkSocialProofToast
-  :notifications="notifications"
-  type="info"
-/>
-
-<!-- Hide icon -->
-<XMarkSocialProofToast
-  :notifications="notifications"
-  :show-icon="false"
-/>`;
-
-const demoActive = ref(false);
-const demoPlacement = ref("bottomLeft");
-const demoType = ref("success");
-
-const notifications = [
-  {
-    name: "Sarah M.",
-    action: "just purchased Pro Plan",
-    time: "2 minutes ago",
-    avatar:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
-  },
-  {
-    name: "James W.",
-    action: "signed up for a free trial",
-    time: "5 minutes ago",
-    avatar:
-      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",
-  },
-  {
-    name: "Emily R.",
-    action: "upgraded to Enterprise",
-    time: "8 minutes ago",
-    avatar:
-      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop",
-  },
-  {
-    name: "Michael T.",
-    action: "just made a purchase",
-    time: "12 minutes ago",
-  },
-  {
-    name: "Lisa K.",
-    action: "joined the newsletter",
-    time: "15 minutes ago",
-    avatar:
-      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop",
-  },
-];
-
-const startDemo = () => {
-  demoActive.value = true;
-};
-
-const stopDemo = () => {
-  demoActive.value = false;
-};
-</script>

package/.playground/pages/ui/badge.vue

@@ -1,161 +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">Badge</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Trust indicators and feature badges with preset icons.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Presets -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Preset Badges</h2>
-        <p class="text-sm text-neutral-500 mb-4">Built-in presets for common trust indicators</p>
-        <div class="flex flex-wrap gap-4">
-          <XMarkSocialProofBadge preset="no-credit-card" />
-          <XMarkSocialProofBadge preset="cancel-anytime" />
-          <XMarkSocialProofBadge preset="free-trial" />
-          <XMarkSocialProofBadge preset="secure" />
-          <XMarkSocialProofBadge preset="support" />
-          <XMarkSocialProofBadge preset="setup" />
-          <XMarkSocialProofBadge preset="gdpr" />
-          <XMarkSocialProofBadge preset="money-back" />
-        </div>
-      </section>
-
-      <!-- Variants -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Style Variants</h2>
-        <p class="text-sm text-neutral-500 mb-4">Default, subtle, outline, text, and text-muted styles</p>
-        <div class="flex flex-wrap items-center gap-4">
-          <XMarkSocialProofBadge preset="secure" variant="default" />
-          <XMarkSocialProofBadge preset="secure" variant="subtle" />
-          <XMarkSocialProofBadge preset="secure" variant="outline" />
-          <XMarkSocialProofBadge preset="secure" variant="text" />
-          <XMarkSocialProofBadge preset="secure" variant="text-muted" />
-        </div>
-      </section>
-
-      <!-- Custom Badges -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Badges</h2>
-        <p class="text-sm text-neutral-500 mb-4">Create custom badges with any icon and label</p>
-        <div class="flex flex-wrap gap-4">
-          <XMarkSocialProofBadge icon="i-lucide-sparkles" label="AI-Powered" />
-          <XMarkSocialProofBadge icon="i-lucide-globe" label="Available Worldwide" variant="subtle" />
-          <XMarkSocialProofBadge icon="i-lucide-rocket" label="Fast Setup" variant="outline" />
-        </div>
-      </section>
-
-      <!-- Usage Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Usage in Hero</h2>
-        <p class="text-sm text-neutral-500 mb-4">Common placement below CTA buttons</p>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-8">
-          <div class="text-center space-y-6">
-            <h3 class="text-2xl font-bold">Start Your Free Trial</h3>
-            <UButton size="lg" color="primary">Get Started</UButton>
-            <div class="flex justify-center gap-4 flex-wrap">
-              <XMarkSocialProofBadge preset="no-credit-card" variant="subtle" />
-              <XMarkSocialProofBadge preset="cancel-anytime" variant="subtle" />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Props -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">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">preset</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">no-credit-card, cancel-anytime, free-trial, secure, support, setup, gdpr, money-back</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 text-neutral-600 dark:text-neutral-400">Custom icon name (if not using preset)</td>
-              </tr>
-              <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">''</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Custom label text (if not using preset)</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, subtle, outline, text, text-muted</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- Available Presets -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Available Presets</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">Preset</th>
-              <th class="text-left py-3 px-4">Icon</th>
-              <th class="text-left py-3 px-4">Label</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">no-credit-card</td><td class="py-3 px-4">i-lucide-credit-card</td><td class="py-3 px-4">No credit card required</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">cancel-anytime</td><td class="py-3 px-4">i-lucide-x-circle</td><td class="py-3 px-4">Cancel anytime</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">free-trial</td><td class="py-3 px-4">i-lucide-gift</td><td class="py-3 px-4">Free 14-day trial</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">secure</td><td class="py-3 px-4">i-lucide-shield-check</td><td class="py-3 px-4">Bank-level security</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">support</td><td class="py-3 px-4">i-lucide-message-circle</td><td class="py-3 px-4">24/7 support</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">setup</td><td class="py-3 px-4">i-lucide-zap</td><td class="py-3 px-4">Setup in minutes</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">gdpr</td><td class="py-3 px-4">i-lucide-lock</td><td class="py-3 px-4">GDPR compliant</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">money-back</td><td class="py-3 px-4">i-lucide-undo-2</td><td class="py-3 px-4">30-day money back</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Badge Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Using presets -->
-<XMarkSocialProofBadge preset="no-credit-card" />
-<XMarkSocialProofBadge preset="secure" variant="subtle" />
-
-<!-- Custom badge -->
-<XMarkSocialProofBadge
-  icon="i-lucide-sparkles"
-  label="AI-Powered"
-  variant="outline"
-/>
-
-<!-- Text variant (minimal) -->
-<XMarkSocialProofBadge preset="gdpr" variant="text" />
-
-<!-- Common usage below CTA -->
-<div class="flex justify-center gap-4">
-  <XMarkSocialProofBadge preset="no-credit-card" variant="subtle" />
-  <XMarkSocialProofBadge preset="cancel-anytime" variant="subtle" />
-</div>`
-</script>