@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/.playground/pages/blog/cta.vue

@@ -0,0 +1,131 @@
+<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">Blog Newsletter CTA</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">In-article call-to-action for newsletter signups.</p>
+    </div>
+
+    <div class="p-8 space-y-16">
+      <div class="space-y-12">
+        <!-- Default -->
+        <section>
+          <h3 class="text-lg font-semibold mb-4">Default</h3>
+          <div class="max-w-2xl">
+            <XMarkBlogCTANewsletter
+              title="Enjoying this article?"
+              description="Subscribe to get notified when we publish new content."
+              :button="{ label: 'Subscribe' }"
+            />
+          </div>
+        </section>
+
+        <!-- Featured -->
+        <section>
+          <h3 class="text-lg font-semibold mb-4">Featured</h3>
+          <div class="max-w-2xl">
+            <XMarkBlogCTANewsletter
+              title="Join our newsletter"
+              description="Get the latest posts delivered right to your inbox."
+              :button="{ label: 'Subscribe Now' }"
+              variant="featured"
+            />
+          </div>
+        </section>
+
+        <!-- Inline -->
+        <section>
+          <h3 class="text-lg font-semibold mb-4">Inline</h3>
+          <div class="max-w-2xl">
+            <XMarkBlogCTANewsletter
+              title="Stay updated"
+              description="New posts every week."
+              :button="{ label: 'Join' }"
+              variant="inline"
+            />
+          </div>
+        </section>
+
+        <!-- Compact -->
+        <section>
+          <h3 class="text-lg font-semibold mb-4">Compact (for sidebars)</h3>
+          <div class="max-w-xs">
+            <XMarkBlogCTANewsletter
+              title="Subscribe"
+              description="Get notified about new posts."
+              :button="{ label: 'Subscribe' }"
+              variant="compact"
+            />
+          </div>
+        </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">'Subscribe to our newsletter'</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">'Get the latest posts...'</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">button</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">{ label: 'Subscribe' }</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Button config { label, color? }</td></tr>
+              <tr><td class="py-3 px-4 font-mono text-xs">placeholder</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Enter your email'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Email input placeholder</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, featured, inline, compact</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-mail'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Optional icon name</td></tr>
+              <tr><td class="py-3 px-4 font-mono text-xs">hasPrivacy</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 privacy note</td></tr>
+              <tr><td class="py-3 px-4 font-mono text-xs">privacyText</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'No spam. Unsubscribe anytime.'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Privacy note text</td></tr>
+              <tr><td class="py-3 px-4 font-mono text-xs">successMessage</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Thanks for subscribing!'</td><td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Message shown on success</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h2 class="text-lg font-semibold mt-12 mb-4">Events</h2>
+        <div class="space-y-4">
+          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
+            <p class="font-mono text-sm text-primary-500">@submit</p>
+            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Emitted with email address when newsletter form is submitted</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Code Example -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
+        <CodeExample title="Blog Newsletter CTA" :code="codeExample" />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const codeExample = `<!-- Default -->
+<XMarkBlogCTANewsletter
+  title="Enjoying this article?"
+  description="Subscribe to get notified."
+  :button="{ label: 'Subscribe' }"
+  @submit="handleSubscribe"
+/>
+
+<!-- Featured -->
+<XMarkBlogCTANewsletter
+  title="Join our newsletter"
+  :button="{ label: 'Subscribe Now' }"
+  variant="featured"
+  @submit="handleSubscribe"
+/>
+
+<!-- Compact (for sidebars) -->
+<XMarkBlogCTANewsletter
+  title="Subscribe"
+  :button="{ label: 'Join' }"
+  variant="compact"
+  @submit="handleSubscribe"
+/>`
+</script>

package/.playground/pages/blog/detail.vue

