@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

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

@@ -0,0 +1,217 @@
+<template>
+	<section
+		class="relative min-h-svh flex overflow-hidden"
+		:class="[
+			alignmentClasses,
+			verticalAlignClasses,
+			{ 'pt-20': includeNavPadding }
+		]"
+	>
+		<!-- Background -->
+		<div class="absolute inset-0">
+			<!-- Custom Background Slot -->
+			<slot name="background">
+				<!-- Video Background -->
+				<video
+					v-if="video?.src"
+					:src="video.src"
+					:poster="video.poster || img?.src"
+					autoplay
+					loop
+					muted
+					playsinline
+					class="absolute inset-0 w-full h-full object-cover xParallax"
+					data-parallax-speed="0.3"
+				/>
+
+				<!-- Image Background -->
+				<img
+					v-else-if="img?.src"
+					:src="img.src"
+					:alt="img.alt || ''"
+					class="absolute inset-0 w-full h-full object-cover xParallax"
+					data-parallax-speed="0.3"
+				/>
+			</slot>
+
+			<!-- Overlay -->
+			<div
+				v-if="overlay !== 'none'"
+				class="absolute inset-0"
+				:class="overlayClass"
+			/>
+		</div>
+
+		<!-- 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"
+			>
+				<!-- Eyebrow -->
+				<p
+					v-if="eyebrow"
+					class="xText-eyebrow text-white/70 mb-4 xFadeUp"
+				>
+					{{ eyebrow }}
+				</p>
+
+				<!-- Title -->
+				<h1
+					class="xText-display text-white xText-balance xFadeUp"
+					style="transition-delay: 100ms"
+				>
+					<slot name="title">{{ title }}</slot>
+				</h1>
+
+				<!-- Subtitle -->
+				<p
+					v-if="subtitle || $slots.subtitle"
+					class="mt-6 text-xl text-white/80 max-w-2xl xFadeUp"
+					style="transition-delay: 200ms"
+				>
+					<slot name="subtitle">{{ subtitle }}</slot>
+				</p>
+
+				<!-- Actions -->
+				<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' }"
+					style="transition-delay: 300ms"
+				>
+					<slot name="actions">
+						<UButton
+							v-for="(btn, index) in buttons"
+							:key="index"
+							size="xl"
+							:color="btn.color || (index === 0 ? 'primary' : 'neutral')"
+							:variant="btn.variant || 'solid'"
+							:to="btn.to"
+							:icon="btn.icon"
+							: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 }}
+						</UButton>
+					</slot>
+				</div>
+			</div>
+		</div>
+
+		<!-- Scroll Indicator -->
+		<div
+			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]" />
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Background image object { src: string, alt?: string } */
+	img: {
+		type: Object,
+		default: null,
+		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',
+	},
+	/** Overlay style */
+	overlay: {
+		type: String,
+		default: 'gradient',
+		validator: (v) => ['light', 'heavy', 'gradient', 'none'].includes(v),
+	},
+	/** Small text above title */
+	eyebrow: {
+		type: String,
+		default: '',
+	},
+	/** Main headline */
+	title: {
+		type: String,
+		required: true,
+	},
+	/** Supporting text */
+	subtitle: {
+		type: String,
+		default: '',
+	},
+	/** Action buttons array [{ label, color?, variant?, to?, icon? }] */
+	buttons: {
+		type: Array,
+		default: () => [],
+		validator: (v) => v.every(btn => btn.label),
+	},
+	/** Content horizontal alignment */
+	align: {
+		type: String,
+		default: 'left',
+		validator: (v) => ['left', 'center', 'right'].includes(v),
+	},
+	/** Content vertical position */
+	verticalAlign: {
+		type: String,
+		default: 'center',
+		validator: (v) => ['center', 'bottom'].includes(v),
+	},
+	/** Has scroll indicator arrow */
+	hasScrollIndicator: {
+		type: Boolean,
+		default: true,
+	},
+	/** Add top padding for non-transparent nav */
+	includeNavPadding: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+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',
+	};
+	return overlays[props.overlay] || '';
+});
+
+const alignmentClasses = computed(() => {
+	const aligns = {
+		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',
+	};
+	return aligns[props.verticalAlign];
+});
+
+const contentAlignmentClasses = computed(() => {
+	const aligns = {
+		left: '',
+		center: 'mx-auto',
+		right: 'ml-auto',
+	};
+	return aligns[props.align];
+});
+</script>

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

