@xenterprises/nuxt-x-marketing 1.0.1 → 1.0.2

package/app/components/X/Mark/SocialProof/Toast.vue

@@ -1,151 +1,159 @@
 <template>
-  <Transition
-    enter-active-class="transition-all duration-500 ease-out"
-    :enter-from-class="enterFromClass"
-    leave-active-class="transition-all duration-300 ease-in"
-    :leave-to-class="leaveToClass"
-  >
-    <aside
-      v-if="currentNotification"
-      class="fixed z-40"
-      :class="placementClasses"
-    >
-      <div
-        class="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 flex items-center gap-3"
-      >
-        <!-- Avatar -->
-        <img
-          v-if="currentNotification.avatar"
-          :src="currentNotification.avatar"
-          :alt="currentNotification.name"
-          class="w-10 h-10 rounded-full object-cover"
-        />
-        <div
-          v-else
-          class="w-10 h-10 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">
-            {{ currentNotification.name.charAt(0) }}
-          </span>
-        </div>
-
-        <!-- Content -->
-        <div>
-          <p class="text-sm text-gray-900 dark:text-white">
-            <span class="font-medium">{{ currentNotification.name }}</span>
-            {{ currentNotification.action }}
-          </p>
-          <p class="text-xs text-gray-500 mt-0.5">
-            {{ currentNotification.time }}
-          </p>
-        </div>
-
-        <!-- Status icon -->
-        <UIcon
-          v-if="showIcon && iconName"
-          :name="iconName"
-          :class="iconClasses"
-        />
-      </div>
-    </aside>
-  </Transition>
+	<Transition
+		enter-active-class="transition-all duration-500 ease-out"
+		:enter-from-class="enterFromClass"
+		leave-active-class="transition-all duration-300 ease-in"
+		:leave-to-class="leaveToClass"
+	>
+		<aside
+			v-if="currentNotification"
+			class="fixed z-40"
+			:class="placementClasses"
+		>
+			<div
+				class="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 flex items-center gap-3"
+			>
+				<!-- Avatar -->
+				<img
+					v-if="currentNotification.avatar"
+					:src="currentNotification.avatar"
+					:alt="currentNotification.name"
+					class="w-10 h-10 rounded-full object-cover"
+				/>
+				<div
+					v-else
+					class="w-10 h-10 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">
+						{{ currentNotification.name.charAt(0) }}
+					</span>
+				</div>
+
+				<!-- Content -->
+				<div>
+					<p class="text-sm text-gray-900 dark:text-white">
+						<span class="font-medium">{{ currentNotification.name }}</span>
+						{{ currentNotification.action }}
+					</p>
+					<p class="text-xs text-gray-500 mt-0.5">
+						{{ currentNotification.time }}
+					</p>
+				</div>
+
+				<!-- Status icon -->
+				<UIcon
+					v-if="showIcon && iconName"
+					:name="iconName"
+					:class="iconClasses"
+				/>
+			</div>
+		</aside>
+	</Transition>
 </template>
 
 <script setup>
 const props = defineProps({
-  /** List of notifications to cycle through */
-  notifications: {
-    type: Array,
-    required: true,
-    validator: (arr) => arr.every((n) => n.name && n.action && n.time),
-  },
-  /** Time between notifications (ms) */
-  interval: {
-    type: Number,
-    default: 4000,
-  },
-  /** Delay before first notification (ms) */
-  initialDelay: {
-    type: Number,
-    default: 5000,
-  },
-  /** How long each notification shows (ms) */
-  displayDuration: {
-    type: Number,
-    default: 3000,
-  },
-  /** Toast placement */
-  placement: {
-    type: String,
-    default: "topRight",
-    validator: (v) =>
-      ["topLeft", "topRight", "bottomLeft", "bottomRight"].includes(v),
-  },
-  /** Toast type - determines icon and color */
-  type: {
-    type: String,
-    default: "success",
-    validator: (v) => ["success", "error", "warning", "info"].includes(v),
-  },
-  /** Whether to show the status icon */
-  showIcon: {
-    type: Boolean,
-    default: true,
-  },
+	/** List of notifications to cycle through [{ name, action, time, avatar? }] */
+	notifications: {
+		type: Array,
+		default: () => [
+			{ name: "Alex M.", action: "just signed up", time: "2 minutes ago" },
+			{ name: "Sarah K.", action: "upgraded to Pro", time: "5 minutes ago" },
+			{
+				name: "James T.",
+				action: "started a free trial",
+				time: "8 minutes ago",
+			},
+		],
+		validator: (arr) => arr.every((n) => n.name && n.action && n.time),
+	},
+	/** Time between notifications (ms) */
+	interval: {
+		type: Number,
+		default: 4000,
+	},
+	/** Delay before first notification (ms) */
+	initialDelay: {
+		type: Number,
+		default: 5000,
+	},
+	/** How long each notification shows (ms) */
+	displayDuration: {
+		type: Number,
+		default: 3000,
+	},
+	/** Toast placement */
+	placement: {
+		type: String,
+		default: "topRight",
+		validator: (v) =>
+			["topLeft", "topRight", "bottomLeft", "bottomRight"].includes(v),
+	},
+	/** Toast type - determines icon and color */
+	type: {
+		type: String,
+		default: "success",
+		validator: (v) => ["success", "error", "warning", "info"].includes(v),
+	},
+	/** Whether to show the status icon */
+	showIcon: {
+		type: Boolean,
+		default: true,
+	},
 });
 
 const placementClasses = computed(() => {
-  const placements = {
-    topLeft: "top-6 left-6",
-    topRight: "top-6 right-6",
-    bottomLeft: "bottom-6 left-6",
-    bottomRight: "bottom-6 right-6",
-  };
-  return placements[props.placement];
+	const placements = {
+		topLeft: "top-6 left-6",
+		topRight: "top-6 right-6",
+		bottomLeft: "bottom-6 left-6",
+		bottomRight: "bottom-6 right-6",
+	};
+	return placements[props.placement];
 });
 
 const iconConfig = {
-  success: {
-    name: "i-lucide-badge-check",
-    color: "text-green-500",
-  },
-  error: {
-    name: "i-lucide-x-circle",
-    color: "text-red-500",
-  },
-  warning: {
-    name: "i-lucide-alert-triangle",
-    color: "text-yellow-500",
-  },
-  info: {
-    name: "i-lucide-info",
-    color: "text-blue-500",
-  },
+	success: {
+		name: "i-lucide-badge-check",
+		color: "text-green-500",
+	},
+	error: {
+		name: "i-lucide-x-circle",
+		color: "text-red-500",
+	},
+	warning: {
+		name: "i-lucide-alert-triangle",
+		color: "text-yellow-500",
+	},
+	info: {
+		name: "i-lucide-info",
+		color: "text-blue-500",
+	},
 };
 
 const iconName = computed(() => {
-  if (!props.showIcon) return null;
-  return iconConfig[props.type]?.name || null;
+	if (!props.showIcon) return null;
+	return iconConfig[props.type]?.name || null;
 });
 
 const iconClasses = computed(() => {
-  const baseClasses = "w-5 h-5 flex-shrink-0";
-  const colorClass = iconConfig[props.type]?.color || "text-gray-500";
-  return `${baseClasses} ${colorClass}`;
+	const baseClasses = "w-5 h-5 flex-shrink-0";
+	const colorClass = iconConfig[props.type]?.color || "text-gray-500";
+	return `${baseClasses} ${colorClass}`;
 });
 
 const enterFromClass = computed(() => {
-  if (props.placement.includes("Left")) {
-    return "-translate-x-full opacity-0";
-  }
-  return "translate-x-full opacity-0";
+	if (props.placement.includes("Left")) {
+		return "-translate-x-full opacity-0";
+	}
+	return "translate-x-full opacity-0";
 });
 
 const leaveToClass = computed(() => {
-  if (props.placement.includes("Left")) {
-    return "-translate-x-full opacity-0";
-  }
-  return "translate-x-full opacity-0";
+	if (props.placement.includes("Left")) {
+		return "-translate-x-full opacity-0";
+	}
+	return "translate-x-full opacity-0";
 });
 
 const currentNotification = ref(null);
