@xenterprises/nuxt-x-marketing 0.0.24 → 1.0.1

package/.playground/components/ComponentPlayground.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="space-y-6">
+		<!-- Props Editor -->
+		<div class="border border-default rounded-lg overflow-hidden">
+			<div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 border-b border-default">
+				<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">
+					Customize Props
+				</h3>
+			</div>
+			<div class="p-4 space-y-4">
+				<div v-for="(value, key) in editableProps" :key="key" class="space-y-2">
+					<label class="text-sm font-medium text-slate-700 dark:text-slate-300">
+						{{ key }}
+					</label>
+					<div v-if="typeof value === 'boolean'" class="flex items-center gap-2">
+						<UToggle v-model="editableProps[key]" />
+						<span class="text-xs text-slate-500">{{ value ? 'true' : 'false' }}</span>
+					</div>
+					<UInput
+						v-else-if="typeof value === 'string'"
+						v-model="editableProps[key]"
+						:placeholder="`Enter ${key}`"
+						size="sm"
+					/>
+					<UInput
+						v-else-if="typeof value === 'number'"
+						v-model.number="editableProps[key]"
+						type="number"
+						:placeholder="`Enter ${key}`"
+						size="sm"
+					/>
+					<div v-else class="text-xs text-slate-500">
+						{{ typeof value }} (not editable)
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Live Preview -->
+		<div class="border border-default rounded-lg overflow-hidden">
+			<div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 border-b border-default">
+				<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">
+					Live Preview
+				</h3>
+			</div>
+			<div class="p-6 bg-white dark:bg-slate-950">
+				<slot :props="editableProps" />
+			</div>
+		</div>
+
+		<!-- Generated Code -->
+		<div class="border border-default rounded-lg overflow-hidden">
+			<div class="bg-slate-50 dark:bg-slate-900 px-4 py-3 border-b border-default flex items-center justify-between">
+				<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">
+					Generated Code
+				</h3>
+				<UButton
+					icon="i-lucide-copy"
+					variant="ghost"
+					size="xs"
+					@click="copyGeneratedCode"
+				>
+					{{ codeCopied ? 'Copied!' : 'Copy' }}
+				</UButton>
+			</div>
+			<div class="overflow-x-auto bg-white dark:bg-slate-950">
+				<pre class="p-4 text-sm leading-relaxed text-slate-800 dark:text-slate-200 font-mono"><code>{{ generatedCode }}</code></pre>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	componentName: {
+		type: String,
+		required: true,
+	},
+	initialProps: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const editableProps = ref({ ...props.initialProps });
+const codeCopied = ref(false);
+
+const generatedCode = computed(() => {
+	const propsStr = Object.entries(editableProps.value)
+		.map(([key, value]) => {
+			if (typeof value === 'string') {
+				return `  ${key}="${value}"`;
+			} else if (typeof value === 'boolean') {
+				return value ? `  :${key}="true"` : `  :${key}="false"`;
+			} else if (typeof value === 'number') {
+				return `  :${key}="${value}"`;
+			}
+			return `  :${key}="${JSON.stringify(value)}"`;
+		})
+		.join('\n');
+
+	return `<${props.componentName}\n${propsStr}\n/>`;
+});
+
+const copyGeneratedCode = async () => {
+	try {
+		await navigator.clipboard.writeText(generatedCode.value);
+		codeCopied.value = true;
+		setTimeout(() => {
+			codeCopied.value = false;
+		}, 2000);
+	} catch (err) {
+		console.error('Failed to copy:', err);
+	}
+};
+</script>
+

package/.playground/components/DocsHeader.vue

@@ -0,0 +1,19 @@
+<template>
+	<header class="sticky top-0 z-40 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			<div class="flex justify-between items-center h-14">
+				<!-- Logo -->
+				<NuxtLink to="/" class="flex items-center gap-2 font-semibold text-base">
+					<UIcon name="i-lucide-layers" class="w-5 h-5 text-primary" />
+					<span>X Marketing</span>
+					<span class="text-xs text-gray-500 dark:text-gray-400 font-normal ml-1">/ Docs</span>
+				</NuxtLink>
+
+				<!-- Right Actions -->
+				<div class="flex items-center gap-3">
+					<UColorModeButton />
+				</div>
+			</div>
+		</div>
+	</header>
+</template>

package/.playground/layouts/default.vue

@@ -1,5 +1,15 @@
 <template>
-	<slot />
+	<UApp>
+		<NuxtLoadingIndicator />
+
+		<AppHeader />
+
+		<UMain>
+			<slot />
+		</UMain>
+
+		<AppFooter />
+	</UApp>
 </template>
-<script setup>
-</script>
+
+<script setup></script>

