@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

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

@@ -0,0 +1,267 @@
+<template>
+	<header
+		class="fixed top-0 inset-x-0 z-50 transition-all duration-300"
+		:class="[
+			isScrolled
+				? 'bg-white/90 dark:bg-neutral-950/90 backdrop-blur-lg shadow-sm'
+				: transparent
+					? 'bg-gradient-to-b from-black/90  to-transparent'
+					: 'bg-white dark:bg-neutral-950',
+			isScrolled ? 'py-3' : 'py-5'
+		]"
+	>
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			<nav class="flex items-center justify-between">
+				<!-- Logo -->
+				<slot name="logo">
+					<NuxtLink to="/" class="flex-shrink-0">
+						<img
+							:src="isScrolled || !transparent ? resolvedLogoDark : resolvedLogoLight"
+							:alt="resolvedLogoAlt"
+							class="h-8 w-auto"
+						/>
+					</NuxtLink>
+				</slot>
+
+				<!-- Desktop Navigation -->
+				<div class="hidden lg:flex items-center gap-8">
+					<slot name="links">
+						<NuxtLink
+							v-for="link in resolvedLinks"
+							:key="link.to"
+							:to="link.to"
+							class="relative text-sm font-medium transition-colors group"
+							:class="linkColor"
+						>
+							{{ link.label }}
+
+						</NuxtLink>
+					</slot>
+				</div>
+
+				<!-- Actions -->
+				<div class="hidden lg:flex items-center gap-4">
+					<slot name="actions">
+						<template v-if="resolvedButtons.length > 0">
+							<UButton
+								v-for="(button, index) in resolvedButtons"
+								:key="index"
+								:to="button.to"
+								:icon="button.icon"
+								:target="button.target || '_self'"
+								:color="getButtonColor(button, index)"
+								:variant="getButtonVariant(button, index)"
+								:class="getButtonClass(button, index)"
+							>
+								{{ button.label }}
+							</UButton>
+						</template>
+						<template v-else>
+							<UButton
+								variant="outline"
+								color="neutral"
+								:class="!isScrolled && transparent ? '!bg-transparent !text-white !border-white/60 hover:!bg-white/10' : ''"
+							>
+								Sign In
+							</UButton>
+							<UButton color="primary">
+								Get Started
+							</UButton>
+						</template>
+					</slot>
+				</div>
+
+				<!-- Mobile Menu Button -->
+				<button
+					class="lg:hidden p-2"
+					@click="mobileOpen = true"
+				>
+					<UIcon name="i-lucide-menu" class="w-6 h-6" :class="linkColor" />
+				</button>
+			</nav>
+		</div>
+
+		<!-- Mobile Overlay -->
+		<Teleport to="body">
+			<Transition
+				enter-active-class="transition-opacity duration-300"
+				enter-from-class="opacity-0"
+				leave-active-class="transition-opacity duration-300"
+				leave-to-class="opacity-0"
+			>
+				<div
+					v-if="mobileOpen"
+					class="fixed inset-0 z-50 bg-white dark:bg-neutral-950 lg:hidden"
+				>
+					<div class="flex flex-col h-full p-6">
+						<div class="flex justify-between items-center mb-8">
+							<img :src="resolvedLogoDark" :alt="resolvedLogoAlt" class="h-8" />
+							<button @click="mobileOpen = false">
+								<UIcon name="i-lucide-x" class="w-6 h-6" />
+							</button>
+						</div>
+
+						<nav class="flex-1 flex flex-col gap-2">
+							<NuxtLink
+								v-for="(link, index) in resolvedLinks"
+								:key="link.to"
+								:to="link.to"
+								class="text-2xl font-medium py-3 border-b border-neutral-100 dark:border-neutral-800 transition-colors hover:text-primary-500"
+								:style="{ transitionDelay: `${index * 50}ms` }"
+								@click="mobileOpen = false"
+							>
+								{{ link.label }}
+							</NuxtLink>
+						</nav>
+
+						<div class="flex flex-col gap-3">
+							<slot name="mobile-actions">
+								<template v-if="resolvedButtons.length > 0">
+									<UButton
+										v-for="(button, index) in resolvedButtons"
+										:key="index"
+										block
+										:to="button.to"
+										:icon="button.icon"
+										:target="button.target || '_self'"
+										:color="button.color || 'primary'"
+										:variant="button.variant || (index === 0 ? 'outline' : 'solid')"
+										@click="mobileOpen = false"
+									>
+										{{ button.label }}
+									</UButton>
+								</template>
+								<template v-else>
+									<UButton block variant="outline">Sign In</UButton>
+									<UButton block color="primary">Get Started</UButton>
+								</template>
+							</slot>
+						</div>
+					</div>
+				</div>
+			</Transition>
+		</Teleport>
+	</header>
+</template>
+
+<script setup>
+const appConfig = useAppConfig();
+const header = appConfig?.xMarketing?.header;
+
+const props = defineProps({
+	/** Start transparent over hero */
+	transparent: {
+		type: Boolean,
+		default: true,
+	},
+	/** Navigation links - falls back to appConfig.xMarketing.header.nav.links */
+	links: {
+		type: Array,
+		default: null,
+	},
+	/** Logo object { src: string, srcDark?: string, alt?: string } - falls back to appConfig */
+	logo: {
+		type: Object,
+		default: null,
+		validator: (v) => !v || typeof v.src === 'string',
+	},
+	/** Pixels before transition */
+	scrollThreshold: {
+		type: Number,
+		default: 100,
+	},
+	/** Action buttons - falls back to appConfig.xMarketing.header.nav.buttons */
+	buttons: {
+		type: Array,
+		default: null,
+	},
+});
+
+// Computed properties with appConfig fallbacks
+const resolvedLinks = computed(() => {
+	if (props.links && props.links.length > 0) return props.links;
+	return header?.nav?.links || [];
+});
+
+const resolvedLogoLight = computed(() => {
+	return props.logo?.src || header?.logo?.src || '';
+});
+
+const resolvedLogoDark = computed(() => {
+	return props.logo?.srcDark || props.logo?.src || header?.logo?.srcDark || header?.logo?.src || '';
+});
+
+const resolvedLogoAlt = computed(() => {
+	return props.logo?.alt || header?.logo?.alt || 'Logo';
+});
+
+const resolvedButtons = computed(() => {
+	if (props.buttons && props.buttons.length > 0) return props.buttons;
+	return header?.nav?.buttons || [];
+});
+
+const mobileOpen = ref(false);
+const isScrolled = ref(false);
+
+const linkColor = computed(() => {
+	if (isScrolled.value || !props.transparent) {
+		return 'text-neutral-900 dark:text-white';
+	}
+	return 'text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]';
+});
+
+// Button color/variant helpers for transparent vs scrolled states
+const getButtonColor = (button, index) => {
+	const isLastButton = index === resolvedButtons.value.length - 1;
+
+	// Last button is always primary
+	if (isLastButton || button.color === 'primary') return 'primary';
+
+	// Non-last buttons use neutral (we'll override colors with classes in transparent state)
+	if (button.color && button.color !== 'neutral') return button.color;
+	return 'neutral';
+};
+
+// Custom classes for transparent state (Nuxt UI doesn't have 'white' color)
+const getButtonClass = (button, index) => {
+	const isLastButton = index === resolvedButtons.value.length - 1;
+
+	// In transparent state, non-last buttons need white text/border on transparent bg
+	if (!isScrolled.value && props.transparent && !isLastButton && button.color !== 'primary') {
+		return '!bg-transparent !text-white !border-white/60 hover:!bg-white/10';
+	}
+	return '';
+};
+
+const getButtonVariant = (button, index) => {
+	// If button has custom variant, respect it but convert ghost to outline for visibility
+	if (button.variant) {
+		// Ghost variant: always convert to outline for consistent text visibility
+		if (button.variant === 'ghost') {
+			return 'outline';
+		}
+		return button.variant;
+	}
+
+	const isLastButton = index === resolvedButtons.value.length - 1;
+
+	// Last button is always solid
+	if (isLastButton) return 'solid';
+
+	// Non-last buttons: soft when transparent (visible bg), outline when scrolled
+	return isScrolled.value || !props.transparent ? 'outline' : 'soft';
+};
+
+onMounted(() => {
+	const handleScroll = () => {
+		isScrolled.value = window.scrollY > props.scrollThreshold;
+	};
+
+	window.addEventListener('scroll', handleScroll, { passive: true });
+	handleScroll();
+
+	onUnmounted(() => {
+		window.removeEventListener('scroll', handleScroll);
+	});
+});
+</script>

