@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.2

package/app/components/X/Mark/Affiliate/ProductDetail.vue

@@ -0,0 +1,410 @@
+<template>
+	<article class="product-detail">
+		<!-- Disclosure -->
+		<XMarkAffiliateDisclosure
+			v-if="disclosure"
+			:text="disclosure"
+			variant="subtle"
+			class="mb-8"
+		/>
+
+		<!-- Product Header -->
+		<header class="mb-8">
+			<div class="flex flex-wrap items-start gap-4">
+				<div class="flex-1 min-w-0">
+					<h1
+						class="text-2xl sm:text-3xl lg:text-4xl font-bold text-neutral-900 dark:text-white leading-tight"
+					>
+						{{ product.name }}
+					</h1>
+
+					<!-- Rating + Review Count -->
+					<div
+						v-if="product.rating"
+						class="flex items-center gap-3 mt-3 flex-wrap"
+					>
+						<div class="flex items-center gap-1">
+							<UIcon
+								v-for="i in 5"
+								:key="i"
+								name="i-lucide-star"
+								class="w-4 h-4"
+								:class="
+									i <= Math.round(product.rating)
+										? 'text-yellow-400'
+										: 'text-neutral-300 dark:text-neutral-600'
+								"
+							/>
+						</div>
+						<span class="font-semibold text-neutral-800 dark:text-neutral-200">
+							{{ product.rating.toFixed(1) }}
+						</span>
+						<span
+							v-if="product.reviewCount"
+							class="text-sm text-neutral-500 dark:text-neutral-400"
+						>
+							({{ product.reviewCount.toLocaleString() }} reviews)
+						</span>
+					</div>
+
+					<!-- Price -->
+					<div class="flex items-baseline gap-3 mt-3">
+						<span
+							v-if="product.price"
+							class="text-2xl font-bold text-neutral-900 dark:text-white"
+						>
+							{{ product.price }}
+						</span>
+						<span
+							v-if="product.originalPrice"
+							class="text-lg text-neutral-400 dark:text-neutral-500 line-through"
+						>
+							{{ product.originalPrice }}
+						</span>
+					</div>
+				</div>
+
+				<!-- Editorial Score Badge -->
+				<div
+					v-if="score !== null"
+					class="flex-shrink-0 w-20 h-20 rounded-2xl bg-primary-500 dark:bg-primary-600 flex flex-col items-center justify-center shadow-lg"
+					aria-label="Editorial score"
+				>
+					<span class="text-2xl font-bold text-white leading-none">{{
+						score
+					}}</span>
+					<span class="text-xs text-primary-100 mt-0.5">/10</span>
+				</div>
+			</div>
+		</header>
+
+		<!-- Content Grid: main + sidebar -->
+		<div class="grid lg:grid-cols-[1fr_300px] gap-10 lg:gap-14">
+			<!-- Main Content -->
+			<div class="min-w-0 space-y-10">
+				<!-- Image Gallery -->
+				<section v-if="allImages.length" aria-label="Product images">
+					<!-- Main Image -->
+					<figure
+						class="aspect-4/3 rounded-2xl overflow-hidden bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 mb-3"
+					>
+						<img
+							:src="activeImage"
+							:alt="product.name"
+							class="w-full h-full object-contain p-6 transition-opacity duration-200"
+						/>
+					</figure>
+
+					<!-- Thumbnails -->
+					<div v-if="allImages.length > 1" class="flex gap-2 flex-wrap">
+						<button
+							v-for="(img, idx) in allImages"
+							:key="idx"
+							class="w-16 h-16 rounded-lg overflow-hidden border-2 transition-all duration-200 bg-neutral-50 dark:bg-neutral-800"
+							:class="
+								activeImage === img
+									? 'border-primary-500 dark:border-primary-400'
+									: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-400'
+							"
+							:aria-label="`View image ${idx + 1}`"
+							@click="activeImage = img"
+						>
+							<img
+								:src="img"
+								:alt="`${product.name} image ${idx + 1}`"
+								class="w-full h-full object-contain p-1"
+							/>
+						</button>
+					</div>
+				</section>
+
+				<!-- Description -->
+				<section v-if="product.description">
+					<p
+						class="text-neutral-700 dark:text-neutral-300 leading-relaxed text-base"
+					>
+						{{ product.description }}
+					</p>
+				</section>
+
+				<!-- Pros & Cons Table -->
+				<section
+					v-if="
+						hasProsConsTable && (product.pros?.length || product.cons?.length)
+					"
+					aria-label="Pros and cons"
+				>
+					<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-4">
+						Pros &amp; Cons
+					</h2>
+					<div class="grid sm:grid-cols-2 gap-4">
+						<!-- Pros -->
+						<div
+							class="rounded-xl border border-green-200 dark:border-green-900/50 bg-green-50 dark:bg-green-900/10 p-4"
+						>
+							<h3
+								class="font-semibold text-green-800 dark:text-green-400 mb-3 flex items-center gap-2"
+							>
+								<UIcon name="i-lucide-thumbs-up" class="w-4 h-4" />
+								Pros
+							</h3>
+							<ul class="space-y-2">
+								<li
+									v-for="pro in product.pros"
+									:key="pro"
+									class="flex items-start gap-2 text-sm text-neutral-700 dark:text-neutral-300"
+								>
+									<UIcon
+										name="i-lucide-check"
+										class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"
+									/>
+									<span>{{ pro }}</span>
+								</li>
+							</ul>
+						</div>
+
+						<!-- Cons -->
+						<div
+							class="rounded-xl border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 p-4"
+						>
+							<h3
+								class="font-semibold text-red-800 dark:text-red-400 mb-3 flex items-center gap-2"
+							>
+								<UIcon name="i-lucide-thumbs-down" class="w-4 h-4" />
+								Cons
+							</h3>
+							<ul class="space-y-2">
+								<li
+									v-for="con in product.cons"
+									:key="con"
+									class="flex items-start gap-2 text-sm text-neutral-700 dark:text-neutral-300"
+								>
+									<UIcon
+										name="i-lucide-x"
+										class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5"
+									/>
+									<span>{{ con }}</span>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+
+				<!-- Specs Table -->
+				<section
+					v-if="hasSpecs && product.specs && Object.keys(product.specs).length"
+					aria-label="Product specifications"
+				>
+					<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-4">
+						Specifications
+					</h2>
+					<div
+						class="rounded-xl border border-neutral-200 dark:border-neutral-700 overflow-hidden"
+					>
+						<table class="w-full text-sm">
+							<tbody>
+								<tr
+									v-for="(value, key, idx) in product.specs"
+									:key="key"
+									:class="
+										idx % 2 === 0
+											? 'bg-neutral-50 dark:bg-neutral-800/50'
+											: 'bg-white dark:bg-neutral-900'
+									"
+								>
+									<th
+										class="px-4 py-3 text-left font-medium text-neutral-600 dark:text-neutral-400 w-2/5 border-r border-neutral-200 dark:border-neutral-700"
+									>
+										{{ key }}
+									</th>
+									<td class="px-4 py-3 text-neutral-900 dark:text-white">
+										{{ value }}
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</section>
+
+				<!-- Verdict -->
+				<section v-if="product.verdict" aria-label="Editorial verdict">
+					<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-4">
+						Our Verdict
+					</h2>
+					<div
+						class="relative pl-5 border-l-4 border-primary-400 dark:border-primary-500"
+					>
+						<blockquote
+							class="text-lg italic text-neutral-700 dark:text-neutral-300 leading-relaxed"
+						>
+							{{ product.verdict }}
+						</blockquote>
+						<div v-if="score !== null" class="mt-4 flex items-center gap-3">
+							<div
+								class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-semibold text-sm"
+							>
+								<UIcon name="i-lucide-award" class="w-4 h-4" />
+								Editorial Score: {{ score }}/10
+							</div>
+						</div>
+					</div>
+				</section>
+
+				<!-- After Verdict Slot -->
+				<slot name="after-verdict" />
+			</div>
+
+			<!-- Sidebar -->
+			<aside class="lg:block">
+				<div class="sticky top-24 space-y-6">
+					<!-- Buy Box -->
+					<slot name="buy-box">
+						<div
+							v-if="hasBuyBox"
+							class="rounded-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-5 shadow-sm"
+						>
+							<h3 class="font-semibold text-neutral-900 dark:text-white mb-1">
+								{{ product.name }}
+							</h3>
+
+							<!-- Price in buy box -->
+							<div class="flex items-baseline gap-2 mb-4">
+								<span
+									v-if="product.price"
+									class="text-2xl font-bold text-neutral-900 dark:text-white"
+								>
+									{{ product.price }}
+								</span>
+								<span
+									v-if="product.originalPrice"
+									class="text-sm text-neutral-400 line-through"
+								>
+									{{ product.originalPrice }}
+								</span>
+							</div>
+
+							<!-- Score in buy box -->
+							<div v-if="score !== null" class="flex items-center gap-2 mb-4">
+								<div class="flex items-center gap-0.5">
+									<UIcon
+										v-for="i in 5"
+										:key="i"
+										name="i-lucide-star"
+										class="w-3.5 h-3.5"
+										:class="
+											i <= Math.round((score / 10) * 5)
+												? 'text-yellow-400'
+												: 'text-neutral-300 dark:text-neutral-600'
+										"
+									/>
+								</div>
+								<span
+									class="text-sm font-medium text-neutral-700 dark:text-neutral-300"
+								>
+									{{ score }}/10
+								</span>
+							</div>
+
+							<!-- CTA Button -->
+							<a
+								:href="affiliateHref"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="block"
+							>
+								<UButton
+									label="Check Price on Amazon"
+									trailing-icon="i-lucide-external-link"
+									color="primary"
+									variant="solid"
+									size="lg"
+									block
+									class="justify-center"
+								/>
+							</a>
+
+							<!-- Disclosure in buy box -->
+							<p
+								v-if="disclosure"
+								class="mt-3 text-xs text-neutral-400 dark:text-neutral-500 text-center italic leading-relaxed"
+							>
+								{{ disclosure }}
+							</p>
+						</div>
+					</slot>
+
+					<!-- Sidebar Slot -->
+					<slot name="sidebar" />
+				</div>
+			</aside>
+		</div>
+	</article>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Full product data for the review page */
+	product: {
+		type: Object,
+		default: () => ({
+			name: "Product Review",
+			price: "$99.99",
+			rating: 4.5,
+			reviewCount: 1200,
+			pros: ["Excellent build quality", "Long battery life", "Great value"],
+			cons: ["No IP rating", "Bulky design"],
+			description: "A comprehensive review of this product.",
+			verdict: "A solid choice for most users.",
+		}),
+	},
+	/** Editorial score 0–10 */
+	score: {
+		type: Number,
+		default: null,
+	},
+	/** Show the buy box sidebar widget */
+	hasBuyBox: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show the specs table */
+	hasSpecs: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show the pros/cons two-column table */
+	hasProsConsTable: {
+		type: Boolean,
+		default: true,
+	},
+	/** Affiliate disclosure text */
+	disclosure: {
+		type: String,
+		default: "",
+	},
+});
+
+/** Build the affiliate URL with optional tag param */
+const affiliateHref = computed(() => {
+	const url = props.product.affiliateUrl || "#";
+	const tag = props.product.affiliateTag;
+	if (!tag || url === "#") return url;
+	const separator = url.includes("?") ? "&" : "?";
+	return `${url}${separator}tag=${tag}`;
+});
+
+/** Collect all images: images array or single image */
+const allImages = computed(() => {
+	if (props.product.images?.length) return props.product.images;
+	if (props.product.image) return [props.product.image];
+	return [];
+});
+
+/** Currently displayed main image */
+const activeImage = ref(allImages.value[0] || "");
+
+/** Update active image when product changes */
+watch(allImages, (imgs) => {
+	if (imgs.length) activeImage.value = imgs[0];
+});
+</script>

