@xenterprises/nuxt-x-marketing 1.0.1 → 1.0.3

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

@@ -0,0 +1,191 @@
+<template>
+	<div class="faq-container">
+		<!-- Accordion Layout -->
+		<div
+			v-if="layout === 'accordion'"
+			class="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden"
+		>
+			<div
+				v-for="(item, index) in items"
+				:key="index"
+				class="faq-item border-b border-neutral-200 dark:border-neutral-800 last:border-b-0"
+			>
+				<!-- Question -->
+				<button
+					:aria-expanded="openIndexes.includes(index)"
+					class="faq-question w-full flex items-center justify-between p-5 text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors duration-200"
+					@click="toggleItem(index)"
+				>
+					<span class="font-medium text-neutral-900 dark:text-white pr-4">
+						{{ item.question }}
+					</span>
+					<UIcon
+						name="i-lucide-chevron-down"
+						class="w-5 h-5 text-neutral-500 dark:text-neutral-400 flex-shrink-0 transition-transform duration-300"
+						:class="{ 'rotate-180': openIndexes.includes(index) }"
+					/>
+				</button>
+
+				<!-- Answer -->
+				<div
+					ref="answerRefs"
+					class="faq-answer overflow-hidden transition-all duration-300 ease-in-out"
+					:style="{
+						maxHeight: openIndexes.includes(index)
+							? answerHeights[index] + 'px'
+							: '0',
+						opacity: openIndexes.includes(index) ? 1 : 0,
+					}"
+				>
+					<div
+						class="p-5 pt-0 text-neutral-600 dark:text-neutral-400 prose prose-neutral dark:prose-invert max-w-none"
+					>
+						{{ item.answer }}
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Two-Column Layout -->
+		<div
+			v-else-if="layout === 'two-column'"
+			class="grid md:grid-cols-2 gap-x-12 gap-y-8"
+		>
+			<!-- Questions Column -->
+			<div class="questions-column space-y-4">
+				<div
+					v-for="(item, index) in items"
+					:key="index"
+					class="font-medium text-neutral-900 dark:text-white"
+				>
+					{{ item.question }}
+				</div>
+			</div>
+
+			<!-- Answers Column -->
+			<div class="answers-column space-y-4">
+				<div
+					v-for="(item, index) in items"
+					:key="index"
+					class="text-neutral-600 dark:text-neutral-400"
+				>
+					{{ item.answer }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Array of FAQ items [{ question, answer, open? }] */
+	items: {
+		type: Array,
+		default: () => [
+			{
+				question: "What is this?",
+				answer: "This is a frequently asked question.",
+			},
+		],
+	},
+	/** Layout type: 'accordion' or 'two-column' */
+	layout: {
+		type: String,
+		default: "accordion",
+		validator: (value) => ["accordion", "two-column"].includes(value),
+	},
+	/** Whether the first item should start open */
+	openFirst: {
+		type: Boolean,
+		default: false,
+	},
+	/** Whether multiple items can be open at once */
+	allowMultiple: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+// Track which items are open
+const openIndexes = ref([]);
+
+// Track answer heights for smooth transitions
+const answerHeights = ref({});
+
+// Initialize open state based on props
+onMounted(() => {
+	// Set initial open indexes
+	const initialOpen = [];
+	props.items.forEach((item, index) => {
+		if (item.open || (props.openFirst && index === 0)) {
+			initialOpen.push(index);
+		}
+	});
+	openIndexes.value = initialOpen;
+
+	// Calculate initial heights after DOM update
+	nextTick(() => {
+		calculateHeights();
+	});
+});
+
+// Recalculate heights on window resize
+onMounted(() => {
+	if (typeof window !== "undefined") {
+		window.addEventListener("resize", calculateHeights);
+	}
+});
+
+onUnmounted(() => {
+	if (typeof window !== "undefined") {
+		window.removeEventListener("resize", calculateHeights);
+	}
+});
+
+// Watch for items changes to recalculate heights
+watch(
+	() => props.items,
+	() => {
+		nextTick(() => {
+			calculateHeights();
+		});
+	},
+	{ deep: true }
+);
+
+function calculateHeights() {
+	// Need to access DOM elements - we'll estimate based on content
+	// This is a simplified approach - in production, you might measure actual heights
+	props.items.forEach((item, index) => {
+		// Estimate height based on answer length (rough approximation)
+		const answerLength = item.answer?.length || 0;
+		// Average characters per line ~50, line height ~1.6, padding ~20px
+		const lines = Math.ceil(answerLength / 50);
+		const estimatedHeight = lines * 28 + 40; // ~28px per line + padding
+		answerHeights.value[index] = Math.max(estimatedHeight, 100);
+	});
+}
+
+function toggleItem(index) {
+	const isOpen = openIndexes.value.includes(index);
+
+	if (isOpen) {
+		// Close the item
+		openIndexes.value = openIndexes.value.filter((i) => i !== index);
+	} else {
+		// Open the item
+		if (props.allowMultiple) {
+			// Allow multiple - just add to open indexes
+			openIndexes.value = [...openIndexes.value, index];
+		} else {
+			// Only one at a time - close others and open this one
+			openIndexes.value = [index];
+		}
+	}
+
+	// Recalculate heights after toggle
+	nextTick(() => {
+		calculateHeights();
+	});
+}
+</script>

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

@@ -14,10 +14,7 @@
 						v-if="feature.icon"
 						class="w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center mb-4 transition-transform duration-300 group-hover:scale-110"
 					>
-						<UIcon
-							:name="feature.icon"
-							class="w-6 h-6 text-primary-500"
-						/>
+						<UIcon :name="feature.icon" class="w-6 h-6 text-primary-500" />
 					</div>
 
 					<!-- Image -->
@@ -45,12 +42,23 @@
 					<!-- Link -->
 					<NuxtLink
 						v-if="feature.link"
-						:to="typeof feature.link === 'string' ? feature.link : feature.link.to"
-						:target="typeof feature.link === 'object' ? feature.link.target : undefined"
+						:to="
+							typeof feature.link === 'string' ? feature.link : feature.link.to
+						"
+						:target="
+							typeof feature.link === 'object' ? feature.link.target : undefined
+						"
 						class="inline-flex items-center gap-1 mt-4 text-primary-500 hover:text-primary-600 font-medium text-sm transition-colors group/link"
 					>
-						{{ typeof feature.link === 'object' && feature.link.label ? feature.link.label : 'Learn more' }}
-						<UIcon name="i-lucide-arrow-right" class="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1" />
+						{{
+							typeof feature.link === "object" && feature.link.label
+								? feature.link.label
+								: "Learn more"
+						}}
+						<UIcon
+							name="i-lucide-arrow-right"
+							class="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1"
+						/>
 					</NuxtLink>
 				</article>
 			</div>
@@ -70,10 +78,7 @@
 						v-if="feature.icon"
 						class="flex-shrink-0 w-12 h-12 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
 					>
-						<UIcon
-							:name="feature.icon"
-							class="w-6 h-6 text-primary-500"
-						/>
+						<UIcon :name="feature.icon" class="w-6 h-6 text-primary-500" />
 					</div>
 
 					<!-- Content -->
@@ -86,12 +91,27 @@
 						</p>
 						<NuxtLink
 							v-if="feature.link"
-							:to="typeof feature.link === 'string' ? feature.link : feature.link.to"
-							:target="typeof feature.link === 'object' ? feature.link.target : undefined"
+							:to="
+								typeof feature.link === 'string'
+									? feature.link
+									: feature.link.to
+							"
+							:target="
+								typeof feature.link === 'object'
+									? feature.link.target
+									: undefined
+							"
 							class="inline-flex items-center gap-1 mt-4 text-primary-500 hover:text-primary-600 font-medium text-sm transition-colors group/link"
 						>
-							{{ typeof feature.link === 'object' && feature.link.label ? feature.link.label : 'Learn more' }}
-							<UIcon name="i-lucide-arrow-right" class="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1" />
+							{{
+								typeof feature.link === "object" && feature.link.label
+									? feature.link.label
+									: "Learn more"
+							}}
+							<UIcon
+								name="i-lucide-arrow-right"
+								class="w-4 h-4 transition-transform duration-300 group-hover/link:translate-x-1"
+							/>
 						</NuxtLink>
 					</div>
 				</article>
@@ -127,26 +147,42 @@
 							v-if="feature.icon"
 							class="w-14 h-14 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center mb-6 transition-transform duration-300 group-hover:scale-110"
 						>
-							<UIcon
-								:name="feature.icon"
-								class="w-7 h-7 text-primary-500"
-							/>
+							<UIcon :name="feature.icon" class="w-7 h-7 text-primary-500" />
 						</div>
 
-						<h3 class="xText-headline text-neutral-900 dark:text-white xText-balance">
+						<h3
+							class="xText-headline text-neutral-900 dark:text-white xText-balance"
+						>
 							{{ feature.title }}
 						</h3>
-						<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
+						<p
+							class="mt-4 text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed"
+						>
 							{{ feature.description }}
 						</p>
 						<NuxtLink
 							v-if="feature.link"
-							:to="typeof feature.link === 'string' ? feature.link : feature.link.to"
-							:target="typeof feature.link === 'object' ? feature.link.target : undefined"
+							:to="
+								typeof feature.link === 'string'
+									? feature.link
+									: feature.link.to
+							"
+							:target="
+								typeof feature.link === 'object'
+									? feature.link.target
+									: undefined
+							"
 							class="inline-flex items-center gap-2 mt-6 text-primary-500 hover:text-primary-600 font-medium transition-colors group/link"
 						>
-							{{ typeof feature.link === 'object' && feature.link.label ? feature.link.label : 'Learn more' }}
-							<UIcon name="i-lucide-arrow-right" class="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1" />
+							{{
+								typeof feature.link === "object" && feature.link.label
+									? feature.link.label
+									: "Learn more"
+							}}
+							<UIcon
+								name="i-lucide-arrow-right"
+								class="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1"
+							/>
 						</NuxtLink>
 					</div>
 				</article>
@@ -157,19 +193,35 @@
 
 <script setup>
 // Initialize scroll reveal animations automatically
-useScrollReveal()
+useScrollReveal();
 
 const props = defineProps({
-	/** Array of features */
+	/** Array of features [{ icon?, title, description?, img?, link? }] */
 	features: {
 		type: Array,
-		required: true,
+		default: () => [
+			{
+				icon: "i-lucide-zap",
+				title: "Lightning Fast",
+				description: "Built for performance from the ground up.",
+			},
+			{
+				icon: "i-lucide-shield",
+				title: "Secure by Default",
+				description: "Enterprise-grade security out of the box.",
+			},
+			{
+				icon: "i-lucide-layers",
+				title: "Fully Customizable",
+				description: "Adapt every component to match your brand.",
+			},
+		],
 	},
 	/** Display layout */
 	layout: {
 		type: String,
-		default: 'grid',
-		validator: (v) => ['grid', 'list', 'alternating'].includes(v),
+		default: "grid",
+		validator: (v) => ["grid", "list", "alternating"].includes(v),
 	},
 	/** Grid columns (for grid layout) */
 	columns: {
@@ -180,14 +232,14 @@ const props = defineProps({
 });
 
 const containerClasses = computed(() => {
-	return props.layout === 'alternating' ? 'max-w-6xl mx-auto' : '';
+	return props.layout === "alternating" ? "max-w-6xl mx-auto" : "";
 });
 
 const gridClasses = computed(() => {
 	const cols = {
-		2: 'grid md:grid-cols-2 gap-8',
-		3: 'grid md:grid-cols-2 lg:grid-cols-3 gap-8',
-		4: 'grid md:grid-cols-2 lg:grid-cols-4 gap-8',
+		2: "grid md:grid-cols-2 gap-8",
+		3: "grid md:grid-cols-2 lg:grid-cols-3 gap-8",
+		4: "grid md:grid-cols-2 lg:grid-cols-4 gap-8",
 	};
 	return cols[props.columns];
 });

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

@@ -4,7 +4,7 @@
 		:class="[
 			alignmentClasses,
 			verticalAlignClasses,
-			{ 'pt-20': includeNavPadding }
+			{ 'pt-20': includeNavPadding },
 		]"
 	>
 		<!-- Background -->
@@ -44,15 +44,9 @@
 
 		<!-- Content -->
 		<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-			<div
-				class="max-w-3xl"
-				:class="contentAlignmentClasses"
-			>
+			<div class="max-w-3xl" :class="contentAlignmentClasses">
 				<!-- Eyebrow -->
-				<p
-					v-if="eyebrow"
-					class="xText-eyebrow text-white/70 mb-4 xFadeUp"
-				>
+				<p v-if="eyebrow" class="xText-eyebrow text-white/70 mb-4 xFadeUp">
 					{{ eyebrow }}
 				</p>
 
@@ -77,7 +71,10 @@
 				<div
 					v-if="buttons.length || $slots.actions"
 					class="mt-10 flex flex-wrap gap-4 xFadeUp"
-					:class="{ 'justify-center': align === 'center', 'justify-end': align === 'right' }"
+					:class="{
+						'justify-center': align === 'center',
+						'justify-end': align === 'right',
+					}"
 					style="transition-delay: 300ms"
 				>
 					<slot name="actions">
@@ -92,7 +89,7 @@
 							:class="[
 								btn.variant === 'outline' || (index > 0 && !btn.variant)
 									? 'bg-white/10 backdrop-blur-sm border-white/40 text-white hover:bg-white/20 hover:border-white/60'
-									: ''
+									: '',
 							]"
 						>
 							{{ btn.label }}
@@ -107,9 +104,15 @@
 			v-if="hasScrollIndicator"
 			class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
 		>
-			<span class="text-xs text-white/50 uppercase tracking-widest">Scroll</span>
-			<div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2">
-				<div class="w-1.5 h-1.5 bg-white/60 rounded-full animate-[scroll-indicator_2s_ease-in-out_infinite]" />
+			<span class="text-xs text-white/50 uppercase tracking-widest"
+				>Scroll</span
+			>
+			<div
+				class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2"
+			>
+				<div
+					class="w-1.5 h-1.5 bg-white/60 rounded-full animate-[scroll-indicator_2s_ease-in-out_infinite]"
+				/>
 			</div>
 		</div>
 	</section>
@@ -121,52 +124,52 @@ const props = defineProps({
 	img: {
 		type: Object,
 		default: null,
-		validator: (v) => !v || typeof v.src === 'string',
+		validator: (v) => !v || typeof v.src === "string",
 	},
 	/** Background video object { src: string, poster?: string } */
 	video: {
 		type: Object,
 		default: null,
-		validator: (v) => !v || typeof v.src === 'string',
+		validator: (v) => !v || typeof v.src === "string",
 	},
 	/** Overlay style */
 	overlay: {
 		type: String,
-		default: 'gradient',
-		validator: (v) => ['light', 'heavy', 'gradient', 'none'].includes(v),
+		default: "gradient",
+		validator: (v) => ["light", "heavy", "gradient", "none"].includes(v),
 	},
 	/** Small text above title */
 	eyebrow: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Main headline */
 	title: {
 		type: String,
-		required: true,
+		default: "Your Headline Here",
 	},
 	/** Supporting text */
 	subtitle: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Action buttons array [{ label, color?, variant?, to?, icon? }] */
 	buttons: {
 		type: Array,
 		default: () => [],
-		validator: (v) => v.every(btn => btn.label),
+		validator: (v) => v.every((btn) => btn.label),
 	},
 	/** Content horizontal alignment */
 	align: {
 		type: String,
-		default: 'left',
-		validator: (v) => ['left', 'center', 'right'].includes(v),
+		default: "left",
+		validator: (v) => ["left", "center", "right"].includes(v),
 	},
 	/** Content vertical position */
 	verticalAlign: {
 		type: String,
-		default: 'center',
-		validator: (v) => ['center', 'bottom'].includes(v),
+		default: "center",
+		validator: (v) => ["center", "bottom"].includes(v),
 	},
 	/** Has scroll indicator arrow */
 	hasScrollIndicator: {
@@ -182,35 +185,35 @@ const props = defineProps({
 
 const overlayClass = computed(() => {
 	const overlays = {
-		light: 'bg-black/30',
-		heavy: 'bg-black/60',
-		gradient: 'bg-gradient-to-t from-black/80 via-black/40 to-transparent',
+		light: "bg-black/30",
+		heavy: "bg-black/60",
+		gradient: "bg-gradient-to-t from-black/80 via-black/40 to-transparent",
 	};
-	return overlays[props.overlay] || '';
+	return overlays[props.overlay] || "";
 });
 
 const alignmentClasses = computed(() => {
 	const aligns = {
-		left: 'text-left',
-		center: 'text-center',
-		right: 'text-right',
+		left: "text-left",
+		center: "text-center",
+		right: "text-right",
 	};
 	return aligns[props.align];
 });
 
 const verticalAlignClasses = computed(() => {
 	const aligns = {
-		center: 'items-center',
-		bottom: 'items-end pb-24',
+		center: "items-center",
+		bottom: "items-end pb-24",
 	};
 	return aligns[props.verticalAlign];
 });
 
 const contentAlignmentClasses = computed(() => {
 	const aligns = {
-		left: '',
-		center: 'mx-auto',
-		right: 'ml-auto',
+		left: "",
+		center: "mx-auto",
+		right: "ml-auto",
 	};
 	return aligns[props.align];
 });

package/app/components/X/Mark/Layout/AnnouncementBar.vue

@@ -1,20 +1,10 @@
 <template>
 	<Transition name="slide-down">
-		<div
-			v-if="visible"
-			:class="[
-				'relative z-50',
-				bgClasses
-			]"
-		>
+		<div v-if="visible" :class="['relative z-50', bgClasses]">
 			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
 				<div class="flex items-center justify-center gap-x-4 text-sm">
 					<!-- Icon -->
-					<UIcon
-						v-if="icon"
-						:name="icon"
-						class="w-5 h-5 flex-shrink-0"
-					/>
+					<UIcon v-if="icon" :name="icon" class="w-5 h-5 flex-shrink-0" />
 
 					<!-- Message -->
 					<p class="text-center">
@@ -52,33 +42,34 @@ const props = defineProps({
 	/** Main message text */
 	message: {
 		type: String,
-		required: true,
+		default: "🎉 New feature available — check it out!",
 	},
 	/** Optional badge/label before message */
 	badge: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Icon name to display */
 	icon: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** CTA link URL */
 	link: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** CTA link text */
 	linkText: {
 		type: String,
-		default: 'Learn more',
+		default: "Learn more",
 	},
 	/** Color variant */
 	variant: {
 		type: String,
-		default: 'primary',
-		validator: (v) => ['primary', 'neutral', 'success', 'warning', 'error'].includes(v),
+		default: "primary",
+		validator: (v) =>
+			["primary", "neutral", "success", "warning", "error"].includes(v),
 	},
 	/** Allow dismissing the bar */
 	dismissible: {
@@ -88,11 +79,11 @@ const props = defineProps({
 	/** Storage key for dismissed state */
 	storageKey: {
 		type: String,
-		default: 'announcement-dismissed',
+		default: "announcement-dismissed",
 	},
 });
 
-const emit = defineEmits(['dismiss']);
+const emit = defineEmits(["dismiss"]);
 
 const visible = ref(true);
 
@@ -107,19 +98,20 @@ onMounted(() => {
 
 const dismiss = () => {
 	if (props.storageKey) {
-		localStorage.setItem(props.storageKey, 'true');
+		localStorage.setItem(props.storageKey, "true");
 	}
 	visible.value = false;
-	emit('dismiss');
+	emit("dismiss");
 };
 
 const bgClasses = computed(() => {
 	const variants = {
-		primary: 'bg-primary-500 text-white',
-		neutral: 'bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900',
-		success: 'bg-green-500 text-white',
-		warning: 'bg-yellow-500 text-neutral-900',
-		error: 'bg-red-500 text-white',
+		primary: "bg-primary-500 text-white",
+		neutral:
+			"bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900",
+		success: "bg-green-500 text-white",
+		warning: "bg-yellow-500 text-neutral-900",
+		error: "bg-red-500 text-white",
 	};
 	return variants[props.variant];
 });