@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/content/pricing.vue

@@ -1,335 +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 Plans</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Pricing cards with monthly/yearly toggle, social proof badges, and highlighted plans.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="space-y-0">
-      <!-- Scaled Center Plan -->
-      <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">Scale</span>
-          <h2 class="xText-headline">Scaled Center Plan</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Center plan is scaled up to draw attention (scale and compact are mutually exclusive)</p>
-        </div>
-
-        <XMarkPricingPlans
-          :plans="computedPlans"
-          :has-billing-toggle="true"
-          :yearly-discount="20"
-          :badges="['no-credit-card', 'cancel-anytime', 'money-back']"
-          scale
-        />
-      </XMarkSection>
-
-      <!-- Scaled with 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">Scaled with Badges Above</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Highlighted plan is scaled with badges positioned above</p>
-        </div>
-
-        <XMarkPricingPlans
-          :plans="simplePlans"
-          highlighted="Professional"
-          :badges="['free-trial', 'secure']"
-          badges-position="top"
-          scale
-        />
-      </XMarkSection>
-
-      <!-- Two Plans - Scaled -->
-      <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">Two Plans</span>
-          <h2 class="xText-headline">Scaled Two-Plan Layout</h2>
-        </div>
-
-        <XMarkPricingPlans
-          :plans="twoPlans"
-          highlighted="Premium"
-          :badges="['setup', 'support']"
-          scale
-        />
-      </XMarkSection>
-
-      <!-- Props Documentation -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-6">XMarkPricingPlans 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 plan objects</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">highlighted</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">Plan name to highlight</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasBillingToggle</td>
-                <td class="py-3 px-4">Boolean</td>
-                <td class="py-3 px-4">false</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Has monthly/yearly toggle</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">yearlyDiscount</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">20</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Yearly discount percentage</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">scale</td>
-                <td class="py-3 px-4">Boolean</td>
-                <td class="py-3 px-4">false</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Scale highlighted plan (mutually exclusive with compact)</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">compact</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">No gap between plans (mutually exclusive with scale)</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>
-
-      <!-- Badge Presets -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Available Badge Presets</h2>
-        <div class="grid md:grid-cols-4 gap-4">
-          <div v-for="preset in badgePresets" :key="preset" class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4">
-            <XMarkSocialProofBadge :preset="preset" variant="text" />
-            <code class="block mt-2 text-xs text-neutral-500">'{{ preset }}'</code>
-          </div>
-        </div>
-      </XMarkSection>
-
-      <!-- Plan Structure -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Plan Data Structure</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
-          <pre>{
-  name: "Pro",
-  description: "For professional teams",
-  price: "$29" | { monthly: "$29", yearly: "$279" },
-  period: "/month",  // Optional, defaults to billing period
-  popular: true,     // Shows "Most Popular" badge
-  features: [
-    "All features",
-    "Priority support",
-    "Custom integrations"
-  ],
-  button: {
-    label: "Get Pro"
-  }
-}</pre>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Pricing Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { highlight } from '#ui/utils/fuse'
-
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const badgePresets = [
-  'no-credit-card',
-  'cancel-anytime',
-  'free-trial',
-  'secure',
-  'money-back',
-  'support',
-  'setup',
-  'gdpr'
-]
-
-const codeExample = `<!-- Scaled center plan (scale enlarges the highlighted plan) -->
-<XMarkPricingPlans
-  :plans="plans"
-  :has-billing-toggle="true"
-  :yearly-discount="20"
-  :badges="['no-credit-card', 'cancel-anytime', 'money-back']"
-  scale
-  @select="handleSelect"
-/>
-
-<!-- Compact layout (no gaps between plans) -->
-<XMarkPricingPlans
-  :plans="plans"
-  highlighted="Pro"
-  :badges="['free-trial', 'secure']"
-  badges-position="top"
-  compact
-/>
-
-<!-- Note: scale and compact are mutually exclusive -->
-
-<!-- Plan data structure -->
-const plans = [
-  {
-    name: 'Starter',
-    description: 'For personal projects',
-    price: { monthly: '$0', yearly: '$0' },
-    features: ['10 components', 'Basic support'],
-    button: { label: 'Get Started' }
-  },
-  {
-    name: 'Pro',
-    description: 'For professional teams',
-    price: { monthly: '$29', yearly: '$279' },
-    popular: true,
-    features: ['All components', 'Priority support'],
-    button: { label: 'Get Pro' }
-  }
-]`
-
-const plansData = [
-  {
-    name: 'Starter',
-    description: 'For personal projects',
-    price: { monthly: '$0', yearly: '$0' },
-    features: [
-      '10 components',
-      'Basic support',
-      'Community access',
-      'MIT license'
-    ],
-    button: {
-      label: 'Get Started'
-    }
-  },
-  {
-    name: 'Pro',
-    description: 'For professional teams',
-    price: { monthly: '$29', yearly: '$279' },
-    popular: true,
-   scale: true,
-   highlight: true,
-    features: [
-      'All 33 components',
-      'Priority support',
-      'Figma files',
-      'Updates for 1 year',
-      'Private Discord'
-    ],
-    button: {
-      label: 'Get Pro'
-    }
-  },
-  {
-    name: 'Enterprise',
-    description: 'For large organizations',
-    price: { monthly: '$99', yearly: '$949' },
-    features: [
-      'Everything in Pro',
-      'Custom components',
-      'Dedicated support',
-      'SLA guarantee',
-      'White-label license'
-    ],
-    button: {
-      label: 'Contact Sales'
-    }
-  }
-]
-
-const computedPlans = computed(() => {
-  return plansData
-})
-
-const simplePlans = [
-  {
-    name: 'Basic',
-    description: 'Essential features',
-    price: '$9',
-    period: '/month',
-    features: ['5 projects', 'Basic analytics', 'Email support'],
-    button: { label: 'Start Free Trial' }
-  },
-  {
-    name: 'Professional',
-    description: 'Advanced features',
-    price: '$29',
-    period: '/month',
-    popular: true,
-    features: ['Unlimited projects', 'Advanced analytics', 'Priority support', 'API access'],
-    button: { label: 'Get Started' }
-  },
-  {
-    name: 'Business',
-    description: 'Enterprise scale',
-    price: '$99',
-    period: '/month',
-    features: ['Everything in Pro', 'Custom integrations', 'Dedicated manager', 'SLA'],
-    button: { label: 'Contact Us' }
-  }
-]
-
-const twoPlans = [
-  {
-    name: 'Free',
-    description: 'Get started',
-    price: '$0',
-    period: '/forever',
-    features: ['Basic features', 'Community support', '1 project'],
-    button: { label: 'Sign Up Free' }
-  },
-  {
-    name: 'Premium',
-    description: 'Full access',
-    price: '$49',
-    period: '/month',
-    popular: true,
-    features: ['All features', 'Priority support', 'Unlimited projects', 'Custom branding'],
-    button: { label: 'Go Premium' }
-  }
-]
-</script>