@@ -0,0 +1,139 @@
+<template>
+	<Transition name="slide-down">
+		<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"
+					/>
+
+					<!-- Message -->
+					<p class="text-center">
+						<span v-if="badge" class="font-semibold mr-2">{{ badge }}</span>
+						<span>{{ message }}</span>
+					</p>
+
+					<!-- CTA Link -->
+					<NuxtLink
+						v-if="link"
+						:to="link"
+						class="inline-flex items-center gap-1 font-medium hover:underline underline-offset-2"
+					>
+						{{ linkText }}
+						<UIcon name="i-lucide-arrow-right" class="w-4 h-4" />
+					</NuxtLink>
+
+					<!-- Close Button -->
+					<button
+						v-if="dismissible"
+						class="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+						@click="dismiss"
+					>
+						<UIcon name="i-lucide-x" class="w-4 h-4" />
+						<span class="sr-only">Dismiss</span>
+					</button>
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Main message text */
+	message: {
+		type: String,
+		required: true,
+	},
+	/** Optional badge/label before message */
+	badge: {
+		type: String,
+		default: '',
+	},
+	/** Icon name to display */
+	icon: {
+		type: String,
+		default: '',
+	},
+	/** CTA link URL */
+	link: {
+		type: String,
+		default: '',
+	},
+	/** CTA link text */
+	linkText: {
+		type: String,
+		default: 'Learn more',
+	},
+	/** Color variant */
+	variant: {
+		type: String,
+		default: 'primary',
+		validator: (v) => ['primary', 'neutral', 'success', 'warning', 'error'].includes(v),
+	},
+	/** Allow dismissing the bar */
+	dismissible: {
+		type: Boolean,
+		default: true,
+	},
+	/** Storage key for dismissed state */
+	storageKey: {
+		type: String,
+		default: 'announcement-dismissed',
+	},
+});
+
+const emit = defineEmits(['dismiss']);
+
+const visible = ref(true);
+
+onMounted(() => {
+	if (props.dismissible && props.storageKey) {
+		const dismissed = localStorage.getItem(props.storageKey);
+		if (dismissed) {
+			visible.value = false;
+		}
+	}
+});
+
+const dismiss = () => {
+	if (props.storageKey) {
+		localStorage.setItem(props.storageKey, 'true');
+	}
+	visible.value = false;
+	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',
+	};
+	return variants[props.variant];
+});
+</script>
+
+<style scoped>
+.slide-down-enter-active,
+.slide-down-leave-active {
+	transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+	transform: translateY(-100%);
+	opacity: 0;
+}
+</style>

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

