@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

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

@@ -0,0 +1,151 @@
+<template>
+  <section
+    :class="[
+      'relative overflow-hidden',
+      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"
+      :class="{ 'xParallax': resolvedBg.parallax }"
+      :data-parallax-speed="resolvedBg.parallaxSpeed"
+    >
+      <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>
+
+    <!-- Custom Background Slot -->
+    <slot name="background" />
+
+    <!-- Content -->
+    <div
+      class="relative z-10"
+      :class="containerClasses"
+    >
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup>
+const props = defineProps({
+  /**
+   * Background configuration object
+   * @property {string} variant - 'default' | 'subtle' | 'elevated' | 'bold' | 'transparent'
+   * @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)
+   * @property {boolean} parallax - Enable parallax on bg image
+   * @property {number} parallaxSpeed - Parallax intensity (0.1 - 1.0)
+   */
+  bg: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  /** Vertical padding size */
+  padding: {
+    type: String,
+    default: 'lg',
+    validator: (v) => ['none', 'xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+  },
+  /** Max-width container size */
+  container: {
+    type: String,
+    default: 'lg',
+    validator: (v) => ['sm', 'md', 'lg', 'xl', 'full', 'none'].includes(v),
+  },
+});
+
+// Default bg values
+const bgDefaults = {
+  variant: 'default',
+  color: '',
+  image: '',
+  imageAlt: '',
+  imageOverlay: '',
+  imagePosition: 'object-center',
+  pattern: '',
+  patternOpacity: 0.05,
+  parallax: false,
+  parallaxSpeed: 0.3,
+};
+
+// 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 };
+});
+
+const paddingClasses = computed(() => {
+  const sizes = {
+    none: '',
+    xs: 'py-8 md:py-10',
+    sm: 'py-12 md:py-16',
+    md: 'py-16 md:py-20',
+    lg: 'py-20 md:py-28 lg:py-32',
+    xl: 'py-28 md:py-36 lg:py-40',
+  };
+  return sizes[props.padding];
+});
+
+const bgColorClasses = computed(() => {
+  // Custom color class takes priority
+  if (resolvedBg.value.color) return resolvedBg.value.color;
+
+  const colors = {
+    default: 'bg-white dark:bg-neutral-950',
+    subtle: 'bg-neutral-50 dark:bg-neutral-900',
+    elevated: 'bg-primary-50/50 dark:bg-primary-950/20',
+    bold: 'bg-neutral-950 dark:bg-white text-white dark:text-neutral-950',
+    transparent: 'bg-transparent',
+  };
+  return colors[resolvedBg.value.variant] || colors.default;
+});
+
+const containerClasses = computed(() => {
+  const containers = {
+    sm: 'max-w-[42rem] mx-auto px-4 sm:px-6',
+    md: 'max-w-[64rem] mx-auto px-4 sm:px-6 lg:px-8',
+    lg: 'max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8',
+    xl: 'max-w-[96rem] mx-auto px-4 sm:px-6 lg:px-8',
+    full: 'w-full px-4 sm:px-6 lg:px-8',
+    none: '',
+  };
+  return containers[props.container];
+});
+
+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] || '';
+});
+</script>

package/app/components/X/Mark/SocialProof/Badge.vue