package/.playground/pages/content/testimonials.vue

@@ -1,188 +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">Testimonials</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Customer testimonials in featured, grid, and carousel layouts.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="space-y-0">
-      <!-- Featured Layout -->
-      <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="featured"</span>
-          <h2 class="xText-headline">Featured Testimonial</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Single prominent testimonial with navigation dots</p>
-        </div>
-        <XMarkSocialProofTestimonials
-          :testimonials="testimonials"
-          layout="featured"
-          :has-stars="true"
-        />
-      </XMarkSection>
-
-      <!-- Grid 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="grid"</span>
-          <h2 class="xText-headline">Grid Layout</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Multiple testimonials in a responsive grid</p>
-        </div>
-        <XMarkSocialProofTestimonials
-          :testimonials="testimonials"
-          layout="grid"
-          :has-stars="true"
-        />
-      </XMarkSection>
-
-      <!-- Without Stars -->
-      <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">hasStars="false"</span>
-          <h2 class="xText-headline">Without Star Ratings</h2>
-        </div>
-        <XMarkSocialProofTestimonials
-          :testimonials="testimonials"
-          layout="grid"
-          :has-stars="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">testimonials</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 { quote, name, title, company, avatar, logo, rating }</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">'featured'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">featured, grid, carousel</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasStars</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 star rating</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 text-neutral-600 dark:text-neutral-400">Auto-rotate (featured/carousel layouts)</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">5000</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Autoplay interval in ms</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Data Structure -->
-      <XMarkSection bg="default">
-        <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>{
-  quote: "This is the testimonial text...",
-  name: "John Doe",
-  title: "CEO",
-  company: "Acme Inc",
-  avatar: "https://...",
-  logo: "https://...",  // Optional company logo
-  rating: 5  // 1-5 for star rating
-}</pre>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Testimonials Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<XMarkSocialProofTestimonials
-  :testimonials="[
-    {
-      quote: 'These components saved us weeks of development.',
-      name: 'Sarah Chen',
-      title: 'CTO',
-      company: 'TechCorp',
-      avatar: 'https://...',
-      rating: 5
-    },
-    {
-      quote: 'The best marketing component library.',
-      name: 'Michael Torres',
-      title: 'Lead Developer',
-      company: 'StartupXYZ',
-      avatar: 'https://...',
-      rating: 5
-    }
-  ]"
-  layout="featured"
-  :has-stars="true"
-/>
-
-<!-- Grid layout -->
-<XMarkSocialProofTestimonials
-  :testimonials="testimonials"
-  layout="grid"
-  :has-stars="false"
-/>`
-
-const testimonials = [
-  {
-    quote: 'These components saved us weeks of development time. The quality and attention to detail is outstanding. Highly recommended for any marketing project.',
-    name: 'Sarah Chen',
-    title: 'CTO',
-    company: 'TechCorp',
-    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
-    rating: 5
-  },
-  {
-    quote: 'The best marketing component library I\'ve used. Beautifully designed and easy to customize. Our team was able to launch our new site in record time.',
-    name: 'Michael Torres',
-    title: 'Lead Developer',
-    company: 'StartupXYZ',
-    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop',
-    rating: 5
-  },
-  {
-    quote: 'Perfect for building marketing sites quickly. The dark mode support is excellent and the accessibility features are top-notch.',
-    name: 'Emma Williams',
-    title: 'Designer',
-    company: 'Creative Agency',
-    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop',
-    rating: 5
-  }
-]
-</script>