package/app/components/X/Mark/Modal/Chat.vue

@@ -0,0 +1,151 @@
+<template>
+  <Transition
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="translate-y-4 opacity-0"
+    leave-active-class="transition-all duration-200 ease-in"
+    leave-to-class="translate-y-4 opacity-0"
+  >
+    <aside
+      v-if="isVisible"
+      class="fixed bottom-6 right-6 z-40 max-w-sm"
+    >
+      <div class="xGlass rounded-2xl p-4 shadow-xl">
+        <!-- Close button -->
+        <button
+          class="absolute top-2 right-2 p-1 rounded-full hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
+          aria-label="Close"
+          @click="dismiss"
+        >
+          <UIcon name="i-lucide-x" class="w-4 h-4 text-gray-400" />
+        </button>
+
+        <!-- Content -->
+        <div class="flex gap-3">
+          <!-- Avatar -->
+          <img
+            v-if="avatar"
+            :src="avatar"
+            :alt="name"
+            class="w-12 h-12 rounded-full object-cover flex-shrink-0"
+          />
+          <div
+            v-else
+            class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center flex-shrink-0"
+          >
+            <span class="text-primary-600 dark:text-primary-400 font-medium text-lg">
+              {{ name.charAt(0) }}
+            </span>
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <!-- Header -->
+            <div class="flex items-center gap-2 mb-1">
+              <span class="font-medium text-gray-900 dark:text-white">
+                {{ name }}
+              </span>
+              <span
+                v-if="online"
+                class="w-2 h-2 rounded-full bg-green-500"
+              />
+            </div>
+
+            <!-- Message -->
+            <p class="text-sm text-gray-600 dark:text-gray-400">
+              {{ message }}
+            </p>
+
+            <!-- Action -->
+            <UButton
+              v-if="actionText"
+              size="sm"
+              class="mt-3"
+              @click="handleAction"
+            >
+              {{ actionText }}
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </aside>
+  </Transition>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** v-model visibility */
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  /** Avatar image URL */
+  avatar: {
+    type: String,
+    default: '',
+  },
+  /** Person/bot name */
+  name: {
+    type: String,
+    required: true,
+  },
+  /** Chat message */
+  message: {
+    type: String,
+    required: true,
+  },
+  /** Show online indicator */
+  online: {
+    type: Boolean,
+    default: true,
+  },
+  /** Button text */
+  actionText: {
+    type: String,
+    default: '',
+  },
+  /** Auto-dismiss after ms (0 = never) */
+  autoDismiss: {
+    type: Number,
+    default: 0,
+  },
+  /** Delay before showing (ms) */
+  delay: {
+    type: Number,
+    default: 3000,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'action', 'dismiss']);
+
+const isVisible = ref(false);
+let dismissTimeout = null;
+let showTimeout = null;
+
+const dismiss = () => {
+  isVisible.value = false;
+  emit('update:modelValue', false);
+  emit('dismiss');
+};
+
+const handleAction = () => {
+  emit('action');
+};
+
+watch(() => props.modelValue, (val) => {
+  if (val) {
+    showTimeout = setTimeout(() => {
+      isVisible.value = true;
+
+      if (props.autoDismiss > 0) {
+        dismissTimeout = setTimeout(dismiss, props.autoDismiss);
+      }
+    }, props.delay);
+  } else {
+    isVisible.value = false;
+  }
+}, { immediate: true });
+
+onUnmounted(() => {
+  if (dismissTimeout) clearTimeout(dismissTimeout);
+  if (showTimeout) clearTimeout(showTimeout);
+});
+</script>