package/app/components/X/Mark/Affiliate/ProductGrid.vue

@@ -0,0 +1,101 @@
+<template>
+	<section>
+		<!-- Disclosure at top -->
+		<XMarkAffiliateDisclosure
+			v-if="disclosure"
+			:text="disclosure"
+			variant="subtle"
+			class="mb-6"
+		/>
+
+		<!-- Grid layout -->
+		<div v-if="layout === 'grid'" :class="gridClasses">
+			<XMarkAffiliateProductCard
+				v-for="(product, index) in rankedProducts"
+				:key="product.name + index"
+				:product="product"
+				:layout="cardLayout"
+				:button-label="buttonLabel"
+				class="xFadeUp"
+				:style="{ animationDelay: `${index * 80}ms` }"
+			/>
+		</div>
+
+		<!-- List layout -->
+		<div v-else-if="layout === 'list'" class="space-y-4">
+			<XMarkAffiliateProductCard
+				v-for="(product, index) in rankedProducts"
+				:key="product.name + index"
+				:product="product"
+				layout="row"
+				:button-label="buttonLabel"
+				class="xFadeUp"
+				:style="{ animationDelay: `${index * 60}ms` }"
+			/>
+		</div>
+	</section>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Array of product objects */
+	products: {
+		type: Array,
+		default: () => [],
+	},
+	/** Grid or list display */
+	layout: {
+		type: String,
+		default: "grid",
+		validator: (v) => ["grid", "list"].includes(v),
+	},
+	/** Number of columns in grid mode (2 or 3) */
+	columns: {
+		type: Number,
+		default: 3,
+		validator: (v) => [2, 3].includes(v),
+	},
+	/** Show rank badges (#1 Pick, #2 Pick, etc.) on first 3 products */
+	showRanking: {
+		type: Boolean,
+		default: true,
+	},
+	/** Disclosure text shown once at top of grid */
+	disclosure: {
+		type: String,
+		default: "",
+	},
+	/** CTA button label passed to each card */
+	buttonLabel: {
+		type: String,
+		default: "Check Price on Amazon",
+	},
+	/** Card layout variant passed to each ProductCard */
+	cardLayout: {
+		type: String,
+		default: "card",
+		validator: (v) => ["card", "row", "compact"].includes(v),
+	},
+});
+
+const rankLabels = ["#1 Pick", "#2 Pick", "#3 Pick"];
+
+/** Inject rank badges into first 3 products when showRanking is true */
+const rankedProducts = computed(() => {
+	if (!props.showRanking) return props.products;
+	return props.products.map((product, index) => {
+		if (index < 3 && !product.badge) {
+			return { ...product, badge: rankLabels[index] };
+		}
+		return product;
+	});
+});
+
+const gridClasses = computed(() => {
+	const colMap = {
+		2: "grid grid-cols-1 sm:grid-cols-2 gap-6",
+		3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6",
+	};
+	return colMap[props.columns] || colMap[3];
+});
+</script>

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