@@ -0,0 +1,160 @@
+<template>
+	<footer class="bg-neutral-950 text-white">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
+			<!-- Main Footer Grid -->
+			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 lg:gap-12">
+				<!-- Brand Column -->
+				<div class="col-span-2">
+					<slot name="brand">
+						<NuxtLink v-if="logo?.src" to="/" class="inline-block">
+							<img
+								:src="logo.src"
+								:alt="logo.alt || 'Logo'"
+								class="h-8 w-auto"
+							/>
+						</NuxtLink>
+						<p
+							v-if="description"
+							class="mt-4 text-neutral-400 max-w-xs"
+						>
+							{{ description }}
+						</p>
+					</slot>
+
+					<!-- Social Links -->
+					<div v-if="social.length" class="mt-6 flex gap-4">
+						<a
+							v-for="item in social"
+							:key="item.name"
+							:href="item.href"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="text-neutral-400 hover:text-primary-400 transition-all duration-300 hover:scale-110"
+						>
+							<UIcon :name="item.icon" class="w-5 h-5" />
+							<span class="sr-only">{{ item.name }}</span>
+						</a>
+					</div>
+				</div>
+
+				<!-- Link Columns -->
+				<div
+					v-for="column in columns"
+					:key="column.title"
+					class="col-span-1"
+				>
+					<h4 class="font-semibold text-sm uppercase tracking-wider text-neutral-300 mb-4">
+						{{ column.title }}
+					</h4>
+					<ul class="space-y-3">
+						<li v-for="link in column.links" :key="link.label">
+							<NuxtLink
+								:to="link.to"
+								class="text-neutral-400 hover:text-white transition-colors text-sm inline-block relative group"
+							>
+								{{ link.label }}
+								<span class="absolute -bottom-0.5 left-0 w-0 h-px bg-primary-500 transition-all duration-300 group-hover:w-full" />
+							</NuxtLink>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<!-- Newsletter Section -->
+			<div
+				v-if="hasNewsletter"
+				class="mt-12 pt-8 border-t border-neutral-800"
+			>
+				<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+					<div>
+						<h4 class="font-semibold">{{ newsletterTitle }}</h4>
+						<p class="mt-1 text-sm text-neutral-400">{{ newsletterDescription }}</p>
+					</div>
+					<form class="flex gap-2 w-full md:w-auto" @submit.prevent="$emit('newsletter-submit', email)">
+						<UInput
+							v-model="email"
+							type="email"
+							placeholder="Enter your email"
+							class="flex-1 md:w-64"
+						/>
+						<UButton type="submit" color="primary">
+							Subscribe
+						</UButton>
+					</form>
+				</div>
+			</div>
+
+			<!-- Bottom Bar -->
+			<div class="mt-12 pt-8 border-t border-neutral-800 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+				<p class="text-sm text-neutral-500">
+					{{ copyright }}
+				</p>
+				<div v-if="legalLinks.length" class="flex flex-wrap gap-6">
+					<NuxtLink
+						v-for="link in legalLinks"
+						:key="link.label"
+						:to="link.to"
+						class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors"
+					>
+						{{ link.label }}
+					</NuxtLink>
+				</div>
+			</div>
+		</div>
+	</footer>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Logo object { src: string, alt?: string } */
+	logo: {
+		type: Object,
+		default: null,
+		validator: (v) => !v || typeof v.src === 'string',
+	},
+	/** Brand description */
+	description: {
+		type: String,
+		default: '',
+	},
+	/** Social media links */
+	social: {
+		type: Array,
+		default: () => [],
+	},
+	/** Footer link columns */
+	columns: {
+		type: Array,
+		default: () => [],
+	},
+	/** Legal/policy links */
+	legalLinks: {
+		type: Array,
+		default: () => [],
+	},
+	/** Copyright text */
+	copyright: {
+		type: String,
+		default: () => `© ${new Date().getFullYear()} All rights reserved.`,
+	},
+	/** Has newsletter section */
+	hasNewsletter: {
+		type: Boolean,
+		default: false,
+	},
+	/** Newsletter title */
+	newsletterTitle: {
+		type: String,
+		default: 'Subscribe to our newsletter',
+	},
+	/** Newsletter description */
+	newsletterDescription: {
+		type: String,
+		default: 'Get the latest updates and news.',
+	},
+});
+
+defineEmits(['newsletter-submit']);
+
+const email = ref('');
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+	<footer class="border-t border-neutral-200 dark:border-neutral-800">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+				<!-- Copyright -->
+				<p class="text-sm text-neutral-500 dark:text-neutral-400">
+					{{ copyright }}
+				</p>
+
+				<!-- Legal Links -->
+				<nav v-if="links.length" class="flex flex-wrap gap-6">
+					<NuxtLink
+						v-for="link in links"
+						:key="link.label"
+						:to="link.to"
+						class="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+					>
+						{{ link.label }}
+					</NuxtLink>
+				</nav>
+			</div>
+		</div>
+	</footer>
+</template>
+
+<script setup>
+defineProps({
+	/** Copyright text */
+	copyright: {
+		type: String,
+		default: () => `© ${new Date().getFullYear()} All rights reserved.`,
+	},
+	/** Legal/policy links */
+	links: {
+		type: Array,
+		default: () => [
+			{ label: 'Privacy Policy', to: '/privacy' },
+			{ label: 'Terms of Service', to: '/terms' },
+		],
+	},
+});
+</script>