package/app/components/X/Mark/Modal/Feature.vue

@@ -0,0 +1,197 @@
+<template>
+	<UModal
+		v-model:open="isOpen"
+		fullscreen
+		:ui="{
+			header: 'hidden',
+			body: 'p-0 overflow-y-auto',
+			footer: 'hidden',
+			overlay: 'bg-black/90'
+		}"
+	>
+		<!-- Trigger Slot -->
+		<slot>
+			<UButton
+				:label="buttonProps.label"
+				:color="buttonProps.color"
+				:variant="buttonProps.variant"
+				:size="buttonProps.size"
+				:leading-icon="buttonProps.icon"
+			/>
+		</slot>
+
+		<!-- Modal Content -->
+		<template #body>
+			<!-- Close Button -->
+			<UButton
+				icon="i-lucide-x"
+				color="neutral"
+				variant="ghost"
+				class="fixed top-4 right-4 z-50 !bg-white/10 backdrop-blur-sm hover:!bg-white/20 !text-white"
+				size="lg"
+				aria-label="Close"
+				@click="isOpen = false"
+			/>
+
+			<!-- Scrollable Content -->
+			<div class="min-h-screen">
+				<!-- Hero Section -->
+				<section
+					v-if="hero"
+					class="relative h-screen flex items-center justify-center"
+				>
+					<img
+						:src="hero.image"
+						:alt="hero.title"
+						class="absolute inset-0 w-full h-full object-cover"
+					/>
+					<div class="absolute inset-0 bg-black/40" />
+					<div class="relative z-10 text-center text-white px-6">
+						<h2 class="xText-display">{{ hero.title }}</h2>
+						<p class="mt-4 text-xl text-white/80 max-w-2xl mx-auto">
+							{{ hero.subtitle }}
+						</p>
+					</div>
+				</section>
+
+				<!-- Feature Blocks -->
+				<template v-for="(block, index) in blocks" :key="index">
+					<!-- Full Image Block -->
+					<section
+						v-if="block.type === 'image'"
+						class="relative h-screen"
+					>
+						<img
+							:src="block.image"
+							:alt="block.alt"
+							class="w-full h-full object-cover"
+						/>
+					</section>
+
+					<!-- Text Block -->
+					<section
+						v-else-if="block.type === 'text'"
+						class="py-32 px-6"
+						:class="block.bg || 'bg-white dark:bg-neutral-950'"
+					>
+						<div class="max-w-3xl mx-auto">
+							<h3 class="xText-headline text-neutral-900 dark:text-white">{{ block.title }}</h3>
+							<p class="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
+								{{ block.body }}
+							</p>
+						</div>
+					</section>
+
+					<!-- Split Block -->
+					<section
+						v-else-if="block.type === 'split'"
+						class="grid lg:grid-cols-2 min-h-screen"
+						:class="{ 'lg:grid-flow-col-dense': block.imagePosition === 'left' }"
+					>
+						<div
+							class="flex items-center p-12 lg:p-20"
+							:class="[
+								block.bg || 'bg-white dark:bg-neutral-950',
+								block.imagePosition === 'left' ? 'lg:col-start-2' : ''
+							]"
+						>
+							<div>
+								<h3 class="xText-headline text-neutral-900 dark:text-white">{{ block.title }}</h3>
+								<p class="mt-6 text-lg text-neutral-600 dark:text-neutral-400">
+									{{ block.body }}
+								</p>
+								<ul v-if="block.features" class="mt-8 space-y-4">
+									<li
+										v-for="feature in block.features"
+										:key="feature"
+										class="flex items-center gap-3"
+									>
+										<UIcon name="i-lucide-check-circle" class="w-5 h-5 text-primary-500" />
+										<span class="text-neutral-700 dark:text-neutral-300">{{ feature }}</span>
+									</li>
+								</ul>
+							</div>
+						</div>
+						<div
+							class="relative min-h-[50vh] lg:min-h-0"
+							:class="block.imagePosition === 'left' ? 'lg:col-start-1 lg:row-start-1' : ''"
+						>
+							<img
+								:src="block.image"
+								:alt="block.title"
+								class="absolute inset-0 w-full h-full object-cover"
+							/>
+						</div>
+					</section>
+				</template>
+
+				<!-- CTA Section -->
+				<section
+					v-if="cta"
+					class="py-32 px-6 text-center"
+					:class="cta.bg || 'bg-neutral-950'"
+				>
+					<h3 class="xText-headline text-white">{{ cta.title }}</h3>
+					<p class="mt-4 text-xl text-white/70">{{ cta.subtitle }}</p>
+					<div class="mt-10">
+						<UButton size="xl" :color="cta.button?.color || 'primary'" @click="handleCtaClick">
+							{{ cta.button?.label || 'Get Started' }}
+						</UButton>
+					</div>
+				</section>
+			</div>
+		</template>
+	</UModal>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Hero section configuration */
+	hero: {
+		type: Object,
+		default: null,
+	},
+	/** Content blocks array */
+	blocks: {
+		type: Array,
+		default: () => [],
+	},
+	/** CTA section configuration */
+	cta: {
+		type: Object,
+		default: null,
+	},
+	/** Button configuration object */
+	button: {
+		type: Object,
+		default: () => ({}),
+	},
+});
+
+const emit = defineEmits(['open', 'close', 'cta-click']);
+
+const isOpen = ref(false);
+
+// Button props with defaults
+const buttonProps = computed(() => ({
+	label: props.button.label || 'Learn More',
+	color: props.button.color || 'primary',
+	variant: props.button.variant || 'solid',
+	size: props.button.size || 'md',
+	icon: props.button.icon || '',
+}));
+
+// Handle CTA click
+const handleCtaClick = () => {
+	emit('cta-click');
+};
+
+// Emit events
+watch(isOpen, (open) => {
+	if (open) {
+		emit('open');
+	} else {
+		emit('close');
+	}
+});
+</script>