@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.2

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

@@ -3,7 +3,7 @@
 		:class="[
 			'relative overflow-hidden rounded-2xl',
 			paddingClasses,
-			bgColorClasses
+			bgColorClasses,
 		]"
 	>
 		<!-- Background Pattern -->
@@ -15,10 +15,7 @@
 		/>
 
 		<!-- Background Image -->
-		<div
-			v-if="resolvedBg.image"
-			class="absolute inset-0"
-		>
+		<div v-if="resolvedBg.image" class="absolute inset-0">
 			<img
 				:src="resolvedBg.image"
 				:alt="resolvedBg.imageAlt"
@@ -80,22 +77,22 @@ const props = defineProps({
 	/** Eyebrow text above title */
 	eyebrow: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** CTA title */
 	title: {
 		type: String,
-		required: true,
+		default: "Ready to get started?",
 	},
 	/** CTA description */
 	description: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Optional icon */
 	icon: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Action buttons */
 	buttons: {
@@ -106,8 +103,8 @@ const props = defineProps({
 	/** Layout variant */
 	variant: {
 		type: String,
-		default: 'default',
-		validator: (v) => ['default', 'centered', 'inline', 'stacked'].includes(v),
+		default: "default",
+		validator: (v) => ["default", "centered", "inline", "stacked"].includes(v),
 	},
 	/**
 	 * Background configuration object or string shorthand
@@ -122,31 +119,31 @@ const props = defineProps({
 	 */
 	bg: {
 		type: [Object, String],
-		default: 'subtle',
+		default: "subtle",
 	},
 	/** Size */
 	size: {
 		type: String,
-		default: 'md',
-		validator: (v) => ['sm', 'md', 'lg'].includes(v),
+		default: "md",
+		validator: (v) => ["sm", "md", "lg"].includes(v),
 	},
 });
 
 // Default bg values
 const bgDefaults = {
-	variant: 'subtle',
-	color: '',
-	image: '',
-	imageAlt: '',
-	imageOverlay: '',
-	imagePosition: 'object-center',
-	pattern: '',
+	variant: "subtle",
+	color: "",
+	image: "",
+	imageAlt: "",
+	imageOverlay: "",
+	imagePosition: "object-center",
+	pattern: "",
 	patternOpacity: 0.05,
 };
 
 // Resolve bg prop (supports string shorthand for variant or full object)
 const resolvedBg = computed(() => {
-	if (typeof props.bg === 'string') {
+	if (typeof props.bg === "string") {
 		return { ...bgDefaults, variant: props.bg };
 	}
 	return { ...bgDefaults, ...props.bg };
@@ -154,14 +151,17 @@ const resolvedBg = computed(() => {
 
 // Check if background is "bold" (dark background requiring light text)
 const isBoldBg = computed(() => {
-	return ['bold', 'gradient'].includes(resolvedBg.value.variant) || resolvedBg.value.image;
+	return (
+		["bold", "gradient"].includes(resolvedBg.value.variant) ||
+		resolvedBg.value.image
+	);
 });
 
 const paddingClasses = computed(() => {
 	const sizes = {
-		sm: 'p-6',
-		md: 'p-8 md:p-12',
-		lg: 'p-12 md:p-16',
+		sm: "p-6",
+		md: "p-8 md:p-12",
+		lg: "p-12 md:p-16",
 	};
 	return sizes[props.size];
 });
@@ -171,124 +171,128 @@ const bgColorClasses = computed(() => {
 	if (resolvedBg.value.color) return resolvedBg.value.color;
 
 	const variants = {
-		subtle: 'bg-neutral-100 dark:bg-neutral-900',
-		bold: 'bg-primary-600 dark:bg-primary-700',
-		gradient: 'bg-gradient-to-br from-primary-600 to-primary-800',
-		none: '',
+		subtle: "bg-neutral-100 dark:bg-neutral-900",
+		bold: "bg-primary-600 dark:bg-primary-700",
+		gradient: "bg-gradient-to-br from-primary-600 to-primary-800",
+		none: "",
 	};
 	return variants[resolvedBg.value.variant] || variants.subtle;
 });
 
 const bgImageOverlayClass = 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[resolvedBg.value.imageOverlay] || '';
+	return overlays[resolvedBg.value.imageOverlay] || "";
 });
 
 const containerClasses = computed(() => {
 	const layouts = {
-		default: 'flex flex-col md:flex-row md:items-center md:justify-between gap-6',
-		centered: 'text-center max-w-2xl mx-auto',
-		inline: 'flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4',
-		stacked: 'flex flex-col items-center text-center gap-6',
+		default:
+			"flex flex-col md:flex-row md:items-center md:justify-between gap-6",
+		centered: "text-center max-w-2xl mx-auto",
+		inline:
+			"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4",
+		stacked: "flex flex-col items-center text-center gap-6",
 	};
 	return layouts[props.variant];
 });
 
 const iconContainerClasses = computed(() => {
 	return [
-		'flex items-center justify-center rounded-xl',
-		props.size === 'lg' ? 'w-16 h-16' : 'w-12 h-12',
-		isBoldBg.value ? 'bg-white/20' : 'bg-primary-100 dark:bg-primary-900/50',
+		"flex items-center justify-center rounded-xl",
+		props.size === "lg" ? "w-16 h-16" : "w-12 h-12",
+		isBoldBg.value ? "bg-white/20" : "bg-primary-100 dark:bg-primary-900/50",
 	];
 });
 
 const iconClasses = computed(() => {
 	return [
-		props.size === 'lg' ? 'w-8 h-8' : 'w-6 h-6',
-		isBoldBg.value ? 'text-white' : 'text-primary-500',
+		props.size === "lg" ? "w-8 h-8" : "w-6 h-6",
+		isBoldBg.value ? "text-white" : "text-primary-500",
 	];
 });
 
 const contentClasses = computed(() => {
-	if (props.variant === 'default') {
-		return 'flex-1';
+	if (props.variant === "default") {
+		return "flex-1";
 	}
-	return '';
+	return "";
 });
 
 const eyebrowClasses = computed(() => {
 	return [
-		'xText-eyebrow mb-2',
-		isBoldBg.value ? 'text-white/70' : 'text-primary-600 dark:text-primary-400',
+		"xText-eyebrow mb-2",
+		isBoldBg.value ? "text-white/70" : "text-primary-600 dark:text-primary-400",
 	];
 });
 
 const titleClasses = computed(() => {
 	const sizeClasses = {
-		sm: 'text-lg font-semibold',
-		md: 'text-xl font-semibold',
-		lg: 'xText-headline',
+		sm: "text-lg font-semibold",
+		md: "text-xl font-semibold",
+		lg: "xText-headline",
 	};
 	return [
 		sizeClasses[props.size],
-		isBoldBg.value ? 'text-white' : 'text-neutral-900 dark:text-white',
+		isBoldBg.value ? "text-white" : "text-neutral-900 dark:text-white",
 	];
 });
 
 const descriptionClasses = computed(() => {
 	return [
-		'mt-2',
-		props.size === 'sm' ? 'text-sm' : 'text-base',
-		isBoldBg.value ? 'text-white/80' : 'text-neutral-600 dark:text-neutral-400',
+		"mt-2",
+		props.size === "sm" ? "text-sm" : "text-base",
+		isBoldBg.value ? "text-white/80" : "text-neutral-600 dark:text-neutral-400",
 	];
 });
 
 const buttonsClasses = computed(() => {
 	const layouts = {
-		default: 'flex flex-wrap gap-3',
-		centered: 'flex flex-wrap justify-center gap-3 mt-6',
-		inline: 'flex flex-wrap gap-3',
-		stacked: 'flex flex-wrap justify-center gap-3',
+		default: "flex flex-wrap gap-3",
+		centered: "flex flex-wrap justify-center gap-3 mt-6",
+		inline: "flex flex-wrap gap-3",
+		stacked: "flex flex-wrap justify-center gap-3",
 	};
 	return layouts[props.variant];
 });
 
 const getButtonColor = (button, index) => {
 	// Allow explicit color override
-	if (button.color && button.color !== 'white') return button.color;
+	if (button.color && button.color !== "white") return button.color;
 	if (index === 0) {
 		// Use neutral instead of white (not a valid Nuxt UI v4 color)
 		// Custom classes handle the actual styling
-		return isBoldBg.value ? 'neutral' : 'primary';
+		return isBoldBg.value ? "neutral" : "primary";
 	}
-	return 'neutral';
+	return "neutral";
 };
 
 const getButtonClass = (button, index) => {
-	const isOutline = button.variant === 'outline' || (index > 0 && !button.variant);
-	const isGhost = button.variant === 'ghost';
-	const isSolid = button.variant === 'solid' || (index === 0 && !button.variant);
+	const isOutline =
+		button.variant === "outline" || (index > 0 && !button.variant);
+	const isGhost = button.variant === "ghost";
+	const isSolid =
+		button.variant === "solid" || (index === 0 && !button.variant);
 
 	// Solid buttons on bold/gradient backgrounds - white bg with dark text
 	if (isBoldBg.value && isSolid) {
-		return 'bg-white text-neutral-900 hover:bg-white/90';
+		return "bg-white text-neutral-900 hover:bg-white/90";
 	}
 	// Outline buttons on bold/gradient backgrounds - transparent with white border
 	if (isBoldBg.value && isOutline) {
-		return 'bg-white/10 backdrop-blur-sm border-white/40 hover:bg-white/20 hover:border-white/60 text-white';
+		return "bg-white/10 backdrop-blur-sm border-white/40 hover:bg-white/20 hover:border-white/60 text-white";
 	}
 	// Ghost buttons on bold/gradient backgrounds - transparent with white text
 	if (isBoldBg.value && isGhost) {
-		return 'text-white hover:bg-white/10';
+		return "text-white hover:bg-white/10";
 	}
 	// Outline buttons on subtle backgrounds
 	if (!isBoldBg.value && isOutline) {
-		return 'border-neutral-400 dark:border-neutral-600 hover:border-neutral-500 dark:hover:border-neutral-500';
+		return "border-neutral-400 dark:border-neutral-600 hover:border-neutral-500 dark:hover:border-neutral-500";
 	}
-	return '';
+	return "";
 };
 </script>

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

@@ -1,164 +1,174 @@
 <template>
-  <component
-    :is="to ? 'NuxtLink' : 'article'"
-    :to="to"
-    :class="[
-      'group relative aspect-[9/16] rounded-2xl overflow-hidden cursor-pointer block',
-      { 'xHover-lift': hoverable }
-    ]"
-    @click="!to && $emit('click')"
-  >
-    <!-- Background Image -->
-    <img
-      :src="img.src"
-      :alt="img.alt || ''"
-      class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.08]"
-    />
+	<component
+		:is="to ? 'NuxtLink' : 'article'"
+		:to="to"
+		:class="[
+			'group relative aspect-[9/16] rounded-2xl overflow-hidden cursor-pointer block',
+			{ 'xHover-lift': hoverable },
+		]"
+		@click="!to && $emit('click')"
+	>
+		<!-- Background Image -->
+		<img
+			:src="img.src"
+			:alt="img.alt || ''"
+			class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.08]"
+		/>
 
-    <!-- Overlay -->
-    <div
-      class="absolute inset-0"
-      :class="overlayClasses"
-    />
+		<!-- Overlay -->
+		<div class="absolute inset-0" :class="overlayClasses" />
 
-    <!-- Content -->
-    <div
-      :class="[
-        'absolute inset-0 p-6 flex flex-col',
-        alignmentClasses
-      ]"
-    >
-      <!-- Badge -->
-      <span
-        v-if="badge"
-        class="inline-flex self-start px-3 py-1 rounded-full text-xs font-medium bg-white/20 text-white backdrop-blur-sm"
-      >
-        {{ badge }}
-      </span>
+		<!-- Content -->
+		<div :class="['absolute inset-0 p-6 flex flex-col', alignmentClasses]">
+			<!-- Badge -->
+			<span
+				v-if="badge"
+				class="inline-flex self-start px-3 py-1 rounded-full text-xs font-medium bg-white/20 text-white backdrop-blur-sm"
+			>
+				{{ badge }}
+			</span>
 
-      <!-- Spacer -->
-      <div class="flex-1" />
+			<!-- Spacer -->
+			<div class="flex-1" />
 
-      <!-- Text Content -->
-      <div class="space-y-3">
-        <h3 :class="['font-semibold text-white', titleSizeClass]">
-          {{ title }}
-        </h3>
+			<!-- Text Content -->
+			<div class="space-y-3">
+				<h3 :class="['font-semibold text-white', titleSizeClass]">
+					{{ title }}
+				</h3>
 
-        <div v-if="$slots.default" class="text-white/80 text-sm">
-          <slot />
-        </div>
+				<div v-if="$slots.default" class="text-white/80 text-sm">
+					<slot />
+				</div>
 
-        <div
-          v-if="buttonLabel && to"
-          class="mt-4 inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium bg-white text-neutral-900 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-white/50"
-        >
-          {{ buttonLabel }}
-        </div>
+				<div
+					v-if="buttonLabel && to"
+					class="mt-4 inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium bg-white text-neutral-900 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-white/50"
+				>
+					{{ buttonLabel }}
+				</div>
 
-        <button
-          v-if="buttonLabel && !to"
-          class="mt-4 inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium bg-white text-neutral-900 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-white/50"
-        >
-          {{ buttonLabel }}
-        </button>
-      </div>
-    </div>
-  </component>
+				<button
+					v-if="buttonLabel && !to"
+					class="mt-4 inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium bg-white text-neutral-900 transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-white/50"
+				>
+					{{ buttonLabel }}
+				</button>
+			</div>
+		</div>
+	</component>
 </template>
 
 <script setup>
-defineEmits(['click']);
+defineEmits(["click"]);
 
 const props = defineProps({
-  /** Navigation URL (uses NuxtLink) */
-  to: {
-    type: String,
-    default: '',
-  },
-  /** Image object { src: string, alt?: string } */
-  img: {
-    type: Object,
-    required: true,
-    validator: (v) => v && typeof v.src === 'string',
-  },
-  /** Card title */
-  title: {
-    type: String,
-    required: true,
-  },
-  /** Optional badge text */
-  badge: {
-    type: String,
-    default: '',
-  },
-  /** Button object { label: string, color?: string, variant?: string } */
-  button: {
-    type: Object,
-    default: null,
-    validator: (v) => !v || (v.label !== undefined),
-  },
-  /** Content alignment */
-  align: {
-    type: String,
-    default: 'bottomLeft',
-    validator: (v) => ['bottomLeft', 'bottomRight', 'bottomCenter', 'topLeft'].includes(v),
-  },
-  /** Overlay style */
-  overlay: {
-    type: String,
-    default: 'gradient',
-    validator: (v) => ['light', 'heavy', 'gradient'].includes(v),
-  },
-  /** Enable lift on hover */
-  hoverable: {
-    type: Boolean,
-    default: true,
-  },
-  /** Title text size (Tailwind sizes) */
-  titleSize: {
-    type: String,
-    default: 'xl',
-    validator: (v) => ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl'].includes(v),
-  },
+	/** Navigation URL (uses NuxtLink) */
+	to: {
+		type: String,
+		default: "",
+	},
+	/** Image object { src: string, alt?: string } */
+	img: {
+		type: Object,
+		default: () => ({
+			src: "",
+			alt: "Promo image",
+		}),
+		validator: (v) => !v || typeof v.src === "string",
+	},
+	/** Card title */
+	title: {
+		type: String,
+		default: "Promo Card Title",
+	},
+	/** Optional badge text */
+	badge: {
+		type: String,
+		default: "",
+	},
+	/** Button object { label: string, color?: string, variant?: string } */
+	button: {
+		type: Object,
+		default: null,
+		validator: (v) => !v || v.label !== undefined,
+	},
+	/** Content alignment */
+	align: {
+		type: String,
+		default: "bottomLeft",
+		validator: (v) =>
+			["bottomLeft", "bottomRight", "bottomCenter", "topLeft"].includes(v),
+	},
+	/** Overlay style */
+	overlay: {
+		type: String,
+		default: "gradient",
+		validator: (v) => ["light", "heavy", "gradient"].includes(v),
+	},
+	/** Enable lift on hover */
+	hoverable: {
+		type: Boolean,
+		default: true,
+	},
+	/** Title text size (Tailwind sizes) */
+	titleSize: {
+		type: String,
+		default: "xl",
+		validator: (v) =>
+			[
+				"xs",
+				"sm",
+				"base",
+				"lg",
+				"xl",
+				"2xl",
+				"3xl",
+				"4xl",
+				"5xl",
+				"6xl",
+				"7xl",
+				"8xl",
+			].includes(v),
+	},
 });
 
-const buttonLabel = computed(() => props.button?.label || '');
+const buttonLabel = computed(() => props.button?.label || "");
 
 const overlayClasses = computed(() => {
-  const overlays = {
-    light: 'bg-black/30',
-    heavy: 'bg-black/60',
-    gradient: 'bg-gradient-to-t from-black/80 via-black/30 to-transparent',
-  };
-  return overlays[props.overlay];
+	const overlays = {
+		light: "bg-black/30",
+		heavy: "bg-black/60",
+		gradient: "bg-gradient-to-t from-black/80 via-black/30 to-transparent",
+	};
+	return overlays[props.overlay];
 });
 
 const alignmentClasses = computed(() => {
-  const alignments = {
-    bottomLeft: 'justify-end items-start text-left',
-    bottomRight: 'justify-end items-end text-right',
-    bottomCenter: 'justify-end items-center text-center',
-    topLeft: 'justify-start items-start text-left',
-  };
-  return alignments[props.align];
+	const alignments = {
+		bottomLeft: "justify-end items-start text-left",
+		bottomRight: "justify-end items-end text-right",
+		bottomCenter: "justify-end items-center text-center",
+		topLeft: "justify-start items-start text-left",
+	};
+	return alignments[props.align];
 });
 
 const titleSizeClass = computed(() => {
-  const sizes = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-    '5xl': 'text-5xl',
-    '6xl': 'text-6xl',
-    '7xl': 'text-7xl',
-    '8xl': 'text-8xl',
-  };
-  return sizes[props.titleSize] || 'text-xl';
+	const sizes = {
+		xs: "text-xs",
+		sm: "text-sm",
+		base: "text-base",
+		lg: "text-lg",
+		xl: "text-xl",
+		"2xl": "text-2xl",
+		"3xl": "text-3xl",
+		"4xl": "text-4xl",
+		"5xl": "text-5xl",
+		"6xl": "text-6xl",
+		"7xl": "text-7xl",
+		"8xl": "text-8xl",
+	};
+	return sizes[props.titleSize] || "text-xl";
 });
 </script>