@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/components/X/Mark/Privacy/CookieToast.vue

@@ -0,0 +1,43 @@
+<template>
+	<div />
+</template>
+
+<script setup>
+defineOptions({
+	inheritAttrs: false
+})
+
+const toast = useToast()
+
+onMounted(() => {
+	const accepted = localStorage.getItem('gdpr-cookies-accepted')
+	if (!accepted) {
+		toast.add({
+			title: 'We use cookies',
+			description: 'We use cookies to enhance your browsing experience and analyze site traffic. By clicking "Accept", you consent to our use of cookies.',
+			icon: 'i-lucide-cookie',
+			timeout: 0,
+			actions: [
+				{
+					label: 'Accept',
+					color: 'primary',
+					onClick: (e) => {
+						e?.stopPropagation()
+						localStorage.setItem('gdpr-cookies-accepted', 'true')
+						toast.clear()
+					}
+				},
+				{
+					label: 'Decline',
+					color: 'neutral',
+					variant: 'outline',
+					onClick: (e) => {
+						e?.stopPropagation()
+						toast.clear()
+					}
+				}
+			]
+		})
+	}
+})
+</script>

package/app/components/X/Mark/Privacy/GDPR.vue

@@ -0,0 +1,245 @@
+<template>
+	<UModal v-model:open="isOpen">
+		<!-- Trigger Slot -->
+		<slot>
+			<UButton
+				:label="buttonProps.label"
+				:color="buttonProps.color"
+				:variant="buttonProps.variant"
+				:size="buttonProps.size"
+				:leading-icon="buttonProps.icon"
+			/>
+		</slot>
+
+		<template #content>
+			<div class="p-6">
+				<!-- Header -->
+				<header class="mb-6">
+					<h3 class="text-xl font-semibold text-neutral-900 dark:text-white">
+						{{ title }}
+					</h3>
+					<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+						{{ description }}
+					</p>
+				</header>
+
+				<!-- Cookie Categories -->
+				<div class="space-y-4">
+					<div
+						v-for="category in categories"
+						:key="category.id"
+						class="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700"
+					>
+						<div class="flex items-start justify-between gap-4">
+							<div class="flex-1">
+								<div class="flex items-center gap-2">
+									<h4 class="font-medium text-neutral-900 dark:text-white">
+										{{ category.name }}
+									</h4>
+									<UBadge
+										v-if="category.required"
+										label="Required"
+										size="xs"
+										variant="subtle"
+									/>
+								</div>
+								<p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
+									{{ category.description }}
+								</p>
+							</div>
+							<UToggle
+								v-model="selections[category.id]"
+								:disabled="category.required"
+							/>
+						</div>
+					</div>
+				</div>
+
+				<!-- Actions -->
+				<footer class="mt-6 flex flex-col sm:flex-row gap-3">
+					<UButton
+						label="Reject All"
+						variant="ghost"
+						color="neutral"
+						class="flex-1"
+						@click="rejectAll"
+					/>
+					<UButton
+						label="Accept Selected"
+						variant="outline"
+						class="flex-1"
+						@click="acceptSelected"
+					/>
+					<UButton
+						label="Accept All"
+						class="flex-1"
+						@click="acceptAll"
+					/>
+				</footer>
+
+				<!-- Policy Links -->
+				<div class="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-700 text-center">
+					<div class="flex justify-center gap-4 text-sm">
+						<NuxtLink
+							v-if="privacyLink"
+							:to="privacyLink"
+							class="text-primary-500 hover:underline"
+						>
+							Privacy Policy
+						</NuxtLink>
+						<NuxtLink
+							v-if="cookieLink"
+							:to="cookieLink"
+							class="text-primary-500 hover:underline"
+						>
+							Cookie Policy
+						</NuxtLink>
+					</div>
+				</div>
+			</div>
+		</template>
+	</UModal>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** v-model for modal visibility */
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	/** Modal title */
+	title: {
+		type: String,
+		default: 'Privacy Preferences',
+	},
+	/** Modal description */
+	description: {
+		type: String,
+		default: 'We use cookies to enhance your browsing experience. You can choose which categories to allow.',
+	},
+	/** Cookie categories */
+	categories: {
+		type: Array,
+		default: () => [
+			{
+				id: 'necessary',
+				name: 'Necessary',
+				description: 'Essential cookies required for the website to function properly.',
+				required: true,
+			},
+			{
+				id: 'analytics',
+				name: 'Analytics',
+				description: 'Cookies that help us understand how visitors interact with our website.',
+				required: false,
+			},
+			{
+				id: 'marketing',
+				name: 'Marketing',
+				description: 'Cookies used for advertising and promotional purposes.',
+				required: false,
+			},
+			{
+				id: 'preferences',
+				name: 'Preferences',
+				description: 'Cookies that remember your preferences and settings.',
+				required: false,
+			},
+		],
+	},
+	/** Privacy policy link */
+	privacyLink: {
+		type: String,
+		default: '/privacy',
+	},
+	/** Cookie policy link */
+	cookieLink: {
+		type: String,
+		default: '/cookies',
+	},
+	/** Storage key for preferences */
+	storageKey: {
+		type: String,
+		default: 'gdpr-preferences',
+	},
+	/** Button configuration object */
+	button: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'accept', 'reject', 'save']);
+
+// Support both v-model and self-managed state
+const internalOpen = ref(false);
+const isOpen = computed({
+	get: () => props.modelValue !== undefined ? props.modelValue : internalOpen.value,
+	set: (value) => {
+		internalOpen.value = value;
+		emit('update:modelValue', value);
+	},
+});
+
+// Button props with defaults
+const buttonProps = computed(() => ({
+	label: props.button.label || 'Cookie Settings',
+	color: props.button.color || 'neutral',
+	variant: props.button.variant || 'outline',
+	size: props.button.size || 'md',
+	icon: props.button.icon || 'i-lucide-cookie',
+}));
+
+// Initialize selections
+const selections = ref({});
+
+onMounted(() => {
+	// Load saved preferences
+	const saved = localStorage.getItem(props.storageKey);
+	if (saved) {
+		selections.value = JSON.parse(saved);
+	} else {
+		// Default: required categories enabled
+		props.categories.forEach((cat) => {
+			selections.value[cat.id] = cat.required;
+		});
+	}
+});
+
+const savePreferences = (prefs) => {
+	localStorage.setItem(props.storageKey, JSON.stringify(prefs));
+	localStorage.setItem('cookie-consent', 'customized');
+	emit('save', prefs);
+	isOpen.value = false;
+};
+
+const acceptAll = () => {
+	const prefs = {};
+	props.categories.forEach((cat) => {
+		prefs[cat.id] = true;
+	});
+	savePreferences(prefs);
+	emit('accept');
+};
+
+const acceptSelected = () => {
+	// Ensure required categories are always true
+	const prefs = { ...selections.value };
+	props.categories.forEach((cat) => {
+		if (cat.required) {
+			prefs[cat.id] = true;
+		}
+	});
+	savePreferences(prefs);
+};
+
+const rejectAll = () => {
+	const prefs = {};
+	props.categories.forEach((cat) => {
+		prefs[cat.id] = cat.required;
+	});
+	savePreferences(prefs);
+	emit('reject');
+};
+</script>

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

