@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/components/X/Mark/_archive/Pattern/WaveBg.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.4,
+  },
+  /** Primary pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+  /** Secondary pattern color */
+  colorSecondary: {
+    type: String,
+    default: '#1e3a8a',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  const encodedColorSecondary = encodeURIComponent(props.colorSecondary)
+  return `url('data:image/svg+xml,%3Csvg width="120" height="40" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="wave" x="0" y="0" width="120" height="40" patternUnits="userSpaceOnUse"%3E%3Cpath d="M0 20 Q30 0 60 20 T120 20" fill="none" stroke="${encodedColor}" stroke-width="1" opacity="0.5"/%3E%3Cpath d="M0 30 Q30 10 60 30 T120 30" fill="none" stroke="${encodedColorSecondary}" stroke-width="1" opacity="0.4"/%3E%3C/pattern%3E%3Crect width="120" height="40" fill="url(%23wave)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/_archive/Newsletter/Form.vue

@@ -0,0 +1,123 @@
+<template>
+	<section class="py-16 md:py-24" :class="backgroundClasses">
+		<UContainer>
+			<div class="max-w-2xl mx-auto text-center">
+				<h2 v-if="title" class="text-2xl md:text-3xl font-bold mb-4">
+					{{ title }}
+				</h2>
+				<p v-if="description" class="opacity-70 mb-8">
+					{{ description }}
+				</p>
+
+				<UForm :state="form" @submit="onSubmit">
+					<div class="flex flex-col sm:flex-row gap-4">
+						<UFormField name="email" class="flex-1">
+							<UInput
+								v-model="form.email"
+								type="email"
+								:placeholder="emailPlaceholder"
+								size="xl"
+								:ui="inputStyles"
+								required
+							/>
+						</UFormField>
+						<UFormField v-if="showZip" name="zip">
+							<UInput
+								v-model="form.zip"
+								:placeholder="zipPlaceholder"
+								size="xl"
+								:ui="inputStyles"
+							/>
+						</UFormField>
+						<UButton
+							type="submit"
+							size="xl"
+							color="primary"
+							:label="buttonLabel"
+							:loading="loading"
+						/>
+					</div>
+				</UForm>
+
+				<p v-if="disclaimer" class="text-xs opacity-50 mt-4">
+					{{ disclaimer }}
+				</p>
+			</div>
+		</UContainer>
+	</section>
+</template>
+
+<script setup>
+const props = defineProps({
+	title: {
+		type: String,
+		default: "",
+	},
+	description: {
+		type: String,
+		default: "",
+	},
+	emailPlaceholder: {
+		type: String,
+		default: "Email address",
+	},
+	zipPlaceholder: {
+		type: String,
+		default: "Zip code",
+	},
+	buttonLabel: {
+		type: String,
+		default: "Subscribe",
+	},
+	disclaimer: {
+		type: String,
+		default: "",
+	},
+	showZip: {
+		type: Boolean,
+		default: false,
+	},
+	variant: {
+		type: String,
+		default: "dark",
+	},
+});
+
+const emit = defineEmits(["submit"]);
+
+const form = reactive({
+	email: "",
+	zip: "",
+});
+
+const loading = ref(false);
+
+const backgroundClasses = computed(() => {
+	const variants = {
+		dark: "bg-deep-900 text-white",
+		light: "bg-gray-50 text-gray-900",
+		transparent: "",
+	};
+	return variants[props.variant] || variants.dark;
+});
+
+const inputStyles = computed(() => {
+	if (props.variant === "dark") {
+		return {
+			root: "bg-white/10 border-white/20 text-white placeholder:text-white/50",
+		};
+	}
+	return {};
+});
+
+const onSubmit = async () => {
+	loading.value = true;
+	try {
+		emit("submit", { ...form });
+		form.email = "";
+		form.zip = "";
+	} finally {
+		loading.value = false;
+	}
+};
+</script>

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

@@ -0,0 +1,131 @@
+<template>
+	<div class="py-24">
+		<main class="container mx-auto">
+			<section
+				class="py-24 rounded-3xl border-primary border max-w-screen-2xl"
+				:class="cardClass"
+				:style="cardStyle"
+			>
+				<div
+					class="flex flex-col items-center justify-center"
+					v-if="!submitted"
+				>
+					<h2 class="text-4xl font-bold text-center text-primary">
+						{{ heading }}
+					</h2>
+					<p class="mt-4 text-center text-gray-800 dark:text-gray-100">
+						{{ subheading }}
+					</p>
+					<UForm
+						class="mt-8 flex flex-col items-center justify-center w-full max-w-lg"
+						:schema="schema"
+						:state="state"
+						@submit="onSubmit"
+					>
+						<div class="w-full text-center">
+							<UFormField label="" name="email" class="w-full">
+								<UInput
+									padded
+									placeholder="Enter your email"
+									icon="i-lucide-mail"
+									size="xl"
+									class="w-full flex-1"
+									v-model="state.email"
+									:loading="loading"
+									:disabled="disabled"
+								/>
+							</UFormField>
+							<UButton
+								type="submit"
+								size="xl"
+								class="mt-6"
+								:label="submitLabel"
+							/>
+						</div>
+					</UForm>
+				</div>
+				<div class="text-center text-2xl" v-else>
+					<div class="text-3xl font-bold">Done!</div>
+					You have successfully subscribed.
+				</div>
+			</section>
+		</main>
+	</div>
+</template>
+
+<script setup>
+import { z } from "zod";
+
+const toast = useToast();
+const props = defineProps({
+	heading: {
+		type: String,
+		default: "Stay Up To Date",
+	},
+	subheading: {
+		type: String,
+		default: "Stay up to date with our latest news and product announcements.",
+	},
+	submitLabel: {
+		type: String,
+		default: "Subscribe",
+	},
+	cardClass: {
+		type: String,
+		default: `bg-fit bg-center bg-no-repeat bg-primary/5`,
+	},
+	cardStyle: {
+		type: String,
+		default: `background-image: url('https://cdn.x.enterprises/bg-subscription-poof2.webp');`,
+	},
+	organizationId: {
+		type: String,
+		required: true,
+	},
+	endpoint: {
+		type: String,
+		default: "https://api.emailmarketingnewsletters.com",
+	},
+});
+
+const schema = z.object({
+	email: z.string().email("Invalid email"),
+});
+
+const state = reactive({
+	email: undefined,
+});
+
+async function onSubmit(event) {
+	loading.value = true;
+	disabled.value = true;
+	try {
+		await $fetch(`${props.endpoint}/public/subscriptions/subscribe`, {
+			method: "POST",
+			body: JSON.stringify({
+				email: state.email,
+				organizationId: props.organizationId,
+			}),
+		});
+		submitted.value = true;
+		toast.add({
+			icon: "i-lucide-badge-check",
+			title: "You have successfully subscribed to our newsletter.",
+		});
+	} catch (error) {
+		console.log(error);
+		toast.add({
+			icon: "i-lucide-alert-circle",
+			title: `An error occurred or you've already subscribed.`,
+		});
+	} finally {
+		loading.value = false;
+		disabled.value = false;
+	}
+}
+
+const loading = ref(false);
+const disabled = ref(false);
+const submitted = ref(false);
+</script>
+