@@ -155,27 +163,27 @@ let hideTimeout = null;
 let cycleTimeout = null;
 
 const showNext = () => {
-  if (props.notifications.length === 0) return;
+	if (props.notifications.length === 0) return;
 
-  currentNotification.value = props.notifications[currentIndex.value];
-  currentIndex.value = (currentIndex.value + 1) % props.notifications.length;
+	currentNotification.value = props.notifications[currentIndex.value];
+	currentIndex.value = (currentIndex.value + 1) % props.notifications.length;
 
-  hideTimeout = setTimeout(() => {
-    currentNotification.value = null;
+	hideTimeout = setTimeout(() => {
+		currentNotification.value = null;
 
-    cycleTimeout = setTimeout(showNext, props.interval - props.displayDuration);
-  }, props.displayDuration);
+		cycleTimeout = setTimeout(showNext, props.interval - props.displayDuration);
+	}, props.displayDuration);
 };
 
 onMounted(() => {
-  if (process.client && props.notifications.length > 0) {
-    showTimeout = setTimeout(showNext, props.initialDelay);
-  }
+	if (import.meta.client && props.notifications.length > 0) {
+		showTimeout = setTimeout(showNext, props.initialDelay);
+	}
 });
 
 onUnmounted(() => {
-  if (showTimeout) clearTimeout(showTimeout);
-  if (hideTimeout) clearTimeout(hideTimeout);
-  if (cycleTimeout) clearTimeout(cycleTimeout);
+	if (showTimeout) clearTimeout(showTimeout);
+	if (hideTimeout) clearTimeout(hideTimeout);
+	if (cycleTimeout) clearTimeout(cycleTimeout);
 });
 </script>