@@ -0,0 +1,379 @@
+<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">Blog Detail</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
+        Full blog post view with sidebar, rich content, and navigation.
+      </p>
+    </div>
+
+    <!-- Demo: Full Layout -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <XMarkBlogDetail
+        :post="post"
+        :previous-post="previousPost"
+        :next-post="nextPost"
+        :toc="tableOfContents"
+      >
+        <template #default>
+              <article class="prose dark:prose-invert max-w-none">
+                <p class="lead">
+                  Building a marketing website has never been easier. With modern tools like Nuxt, Vue, and Tailwind CSS, developers can create stunning, performant sites in record time. This guide walks you through the essential patterns and best practices for crafting marketing sites that convert.
+                </p>
+
+                <h2 id="getting-started">Getting Started</h2>
+                <p>
+                  Before diving into the code, it's important to understand the core principles that make marketing websites effective. These include clear messaging, compelling visuals, and optimized performance.
+                </p>
+                <p>
+                  The nuxt-x-marketing layer provides 33 production-ready components specifically designed for marketing sites. From hero sections to testimonials, each component is crafted with conversion in mind.
+                </p>
+
+                <h2 id="project-setup">Project Setup</h2>
+                <p>Start by creating a new Nuxt project and adding the marketing layer:</p>
+
+                <pre><code class="language-bash"># Create new project
+npx nuxi init my-marketing-site
+cd my-marketing-site
+
+# Install dependencies
+npm install
+
+# Add the marketing layer
+npm install @xenterprises/nuxt-x-marketing</code></pre>
+
+                <p>Then configure your <code>nuxt.config.ts</code>:</p>
+
+                <pre><code class="language-javascript">export default defineNuxtConfig({
+  extends: ['@xenterprises/nuxt-x-marketing'],
+
+  modules: ['@nuxt/ui'],
+
+  app: {
+    head: {
+      title: 'My Marketing Site'
+    }
+  }
+})</code></pre>
+
+                <h2 id="hero-sections">Creating Hero Sections</h2>
+                <p>
+                  The hero section is the first thing visitors see. It needs to capture attention immediately and communicate your value proposition clearly.
+                </p>
+
+                <figure>
+                  <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop" alt="Dashboard design" class="rounded-xl" />
+                  <figcaption>A well-designed hero section can increase conversions by up to 35%.</figcaption>
+                </figure>
+
+                <p>Key elements of an effective hero section:</p>
+                <ul>
+                  <li><strong>Clear headline</strong> - Communicate your main value proposition in under 10 words</li>
+                  <li><strong>Supporting text</strong> - Expand on the headline with 1-2 sentences</li>
+                  <li><strong>Strong CTA</strong> - Use action-oriented button text</li>
+                  <li><strong>Visual element</strong> - High-quality image or video that reinforces the message</li>
+                </ul>
+
+                <h2 id="social-proof">Adding Social Proof</h2>
+                <p>
+                  Social proof is one of the most powerful conversion tools. Testimonials, logos, and trust badges help establish credibility.
+                </p>
+
+                <blockquote>
+                  "These components saved us weeks of development time. The quality and attention to detail is outstanding."
+                  <cite>— Sarah Chen, CTO at TechCorp</cite>
+                </blockquote>
+
+                <p>
+                  Use the testimonials component to showcase customer feedback. The grid layout works well for displaying multiple testimonials, while the featured layout highlights a single powerful quote.
+                </p>
+
+                <h2 id="pricing-tables">Pricing Tables</h2>
+                <p>
+                  Your pricing page is where conversions happen. Make it easy for visitors to understand their options and choose the right plan.
+                </p>
+
+                <h3>Best Practices</h3>
+                <ol>
+                  <li>Limit to 3-4 pricing tiers to avoid decision paralysis</li>
+                  <li>Highlight the most popular or recommended plan</li>
+                  <li>Use clear feature comparisons</li>
+                  <li>Include trust badges near the pricing</li>
+                  <li>Offer a money-back guarantee to reduce friction</li>
+                </ol>
+
+                <h2 id="performance">Performance Optimization</h2>
+                <p>
+                  Performance directly impacts conversions. Studies show that a 1-second delay in page load time can result in a 7% reduction in conversions.
+                </p>
+
+                <p>The marketing layer includes built-in optimizations:</p>
+
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Feature</th>
+                      <th>Benefit</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Lazy loading</td>
+                      <td>Images load only when visible</td>
+                    </tr>
+                    <tr>
+                      <td>CSS purging</td>
+                      <td>Only used styles are shipped</td>
+                    </tr>
+                    <tr>
+                      <td>Component splitting</td>
+                      <td>Components load on demand</td>
+                    </tr>
+                    <tr>
+                      <td>Font optimization</td>
+                      <td>Fonts preloaded and subset</td>
+                    </tr>
+                  </tbody>
+                </table>
+
+                <h2 id="conclusion">Conclusion</h2>
+                <p>
+                  Building effective marketing websites requires the right combination of design, performance, and conversion optimization. With nuxt-x-marketing, you get battle-tested components that handle the heavy lifting, letting you focus on your content and messaging.
+                </p>
+                <p>
+                  Ready to get started? Check out the <a href="/content/features">features documentation</a> or browse the <a href="/">component library</a> to see what's available.
+                </p>
+              </article>
+        </template>
+
+        <!-- Custom Sidebar Content -->
+        <template #sidebar>
+          <XMarkBlogSidebar
+            :categories="categories"
+            :tags="tags"
+            :recent-posts="recentPosts"
+            :has-search="true"
+            :has-cta="true"
+          />
+        </template>
+      </XMarkBlogDetail>
+    </div>
+
+    <!-- Props Documentation -->
+    <div class="border-t border-neutral-200 dark:border-neutral-800">
+      <div class="max-w-4xl mx-auto px-8 py-12">
+        <h2 class="text-lg font-semibold mb-6">Blog Detail 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">post</td>
+                <td class="py-3 px-4">Object</td>
+                <td class="py-3 px-4">required</td>
+                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Post object with title, img: { src, alt? }, date, author, etc.</td>
+              </tr>
+              <tr>
+                <td class="py-3 px-4 font-mono text-xs">previousPost</td>
+                <td class="py-3 px-4">Object</td>
+                <td class="py-3 px-4">null</td>
+                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Previous post for navigation</td>
+              </tr>
+              <tr>
+                <td class="py-3 px-4 font-mono text-xs">nextPost</td>
+                <td class="py-3 px-4">Object</td>
+                <td class="py-3 px-4">null</td>
+                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Next post for navigation</td>
+              </tr>
+              <tr>
+                <td class="py-3 px-4 font-mono text-xs">toc</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">Table of contents [{ id, text, depth }]</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h2 class="text-lg font-semibold mt-12 mb-6">Slots</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">Slot</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">default</td>
+                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Main article content (prose)</td>
+              </tr>
+              <tr>
+                <td class="py-3 px-4 font-mono text-xs">sidebar</td>
+                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Custom sidebar content (overrides default)</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <h2 class="text-lg font-semibold mt-12 mb-6">Post Object Structure</h2>
+        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
+          <pre>{
+  title: "Post Title",
+  excerpt: "Brief description...",
+  img: { src: "https://...", alt: "Image description" },
+  date: "2024-01-15",
+  readingTime: "5 min read",
+  category: "Tutorial",
+  author: {
+    name: "Author Name",
+    avatar: "https://...",
+    bio: "Author bio...",
+    twitter: "@handle"
+  }
+}</pre>
+        </div>
+
+        <h2 class="text-lg font-semibold mt-12 mb-4">Code Example</h2>
+        <CodeExample title="Blog Detail Usage" :code="codeExample" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const codeExample = `<!-- With Nuxt Content v3 -->
+<script setup>
+const route = useRoute()
+
+// Fetch post
+const { data: post } = await useAsyncData('post', () =>
+  queryCollection('blog')
+    .where('slug', '=', route.params.slug)
+    .findOne()
+)
+
+// Fetch navigation
+const { data: surround } = await useAsyncData('surround', () =>
+  queryCollectionItemSurroundings('blog', route.path)
+)
+<\/script>
+
+<template>
+  <XMarkBlogDetail
+    :post="post"
+    :previous-post="surround?.[0]"
+    :next-post="surround?.[1]"
+    :toc="post?.body?.toc?.links || []"
+  >
+    <ContentRenderer :value="post" />
+
+    <template #sidebar>
+      <XMarkBlogSidebar
+        :categories="categories"
+        :recent-posts="recentPosts"
+      />
+    </template>
+  </XMarkBlogDetail>
+</template>`
+
+// Main post
+const post = {
+  title: 'Building Modern Marketing Sites with Nuxt',
+  excerpt: 'A comprehensive guide to creating beautiful, performant marketing websites using Vue, Nuxt, and modern web technologies.',
+  img: {
+    src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=600&fit=crop',
+    alt: 'Team working on laptops'
+  },
+  date: '2024-01-15',
+  readingTime: '8 min read',
+  category: 'Tutorial',
+  author: {
+    name: 'Sarah Chen',
+    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
+    bio: 'Sarah is a frontend developer specializing in Vue and Nuxt. She writes about web development and design systems.',
+    twitter: '@sarahchen'
+  }
+}
+
+// Navigation posts
+const previousPost = {
+  title: 'Introduction to Vue 3 Composition API',
+  slug: 'vue-composition-api'
+}
+
+const nextPost = {
+  title: 'Optimizing Nuxt for Production',
+  slug: 'nuxt-production-optimization'
+}
+
+// Table of contents
+const tableOfContents = [
+  { id: 'getting-started', text: 'Getting Started', depth: 2 },
+  { id: 'project-setup', text: 'Project Setup', depth: 2 },
+  { id: 'hero-sections', text: 'Creating Hero Sections', depth: 2 },
+  { id: 'social-proof', text: 'Adding Social Proof', depth: 2 },
+  { id: 'pricing-tables', text: 'Pricing Tables', depth: 2 },
+  { id: 'performance', text: 'Performance Optimization', depth: 2 },
+  { id: 'conclusion', text: 'Conclusion', depth: 2 }
+]
+
+// Sidebar data
+const categories = [
+  { name: 'Tutorial', slug: 'tutorial', count: 12 },
+  { name: 'Guide', slug: 'guide', count: 8 },
+  { name: 'Design', slug: 'design', count: 6 },
+  { name: 'Performance', slug: 'performance', count: 4 },
+  { name: 'News', slug: 'news', count: 3 }
+]
+
+const tags = [
+  { name: 'Nuxt', slug: 'nuxt' },
+  { name: 'Vue', slug: 'vue' },
+  { name: 'Tailwind CSS', slug: 'tailwind' },
+  { name: 'Components', slug: 'components' },
+  { name: 'Marketing', slug: 'marketing' },
+  { name: 'SEO', slug: 'seo' },
+  { name: 'Performance', slug: 'performance' },
+  { name: 'Design', slug: 'design' }
+]
+
+const recentPosts = [
+  {
+    title: 'Dark Mode Best Practices',
+    slug: 'dark-mode',
+    img: {
+      src: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=200&fit=crop',
+      alt: 'Dark mode'
+    },
+    date: '2024-01-10'
+  },
+  {
+    title: 'Building a Landing Page in 10 Minutes',
+    slug: 'landing-page-tutorial',
+    img: {
+      src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200&h=200&fit=crop',
+      alt: 'Landing page'
+    },
+    date: '2024-01-05'
+  },
+  {
+    title: 'CSS Grid vs Flexbox: When to Use Each',
+    slug: 'css-grid-flexbox',
+    img: {
+      src: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=200&h=200&fit=crop',
+      alt: 'CSS layout'
+    },
+    date: '2024-01-02'
+  }
+]
+</script>