@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/content/comparison.vue

@@ -1,253 +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">Pricing Comparison</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Feature comparison table with social proof badges for pricing plans.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="space-y-0">
-      <!-- Basic Comparison with Badges -->
-      <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">Feature Comparison</span>
-          <h2 class="xText-headline">Compare Plans</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Feature comparison with trust badges below</p>
-        </div>
-
-        <XMarkPricingComparison
-          :plans="plans"
-          :feature-groups="featureGroups"
-          :badges="['no-credit-card', 'cancel-anytime', 'money-back']"
-        />
-      </XMarkSection>
-
-      <!-- With Highlighted Plan and Badges at Top -->
-      <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">Badges Top</span>
-          <h2 class="xText-headline">With Badges Above</h2>
-        </div>
-
-        <XMarkPricingComparison
-          :plans="plansHighlighted"
-          :feature-groups="featureGroups"
-          :badges="['free-trial', 'secure']"
-          badges-position="top"
-        />
-      </XMarkSection>
-
-      <!-- Props Documentation -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-6">XMarkPricingComparison 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">plans</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 { id, name, price?, highlighted?, button? }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">featureGroups</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 feature groups with features</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">caption</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">undefined</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Caption displayed above the table</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">badges</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">[]</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Social proof badge presets or custom</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">badgesPosition</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'bottom'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">'top' or 'bottom'</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">badgesAlign</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'center'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">'left', 'center', or 'right'</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Data Structure -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Data Structure</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
-          <pre>// Plans
-[
-  {
-    id: 'free',
-    name: 'Free',
-    price: '$0',
-    highlighted: false,
-    button: { label: 'Get Started' }
-  },
-  {
-    id: 'pro',
-    name: 'Pro',
-    price: '$29',
-    highlighted: true,
-    button: { label: 'Buy Now' }
-  }
-]
-
-// Feature Groups
-[
-  {
-    name: 'Features',
-    features: [
-      {
-        name: 'Projects',
-        values: { free: '3', pro: 'Unlimited' }
-      },
-      {
-        name: 'API Access',
-        values: { free: false, pro: true }
-      }
-    ]
-  }
-]</pre>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Comparison Table Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<XMarkPricingComparison
-  :plans="[
-    { id: 'free', name: 'Free', price: '$0', button: { label: 'Get Started' } },
-    { id: 'pro', name: 'Pro', price: '$29', highlighted: true, button: { label: 'Buy Now' } },
-    { id: 'enterprise', name: 'Enterprise', price: 'Custom', button: { label: 'Contact' } }
-  ]"
-  :feature-groups="[
-    {
-      name: 'Features',
-      features: [
-        { name: 'Projects', values: { free: '3', pro: 'Unlimited', enterprise: 'Unlimited' } },
-        { name: 'Storage', values: { free: '1 GB', pro: '50 GB', enterprise: 'Unlimited' } },
-        { name: 'API Access', values: { free: false, pro: true, enterprise: true } }
-      ]
-    }
-  ]"
-  :badges="['no-credit-card', 'cancel-anytime']"
-  @select="handlePlanSelect"
-/>`
-
-const plans = [
-  {
-    id: 'free',
-    name: 'Free',
-    price: '$0',
-    button: { label: 'Get Started' }
-  },
-  {
-    id: 'pro',
-    name: 'Pro',
-    price: '$29',
-    button: { label: 'Buy Now' }
-  },
-  {
-    id: 'enterprise',
-    name: 'Enterprise',
-    price: 'Custom',
-    button: { label: 'Contact Sales' }
-  }
-]
-
-const plansHighlighted = [
-  {
-    id: 'free',
-    name: 'Free',
-    price: '$0',
-    button: { label: 'Get Started' }
-  },
-  {
-    id: 'pro',
-    name: 'Pro',
-    price: '$29',
-    highlighted: true,
-    button: { label: 'Buy Now' }
-  },
-  {
-    id: 'enterprise',
-    name: 'Enterprise',
-    price: 'Custom',
-    button: { label: 'Contact Sales' }
-  }
-]
-
-const featureGroups = [
-  {
-    name: 'Features',
-    features: [
-      { name: 'Projects', values: { free: '3', pro: 'Unlimited', enterprise: 'Unlimited' } },
-      { name: 'Storage', values: { free: '1 GB', pro: '50 GB', enterprise: 'Unlimited' } },
-      { name: 'Team Members', values: { free: '1', pro: '10', enterprise: 'Unlimited' } },
-      { name: 'GitHub repository access', values: { free: true, pro: true, enterprise: true } },
-      { name: 'Updates', values: { free: 'Patch & minor', pro: 'All updates', enterprise: 'All updates' } }
-    ]
-  },
-  {
-    name: 'Collaboration',
-    features: [
-      { name: 'Real-time Editing', values: { free: false, pro: true, enterprise: true } },
-      { name: 'Comments', values: { free: true, pro: true, enterprise: true } },
-      { name: 'Version History', values: { free: '7 days', pro: '90 days', enterprise: 'Unlimited' } }
-    ]
-  },
-  {
-    name: 'Support',
-    features: [
-      { name: 'Email Support', values: { free: true, pro: true, enterprise: true } },
-      { name: 'Priority Support', values: { free: false, pro: true, enterprise: true } },
-      { name: 'Dedicated Manager', values: { free: false, pro: false, enterprise: true } },
-      { name: '24/7 Support', values: { free: false, pro: false, enterprise: true } }
-    ]
-  },
-  {
-    name: 'Security',
-    features: [
-      { name: 'API Access', values: { free: false, pro: true, enterprise: true } },
-      { name: 'Custom Integrations', values: { free: false, pro: false, enterprise: true } },
-      { name: 'SSO/SAML', values: { free: false, pro: false, enterprise: true } },
-      { name: 'Audit logs', values: { free: false, pro: true, enterprise: true } }
-    ]
-  }
-]
-</script>

package/.playground/pages/content/cta.vue

@@ -1,245 +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">CTA</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Flexible call-to-action component for promotions and conversions.</p>
-    </div>
-
-    <div class="p-8 space-y-16">
-      <div class="space-y-12">
-        <!-- Default Layout -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Default Layout (Side by Side)</h3>
-          <XMarkCTA
-            title="Ready to get started?"
-            description="Join thousands of developers building with our components."
-            :buttons="[
-              { label: 'Get Started Free', to: '#' },
-              { label: 'Learn More', to: '#' }
-            ]"
-          />
-        </section>
-
-        <!-- Centered Layout - Bold -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Centered Layout (Bold)</h3>
-          <XMarkCTA
-            eyebrow="Limited Time Offer"
-            title="Get 50% off your first year"
-            description="Use code LAUNCH50 at checkout. Offer ends soon."
-            variant="centered"
-            bg="bold"
-            size="lg"
-            :buttons="[
-              { label: 'Claim Discount', variant: 'solid' },
-              { label: 'View Plans', variant: 'outline' }
-            ]"
-          />
-        </section>
-
-        <!-- With Icon -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">With Icon</h3>
-          <XMarkCTA
-            icon="i-lucide-rocket"
-            title="Launch your project today"
-            description="Everything you need to build, deploy, and scale."
-            :buttons="[{ label: 'Start Building', to: '#' }]"
-          />
-        </section>
-
-        <!-- Gradient Background -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Gradient Background</h3>
-          <XMarkCTA
-            icon="i-lucide-sparkles"
-            title="Introducing AI-powered features"
-            description="Supercharge your workflow with intelligent automation."
-            variant="stacked"
-            bg="gradient"
-            :buttons="[
-              { label: 'Try AI Features' },
-              { label: 'Watch Demo', variant: 'ghost' }
-            ]"
-          />
-        </section>
-
-        <!-- With Pattern -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">With Pattern</h3>
-          <XMarkCTA
-            title="Join our community"
-            description="Connect with thousands of developers worldwide."
-            variant="centered"
-            :bg="{ variant: 'bold', pattern: 'dots', patternOpacity: 0.1 }"
-            :buttons="[
-              { label: 'Join Now' },
-              { label: 'Learn More', variant: 'outline' }
-            ]"
-          />
-        </section>
-
-        <!-- With Background Image -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">With Background Image</h3>
-          <XMarkCTA
-            eyebrow="New Feature"
-            title="Take your business global"
-            description="Expand to new markets with our international tools."
-            variant="centered"
-            size="lg"
-            :bg="{
-              image: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=1200&h=400&fit=crop',
-              imageOverlay: 'heavy'
-            }"
-            :buttons="[
-              { label: 'Get Started' },
-              { label: 'See Demo', variant: 'outline' }
-            ]"
-          />
-        </section>
-
-        <!-- Inline Layout -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Inline Layout</h3>
-          <XMarkCTA
-            title="Need help getting started?"
-            variant="inline"
-            :buttons="[{ label: 'Contact Sales', to: '#' }]"
-          />
-        </section>
-
-        <!-- Custom Color -->
-        <section>
-          <h3 class="text-lg font-semibold mb-4">Custom Color</h3>
-          <XMarkCTA
-            title="Special announcement"
-            description="We're launching something exciting very soon."
-            variant="centered"
-            :bg="{ color: 'bg-emerald-600', variant: 'bold' }"
-            :buttons="[
-              { label: 'Notify Me' },
-              { label: 'Learn More', variant: 'outline' }
-            ]"
-          />
-        </section>
-      </div>
-
-      <!-- Props Documentation -->
-      <div class="border-t border-neutral-200 dark:border-neutral-800 pt-16">
-        <h2 class="text-lg font-semibold mb-6">Props</h2>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-neutral-200 dark:border-neutral-700">
-                <th class="text-left py-3 px-4 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">Description</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-              <tr><td class="py-3 px-4 font-mono text-xs">title</td><td class="py-3 px-4">String</td><td class="py-3 px-4">required</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">CTA heading</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">description</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</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">eyebrow</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">Small text above title</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">Icon name (Lucide)</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">buttons</td><td class="py-3 px-4">Array</td><td class="py-3 px-4">[]</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">[{ label, to?, variant?, icon? }]</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, centered, inline, stacked</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">bg</td><td class="py-3 px-4">String | Object</td><td class="py-3 px-4">'subtle'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Background config (see below)</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><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">sm, md, lg</td></tr>
-            </tbody>
-          </table>
-        </div>
-
-        <h2 class="text-lg font-semibold mt-12 mb-4">Background Options (bg prop)</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">Property</th>
-                <th class="text-left py-3 px-4 font-medium">Type</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">variant</td><td class="py-3 px-4">String</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">subtle, bold, gradient, none</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 text-neutral-600 dark:text-neutral-400">Custom Tailwind classes (overrides variant)</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">image</td><td class="py-3 px-4">String</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Background image URL</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">imageAlt</td><td class="py-3 px-4">String</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Background image alt text</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">imageOverlay</td><td class="py-3 px-4">String</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">light, heavy, gradient</td></tr>
-              <tr><td class="py-3 px-4 font-mono text-xs">imagePosition</td><td class="py-3 px-4">String</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Tailwind object-position class</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 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 text-neutral-600 dark:text-neutral-400">Pattern opacity (0-1)</td></tr>
-            </tbody>
-          </table>
-        </div>
-
-        <h2 class="text-lg font-semibold mt-12 mb-4">Button Styling</h2>
-        <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg space-y-2">
-          <p class="text-sm text-neutral-600 dark:text-neutral-400">
-            Buttons are automatically styled based on the <code class="text-primary-500">bg</code> prop:
-          </p>
-          <ul class="text-sm text-neutral-600 dark:text-neutral-400 list-disc list-inside space-y-1">
-            <li><strong>subtle/none:</strong> Primary color for first button, neutral for others</li>
-            <li><strong>bold/gradient/image:</strong> White solid button for primary, transparent outline/ghost for secondary</li>
-          </ul>
-        </div>
-      </div>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="CTA Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Simple string shorthand -->
-<XMarkCTA
-  title="Ready to get started?"
-  description="Join thousands of developers."
-  bg="subtle"
-  :buttons="[{ label: 'Get Started' }]"
-/>
-
-<!-- Bold centered CTA -->
-<XMarkCTA
-  eyebrow="Limited Offer"
-  title="Get 50% off"
-  variant="centered"
-  bg="bold"
-  size="lg"
-  :buttons="[
-    { label: 'Claim Now' },
-    { label: 'View Plans', variant: 'outline' }
-  ]"
-/>
-
-<!-- With pattern -->
-<XMarkCTA
-  title="Join our community"
-  variant="centered"
-  :bg="{ variant: 'bold', pattern: 'dots', patternOpacity: 0.1 }"
-  :buttons="[{ label: 'Join Now' }]"
-/>
-
-<!-- With background image -->
-<XMarkCTA
-  title="Take your business global"
-  variant="centered"
-  :bg="{
-    image: '/images/bg.jpg',
-    imageOverlay: 'heavy'
-  }"
-  :buttons="[{ label: 'Get Started' }]"
-/>
-
-<!-- Custom color -->
-<XMarkCTA
-  title="Special announcement"
-  :bg="{ color: 'bg-emerald-600', variant: 'bold' }"
-  :buttons="[{ label: 'Learn More' }]"
-/>`
-</script>