package/app/components/X/X/Footer/index.vue

@@ -0,0 +1,101 @@
+<template>
+	<div>
+		<XMarkSectionNewsletter
+			v-if="
+				appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
+			"
+			title="Subscribe to our newsletter"
+			description="Get the latest news and updates."
+			@submit="(email) => emit('newsletter-submit', email)"
+		/>
+		<section
+			class="relative pt-24 overflow-hidden"
+			:class="footer?.bg?.color ? footer?.bg?.color : 'bg-gray-900'"
+		>
+			<img
+				v-if="footer?.bg?.img?.src"
+				class="absolute left-1/2 bottom-0 h-full transform -translate-x-1/2"
+				:src="footer?.bg?.img?.src"
+				:alt="footer?.bg?.img?.alt"
+			/>
+			<div
+				class="relative z-10 container mx-auto max-w-screen-2xl px-4 md:px-8"
+			>
+				<div class="pb-24">
+					<div
+						class="flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-12"
+					>
+						<div class="shrink-0 lg:max-w-xl">
+							<a class="mb-8 inline-block" href="/">
+								<img
+									:src="footer?.logo?.src"
+									:alt="footer?.logo?.alt"
+									class="h-6"
+								/>
+							</a>
+							<p
+								class="mb-8 text-gray-400 font-medium leading-relaxed max-w-lg mx-auto lg:mx-0"
+							>
+								{{ footer?.body }}
+							</p>
+							<div class="flex flex-row flex-wrap gap-2 justify-start">
+								<div
+									v-for="(social, index) in footer?.socials"
+									:key="index"
+									class="w-auto"
+								>
+									<UButton
+										:to="social.url"
+										:icon="social?.icon"
+										:aria-label="social?.name"
+										color="neutral"
+										square
+										target="_blank"
+										variant="ghost"
+									/>
+								</div>
+								<UColorModeButton />
+							</div>
+						</div>
+						<div
+							class="flex flex-col sm:flex-row gap-8 lg:gap-12 lg:justify-end"
+						>
+							<div
+								v-for="(column, index) in footer?.columns"
+								:key="index"
+								class="text-left sm:text-right"
+							>
+								<h3
+									class="mb-6 text-sm text-gray-500 uppercase font-semibold leading-normal tracking-wide"
+								>
+									{{ column?.headerLabel }}
+								</h3>
+								<ul class="space-y-4">
+									<li v-for="link in column?.links" :key="link?.label">
+										<NuxtLink
+											:to="link?.to"
+											:target="link?.target ? link?.target : '_self'"
+											class="text-white hover:text-gray-300 font-medium leading-relaxed transition-colors"
+											>{{ link?.label }}</NuxtLink
+										>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup>
+/**
+ * XXFooter — X Enterprises branded footer
+ * Reads all configuration from appConfig.xMarketing.footer
+ * For a generic white-label footer, use XMarkLayoutFooter instead.
+ */
+const emit = defineEmits(["newsletter-submit"]);
+const appConfig = useAppConfig();
+const footer = appConfig?.xMarketing?.footer;
+</script>