package/app/composables/useParallax.ts

@@ -0,0 +1,124 @@
+/**
+ * Parallax Scroll Effect Composable
+ * Implements smooth parallax scrolling for background elements
+ * From spec-prompt.md specification
+ */
+export const useParallax = (options = {}) => {
+  const defaultOptions = {
+    defaultSpeed: 0.5,
+    ...options,
+  };
+
+  const elements = ref<Element[]>([]);
+
+  const initParallax = () => {
+    if (process.client) {
+      // Find all elements with xParallax class and data-parallax-speed attribute
+      const parallaxElements = document.querySelectorAll('.xParallax[data-parallax-speed]');
+      elements.value = Array.from(parallaxElements);
+
+      if (elements.value.length === 0) return;
+
+      const updateParallax = () => {
+        const scrollY = window.scrollY;
+
+        elements.value.forEach((el) => {
+          const speed = parseFloat((el as HTMLElement).dataset.parallaxSpeed || String(defaultOptions.defaultSpeed));
+          const rect = el.getBoundingClientRect();
+          const offsetTop = rect.top + scrollY;
+
+          // Calculate the parallax offset based on scroll position relative to element
+          const offset = (scrollY - offsetTop) * speed;
+
+          // Apply the transform
+          (el as HTMLElement).style.transform = `translateY(${offset}px)`;
+        });
+      };
+
+      // Use requestAnimationFrame for smoother updates
+      let ticking = false;
+      const handleScroll = () => {
+        if (!ticking) {
+          window.requestAnimationFrame(() => {
+            updateParallax();
+            ticking = false;
+          });
+          ticking = true;
+        }
+      };
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+
+      // Initial update
+      updateParallax();
+
+      onUnmounted(() => {
+        window.removeEventListener('scroll', handleScroll);
+      });
+    }
+  };
+
+  const cleanup = () => {
+    elements.value = [];
+  };
+
+  onMounted(() => {
+    // Small delay to ensure DOM is ready
+    setTimeout(initParallax, 100);
+  });
+
+  onUnmounted(() => {
+    cleanup();
+  });
+
+  return {
+    initParallax,
+    cleanup,
+  };
+};
+
+/**
+ * Hook for individual element parallax
+ * Usage: const { elementRef } = useElementParallax(0.3)
+ */
+export const useElementParallax = (speed = 0.5) => {
+  const elementRef = ref<HTMLElement | null>(null);
+
+  onMounted(() => {
+    if (process.client && elementRef.value) {
+      let ticking = false;
+
+      const updateParallax = () => {
+        if (!elementRef.value) return;
+
+        const scrollY = window.scrollY;
+        const rect = elementRef.value.getBoundingClientRect();
+        const offsetTop = rect.top + scrollY;
+        const offset = (scrollY - offsetTop) * speed;
+
+        elementRef.value.style.transform = `translateY(${offset}px)`;
+      };
+
+      const handleScroll = () => {
+        if (!ticking) {
+          window.requestAnimationFrame(() => {
+            updateParallax();
+            ticking = false;
+          });
+          ticking = true;
+        }
+      };
+
+      window.addEventListener('scroll', handleScroll, { passive: true });
+      updateParallax();
+
+      onUnmounted(() => {
+        window.removeEventListener('scroll', handleScroll);
+      });
+    }
+  });
+
+  return {
+    elementRef,
+  };
+};