@@ -11,14 +11,14 @@
 				:alt="author.name"
 				:class="[
 					'rounded-full object-cover',
-					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10'
+					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10',
 				]"
 			/>
 			<div
 				v-else
 				:class="[
 					'rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center',
-					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10'
+					variant === 'sm' ? 'w-8 h-8' : 'w-10 h-10',
 				]"
 			>
 				<span class="text-primary-600 dark:text-primary-400 font-medium">
@@ -52,7 +52,9 @@
 				v-else
 				class="w-20 h-20 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 text-2xl">
+				<span
+					class="text-primary-600 dark:text-primary-400 font-medium text-2xl"
+				>
 					{{ author.name?.charAt(0) }}
 				</span>
 			</div>
@@ -101,7 +103,9 @@
 				v-else
 				class="w-24 h-24 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mx-auto"
 			>
-				<span class="text-primary-600 dark:text-primary-400 font-medium text-3xl">
+				<span
+					class="text-primary-600 dark:text-primary-400 font-medium text-3xl"
+				>
 					{{ author.name?.charAt(0) }}
 				</span>
 			</div>
@@ -112,7 +116,10 @@
 		<p v-if="author.title" class="text-sm text-neutral-500 mt-1">
 			{{ author.title }}
 		</p>
-		<p v-if="author.bio" class="text-sm text-neutral-600 dark:text-neutral-400 mt-3">
+		<p
+			v-if="author.bio"
+			class="text-sm text-neutral-600 dark:text-neutral-400 mt-3"
+		>
 			{{ author.bio }}
 		</p>
 