package/app/components/X/X/Header/Nav/index.vue

@@ -0,0 +1,62 @@
+<template>
+	<UHeader>
+		<template #title>
+			<NuxtLink v-if="header?.logo?.src" to="/">
+				<UColorModeImage
+					:light="header?.logo?.src"
+					:dark="
+						header?.logo?.srcDark ? header?.logo?.srcDark : header?.logo?.src
+					"
+					:alt="header?.logo?.alt"
+					class="h-8"
+				/>
+			</NuxtLink>
+			<span v-else>{{ header?.logo?.alt }}</span>
+		</template>
+
+		<UNavigationMenu :items="links" />
+
+		<template #right>
+			<span v-for="(button, index) in header?.nav?.buttons" :key="index">
+				<UButton
+					class="hidden md:flex md:items-center md:justify-center py-2"
+					:to="button?.to"
+					:icon="button?.icon ? button?.icon : null"
+					:target="button?.target ? button?.target : '_self'"
+					:color="button?.color ? button?.color : 'primary'"
+					:variant="button?.variant ? button?.variant : 'solid'"
+					>{{ button?.label }}</UButton
+				>
+			</span>
+		</template>
+
+		<template #body>
+			<UNavigationMenu orientation="vertical" :items="links" class="-mx-2.5" />
+			<div class="mt-5 space-y-2">
+				<UButton
+					v-for="(button, index) in header?.nav?.buttons"
+					:key="index"
+					class="w-full justify-center"
+					:to="button?.to"
+					:icon="button?.icon ? button?.icon : null"
+					:target="button?.target ? button?.target : '_self'"
+					:color="button?.color ? button?.color : 'primary'"
+					:variant="button?.variant ? button?.variant : 'solid'"
+				>
+					{{ button?.label }}
+				</UButton>
+			</div>
+		</template>
+	</UHeader>
+</template>
+
+<script setup>
+/**
+ * XXHeaderNav — X Enterprises branded navigation header
+ * Reads all configuration from appConfig.xMarketing.header
+ * For a generic white-label navbar, use XMarkNavbar instead.
+ */
+const appConfig = useAppConfig();
+const header = appConfig?.xMarketing?.header;
+const links = header?.nav?.links || [];
+</script>

package/app/components/X/X/Header/index.vue