@@ -0,0 +1,102 @@
+<template>
+  <span
+    :class="[
+      'inline-flex items-center gap-2 text-sm font-medium',
+      variant === 'text' ? 'px-0 py-0' : 'px-3 py-1.5 rounded-full',
+      variantClasses
+    ]"
+  >
+    <UIcon :name="iconName" class="w-4 h-4" />
+    <span>{{ label }}</span>
+  </span>
+</template>
+
+<script>
+// Module-scope constant for use in defineProps validator
+const presets = {
+  'no-credit-card': {
+    icon: 'i-lucide-credit-card',
+    label: 'No credit card required',
+  },
+  'cancel-anytime': {
+    icon: 'i-lucide-x-circle',
+    label: 'Cancel anytime',
+  },
+  'free-trial': {
+    icon: 'i-lucide-gift',
+    label: 'Free 14-day trial',
+  },
+  'secure': {
+    icon: 'i-lucide-shield-check',
+    label: 'Bank-level security',
+  },
+  'support': {
+    icon: 'i-lucide-message-circle',
+    label: '24/7 support',
+  },
+  'setup': {
+    icon: 'i-lucide-zap',
+    label: 'Setup in minutes',
+  },
+  'gdpr': {
+    icon: 'i-lucide-lock',
+    label: 'GDPR compliant',
+  },
+  'money-back': {
+    icon: 'i-lucide-undo-2',
+    label: '30-day money back',
+  },
+}
+</script>
+
+<script setup>
+const props = defineProps({
+  /** Use predefined badge preset */
+  preset: {
+    type: String,
+    default: '',
+    validator: (v) => v === '' || Object.keys(presets).includes(v),
+  },
+  /** Custom icon name (if not using preset) */
+  icon: {
+    type: String,
+    default: '',
+  },
+  /** Custom label (if not using preset) */
+  label: {
+    type: String,
+    default: '',
+  },
+  /** Style variant */
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (v) => ['default', 'subtle', 'outline', 'text', 'text-muted'].includes(v),
+  },
+});
+
+const iconName = computed(() => {
+  if (props.preset && presets[props.preset]) {
+    return presets[props.preset].icon;
+  }
+  return props.icon || 'i-lucide-check-circle';
+});
+
+const label = computed(() => {
+  if (props.preset && presets[props.preset]) {
+    return presets[props.preset].label;
+  }
+  return props.label;
+});
+
+const variantClasses = computed(() => {
+  const variants = {
+    default: 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300',
+    subtle: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300',
+    outline: 'border border-neutral-300 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300',
+    text: 'text-neutral-600 dark:text-neutral-400',
+    'text-muted': 'text-neutral-400 dark:text-neutral-500',
+  };
+  return variants[props.variant];
+});
+</script>

package/app/components/X/Mark/SocialProof/Testimonials.vue

