@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/components/X/Mark/Blog/Navigation.vue

@@ -0,0 +1,100 @@
+<template>
+	<nav class="grid sm:grid-cols-2 gap-4 pt-8 border-t border-neutral-200 dark:border-neutral-800">
+		<!-- Previous -->
+		<UButton
+			v-if="previous"
+			:to="getPostUrl(previous)"
+			variant="ghost"
+			color="neutral"
+			class="justify-start! h-auto! py-4! px-4!"
+			:ui="{
+				base: 'group',
+				rounded: 'rounded-xl'
+			}"
+		>
+			<template #leading>
+				<UIcon
+					name="i-lucide-arrow-left"
+					class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 transition-colors flex-shrink-0"
+				/>
+			</template>
+			<div class="flex-1 min-w-0 text-left">
+				<span class="text-xs text-neutral-500 uppercase tracking-wide block font-normal">
+					{{ previousLabel }}
+				</span>
+				<p class="font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-1 mt-0.5">
+					{{ previous.title }}
+				</p>
+			</div>
+		</UButton>
+		<div v-else />
+
+		<!-- Next -->
+		<UButton
+			v-if="next"
+			:to="getPostUrl(next)"
+			variant="ghost"
+			color="neutral"
+			class="justify-end! h-auto! py-4! px-4!"
+			:ui="{
+				base: 'group',
+				rounded: 'rounded-xl'
+			}"
+		>
+			<div class="flex-1 min-w-0 text-right">
+				<span class="text-xs text-neutral-500 uppercase tracking-wide block font-normal">
+					{{ nextLabel }}
+				</span>
+				<p class="font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-1 mt-0.5">
+					{{ next.title }}
+				</p>
+			</div>
+			<template #trailing>
+				<UIcon
+					name="i-lucide-arrow-right"
+					class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 transition-colors flex-shrink-0"
+				/>
+			</template>
+		</UButton>
+	</nav>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Previous post object */
+	previous: {
+		type: Object,
+		default: null,
+		// { title, slug } or { title, _path }
+	},
+	/** Next post object */
+	next: {
+		type: Object,
+		default: null,
+		// { title, slug } or { title, _path }
+	},
+	/** Base path for blog posts */
+	basePath: {
+		type: String,
+		default: '/blog',
+	},
+	/** Label for previous link */
+	previousLabel: {
+		type: String,
+		default: 'Previous',
+	},
+	/** Label for next link */
+	nextLabel: {
+		type: String,
+		default: 'Next',
+	},
+});
+
+const getPostUrl = (post) => {
+	// Support both slug and _path (from Nuxt Content)
+	if (post._path) {
+		return post._path;
+	}
+	return `${props.basePath}/${post.slug}`;
+};
+</script>

package/app/components/X/Mark/Blog/Sidebar.vue