package/app/composables/useScrollReveal.ts

@@ -0,0 +1,92 @@
+/**
+ * Premium Scroll Reveal Animation Composable
+ * Implements intersection observer for smooth fade-in animations
+ * Design Brief: 300-400ms transitions with ease-out curves
+ *
+ * Supports:
+ * - [data-reveal] attribute (legacy)
+ * - .xFadeUp, .xFadeIn, .xFadeLeft, .xFadeRight, .xScale classes
+ * - .xFadeUp-stagger for staggered child animations
+ */
+export const useScrollReveal = (options = {}) => {
+  const defaultOptions = {
+    threshold: 0.15,
+    rootMargin: '0px 0px -80px 0px',
+    ...options,
+  };
+
+  const observer = ref<IntersectionObserver | null>(null);
+
+  // Selector for all animation elements
+  const animationSelectors = [
+    '[data-reveal]',
+    '.xFadeUp',
+    '.xFadeIn',
+    '.xFadeLeft',
+    '.xFadeRight',
+    '.xScale',
+    '.xFadeUp-stagger',
+  ].join(', ');
+
+  const initScrollReveal = () => {
+    if (process.client) {
+      observer.value = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('is-visible');
+            // Optionally unobserve after animation
+            if (options.once !== false) {
+              observer.value?.unobserve(entry.target);
+            }
+          } else if (options.once === false) {
+            // Re-hide if not in view and once is false
+            entry.target.classList.remove('is-visible');
+          }
+        });
+      }, defaultOptions);
+
+      // Observe all animation elements
+      const elements = document.querySelectorAll(animationSelectors);
+      elements.forEach((el) => observer.value?.observe(el));
+    }
+  };
+
+  const cleanup = () => {
+    if (observer.value) {
+      observer.value.disconnect();
+    }
+  };
+
+  onMounted(() => {
+    // Small delay to ensure DOM is ready
+    setTimeout(initScrollReveal, 100);
+  });
+
+  onUnmounted(() => {
+    cleanup();
+  });
+
+  return {
+    initScrollReveal,
+    cleanup,
+  };
+};
+
+/**
+ * Helper to add staggered reveal delays to child elements
+ */
+export const useStaggerReveal = (containerSelector: string, staggerDelay = 100) => {
+  onMounted(() => {
+    if (process.client) {
+      setTimeout(() => {
+        const container = document.querySelector(containerSelector);
+        if (container) {
+          const children = container.querySelectorAll('[data-reveal]');
+          children.forEach((child, index) => {
+            (child as HTMLElement).style.transitionDelay = `${index * staggerDelay}ms`;
+          });
+        }
+      }, 100);
+    }
+  });
+};