@@ -135,17 +142,16 @@
 
 <script setup>
 const props = defineProps({
-	/** Author object */
+	/** Author object { name, avatar?, title?, bio?, social?: { twitter?, linkedin?, github?, website? } } */
 	author: {
 		type: Object,
-		required: true,
-		// { name, avatar?, title?, bio?, social?: { twitter?, linkedin?, github?, website? } }
+		default: () => ({ name: "Author Name", title: "Contributor" }),
 	},
 	/** Display variant */
 	variant: {
 		type: String,
-		default: 'inline',
-		validator: (v) => ['inline', 'sm', 'full', 'card'].includes(v),
+		default: "inline",
+		validator: (v) => ["inline", "sm", "full", "card"].includes(v),
 	},
 });
 
@@ -155,16 +161,16 @@ const hasSocialLinks = computed(() => {
 
 const getSocialIcon = (platform) => {
 	const icons = {
-		twitter: 'i-lucide-twitter',
-		x: 'i-lucide-twitter',
-		linkedin: 'i-lucide-linkedin',
-		github: 'i-lucide-github',
-		website: 'i-lucide-globe',
-		instagram: 'i-lucide-instagram',
-		facebook: 'i-lucide-facebook',
-		youtube: 'i-lucide-youtube',
-		email: 'i-lucide-mail',
+		twitter: "i-lucide-twitter",
+		x: "i-lucide-twitter",
+		linkedin: "i-lucide-linkedin",
+		github: "i-lucide-github",
+		website: "i-lucide-globe",
+		instagram: "i-lucide-instagram",
+		facebook: "i-lucide-facebook",
+		youtube: "i-lucide-youtube",
+		email: "i-lucide-mail",
 	};
-	return icons[platform.toLowerCase()] || 'i-lucide-link';
+	return icons[platform.toLowerCase()] || "i-lucide-link";
 };
 </script>

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

@@ -2,7 +2,10 @@
 	<article class="group">
 		<NuxtLink :to="`/blog/${post.slug}`" class="block">
 			<!-- Image -->
-			<figure v-if="post.img?.src" class="aspect-[16/9] rounded-xl overflow-hidden mb-4 xHover-zoom shadow-md transition-shadow duration-300 group-hover:shadow-xl">
+			<figure
+				v-if="post.img?.src"
+				class="aspect-[16/9] rounded-xl overflow-hidden mb-4 xHover-zoom shadow-md transition-shadow duration-300 group-hover:shadow-xl"
+			>
 				<img
 					:src="post.img.src"
 					:alt="post.img.alt || post.title"
@@ -17,18 +20,19 @@
 					:label="post.category"
 					variant="subtle"
 				/>
-				<time
-					:datetime="post.date"
-					class="text-sm text-neutral-500"
-				>
+				<time :datetime="post.date" class="text-sm text-neutral-500">
 					{{ formattedDate }}
 				</time>
 				<span class="text-sm text-neutral-400">·</span>
-				<span class="text-sm text-neutral-500">{{ post.readingTime }} min read</span>
+				<span class="text-sm text-neutral-500"
+					>{{ post.readingTime }} min read</span
+				>
 			</div>
 
 			<!-- Title -->
-			<h3 class="xText-title text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors">
+			<h3
+				class="xText-title text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors"
+			>
 				{{ post.title }}
 			</h3>
 
@@ -52,7 +56,9 @@
 					v-else
 					class="w-8 h-8 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 text-sm">
+					<span
+						class="text-primary-600 dark:text-primary-400 font-medium text-sm"
+					>
 						{{ post.author.name.charAt(0) }}
 					</span>
 				</div>
@@ -78,10 +84,17 @@
 
 <script setup>
 const props = defineProps({
-	/** Blog post object with img: { src, alt? } */
+	/** Blog post object { title, slug, img?, excerpt?, date?, category?, author?, tags? } */
 	post: {
 		type: Object,
-		required: true,
+		default: () => ({
+			title: "Blog Post Title",
+			slug: "#",
+			excerpt:
+				"A short description of this blog post that gives readers a preview of the content.",
+			date: new Date().toISOString(),
+			category: "General",
+		}),
 	},
 	/** Has category badge */
 	hasCategory: {
@@ -106,12 +119,12 @@ const props = defineProps({
 });
 
 const formattedDate = computed(() => {
-	if (!props.post.date) return '';
+	if (!props.post.date) return "";
 	const date = new Date(props.post.date);
-	return date.toLocaleDateString('en-US', {
-		year: 'numeric',
-		month: 'short',
-		day: 'numeric',
+	return date.toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
 	});
 });
 </script>