@@ -0,0 +1,160 @@
+<template>
+	<aside class="space-y-8">
+		<!-- Search -->
+		<section v-if="hasSearch">
+			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Search</h4>
+			<UInput
+				v-model="search"
+				placeholder="Search posts..."
+				icon="i-lucide-search"
+				@keyup.enter="$emit('search', search)"
+			/>
+		</section>
+
+		<!-- Categories -->
+		<section v-if="categories?.length">
+			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Categories</h4>
+			<nav class="space-y-1">
+				<NuxtLink
+					v-for="category in categories"
+					:key="category.slug"
+					:to="categoryPath(category.slug)"
+					class="flex justify-between items-center py-2 px-3 rounded-lg text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+					:class="{
+						'bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400': isActiveCategory(category.slug)
+					}"
+				>
+					<span>{{ category.name }}</span>
+					<span class="text-neutral-400 text-xs">{{ category.count }}</span>
+				</NuxtLink>
+			</nav>
+		</section>
+
+		<!-- Tags -->
+		<section v-if="tags?.length">
+			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Tags</h4>
+			<div class="flex flex-wrap gap-2">
+				<NuxtLink
+					v-for="tag in tags"
+					:key="tag.slug"
+					:to="tagPath(tag.slug)"
+					class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+				>
+					{{ tag.name }}
+				</NuxtLink>
+			</div>
+		</section>
+
+		<!-- Recent Posts -->
+		<section v-if="recentPosts?.length">
+			<h4 class="font-medium mb-3 text-neutral-900 dark:text-white">Recent Posts</h4>
+			<div class="space-y-4">
+				<NuxtLink
+					v-for="post in recentPosts"
+					:key="post.slug"
+					:to="`/blog/${post.slug}`"
+					class="flex gap-3 group"
+				>
+					<figure class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
+						<img
+							v-if="post.img?.src"
+							:src="post.img.src"
+							:alt="post.img.alt || post.title"
+							class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+						/>
+						<div
+							v-else
+							class="w-full h-full bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center"
+						>
+							<UIcon name="i-lucide-file-text" class="w-6 h-6 text-neutral-400" />
+						</div>
+					</figure>
+					<div class="flex-1 min-w-0">
+						<h5 class="text-sm font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-2">
+							{{ post.title }}
+						</h5>
+						<time
+							v-if="post.date"
+							:datetime="post.date"
+							class="text-xs text-neutral-500 mt-1 block"
+						>
+							{{ formatDate(post.date) }}
+						</time>
+					</div>
+				</NuxtLink>
+			</div>
+		</section>
+
+		<!-- Newsletter CTA -->
+		<slot name="cta">
+			<XMarkBlogCTANewsletter v-if="hasCta" variant="compact" />
+		</slot>
+
+		<!-- Custom Content -->
+		<slot />
+	</aside>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Has search input */
+	hasSearch: {
+		type: Boolean,
+		default: true,
+	},
+	/** Categories list */
+	categories: {
+		type: Array,
+		default: () => [],
+		// Each: { name, slug, count }
+	},
+	/** Tags list */
+	tags: {
+		type: Array,
+		default: () => [],
+		// Each: { name, slug }
+	},
+	/** Recent posts */
+	recentPosts: {
+		type: Array,
+		default: () => [],
+		// Each: { title, slug, img?: { src, alt? }, date? }
+	},
+	/** Base path for categories */
+	categoryBasePath: {
+		type: String,
+		default: '/blog/category',
+	},
+	/** Base path for tags */
+	tagBasePath: {
+		type: String,
+		default: '/blog/tag',
+	},
+	/** Has newsletter CTA */
+	hasCta: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+defineEmits(['search']);
+
+const route = useRoute();
+const search = ref('');
+
+const categoryPath = (slug) => `${props.categoryBasePath}/${slug}`;
+const tagPath = (slug) => `${props.tagBasePath}/${slug}`;
+
+const isActiveCategory = (slug) => {
+	return route.params.category === slug || route.query.category === slug;
+};
+
+const formatDate = (dateStr) => {
+	const date = new Date(dateStr);
+	return date.toLocaleDateString('en-US', {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric',
+	});
+};
+</script>

package/app/components/X/Mark/Button/BackToTop.vue

@@ -0,0 +1,99 @@
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="translate-y-4 opacity-0"
+    leave-active-class="transition-all duration-200 ease-in"
+    leave-to-class="translate-y-4 opacity-0"
+  >
+    <button
+      v-if="isVisible"
+      class="fixed z-40 w-11 h-11 flex items-center justify-center rounded-full shadow-lg transition-all duration-300 hover:scale-110"
+      :class="[positionClasses, variantClasses]"
+      :aria-label="label"
+      @click="scrollToTop"
+    >
+      <UIcon :name="icon" class="w-5 h-5" />
+    </button>
+  </Transition>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Scroll threshold before showing button */
+  threshold: {
+    type: Number,
+    default: 400,
+  },
+  /** Button position */
+  position: {
+    type: String,
+    default: 'bottom-right',
+    validator: (v) => ['bottom-right', 'bottom-left', 'bottom-center'].includes(v),
+  },
+  /** Style variant */
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['primary', 'neutral', 'glass'].includes(v),
+  },
+  /** Icon name */
+  icon: {
+    type: String,
+    default: 'i-lucide-arrow-up',
+  },
+  /** Aria label */
+  label: {
+    type: String,
+    default: 'Back to top',
+  },
+  /** Smooth scroll behavior */
+  smooth: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const isVisible = ref(false);
+
+const positionClasses = computed(() => {
+  const positions = {
+    'bottom-right': 'bottom-6 right-6',
+    'bottom-left': 'bottom-6 left-6',
+    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
+  };
+  return positions[props.position];
+});
+
+const variantClasses = computed(() => {
+  const variants = {
+    primary: 'bg-primary-500 text-white hover:bg-primary-600 hover:shadow-lg hover:shadow-primary-500/30',
+    neutral: 'bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:bg-neutral-800 dark:hover:bg-neutral-100',
+    glass: 'xGlass text-neutral-900 dark:text-white hover:bg-white/80 dark:hover:bg-black/60',
+  };
+  return variants[props.variant];
+});
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: props.smooth ? 'smooth' : 'auto',
+  });
+};
+
+const handleScroll = () => {
+  isVisible.value = window.scrollY > props.threshold;
+};
+
+onMounted(() => {
+  if (process.client) {
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    handleScroll();
+  }
+});
+
+onUnmounted(() => {
+  if (process.client) {
+    window.removeEventListener('scroll', handleScroll);
+  }
+});
+</script>

package/app/components/X/Mark/CTA/index.vue