package/.playground/layouts/docs-layout.vue

@@ -0,0 +1,161 @@
+<template>
+	<div class="min-h-screen bg-white dark:bg-gray-950">
+		<NuxtLoadingIndicator />
+
+		<DocsHeader />
+
+		<div class="flex h-[calc(100vh-3.5rem)]">
+			<!-- Collapsible Sidebar -->
+			<aside
+				class="hidden lg:flex lg:flex-col lg:border-r lg:border-gray-200 dark:lg:border-gray-800 transition-all duration-300"
+				:class="sidebarCollapsed ? 'lg:w-20' : 'lg:w-64'"
+			>
+				<!-- Toggle Button -->
+				<div
+					class="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-gray-800"
+				>
+					<span
+						v-if="!sidebarCollapsed"
+						class="text-sm font-semibold text-gray-900 dark:text-white"
+					>
+						Navigation
+					</span>
+					<button
+						@click="sidebarCollapsed = !sidebarCollapsed"
+						class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
+						:title="sidebarCollapsed ? 'Expand' : 'Collapse'"
+					>
+						<UIcon
+							:name="
+								sidebarCollapsed
+									? 'i-lucide-chevron-right'
+									: 'i-lucide-chevron-left'
+							"
+							class="w-5 h-5"
+						/>
+					</button>
+				</div>
+
+				<!-- Navigation Menu -->
+				<nav class="flex-1 overflow-y-auto">
+					<UNavigationMenu
+						:items="navigationItems"
+						orientation="vertical"
+						:collapsed="sidebarCollapsed"
+						:tooltip="sidebarCollapsed"
+						:popover="sidebarCollapsed"
+						variant="link"
+						class="w-full"
+					/>
+				</nav>
+
+				<!-- Sidebar Footer -->
+				<div class="border-t border-gray-200 dark:border-gray-800 px-4 py-4">
+					<NuxtLink
+						to="/"
+						class="flex items-center gap-2 px-2 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+						:title="sidebarCollapsed ? 'Back to Demo' : ''"
+					>
+						<UIcon name="i-lucide-arrow-left" class="w-4 h-4 shrink-0" />
+						<span v-if="!sidebarCollapsed">Back to Demo</span>
+					</NuxtLink>
+				</div>
+			</aside>
+
+			<!-- Main Content - Full Screen -->
+			<main class="flex-1 overflow-y-auto">
+				<div class="w-full h-full px-4 sm:px-6 lg:px-8 py-8">
+					<slot />
+				</div>
+			</main>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui";
+
+const route = useRoute();
+const sidebarCollapsed = ref(false);
+
+const navigationItems: NavigationMenuItem[][] = [
+	[
+		{
+			label: "Getting Started",
+			icon: "i-lucide-book-open",
+			defaultOpen: true,
+			children: [
+				{ label: "Introduction", to: "/docs" },
+				{ label: "Quick Start", to: "/docs/quick-start" },
+				{ label: "Installation", to: "/docs/installation" },
+			],
+		},
+		{
+			label: "Hero Sections",
+			icon: "i-lucide-image",
+			children: [
+				{ label: "Hero Centered", to: "/docs/components/hero/centered" },
+				{ label: "Hero Split", to: "/docs/components/hero/split" },
+				{ label: "Hero Image", to: "/docs/components/hero/image" },
+				{ label: "Hero Video", to: "/docs/components/hero/video" },
+				{ label: "Hero Slider", to: "/docs/components/hero/slider" },
+			],
+		},
+		{
+			label: "Features",
+			icon: "i-lucide-sparkles",
+			children: [
+				{ label: "Feature Grid", to: "/docs/components/feature/grid" },
+				{ label: "Feature Card", to: "/docs/components/feature/card" },
+				{ label: "Feature Showcase", to: "/docs/components/feature/showcase" },
+				{ label: "Feature Preview", to: "/docs/components/feature/preview" },
+			],
+		},
+		{
+			label: "CTA & Conversion",
+			icon: "i-lucide-zap",
+			children: [
+				{ label: "CTA Section", to: "/docs/components/cta/section" },
+				{ label: "CTA Card", to: "/docs/components/cta/card" },
+				{ label: "CTA Banner", to: "/docs/components/cta/banner" },
+			],
+		},
+		{
+			label: "Content",
+			icon: "i-lucide-file-text",
+			children: [
+				{ label: "Testimonials", to: "/docs/components/testimonial" },
+				{ label: "Blog Grid", to: "/docs/components/blog/grid" },
+				{ label: "Blog Card", to: "/docs/components/blog/card" },
+				{ label: "FAQ", to: "/docs/components/faq" },
+			],
+		},
+		{
+			label: "Stats & Metrics",
+			icon: "i-lucide-bar-chart-3",
+			children: [
+				{ label: "Stats Section", to: "/docs/components/stats/section" },
+				{ label: "Stats Grid", to: "/docs/components/stats/grid" },
+			],
+		},
+		{
+			label: "Navigation & Layout",
+			icon: "i-lucide-layout",
+			children: [
+				{ label: "Header App", to: "/docs/components/header/app" },
+				{ label: "Header Nav", to: "/docs/components/header/nav" },
+				{ label: "Footer", to: "/docs/components/footer" },
+			],
+		},
+		{
+			label: "State",
+			icon: "i-lucide-inbox",
+			children: [
+				{ label: "Empty State", to: "/docs/components/state/empty" },
+				{ label: "Loading State", to: "/docs/components/state/loading" },
+			],
+		},
+	],
+];
+</script>
+

