@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.2

package/app/composables/useParallax.ts

@@ -4,15 +4,20 @@
  * From spec-prompt.md specification
  */
 export const useParallax = (options = {}) => {
+  // Only register lifecycle hooks when inside a component instance
+  const instance = getCurrentInstance();
+  if (!instance) return { initParallax: () => {}, cleanup: () => {} };
+
   const defaultOptions = {
     defaultSpeed: 0.5,
     ...options,
   };
 
   const elements = ref<Element[]>([]);
+  let handleScroll: (() => void) | null = null;
 
   const initParallax = () => {
-    if (process.client) {
+    if (import.meta.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);
@@ -37,7 +42,7 @@ export const useParallax = (options = {}) => {
 
       // Use requestAnimationFrame for smoother updates
       let ticking = false;
-      const handleScroll = () => {
+      handleScroll = () => {
         if (!ticking) {
           window.requestAnimationFrame(() => {
             updateParallax();
@@ -51,25 +56,27 @@ export const useParallax = (options = {}) => {
 
       // Initial update
       updateParallax();
-
-      onUnmounted(() => {
-        window.removeEventListener('scroll', handleScroll);
-      });
     }
   };
 
   const cleanup = () => {
+    if (handleScroll) {
+      window.removeEventListener('scroll', handleScroll);
+      handleScroll = null;
+    }
     elements.value = [];
   };
 
-  onMounted(() => {
-    // Small delay to ensure DOM is ready
-    setTimeout(initParallax, 100);
-  });
+  if (import.meta.client) {
+    onMounted(() => {
+      // Small delay to ensure DOM is ready
+      setTimeout(initParallax, 100);
+    });
 
-  onUnmounted(() => {
-    cleanup();
-  });
+    onUnmounted(() => {
+      cleanup();
+    });
+  }
 
   return {
     initParallax,
@@ -83,9 +90,10 @@ export const useParallax = (options = {}) => {
  */
 export const useElementParallax = (speed = 0.5) => {
   const elementRef = ref<HTMLElement | null>(null);
+  let handleScroll: (() => void) | null = null;
 
   onMounted(() => {
-    if (process.client && elementRef.value) {
+    if (import.meta.client && elementRef.value) {
       let ticking = false;
 
       const updateParallax = () => {
@@ -99,7 +107,7 @@ export const useElementParallax = (speed = 0.5) => {
         elementRef.value.style.transform = `translateY(${offset}px)`;
       };
 
-      const handleScroll = () => {
+      handleScroll = () => {
         if (!ticking) {
           window.requestAnimationFrame(() => {
             updateParallax();
@@ -111,13 +119,18 @@ export const useElementParallax = (speed = 0.5) => {
 
       window.addEventListener('scroll', handleScroll, { passive: true });
       updateParallax();
-
-      onUnmounted(() => {
-        window.removeEventListener('scroll', handleScroll);
-      });
     }
   });
 
+  if (import.meta.client) {
+    onUnmounted(() => {
+      if (handleScroll) {
+        window.removeEventListener('scroll', handleScroll);
+        handleScroll = null;
+      }
+    });
+  }
+
   return {
     elementRef,
   };

package/app/composables/useScrollReveal.ts

@@ -8,7 +8,11 @@
  * - .xFadeUp, .xFadeIn, .xFadeLeft, .xFadeRight, .xScale classes
  * - .xFadeUp-stagger for staggered child animations
  */
-export const useScrollReveal = (options = {}) => {
+export const useScrollReveal = (options: Record<string, unknown> = {}) => {
+  // Only register lifecycle hooks when inside a component instance
+  const instance = getCurrentInstance();
+  if (!instance) return { initScrollReveal: () => {}, cleanup: () => {} };
+
   const defaultOptions = {
     threshold: 0.15,
     rootMargin: '0px 0px -80px 0px',
@@ -29,7 +33,7 @@ export const useScrollReveal = (options = {}) => {
   ].join(', ');
 
   const initScrollReveal = () => {
-    if (process.client) {
+    if (import.meta.client) {
       observer.value = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
@@ -54,17 +58,20 @@ export const useScrollReveal = (options = {}) => {
   const cleanup = () => {
     if (observer.value) {
       observer.value.disconnect();
+      observer.value = null;
     }
   };
 
-  onMounted(() => {
-    // Small delay to ensure DOM is ready
-    setTimeout(initScrollReveal, 100);
-  });
+  if (import.meta.client) {
+    onMounted(() => {
+      // Small delay to ensure DOM is ready
+      setTimeout(initScrollReveal, 100);
+    });
 
-  onUnmounted(() => {
-    cleanup();
-  });
+    onUnmounted(() => {
+      cleanup();
+    });
+  }
 
   return {
     initScrollReveal,
@@ -76,8 +83,8 @@ export const useScrollReveal = (options = {}) => {
  * Helper to add staggered reveal delays to child elements
  */
 export const useStaggerReveal = (containerSelector: string, staggerDelay = 100) => {
-  onMounted(() => {
-    if (process.client) {
+  if (import.meta.client) {
+    onMounted(() => {
       setTimeout(() => {
         const container = document.querySelector(containerSelector);
         if (container) {
@@ -87,6 +94,6 @@ export const useStaggerReveal = (containerSelector: string, staggerDelay = 100)
           });
         }
       }, 100);
-    }
-  });
+    });
+  }
 };

package/app/pages/index.vue

@@ -10,9 +10,7 @@
 			overlay="gradient"
 		>
 			<template #actions>
-				<UButton size="xl" color="white">
-					Get Started Free
-				</UButton>
+				<UButton size="xl" color="white"> Get Started Free </UButton>
 				<UButton size="xl" variant="outline" color="white">
 					Watch Demo
 				</UButton>
@@ -23,41 +21,41 @@
 		<XMarkSection id="features" bg="default" padding="xl">
 			<header class="text-center max-w-3xl mx-auto mb-16">
 				<p class="xText-eyebrow text-primary-500 mb-4">Features</p>
-				<h2 class="xText-headline text-neutral-900 dark:text-white xText-balance">
+				<h2
+					class="xText-headline text-neutral-900 dark:text-white xText-balance"
+				>
 					Everything you need to succeed
 				</h2>
 				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
-					Powerful tools designed to help you build, launch, and grow your product.
+					Powerful tools designed to help you build, launch, and grow your
+					product.
 				</p>
 			</header>
 
-			<XMarkFeatures
-				:features="features"
-				layout="grid"
-				:columns="3"
-			/>
+			<XMarkFeatures :features="features" layout="grid" :columns="3" />
 		</XMarkSection>
 
 		<!-- Testimonials Section -->
 		<XMarkSection bg="subtle" padding="xl">
 			<header class="text-center max-w-3xl mx-auto mb-16">
 				<p class="xText-eyebrow text-primary-500 mb-4">Testimonials</p>
-				<h2 class="xText-headline text-neutral-900 dark:text-white xText-balance">
+				<h2
+					class="xText-headline text-neutral-900 dark:text-white xText-balance"
+				>
 					Loved by teams worldwide
 				</h2>
 			</header>
 
-			<XMarkTestimonials
-				:testimonials="testimonials"
-				layout="grid"
-			/>
+			<XMarkTestimonials :testimonials="testimonials" layout="grid" />
 		</XMarkSection>
 
 		<!-- Pricing Section -->
 		<XMarkSection bg="default" padding="xl">
 			<header class="text-center max-w-3xl mx-auto mb-16">
 				<p class="xText-eyebrow text-primary-500 mb-4">Pricing</p>
-				<h2 class="xText-headline text-neutral-900 dark:text-white xText-balance">
+				<h2
+					class="xText-headline text-neutral-900 dark:text-white xText-balance"
+				>
 					Simple, transparent pricing
 				</h2>
 				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
@@ -65,24 +63,18 @@
 				</p>
 			</header>
 
-			<XMarkPricing
-				:plans="pricingPlans"
-			/>
+			<XMarkPricing :plans="pricingPlans" />
 		</XMarkSection>
 
 		<!-- CTA Section -->
 		<XMarkSection bg="bold" padding="xl">
 			<div class="text-center max-w-3xl mx-auto">
-				<h2 class="xText-headline xText-balance">
-					Ready to get started?
-				</h2>
+				<h2 class="xText-headline xText-balance">Ready to get started?</h2>
 				<p class="mt-4 text-lg opacity-80">
 					Join thousands of teams already using our platform.
 				</p>
 				<div class="mt-8 flex flex-wrap justify-center gap-4">
-					<UButton size="xl" color="white">
-						Start Free Trial
-					</UButton>
+					<UButton size="xl" color="white"> Start Free Trial </UButton>
 					<UButton size="xl" variant="outline" color="white">
 						Contact Sales
 					</UButton>
@@ -93,13 +85,123 @@
 				</div>
 			</div>
 		</XMarkSection>
+
+		<!-- ─── Affiliate Components Demo ─── -->
+
+		<!-- Affiliate Disclosure variants -->
+		<XMarkSection bg="subtle" padding="xl">
+			<header class="text-center max-w-3xl mx-auto mb-12">
+				<p class="xText-eyebrow text-primary-500 mb-4">Affiliate Components</p>
+				<h2
+					class="xText-headline text-neutral-900 dark:text-white xText-balance"
+				>
+					Affiliate &amp; Review Components
+				</h2>
+				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
+					FTC-compliant disclosures, product cards, grids, detail pages, and
+					comparison tables.
+				</p>
+			</header>
+
+			<!-- Disclosure variants -->
+			<div class="max-w-3xl mx-auto space-y-4 mb-16">
+				<h3
+					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-4"
+				>
+					Disclosure Variants
+				</h3>
+				<XMarkAffiliateDisclosure variant="subtle" />
+				<XMarkAffiliateDisclosure variant="banner" />
+				<XMarkAffiliateDisclosure variant="inline" />
+			</div>
+
+			<!-- Product Cards — all 3 layouts -->
+			<div class="mb-16">
+				<h3
+					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
+				>
+					Product Card Layouts
+				</h3>
+				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+					<XMarkAffiliateProductCard
+						:product="sampleProducts[0]"
+						layout="card"
+						:show-pros="true"
+					/>
+					<XMarkAffiliateProductCard
+						:product="sampleProducts[1]"
+						layout="card"
+						:show-pros="true"
+						:show-cons="true"
+					/>
+					<XMarkAffiliateProductCard
+						:product="sampleProducts[2]"
+						layout="card"
+						:show-pros="true"
+					/>
+				</div>
+				<div class="space-y-4 mb-6">
+					<XMarkAffiliateProductCard
+						:product="sampleProducts[0]"
+						layout="row"
+						:show-pros="true"
+					/>
+					<XMarkAffiliateProductCard
+						:product="sampleProducts[1]"
+						layout="row"
+					/>
+				</div>
+				<div class="space-y-2">
+					<XMarkAffiliateProductCard
+						v-for="p in sampleProducts"
+						:key="p.name"
+						:product="p"
+						layout="compact"
+					/>
+				</div>
+			</div>
+
+			<!-- Product Grid -->
+			<div class="mb-16">
+				<h3
+					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
+				>
+					Product Grid (Roundup Post)
+				</h3>
+				<XMarkAffiliateProductGrid
+					:products="sampleProducts"
+					layout="grid"
+					:columns="3"
+					:show-ranking="true"
+					disclosure="This page contains affiliate links. As an Amazon Associate, we earn from qualifying purchases."
+				/>
+			</div>
+
+			<!-- Comparison Table -->
+			<div class="mb-16">
+				<h3
+					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
+				>
+					Comparison Table (X vs Y)
+				</h3>
+				<XMarkAffiliateComparisonTable
+					:products="comparisonProducts"
+					:specs="comparisonSpecs"
+					:show-buy-buttons="true"
+					:highlight-best="true"
+					button-label="Buy on Amazon"
+					disclosure="This page contains affiliate links."
+				/>
+			</div>
+		</XMarkSection>
 	</div>
 </template>
 
 <script setup>
 useSeoMeta({
 	title: "Modern Platform for Teams",
-	description: "Build, launch, and grow your product with our powerful platform.",
+	description:
+		"Build, launch, and grow your product with our powerful platform.",
 });
 
 // Features data
@@ -139,7 +241,8 @@ const features = [
 // Testimonials data
 const testimonials = [
 	{
-		quote: "This platform transformed how our team works. We shipped 3x faster within the first month.",
+		quote:
+			"This platform transformed how our team works. We shipped 3x faster within the first month.",
 		name: "Sarah Chen",
 		title: "CTO",
 		company: "TechStart",
@@ -153,7 +256,8 @@ const testimonials = [
 		avatar: "https://randomuser.me/api/portraits/men/32.jpg",
 	},
 	{
-		quote: "Finally, a platform that understands what modern teams need. Highly recommended.",
+		quote:
+			"Finally, a platform that understands what modern teams need. Highly recommended.",
 		name: "Emily Park",
 		title: "Product Lead",
 		company: "InnovateCo",
@@ -161,6 +265,104 @@ const testimonials = [
 	},
 ];
 
+// Affiliate sample products
+const sampleProducts = [
+	{
+		name: "Sony WH-1000XM5",
+		image:
+			"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&q=80",
+		price: "$279.99",
+		originalPrice: "$349.99",
+		rating: 4.8,
+		reviewCount: 12400,
+		pros: ["Best-in-class ANC", "30hr battery life", "Foldable design"],
+		cons: ["No IP rating", "Expensive"],
+		affiliateUrl: "https://amazon.com",
+		affiliateTag: "mysite-20",
+	},
+	{
+		name: "Bose QuietComfort 45",
+		image:
+			"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&q=80",
+		price: "$249.99",
+		rating: 4.6,
+		reviewCount: 8900,
+		pros: ["Comfortable fit", "Great sound quality", "Easy controls"],
+		cons: ["No multipoint", "Older design"],
+		affiliateUrl: "https://amazon.com",
+		affiliateTag: "mysite-20",
+	},
+	{
+		name: "Apple AirPods Max",
+		image:
+			"https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=400&q=80",
+		price: "$449.00",
+		rating: 4.7,
+		reviewCount: 6200,
+		pros: ["Premium build quality", "Excellent ANC", "Spatial audio"],
+		cons: ["Very expensive", "Heavy", "No USB-C charging"],
+		affiliateUrl: "https://amazon.com",
+		affiliateTag: "mysite-20",
+	},
+];
+
+// Comparison table data
+const comparisonProducts = [
+	{
+		name: "Sony WH-1000XM5",
+		image:
+			"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&q=80",
+		price: "$279.99",
+		affiliateUrl: "https://amazon.com",
+		affiliateTag: "mysite-20",
+		specs: {
+			price: "$279.99",
+			rating: "4.8/5",
+			battery: "30 hours",
+			weight: "250g",
+			anc: "Yes",
+		},
+	},
+	{
+		name: "Bose QC45",
+		image:
+			"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=200&q=80",
+		price: "$249.99",
+		affiliateUrl: "https://amazon.com",
+		affiliateTag: "mysite-20",
+		specs: {
+			price: "$249.99",
+			rating: "4.6/5",
+			battery: "24 hours",
+			weight: "238g",
+			anc: "Yes",
+		},
+	},
+	{
+		name: "AirPods Max",
+		image:
+			"https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=200&q=80",
+		price: "$449.00",
+		affiliateUrl: "https://amazon.com",
+		affiliateTag: "mysite-20",
+		specs: {
+			price: "$449.00",
+			rating: "4.7/5",
+			battery: "20 hours",
+			weight: "385g",
+			anc: "Yes",
+		},
+	},
+];
+
+const comparisonSpecs = [
+	{ label: "Price", key: "price" },
+	{ label: "Rating", key: "rating" },
+	{ label: "Battery Life", key: "battery" },
+	{ label: "Weight", key: "weight" },
+	{ label: "ANC", key: "anc" },
+];
+
 // Pricing plans data
 const pricingPlans = [
 	{