@@ -0,0 +1,294 @@
+<template>
+	<section
+		:class="[
+			'relative overflow-hidden rounded-2xl',
+			paddingClasses,
+			bgColorClasses
+		]"
+	>
+		<!-- Background Pattern -->
+		<XMarkPatternBg
+			v-if="resolvedBg.pattern"
+			:pattern="resolvedBg.pattern"
+			:opacity="resolvedBg.patternOpacity"
+			class="absolute inset-0 pointer-events-none"
+		/>
+
+		<!-- Background Image -->
+		<div
+			v-if="resolvedBg.image"
+			class="absolute inset-0"
+		>
+			<img
+				:src="resolvedBg.image"
+				:alt="resolvedBg.imageAlt"
+				class="w-full h-full object-cover"
+				:class="resolvedBg.imagePosition"
+			/>
+			<div
+				v-if="resolvedBg.imageOverlay"
+				class="absolute inset-0"
+				:class="bgImageOverlayClass"
+			/>
+		</div>
+
+		<!-- Content -->
+		<div :class="['relative z-10', containerClasses]">
+			<!-- Icon -->
+			<div v-if="icon" :class="iconContainerClasses">
+				<UIcon :name="icon" :class="iconClasses" />
+			</div>
+
+			<!-- Content -->
+			<div :class="contentClasses">
+				<!-- Eyebrow -->
+				<p v-if="eyebrow" :class="eyebrowClasses">
+					{{ eyebrow }}
+				</p>
+
+				<!-- Title -->
+				<h3 :class="titleClasses">
+					{{ title }}
+				</h3>
+
+				<!-- Description -->
+				<p v-if="description" :class="descriptionClasses">
+					{{ description }}
+				</p>
+			</div>
+
+			<!-- Buttons -->
+			<div v-if="buttons?.length" :class="buttonsClasses">
+				<UButton
+					v-for="(button, index) in buttons"
+					:key="index"
+					:label="button.label"
+					:to="button.to"
+					:color="getButtonColor(button, index)"
+					:variant="button.variant || (index === 0 ? 'solid' : 'outline')"
+					:icon="button.icon"
+					:size="size === 'lg' ? 'lg' : 'md'"
+					:class="getButtonClass(button, index)"
+				/>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Eyebrow text above title */
+	eyebrow: {
+		type: String,
+		default: '',
+	},
+	/** CTA title */
+	title: {
+		type: String,
+		required: true,
+	},
+	/** CTA description */
+	description: {
+		type: String,
+		default: '',
+	},
+	/** Optional icon */
+	icon: {
+		type: String,
+		default: '',
+	},
+	/** Action buttons */
+	buttons: {
+		type: Array,
+		default: () => [],
+		// [{ label, to?, color?, variant?, icon? }]
+	},
+	/** Layout variant */
+	variant: {
+		type: String,
+		default: 'default',
+		validator: (v) => ['default', 'centered', 'inline', 'stacked'].includes(v),
+	},
+	/**
+	 * Background configuration object or string shorthand
+	 * @property {string} variant - 'subtle' | 'bold' | 'gradient' | 'none'
+	 * @property {string} color - Custom Tailwind classes (overrides variant)
+	 * @property {string} image - Background image URL
+	 * @property {string} imageAlt - Background image alt text
+	 * @property {string} imageOverlay - 'light' | 'heavy' | 'gradient'
+	 * @property {string} imagePosition - Tailwind object-position class
+	 * @property {string} pattern - 'dots' | 'grid' | 'diagonal' | 'topography' | 'circuit' | 'waves'
+	 * @property {number} patternOpacity - Pattern opacity (0-1)
+	 */
+	bg: {
+		type: [Object, String],
+		default: 'subtle',
+	},
+	/** Size */
+	size: {
+		type: String,
+		default: 'md',
+		validator: (v) => ['sm', 'md', 'lg'].includes(v),
+	},
+});
+
+// Default bg values
+const bgDefaults = {
+	variant: 'subtle',
+	color: '',
+	image: '',
+	imageAlt: '',
+	imageOverlay: '',
+	imagePosition: 'object-center',
+	pattern: '',
+	patternOpacity: 0.05,
+};
+
+// Resolve bg prop (supports string shorthand for variant or full object)
+const resolvedBg = computed(() => {
+	if (typeof props.bg === 'string') {
+		return { ...bgDefaults, variant: props.bg };
+	}
+	return { ...bgDefaults, ...props.bg };
+});
+
+// Check if background is "bold" (dark background requiring light text)
+const isBoldBg = computed(() => {
+	return ['bold', 'gradient'].includes(resolvedBg.value.variant) || resolvedBg.value.image;
+});
+
+const paddingClasses = computed(() => {
+	const sizes = {
+		sm: 'p-6',
+		md: 'p-8 md:p-12',
+		lg: 'p-12 md:p-16',
+	};
+	return sizes[props.size];
+});
+
+const bgColorClasses = computed(() => {
+	// Custom color class takes priority
+	if (resolvedBg.value.color) return resolvedBg.value.color;
+
+	const variants = {
+		subtle: 'bg-neutral-100 dark:bg-neutral-900',
+		bold: 'bg-primary-600 dark:bg-primary-700',
+		gradient: 'bg-gradient-to-br from-primary-600 to-primary-800',
+		none: '',
+	};
+	return variants[resolvedBg.value.variant] || variants.subtle;
+});
+
+const bgImageOverlayClass = computed(() => {
+	const overlays = {
+		light: 'bg-black/30',
+		heavy: 'bg-black/60',
+		gradient: 'bg-gradient-to-t from-black/80 via-black/40 to-transparent',
+	};
+	return overlays[resolvedBg.value.imageOverlay] || '';
+});
+
+const containerClasses = computed(() => {
+	const layouts = {
+		default: 'flex flex-col md:flex-row md:items-center md:justify-between gap-6',
+		centered: 'text-center max-w-2xl mx-auto',
+		inline: 'flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4',
+		stacked: 'flex flex-col items-center text-center gap-6',
+	};
+	return layouts[props.variant];
+});
+
+const iconContainerClasses = computed(() => {
+	return [
+		'flex items-center justify-center rounded-xl',
+		props.size === 'lg' ? 'w-16 h-16' : 'w-12 h-12',
+		isBoldBg.value ? 'bg-white/20' : 'bg-primary-100 dark:bg-primary-900/50',
+	];
+});
+
+const iconClasses = computed(() => {
+	return [
+		props.size === 'lg' ? 'w-8 h-8' : 'w-6 h-6',
+		isBoldBg.value ? 'text-white' : 'text-primary-500',
+	];
+});
+
+const contentClasses = computed(() => {
+	if (props.variant === 'default') {
+		return 'flex-1';
+	}
+	return '';
+});
+
+const eyebrowClasses = computed(() => {
+	return [
+		'xText-eyebrow mb-2',
+		isBoldBg.value ? 'text-white/70' : 'text-primary-600 dark:text-primary-400',
+	];
+});
+
+const titleClasses = computed(() => {
+	const sizeClasses = {
+		sm: 'text-lg font-semibold',
+		md: 'text-xl font-semibold',
+		lg: 'xText-headline',
+	};
+	return [
+		sizeClasses[props.size],
+		isBoldBg.value ? 'text-white' : 'text-neutral-900 dark:text-white',
+	];
+});
+
+const descriptionClasses = computed(() => {
+	return [
+		'mt-2',
+		props.size === 'sm' ? 'text-sm' : 'text-base',
+		isBoldBg.value ? 'text-white/80' : 'text-neutral-600 dark:text-neutral-400',
+	];
+});
+
+const buttonsClasses = computed(() => {
+	const layouts = {
+		default: 'flex flex-wrap gap-3',
+		centered: 'flex flex-wrap justify-center gap-3 mt-6',
+		inline: 'flex flex-wrap gap-3',
+		stacked: 'flex flex-wrap justify-center gap-3',
+	};
+	return layouts[props.variant];
+});
+
+const getButtonColor = (button, index) => {
+	// Allow explicit color override
+	if (button.color && button.color !== 'white') return button.color;
+	if (index === 0) {
+		// Use neutral instead of white (not a valid Nuxt UI v4 color)
+		// Custom classes handle the actual styling
+		return isBoldBg.value ? 'neutral' : 'primary';
+	}
+	return 'neutral';
+};
+
+const getButtonClass = (button, index) => {
+	const isOutline = button.variant === 'outline' || (index > 0 && !button.variant);
+	const isGhost = button.variant === 'ghost';
+	const isSolid = button.variant === 'solid' || (index === 0 && !button.variant);
+
+	// Solid buttons on bold/gradient backgrounds - white bg with dark text
+	if (isBoldBg.value && isSolid) {
+		return 'bg-white text-neutral-900 hover:bg-white/90';
+	}
+	// Outline buttons on bold/gradient backgrounds - transparent with white border
+	if (isBoldBg.value && isOutline) {
+		return 'bg-white/10 backdrop-blur-sm border-white/40 hover:bg-white/20 hover:border-white/60 text-white';
+	}
+	// Ghost buttons on bold/gradient backgrounds - transparent with white text
+	if (isBoldBg.value && isGhost) {
+		return 'text-white hover:bg-white/10';
+	}
+	// Outline buttons on subtle backgrounds
+	if (!isBoldBg.value && isOutline) {
+		return 'border-neutral-400 dark:border-neutral-600 hover:border-neutral-500 dark:hover:border-neutral-500';
+	}
+	return '';
+};
+</script>