@@ -0,0 +1,326 @@
+<template>
+	<div>
+		<!-- Single Featured -->
+		<template v-if="layout === 'featured'">
+			<div class="relative max-w-4xl mx-auto text-center">
+				<!-- Navigation Arrows -->
+				<button
+					v-if="testimonials.length > 1"
+					class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 lg:-translate-x-16 w-11 h-11 flex items-center justify-center rounded-full bg-white dark:bg-neutral-800 shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-300 opacity-60 hover:opacity-100"
+					@click="prev"
+				>
+					<UIcon name="i-lucide-chevron-left" class="w-5 h-5 text-neutral-700 dark:text-neutral-300" />
+				</button>
+				<button
+					v-if="testimonials.length > 1"
+					class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 lg:translate-x-16 w-11 h-11 flex items-center justify-center rounded-full bg-white dark:bg-neutral-800 shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-300 opacity-60 hover:opacity-100"
+					@click="next"
+				>
+					<UIcon name="i-lucide-chevron-right" class="w-5 h-5 text-neutral-700 dark:text-neutral-300" />
+				</button>
+
+				<!-- Quote Icon -->
+				<!-- <div class="relative inline-block mb-8">
+					<span class="text-8xl font-serif text-primary-500/20 select-none leading-none serif">"</span>
+				</div> -->
+
+				<!-- Quote with crossfade -->
+				<Transition name="fade" mode="out-in">
+					<blockquote :key="currentIndex" class="xText-headline text-neutral-900 dark:text-white xText-balance">
+						"{{ currentTestimonial.quote }}"
+					</blockquote>
+				</Transition>
+
+				<!-- Stars -->
+				<div v-if="hasStars && currentTestimonial.rating" class="flex justify-center gap-1 mt-6">
+					<UIcon
+						v-for="i in 5"
+						:key="i"
+						name="i-lucide-star"
+						class="w-5 h-5"
+						:class="i <= currentTestimonial.rating ? 'text-yellow-400' : 'text-neutral-300 dark:text-neutral-600'"
+					/>
+				</div>
+
+				<!-- Attribution with crossfade -->
+				<Transition name="fade" mode="out-in">
+					<div :key="currentIndex" class="mt-8 flex items-center justify-center gap-4">
+						<div class="relative">
+							<img
+								v-if="currentTestimonial.avatar"
+								:src="currentTestimonial.avatar"
+								:alt="currentTestimonial.name"
+								class="w-14 h-14 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800 shadow-lg"
+							/>
+							<div class="absolute inset-0 rounded-full ring-2 ring-primary-500/20 ring-offset-2 ring-offset-white dark:ring-offset-neutral-950" />
+						</div>
+						<div class="text-left">
+							<p class="font-semibold text-neutral-900 dark:text-white">
+								{{ currentTestimonial.name }}
+							</p>
+							<p class="text-sm text-neutral-600 dark:text-neutral-400">
+								{{ currentTestimonial.title }}
+								<span v-if="currentTestimonial.company">
+									at {{ currentTestimonial.company }}
+								</span>
+							</p>
+						</div>
+						<img
+							v-if="currentTestimonial.logo"
+							:src="currentTestimonial.logo"
+							:alt="currentTestimonial.company"
+							class="h-8 w-auto ml-4 opacity-60"
+						/>
+					</div>
+				</Transition>
+
+				<!-- Navigation Dots -->
+				<div
+					v-if="testimonials.length > 1"
+					class="mt-8 flex justify-center gap-2"
+				>
+					<button
+						v-for="(_, index) in testimonials"
+						:key="index"
+						class="w-2 h-2 rounded-full transition-colors duration-300"
+						:class="index === currentIndex ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600'"
+						@click="goToIndex(index)"
+					/>
+				</div>
+			</div>
+		</template>
+
+		<!-- Grid Layout -->
+		<template v-else-if="layout === 'grid'">
+			<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+				<article
+					v-for="(testimonial, index) in testimonials"
+					:key="testimonial.name"
+					class="xGlass rounded-2xl p-6 xFadeUp transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-[0_12px_40px_rgba(128,128,128,0.2)] dark:hover:shadow-[0_12px_40px_rgba(255,255,255,0.1)]"
+					:style="{ transitionDelay: `${index * 100}ms` }"
+				>
+					<!-- Stars -->
+					<div v-if="hasStars" class="flex gap-1 mb-4">
+						<UIcon
+							v-for="i in 5"
+							:key="i"
+							name="i-lucide-star"
+							class="w-5 h-5"
+							:class="i <= (testimonial.rating || 5) ? 'text-yellow-400' : 'text-neutral-300 dark:text-neutral-600'"
+						/>
+					</div>
+
+					<!-- Quote -->
+					<p class="text-neutral-700 dark:text-neutral-300">
+						"{{ testimonial.quote }}"
+					</p>
+
+					<!-- Attribution -->
+					<div class="mt-6 flex items-center gap-3">
+						<img
+							v-if="testimonial.avatar"
+							:src="testimonial.avatar"
+							:alt="testimonial.name"
+							class="w-10 h-10 rounded-full object-cover"
+						/>
+						<div
+							v-else
+							class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
+						>
+							<span class="text-primary-600 dark:text-primary-400 font-medium">
+								{{ testimonial.name.charAt(0) }}
+							</span>
+						</div>
+						<div>
+							<p class="font-medium text-neutral-900 dark:text-white text-sm">
+								{{ testimonial.name }}
+							</p>
+							<p class="text-xs text-neutral-500">
+								{{ testimonial.title }}
+								<span v-if="testimonial.company"> at {{ testimonial.company }}</span>
+							</p>
+						</div>
+					</div>
+				</article>
+			</div>
+		</template>
+
+		<!-- Carousel Layout -->
+		<template v-else-if="layout === 'carousel'">
+			<div class="relative overflow-hidden">
+				<div
+					class="flex transition-transform duration-500"
+					:style="{ transform: `translateX(-${currentIndex * 100}%)`, transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }"
+				>
+					<article
+						v-for="testimonial in testimonials"
+						:key="testimonial.name"
+						class="w-full flex-shrink-0 px-4"
+					>
+						<div class="max-w-2xl mx-auto text-center">
+							<!-- Stars -->
+							<div v-if="hasStars" class="flex justify-center gap-1 mb-6">
+								<UIcon
+									v-for="i in 5"
+									:key="i"
+									name="i-lucide-star"
+									class="w-5 h-5"
+									:class="i <= (testimonial.rating || 5) ? 'text-yellow-400' : 'text-neutral-300'"
+								/>
+							</div>
+
+							<!-- Quote -->
+							<blockquote class="text-xl text-neutral-900 dark:text-white">
+								"{{ testimonial.quote }}"
+							</blockquote>
+
+							<!-- Attribution -->
+							<div class="mt-6 flex items-center justify-center gap-3">
+								<img
+									v-if="testimonial.avatar"
+									:src="testimonial.avatar"
+									:alt="testimonial.name"
+									class="w-12 h-12 rounded-full object-cover"
+								/>
+								<div class="text-left">
+									<p class="font-medium text-neutral-900 dark:text-white">
+										{{ testimonial.name }}
+									</p>
+									<p class="text-sm text-neutral-500">
+										{{ testimonial.title }}
+									</p>
+								</div>
+							</div>
+						</div>
+					</article>
+				</div>
+
+				<!-- Navigation Arrows -->
+				<button
+					v-if="testimonials.length > 1"
+					class="absolute left-0 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-white/80 dark:bg-neutral-800/80 shadow-lg hover:bg-white dark:hover:bg-neutral-800 transition-colors"
+					@click="prev"
+				>
+					<UIcon name="i-lucide-chevron-left" class="w-5 h-5" />
+				</button>
+				<button
+					v-if="testimonials.length > 1"
+					class="absolute right-0 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-white/80 dark:bg-neutral-800/80 shadow-lg hover:bg-white dark:hover:bg-neutral-800 transition-colors"
+					@click="next"
+				>
+					<UIcon name="i-lucide-chevron-right" class="w-5 h-5" />
+				</button>
+
+				<!-- Dots -->
+				<div
+					v-if="testimonials.length > 1"
+					class="mt-8 flex justify-center gap-2"
+				>
+					<button
+						v-for="(_, index) in testimonials"
+						:key="index"
+						class="w-2 h-2 rounded-full transition-colors"
+						:class="index === currentIndex ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-700'"
+						@click="goToIndex(index)"
+					/>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup>
+// Initialize scroll reveal animations
+useScrollReveal()
+
+const props = defineProps({
+	/** Array of testimonials */
+	testimonials: {
+		type: Array,
+		required: true,
+	},
+	/** Display layout */
+	layout: {
+		type: String,
+		default: 'featured',
+		validator: (v) => ['featured', 'grid', 'carousel'].includes(v),
+	},
+	/** Show star ratings */
+	hasStars: {
+		type: Boolean,
+		default: true,
+	},
+	/** Auto-rotate (featured/carousel) */
+	autoplay: {
+		type: Boolean,
+		default: true,
+	},
+	/** Autoplay interval (ms) */
+	interval: {
+		type: Number,
+		default: 5000,
+	},
+});
+
+const currentIndex = ref(0);
+let autoplayInterval = null;
+
+const currentTestimonial = computed(() => {
+	return props.testimonials[currentIndex.value] || props.testimonials[0];
+});
+
+const goToIndex = (index) => {
+	currentIndex.value = index;
+	resetAutoplay();
+};
+
+const next = () => {
+	currentIndex.value = (currentIndex.value + 1) % props.testimonials.length;
+	resetAutoplay();
+};
+
+const prev = () => {
+	currentIndex.value = currentIndex.value === 0
+		? props.testimonials.length - 1
+		: currentIndex.value - 1;
+	resetAutoplay();
+};
+
+const startAutoplay = () => {
+	if (props.autoplay && props.testimonials.length > 1) {
+		autoplayInterval = setInterval(() => {
+			currentIndex.value = (currentIndex.value + 1) % props.testimonials.length;
+		}, props.interval);
+	}
+};
+
+const resetAutoplay = () => {
+	if (autoplayInterval) {
+		clearInterval(autoplayInterval);
+		startAutoplay();
+	}
+};
+
+onMounted(() => {
+	startAutoplay();
+});
+
+onUnmounted(() => {
+	if (autoplayInterval) {
+		clearInterval(autoplayInterval);
+	}
+});
+</script>
+
+<style scoped>
+/* Fade transition for testimonial changes */
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>