@@ -0,0 +1,183 @@
+<template>
+	<section
+		class="relative border-t overflow-hidden"
+		:class="[
+			variant === 'dark'
+				? 'bg-neutral-950 border-neutral-800'
+				: 'bg-neutral-50 dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800'
+		]"
+	>
+		<!-- Background Pattern -->
+		<XMarkPatternBg
+			v-if="pattern"
+			:pattern="pattern"
+			:opacity="patternOpacity"
+			:fade="false"
+		/>
+
+		<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
+			<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-8">
+				<!-- Content -->
+				<div class="flex-1">
+					<h3
+						class="text-xl font-semibold"
+						:class="variant === 'dark' ? 'text-white' : 'text-neutral-900 dark:text-white'"
+					>
+						{{ title }}
+					</h3>
+					<p
+						v-if="description"
+						class="mt-2"
+						:class="variant === 'dark' ? 'text-neutral-400' : 'text-neutral-600 dark:text-neutral-400'"
+					>
+						{{ description }}
+					</p>
+				</div>
+
+				<!-- Form -->
+				<div class="flex-shrink-0 w-full md:w-auto">
+					<!-- Success State -->
+					<Transition
+						enter-active-class="transition-all duration-300"
+						enter-from-class="opacity-0 translate-y-2"
+						leave-active-class="transition-all duration-200"
+						leave-to-class="opacity-0"
+					>
+						<div
+							v-if="submitted"
+							class="flex items-center gap-3 px-4 py-3 rounded-lg"
+							:class="variant === 'dark' ? 'bg-primary-500/20 text-primary-300' : 'bg-primary-50 dark:bg-primary-950/30 text-primary-600 dark:text-primary-400'"
+						>
+							<UIcon name="i-lucide-check-circle" class="w-5 h-5" />
+							<span class="text-sm font-medium">{{ successMessage }}</span>
+						</div>
+					</Transition>
+
+					<!-- Form -->
+					<form
+						v-if="!submitted"
+						class="flex flex-col sm:flex-row gap-3"
+						@submit.prevent="handleSubmit"
+					>
+						<UInput
+							v-model="email"
+							type="email"
+							:placeholder="placeholder"
+							class="w-full sm:w-72"
+							:disabled="loading"
+							required
+						/>
+						<UButton
+							type="submit"
+							:loading="loading"
+							:color="button?.color || 'primary'"
+							class="whitespace-nowrap"
+						>
+							{{ button?.label || 'Subscribe' }}
+						</UButton>
+					</form>
+
+					<!-- Privacy Note -->
+					<p
+						v-if="hasPrivacy && !submitted"
+						class="mt-3 text-xs"
+						:class="variant === 'dark' ? 'text-neutral-500' : 'text-neutral-500 dark:text-neutral-500'"
+					>
+						{{ privacyText }}
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Section title */
+	title: {
+		type: String,
+		default: 'Subscribe to our newsletter',
+	},
+	/** Section description */
+	description: {
+		type: String,
+		default: 'Get the latest news and updates.',
+	},
+	/** Email placeholder */
+	placeholder: {
+		type: String,
+		default: 'Enter your email',
+	},
+	/** Button config { label: string, color?: string } */
+	button: {
+		type: Object,
+		default: () => ({ label: 'Subscribe' }),
+	},
+	/** Has privacy note */
+	hasPrivacy: {
+		type: Boolean,
+		default: true,
+	},
+	/** Privacy note text */
+	privacyText: {
+		type: String,
+		default: 'No spam. Unsubscribe anytime.',
+	},
+	/** Success message after submission */
+	successMessage: {
+		type: String,
+		default: 'Thanks for subscribing!',
+	},
+	/** Style variant */
+	variant: {
+		type: String,
+		default: 'dark',
+		validator: (v) => ['dark', 'light'].includes(v),
+	},
+	/** Background pattern type (dots, grid, diagonal, topography, circuit, waves) or falsy to disable */
+	pattern: {
+		type: String,
+		default: null,
+		validator: (v) => !v || ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves'].includes(v),
+	},
+	/** Pattern opacity (0-1) */
+	patternOpacity: {
+		type: Number,
+		default: 0.05,
+	},
+	/** Reset form after delay (ms), 0 to not reset */
+	resetDelay: {
+		type: Number,
+		default: 5000,
+	},
+});
+
+const emit = defineEmits(['submit']);
+
+const email = ref('');
+const loading = ref(false);
+const submitted = ref(false);
+
+const handleSubmit = async () => {
+	if (!email.value) return;
+
+	loading.value = true;
+
+	// Emit the email for parent to handle
+	emit('submit', email.value);
+
+	// Simulate submission delay
+	await new Promise((resolve) => setTimeout(resolve, 800));
+
+	loading.value = false;
+	submitted.value = true;
+
+	// Reset after delay if configured
+	if (props.resetDelay > 0) {
+		setTimeout(() => {
+			submitted.value = false;
+			email.value = '';
+		}, props.resetDelay);
+	}
+};
+</script>

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