package/.playground/layouts/docs.vue

@@ -0,0 +1,11 @@
+<template>
+	<div>
+		<script setup>
+			definePageMeta({
+				layout: "docs-layout",
+			});
+		</script>
+		<slot />
+	</div>
+</template>
+

package/.playground/pages/blog/author.vue

@@ -0,0 +1,145 @@
+<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 Author</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Author bios in inline, card, and full variants.</p>
+    </div>
+
+    <div class="space-y-0">
+      <!-- Inline Variant -->
+      <XMarkSection bg="default">
+        <div class="text-center mb-8">
+          <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">variant="inline"</span>
+          <h2 class="xText-headline">Inline Variant</h2>
+          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Compact author info for post headers and bylines</p>
+        </div>
+        <div class="max-w-2xl mx-auto">
+          <XMarkBlogAuthor :author="author" variant="inline" />
+        </div>
+      </XMarkSection>
+
+      <!-- Card Variant -->
+      <XMarkSection bg="subtle">
+        <div class="text-center mb-8">
+          <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">variant="card"</span>
+          <h2 class="xText-headline">Card Variant</h2>
+          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Author card for sidebars or author grids</p>
+        </div>
+        <div class="max-w-sm mx-auto">
+          <XMarkBlogAuthor :author="author" variant="card" />
+        </div>
+      </XMarkSection>
+
+      <!-- Full Variant -->
+      <XMarkSection bg="default">
+        <div class="text-center mb-8">
+          <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">variant="full"</span>
+          <h2 class="xText-headline">Full Variant</h2>
+          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Complete author bio for post footers</p>
+        </div>
+        <div class="max-w-2xl mx-auto">
+          <XMarkBlogAuthor :author="author" variant="full" />
+        </div>
+      </XMarkSection>
+
+      <!-- Props -->
+      <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">author</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">Author data object</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">'inline'</td>
+                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">inline, sm, full, card</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </XMarkSection>
+
+      <!-- Author Object Structure -->
+      <XMarkSection bg="default">
+        <h2 class="text-lg font-semibold mb-4">Author Object Structure</h2>
+        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
+          <pre>{
+  name: "Sarah Chen",
+  avatar: "https://...",
+  title: "Senior Developer",
+  bio: "Sarah specializes in Vue.js and Nuxt...",
+  social: {
+    twitter: "https://twitter.com/sarahchen",
+    linkedin: "https://linkedin.com/in/sarahchen",
+    github: "https://github.com/sarahchen"
+  }
+}</pre>
+        </div>
+      </XMarkSection>
+
+      <!-- Code Example -->
+      <XMarkSection bg="subtle">
+        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
+        <CodeExample title="Blog Author Usage" :code="codeExample" />
+      </XMarkSection>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Initialize scroll reveal animations
+useScrollReveal()
+
+const codeExample = `<!-- Inline - for post headers -->
+<XMarkBlogAuthor :author="author" variant="inline" />
+
+<!-- Small - compact byline -->
+<XMarkBlogAuthor :author="author" variant="sm" />
+
+<!-- Card - for sidebars -->
+<XMarkBlogAuthor :author="author" variant="card" />
+
+<!-- Full - for post footers -->
+<XMarkBlogAuthor :author="author" variant="full" />
+
+<!-- Author data structure -->
+<script setup>
+const author = {
+  name: 'Sarah Chen',
+  avatar: 'https://...',
+  title: 'Senior Developer',
+  bio: 'Sarah specializes in Vue.js and Nuxt...',
+  social: {
+    twitter: 'https://twitter.com/sarahchen',
+    linkedin: 'https://linkedin.com/in/sarahchen',
+    github: 'https://github.com/sarahchen'
+  }
+}
+<\/script>`
+
+const author = {
+  name: 'Sarah Chen',
+  avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop',
+  title: 'Senior Developer',
+  bio: 'Sarah is a frontend developer with 8+ years of experience. She specializes in Vue.js and Nuxt, and loves creating beautiful, performant web applications. When not coding, she enjoys hiking and photography.',
+  social: {
+    twitter: 'https://twitter.com/sarahchen',
+    linkedin: 'https://linkedin.com/in/sarahchen',
+    github: 'https://github.com/sarahchen'
+  }
+}
+</script>