@@ -0,0 +1,72 @@
+<template>
+	<UHeader
+		:ui="{
+			root: headerClasses,
+		}"
+	>
+		<template #left>
+			<UNavigationMenu :items="navLinks" />
+		</template>
+
+		<template #center>
+			<NuxtLink to="/" class="flex items-center">
+				<slot name="logo">
+					<span class="text-xl font-bold">LOGO</span>
+				</slot>
+			</NuxtLink>
+		</template>
+
+		<template #right>
+			<UButton
+				v-if="secondaryCta"
+				:to="secondaryCta.to"
+				variant="ghost"
+				color="neutral"
+				:label="secondaryCta.label"
+			/>
+			<UButton
+				v-if="primaryCta"
+				:to="primaryCta.to"
+				variant="solid"
+				color="primary"
+				:label="primaryCta.label"
+			/>
+		</template>
+	</UHeader>
+</template>
+
+<script setup>
+/**
+ * XXHeader — X Enterprises branded app header (props-based variant)
+ * For the appConfig-driven version, use XXHeaderNav instead.
+ * For a generic white-label navbar, use XMarkNavbar instead.
+ */
+const props = defineProps({
+	/** Navigation links array [{ label, to, children? }] */
+	navLinks: {
+		type: Array,
+		default: () => [],
+	},
+	/** Primary CTA button { label, to } */
+	primaryCta: {
+		type: Object,
+		default: null,
+	},
+	/** Secondary CTA button { label, to } */
+	secondaryCta: {
+		type: Object,
+		default: null,
+	},
+	/** Transparent background (for use over hero sections) */
+	transparent: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const headerClasses = computed(() => {
+	return props.transparent
+		? "bg-transparent text-white"
+		: "bg-white dark:bg-deep-950";
+});
+</script>

package/app/components/X/X/Legal/index.vue

@@ -0,0 +1,94 @@
+<template>
+	<footer
+		class="bg-gray-900 text-gray-400 text-xs relative overflow-visible pt-2"
+	>
+		<a v-if="resolvedLogo.src" :href="resolvedLogo.href" target="_blank">
+			<img
+				:src="resolvedLogo.src"
+				:alt="resolvedLogo.alt"
+				class="h-6 w-6 mx-auto -mt-4 relative z-10"
+			/>
+		</a>
+		<main
+			class="flex flex-col md:flex-row justify-between items-center px-6 pt-3 pb-5 max-w-screen-2xl mx-auto gap-4"
+		>
+			<div class="text-center md:text-left">
+				{{ resolvedCopyright }}
+			</div>
+
+			<nav
+				v-if="resolvedLinks.length"
+				class="text-center md:text-right flex flex-wrap justify-center gap-4"
+			>
+				<a
+					v-for="link in resolvedLinks"
+					:key="link.label"
+					:href="link.href"
+					class="hover:underline"
+					target="_blank"
+				>
+					{{ link.label }}
+				</a>
+			</nav>
+		</main>
+	</footer>
+</template>
+
+<script setup>
+/**
+ * XXLegal — X Enterprises branded legal footer bar
+ * Defaults to X Enterprises copyright, logo, and legal links.
+ * Pass props to override any defaults for white-label use.
+ */
+const props = defineProps({
+	/** Copyright text (defaults to X Enterprises copyright) */
+	copyright: {
+		type: String,
+		default: "",
+	},
+	/** Legal links array [{ label, href }] (defaults to X Enterprises legal pages) */
+	links: {
+		type: Array,
+		default: null,
+	},
+	/** Logo object { src, alt, href } (defaults to X Enterprises logo). Pass false to hide. */
+	logo: {
+		type: [Object, Boolean],
+		default: null,
+	},
+});
+
+// Default X Enterprises values
+const defaultLogo = {
+	src: "https://cdn.x.enterprises/logo-x.png",
+	alt: "X Enterprises",
+	href: "https://x.enterprises",
+};
+
+const defaultLinks = [
+	{ label: "Terms of Service", href: "https://x.enterprises/legal/terms" },
+	{
+		label: "Privacy Policy",
+		href: "https://x.enterprises/legal/privacy-policy",
+	},
+	{ label: "Cookie Policy", href: "https://x.enterprises/legal/cookie-policy" },
+];
+
+const defaultCopyright = `Copyright ©2016-${new Date().getFullYear()} X Enterprises, LLC. All Rights Reserved.`;
+
+// Resolved values with defaults
+const resolvedLogo = computed(() => {
+	if (props.logo === null) return defaultLogo;
+	if (props.logo === false) return { src: "", alt: "", href: "" };
+	return { ...defaultLogo, ...props.logo };
+});
+
+const resolvedLinks = computed(() => {
+	if (props.links === null) return defaultLinks;
+	return props.links;
+});
+
+const resolvedCopyright = computed(() => {
+	return props.copyright || defaultCopyright;
+});
+</script>