@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="relative w-full overflow-hidden"
+    :style="{ height: heightValue }"
+  >
+    <svg
+      class="absolute inset-0 w-full h-full"
+      :class="{ 'scale-x-[-1]': reverse, 'scale-y-[-1]': invert }"
+      preserveAspectRatio="none"
+      :viewBox="`0 0 1200 ${viewBoxHeight}`"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <!-- Full background with top color -->
+      <rect x="0" y="0" width="1200" :height="viewBoxHeight" :fill="topColor" />
+      <!-- Shape path with bottom color -->
+      <path :d="pathData" :fill="bottomColor" />
+    </svg>
+
+    <!-- Glow line -->
+    <div
+      v-if="glow"
+      class="absolute left-0 right-0 h-px"
+      :style="glowLineStyle"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /** Shape variant */
+    variant?: 'concave' | 'convex' | 'diagonal' | 'slant' | 'clouds' | 'waves' | 'tilt' | 'peaks' | 'scallop' | 'arrow'
+    /** Top section color */
+    topColor?: string
+    /** Bottom section color */
+    bottomColor?: string
+    /** Height size */
+    height?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+    /** Reverse direction (flip horizontally) */
+    reverse?: boolean
+    /** Invert vertically (swap top/bottom) */
+    invert?: boolean
+    /** Show glow line */
+    glow?: boolean
+    /** Glow line color */
+    glowColor?: string
+  }>(),
+  {
+    variant: 'diagonal',
+    topColor: 'rgb(243 244 246)',
+    bottomColor: 'rgb(249 250 251)',
+    height: 'md',
+    reverse: false,
+    invert: false,
+    glow: false,
+    glowColor: 'rgba(99, 102, 241, 0.5)',
+  }
+)
+
+const heightValue = computed(() => {
+  const heights = {
+    sm: '40px',
+    md: '64px',
+    lg: '96px',
+    xl: '128px',
+    '2xl': '160px',
+    '3xl': '200px',
+  }
+  return heights[props.height]
+})
+
+const viewBoxHeight = computed(() => {
+  const heights = {
+    sm: 80,
+    md: 120,
+    lg: 160,
+    xl: 200,
+    '2xl': 240,
+    '3xl': 280,
+  }
+  return heights[props.height]
+})
+
+const pathData = computed(() => {
+  const h = viewBoxHeight.value
+  const mid = h / 2
+
+  const paths = {
+    // Full diagonal from top-left corner to bottom-right corner
+    diagonal: `M0 0 L1200 ${h} L0 ${h} Z`,
+
+    // Slant - opposite direction, from top-right to bottom-left
+    slant: `M1200 0 L1200 ${h} L0 ${h} Z`,
+
+    // Concave - curves inward (scoops down)
+    concave: `M0 ${mid} Q600 ${h} 1200 ${mid} L1200 ${h} L0 ${h} Z`,
+
+    // Convex - curves outward (bulges up)
+    convex: `M0 ${mid} Q600 0 1200 ${mid} L1200 ${h} L0 ${h} Z`,
+
+    // Tilt - gentle diagonal (less steep than full diagonal)
+    tilt: `M0 0 L1200 ${mid + 20} L1200 ${h} L0 ${h} Z`,
+
+    // Waves - multiple wave pattern
+    waves: `M0 ${mid}
+      Q150 ${mid - 30} 300 ${mid}
+      T600 ${mid}
+      T900 ${mid}
+      T1200 ${mid}
+      L1200 ${h} L0 ${h} Z`,
+
+    // Clouds - fluffy bumps
+    clouds: `M0 ${mid + 20}
+      Q100 ${mid - 40} 200 ${mid + 10}
+      Q300 ${mid - 50} 400 ${mid + 15}
+      Q500 ${mid - 45} 600 ${mid + 5}
+      Q700 ${mid - 55} 800 ${mid + 20}
+      Q900 ${mid - 40} 1000 ${mid + 10}
+      Q1100 ${mid - 50} 1200 ${mid + 15}
+      L1200 ${h} L0 ${h} Z`,
+
+    // Peaks - mountain-like
+    peaks: `M0 ${mid + 20}
+      L200 ${mid - 30}
+      L400 ${mid + 10}
+      L600 ${mid - 40}
+      L800 ${mid + 5}
+      L1000 ${mid - 25}
+      L1200 ${mid + 15}
+      L1200 ${h} L0 ${h} Z`,
+
+    // Scallop - repeating curves
+    scallop: `M0 ${mid}
+      Q100 ${mid - 40} 200 ${mid}
+      Q300 ${mid - 40} 400 ${mid}
+      Q500 ${mid - 40} 600 ${mid}
+      Q700 ${mid - 40} 800 ${mid}
+      Q900 ${mid - 40} 1000 ${mid}
+      Q1100 ${mid - 40} 1200 ${mid}
+      L1200 ${h} L0 ${h} Z`,
+
+    // Arrow - pointed center
+    arrow: `M0 ${mid + 20} L600 ${mid - 50} L1200 ${mid + 20} L1200 ${h} L0 ${h} Z`,
+  }
+  return paths[props.variant]
+})
+
+const glowLineStyle = computed(() => {
+  return {
+    top: '50%',
+    transform: 'translateY(-50%)',
+    background: props.glowColor,
+    boxShadow: `0 0 8px ${props.glowColor}, 0 0 16px ${props.glowColor}`,
+  }
+})
+</script>