package/.playground/pages/blog/card.vue

@@ -0,0 +1,149 @@
+<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 Card</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Blog post cards with image, metadata, and excerpts.</p>
+    </div>
+
+    <div class="p-8">
+      <!-- Default Cards -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Default Cards</h2>
+        <div class="grid md:grid-cols-3 gap-8 max-w-6xl">
+          <XMarkBlogCard
+            v-for="post in posts"
+            :key="post.slug"
+            :post="post"
+          />
+        </div>
+      </section>
+
+      <!-- With Button -->
+      <section class="mt-12">
+        <h2 class="text-lg font-semibold mb-4">With Button</h2>
+        <p class="text-sm text-neutral-500 mb-4">Add a full-width button below the card content</p>
+        <div class="grid md:grid-cols-3 gap-8 max-w-6xl">
+          <XMarkBlogCard
+            v-for="post in posts"
+            :key="`btn-${post.slug}`"
+            :post="post"
+            :button="{ label: 'Read More', icon: 'i-lucide-arrow-right' }"
+          />
+        </div>
+      </section>
+
+      <div class="mt-12">
+        <h2 class="text-lg font-semibold mb-4">Post Object Shape</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",
+  description: "Brief description...",
+  img: { src: "https://...", alt: "Image description" },
+  slug: "post-slug",
+  date: "2024-01-15",
+  readingTime: 5,
+  author: { name: "Author", avatar: "https://..." },
+  category: "Tutorial"
+}</pre>
+        </div>
+      </div>
+
+      <div class="mt-8">
+        <h2 class="text-lg font-semibold mb-4">Component 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">post</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Blog post object (see shape above)</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">hasCategory</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show category badge</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">hasAuthor</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show author info</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">hasExcerpt</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Show description</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">null</td><td class="py-3 px-4">{ label, color?, variant?, icon? }</td></tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Code Example -->
+      <section class="mt-12">
+        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
+        <CodeExample title="Blog Card Usage" :code="codeExample" />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Initialize scroll reveal animations
+useScrollReveal()
+
+const codeExample = `<!-- Single blog card -->
+<XMarkBlogCard
+  :post="{
+    title: 'Getting Started with Nuxt',
+    description: 'Learn the basics of building modern web apps.',
+    img: { src: 'https://images.unsplash.com/...', alt: 'Code on screen' },
+    slug: 'getting-started',
+    date: '2024-01-15',
+    readingTime: 5,
+    author: { name: 'Sarah Chen', avatar: 'https://...' },
+    category: 'Tutorial'
+  }"
+/>
+
+<!-- With button -->
+<XMarkBlogCard
+  :post="post"
+  :button="{ label: 'Read More', icon: 'i-lucide-arrow-right' }"
+/>
+
+<!-- Without author -->
+<XMarkBlogCard :post="post" :has-author="false" />
+
+<!-- Grid of blog cards -->
+<div class="grid md:grid-cols-3 gap-8">
+  <XMarkBlogCard
+    v-for="post in posts"
+    :key="post.slug"
+    :post="post"
+  />
+</div>`
+
+const posts = [
+  {
+    title: 'Getting Started with Nuxt',
+    description: 'Learn the basics of building modern web applications with Nuxt 3.',
+    img: { src: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&h=300&fit=crop', alt: 'Code on laptop' },
+    slug: 'getting-started',
+    date: '2024-01-15',
+    readingTime: 5,
+    author: { name: 'Sarah Chen', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&fit=crop' },
+    category: 'Tutorial'
+  },
+  {
+    title: 'Vue 3 Composition API',
+    description: 'Mastering the composition API for cleaner, more reusable code.',
+    img: { src: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop', alt: 'Programming code' },
+    slug: 'composition-api',
+    date: '2024-01-10',
+    readingTime: 8,
+    author: { name: 'Michael Torres', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50&h=50&fit=crop' },
+    category: 'Development'
+  },
+  {
+    title: 'Building Design Systems',
+    description: 'Create consistent, scalable design systems for your projects.',
+    img: { src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop', alt: 'Design dashboard' },
+    slug: 'design-systems',
+    date: '2024-01-05',
+    readingTime: 6,
+    author: { name: 'Emma Williams', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop' },
+    category: 'Design'
+  }
+]
+</script>