@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/utilities/back-to-top.vue

@@ -1,153 +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">Back to Top</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Scroll-to-top button that appears after scrolling down.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo Instructions -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Demo</h2>
-        <p class="text-sm text-neutral-500 mb-4">Scroll down this page to see the back-to-top button appear in the bottom-right corner.</p>
-        <div class="p-4 bg-primary-50 dark:bg-primary-900/20 rounded-lg border border-primary-200 dark:border-primary-800">
-          <p class="text-primary-800 dark:text-primary-200 text-sm">
-            The button appears after scrolling 400px (default threshold).
-          </p>
-        </div>
-      </section>
-
-      <!-- Variants Preview -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Style Variants</h2>
-        <p class="text-sm text-neutral-500 mb-4">Available button styles (current demo uses primary)</p>
-        <div class="flex gap-6">
-          <div class="text-center">
-            <div class="w-12 h-12 rounded-full bg-primary-500 text-white flex items-center justify-center mb-2 shadow-lg">
-              <UIcon name="i-lucide-arrow-up" class="w-5 h-5" />
-            </div>
-            <span class="text-sm">Primary</span>
-          </div>
-          <div class="text-center">
-            <div class="w-12 h-12 rounded-full bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 flex items-center justify-center mb-2 shadow-lg">
-              <UIcon name="i-lucide-arrow-up" class="w-5 h-5" />
-            </div>
-            <span class="text-sm">Neutral</span>
-          </div>
-          <div class="text-center">
-            <div class="w-12 h-12 rounded-full xGlass text-neutral-900 dark:text-white flex items-center justify-center mb-2 shadow-lg">
-              <UIcon name="i-lucide-arrow-up" class="w-5 h-5" />
-            </div>
-            <span class="text-sm">Glass</span>
-          </div>
-        </div>
-      </section>
-
-      <!-- Position Options -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Position Options</h2>
-        <div class="grid md:grid-cols-3 gap-4">
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 relative h-32">
-            <div class="absolute bottom-4 right-4 w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
-              <UIcon name="i-lucide-arrow-up" class="w-4 h-4 text-white" />
-            </div>
-            <span class="text-sm font-mono">bottom-right</span>
-          </div>
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 relative h-32">
-            <div class="absolute bottom-4 left-4 w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
-              <UIcon name="i-lucide-arrow-up" class="w-4 h-4 text-white" />
-            </div>
-            <span class="text-sm font-mono">bottom-left</span>
-          </div>
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 relative h-32">
-            <div class="absolute bottom-4 left-1/2 -translate-x-1/2 w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
-              <UIcon name="i-lucide-arrow-up" class="w-4 h-4 text-white" />
-            </div>
-            <span class="text-sm font-mono">bottom-center</span>
-          </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">threshold</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">400</td><td class="py-3 px-4">Scroll distance (px) before button appears</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">position</td><td class="py-3 px-4">String</td><td class="py-3 px-4">bottom-right</td><td class="py-3 px-4">bottom-right, bottom-left, bottom-center</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, glass</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-arrow-up</td><td class="py-3 px-4">Icon name</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">Back to top</td><td class="py-3 px-4">Aria label for accessibility</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">smooth</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Enable smooth scroll animation</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Back to Top Usage" :code="codeExample" />
-      </section>
-
-      <!-- Spacer content for scrolling demo -->
-      <section v-for="i in 5" :key="i" class="py-12">
-        <h2 class="text-lg font-semibold mb-4">Sample Content Section {{ i }}</h2>
-        <p class="text-neutral-600 dark:text-neutral-400">
-          This is placeholder content to demonstrate the back-to-top button.
-          Keep scrolling to see the button appear in the bottom-right corner.
-        </p>
-        <div class="mt-4 grid grid-cols-3 gap-4">
-          <div v-for="j in 3" :key="j" class="h-32 rounded-lg bg-neutral-100 dark:bg-neutral-800" />
-        </div>
-      </section>
-
-      <!-- End Notice -->
-      <section class="py-12 text-center">
-        <p class="text-neutral-500">You've reached the bottom. Click the back-to-top button to scroll up!</p>
-      </section>
-    </div>
-
-    <!-- Actual Component -->
-    <XMarkButtonBackToTop
-      :threshold="400"
-      position="bottom-right"
-      variant="primary"
-    />
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Default - bottom right, primary color -->
-<XMarkButtonBackToTop />
-
-<!-- Custom configuration -->
-<XMarkButtonBackToTop
-  :threshold="400"
-  position="bottom-right"
-  variant="primary"
-/>
-
-<!-- Glass variant, bottom left -->
-<XMarkButtonBackToTop
-  position="bottom-left"
-  variant="glass"
-  :threshold="200"
-/>
-
-<!-- Neutral variant, centered -->
-<XMarkButtonBackToTop
-  position="bottom-center"
-  variant="neutral"
-  icon="i-lucide-chevron-up"
-  label="Scroll to top"
-  :smooth="true"
-/>`
-</script>

package/.playground/pages/utilities/popup-chat.vue

@@ -1,224 +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">Popup Chat</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Proactive chat popup to engage visitors.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Demo</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click to show the chat popup in the bottom-right corner</p>
-        <div class="flex gap-3">
-          <UButton @click="showChat = true">Show Chat Popup</UButton>
-          <UButton color="neutral" variant="outline" @click="showWithAction = true">With Action Button</UButton>
-        </div>
-      </section>
-
-      <!-- Preview -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Preview</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-8">
-          <div class="max-w-sm ml-auto">
-            <div class="xGlass rounded-2xl p-4 shadow-xl relative">
-              <button class="absolute top-2 right-2 p-1 rounded-full hover:bg-black/5">
-                <UIcon name="i-lucide-x" class="w-4 h-4 text-neutral-400" />
-              </button>
-              <div class="flex gap-3">
-                <img
-                  src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-                  alt="Support"
-                  class="w-12 h-12 rounded-full object-cover"
-                />
-                <div class="flex-1">
-                  <div class="flex items-center gap-2 mb-1">
-                    <span class="font-medium text-neutral-900 dark:text-white">Sarah</span>
-                    <span class="w-2 h-2 rounded-full bg-green-500" />
-                  </div>
-                  <p class="text-sm text-neutral-600 dark:text-neutral-400">
-                    Hi there! Need help finding something?
-                  </p>
-                  <UButton size="sm" class="mt-3">Start Chat</UButton>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Without Avatar -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Without Avatar</h2>
-        <p class="text-sm text-neutral-500 mb-4">Falls back to initial when no avatar is provided</p>
-        <UButton @click="showNoAvatar = true">Show Without Avatar</UButton>
-      </section>
-
-      <!-- Auto-dismiss -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Auto-dismiss</h2>
-        <p class="text-sm text-neutral-500 mb-4">Set autoDismiss to automatically close after a duration</p>
-        <UButton @click="showAutoDismiss = true">Show (Auto-closes in 5s)</UButton>
-      </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">v-model</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">false</td><td class="py-3 px-4">Visibility control</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">name</td><td class="py-3 px-4">String</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Person or bot name</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">required</td><td class="py-3 px-4">Chat message text</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">avatar</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Avatar image URL</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">online</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show online indicator</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">actionText</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">CTA button text</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">delay</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">3000</td><td class="py-3 px-4">Delay before showing (ms)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">autoDismiss</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">0</td><td class="py-3 px-4">Auto-close after ms (0 = never)</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">@action</td><td class="py-3 px-4">Emitted when action button is clicked</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">@dismiss</td><td class="py-3 px-4">Emitted when popup is closed</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Popup Chat Usage" :code="codeExample" />
-      </section>
-
-      <!-- Use Cases -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Common Use Cases</h2>
-        <div class="grid md:grid-cols-2 gap-4">
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <h3 class="font-medium mb-2">Proactive Support</h3>
-            <p class="text-sm text-neutral-500">Offer help after user has been on page for a while</p>
-          </div>
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <h3 class="font-medium mb-2">Lead Capture</h3>
-            <p class="text-sm text-neutral-500">Encourage visitors to start a conversation</p>
-          </div>
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <h3 class="font-medium mb-2">Exit Intent</h3>
-            <p class="text-sm text-neutral-500">Show when user is about to leave the page</p>
-          </div>
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <h3 class="font-medium mb-2">Sales Outreach</h3>
-            <p class="text-sm text-neutral-500">Connect pricing page visitors with sales team</p>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <!-- Actual Components -->
-    <XMarkModalChat
-      v-model="showChat"
-      name="Sarah"
-      message="Hi there! Need help finding something?"
-      avatar="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-      :delay="0"
-      @dismiss="showChat = false"
-    />
-
-    <XMarkModalChat
-      v-model="showWithAction"
-      name="Alex"
-      message="Have a question about our pricing? I'm here to help!"
-      avatar="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
-      action-text="Start Chat"
-      :delay="0"
-      @action="handleAction"
-      @dismiss="showWithAction = false"
-    />
-
-    <XMarkModalChat
-      v-model="showNoAvatar"
-      name="Support Bot"
-      message="Hello! I'm an AI assistant. How can I help you today?"
-      :delay="0"
-      @dismiss="showNoAvatar = false"
-    />
-
-    <XMarkModalChat
-      v-model="showAutoDismiss"
-      name="Quick Tip"
-      message="Did you know? You can use keyboard shortcuts to navigate faster!"
-      :delay="0"
-      :auto-dismiss="5000"
-      @dismiss="showAutoDismiss = false"
-    />
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<XMarkModalChat
-  v-model="showChat"
-  name="Sarah"
-  message="Hi there! Need help finding something?"
-  avatar="/images/support-avatar.jpg"
-  action-text="Start Chat"
-  :delay="5000"
-  @action="openChatWidget"
-  @dismiss="showChat = false"
-/>
-
-<!-- Auto-show after delay -->
-<script setup>
-const showChat = ref(false)
-
-onMounted(() => {
-  setTimeout(() => {
-    showChat.value = true
-  }, 10000)
-})
-<\/script>
-
-<!-- Without avatar (shows initial) -->
-<XMarkModalChat
-  v-model="showBot"
-  name="Support Bot"
-  message="Hello! How can I help?"
-  :online="false"
-/>
-
-<!-- Auto-dismiss after 5 seconds -->
-<XMarkModalChat
-  v-model="showTip"
-  name="Quick Tip"
-  message="Use keyboard shortcuts!"
-  :auto-dismiss="5000"
-/>`
-
-const showChat = ref(false)
-const showWithAction = ref(false)
-const showNoAvatar = ref(false)
-const showAutoDismiss = ref(false)
-
-const handleAction = () => {
-  console.log('Chat action clicked')
-  showWithAction.value = false
-}
-</script>