@xenterprises/nuxt-x-marketing 0.0.24 → 1.0.1

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,471 @@
+<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>
+
+            <XMarkCodeBlock :code="bashCode" language="bash" show-copy />
+
+            <p>Then configure your <code>nuxt.config.ts</code>:</p>
+
+            <XMarkCodeBlock
+              :code="nuxtConfigCode"
+              language="typescript"
+              show-copy
+            />
+
+            <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"
+              />
+              <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
+              <mark>1-second delay</mark> in page load time can result in a
+              <strong>7% reduction</strong> in conversions.
+            </p>
+
+            <p>The marketing layer includes built-in optimizations:</p>
+
+            <div class="not-prose">
+              <UTable
+                :data="performanceData"
+                :columns="performanceColumns"
+                class="flex-1"
+              />
+            </div>
+
+            <hr />
+
+            <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="not-prose">
+          <UTable :data="propsData" :columns="propsColumns" class="flex-1" />
+        </div>
+
+        <h2 class="text-lg font-semibold mt-12 mb-6">Slots</h2>
+        <div class="not-prose">
+          <UTable :data="slotsData" :columns="slotsColumns" class="flex-1" />
+        </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>
+import { h, resolveComponent } from "vue";
+
+// Code examples for Shiki highlighting
+const bashCode = `# 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`;
+
+const nuxtConfigCode = `export default defineNuxtConfig({
+  extends: ['@xenterprises/nuxt-x-marketing'],
+
+  modules: ['@nuxt/ui'],
+
+  app: {
+    head: {
+      title: 'My Marketing Site'
+    }
+  }
+})`;
+
+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>`;
+
+// Performance table data
+const performanceData = ref([
+  { feature: "Lazy loading", benefit: "Images load only when visible" },
+  { feature: "CSS purging", benefit: "Only used styles are shipped" },
+  { feature: "Component splitting", benefit: "Components load on demand" },
+  { feature: "Font optimization", benefit: "Fonts preloaded and subset" },
+]);
+
+const performanceColumns = [
+  {
+    accessorKey: "feature",
+    header: "Feature",
+    cell: ({ row }) => row.getValue("feature"),
+  },
+  {
+    accessorKey: "benefit",
+    header: "Benefit",
+    cell: ({ row }) => row.getValue("benefit"),
+  },
+];
+
+// Props documentation table data
+const propsData = ref([
+  {
+    prop: "post",
+    type: "Object",
+    default: "required",
+    description:
+      "Post object with title, img: { src, alt? }, date, author, etc.",
+  },
+  {
+    prop: "previousPost",
+    type: "Object",
+    default: "null",
+    description: "Previous post for navigation",
+  },
+  {
+    prop: "nextPost",
+    type: "Object",
+    default: "null",
+    description: "Next post for navigation",
+  },
+  {
+    prop: "toc",
+    type: "Array",
+    default: "[]",
+    description: "Table of contents [{ id, text, depth }]",
+  },
+]);
+
+const propsColumns = [
+  {
+    accessorKey: "prop",
+    header: "Prop",
+    cell: ({ row }) =>
+      h("code", { class: "text-xs font-mono" }, row.getValue("prop")),
+  },
+  {
+    accessorKey: "type",
+    header: "Type",
+    cell: ({ row }) => row.getValue("type"),
+  },
+  {
+    accessorKey: "default",
+    header: "Default",
+    cell: ({ row }) => row.getValue("default"),
+  },
+  {
+    accessorKey: "description",
+    header: "Description",
+    cell: ({ row }) => row.getValue("description"),
+  },
+];
+
+// Slots table data
+const slotsData = ref([
+  { slot: "default", description: "Main article content (prose)" },
+  {
+    slot: "sidebar",
+    description: "Custom sidebar content (overrides default)",
+  },
+]);
+
+const slotsColumns = [
+  {
+    accessorKey: "slot",
+    header: "Slot",
+    cell: ({ row }) =>
+      h("code", { class: "text-xs font-mono" }, row.getValue("slot")),
+  },
+  {
+    accessorKey: "description",
+    header: "Description",
+    cell: ({ row }) => row.getValue("description"),
+  },
+];
+
+// 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>