@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

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

@@ -0,0 +1,64 @@
+<template>
+  <div
+    :class="[
+      'xGlass rounded-2xl transition-all duration-300 hover:shadow-lg',
+      sizeClasses,
+      { 'xGlow-border': glow }
+    ]"
+  >
+    <!-- Header -->
+    <header v-if="title || $slots.header" class="mb-4">
+      <slot name="header">
+        <h3 class="xText-title text-neutral-900 dark:text-white">{{ title }}</h3>
+        <p v-if="subtitle" class="mt-1 text-neutral-600 dark:text-neutral-400">
+          {{ subtitle }}
+        </p>
+      </slot>
+    </header>
+
+    <!-- Content -->
+    <slot />
+
+    <!-- Footer -->
+    <footer v-if="$slots.footer" class="mt-6 pt-4 border-t border-white/10 dark:border-neutral-800">
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Card title */
+  title: {
+    type: String,
+    default: '',
+  },
+  /** Card subtitle */
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  /** Card size (padding) */
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+  },
+  /** Add glow border effect */
+  glow: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    xs: 'p-3',
+    sm: 'p-4',
+    md: 'p-6',
+    lg: 'p-8',
+    xl: 'p-10',
+  };
+  return sizes[props.size];
+});
+</script>

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

@@ -0,0 +1,164 @@
+<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]"
+    />
+
+    <!-- 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>
+
+      <!-- Spacer -->
+      <div class="flex-1" />
+
+      <!-- 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="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>
+</template>
+
+<script setup>
+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),
+  },
+});
+
+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 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 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';
+});
+</script>

package/app/components/X/Mark/Divider/Glow.vue

@@ -0,0 +1,113 @@
+<template>
+  <div :class="spacing">
+    <div class="relative" :class="heightClass">
+      <!-- Line -->
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent"
+        :class="lineClass"
+      />
+      <!-- Small glow -->
+      <div
+        v-if="intensity !== 'none'"
+        class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent"
+        :class="[smallGlowClass, blurSmClass]"
+      />
+      <!-- Large glow -->
+      <div
+        v-if="intensity === 'medium' || intensity === 'strong'"
+        class="absolute bg-gradient-to-r from-transparent to-transparent"
+        :class="[largeGlowClass, blurLgClass, largeGlowInset]"
+      />
+      <!-- Extra large glow for strong -->
+      <div
+        v-if="intensity === 'strong'"
+        class="absolute bg-gradient-to-r from-transparent to-transparent blur-2xl"
+        :class="[extraGlowClass, extraGlowInset]"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /** Color theme - any Tailwind color or 'white' */
+    color?: string
+    /** Vertical spacing (padding) */
+    spacing?: string
+    /** Glow intensity */
+    intensity?: 'none' | 'subtle' | 'medium' | 'strong'
+    /** Line height */
+    height?: 'thin' | 'default' | 'thick'
+  }>(),
+  {
+    color: 'primary',
+    spacing: 'py-16',
+    intensity: 'medium',
+    height: 'default',
+  }
+)
+
+const heightClass = computed(() => {
+  const heights = {
+    thin: 'h-px',
+    default: 'h-0.5',
+    thick: 'h-1',
+  }
+  return heights[props.height]
+})
+
+// Line classes - handle white/neutral specially
+const lineClass = computed(() => {
+  if (props.color === 'white') return 'via-white/50'
+  if (props.color === 'neutral') return 'via-neutral-400/50'
+  return `via-${props.color}-500/50`
+})
+
+// Small glow blur based on intensity
+const blurSmClass = computed(() => {
+  const blurs = {
+    none: '',
+    subtle: 'blur-[2px]',
+    medium: 'blur-sm',
+    strong: 'blur-sm',
+  }
+  return blurs[props.intensity]
+})
+
+const smallGlowClass = computed(() => {
+  if (props.color === 'white') return 'via-white/60'
+  if (props.color === 'neutral') return 'via-neutral-300/60'
+  return `via-${props.color}-400/60`
+})
+
+// Large glow blur based on intensity
+const blurLgClass = computed(() => {
+  const blurs = {
+    none: '',
+    subtle: 'blur-md',
+    medium: 'blur-xl',
+    strong: 'blur-xl',
+  }
+  return blurs[props.intensity]
+})
+
+const largeGlowInset = computed(() => {
+  return props.intensity === 'strong' ? '-inset-2' : '-inset-1'
+})
+
+const largeGlowClass = computed(() => {
+  if (props.color === 'white') return 'via-white/30'
+  if (props.color === 'neutral') return 'via-neutral-400/30'
+  return `via-${props.color}-500/30`
+})
+
+// Extra glow for strong intensity
+const extraGlowInset = '-inset-4'
+
+const extraGlowClass = computed(() => {
+  if (props.color === 'white') return 'via-white/20'
+  if (props.color === 'neutral') return 'via-neutral-400/20'
+  return `via-${props.color}-500/20`
+})
+</script>

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

@@ -0,0 +1,194 @@
+<template>
+	<div :class="containerClasses">
+		<!-- Grid Layout -->
+		<template v-if="layout === 'grid'">
+			<div :class="gridClasses">
+				<article
+					v-for="(feature, index) in features"
+					:key="feature.title"
+					class="xFadeUp group"
+					:style="{ transitionDelay: `${index * 100}ms` }"
+				>
+					<!-- Icon -->
+					<div
+						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"
+						/>
+					</div>
+
+					<!-- Image -->
+					<figure
+						v-if="feature.img?.src"
+						class="aspect-video rounded-xl overflow-hidden mb-4 xHover-zoom"
+					>
+						<img
+							:src="feature.img.src"
+							:alt="feature.img.alt || feature.title"
+							class="w-full h-full object-cover"
+						/>
+					</figure>
+
+					<!-- Title -->
+					<h3 class="xText-title text-neutral-900 dark:text-white">
+						{{ feature.title }}
+					</h3>
+
+					<!-- Description -->
+					<p class="mt-2 text-neutral-600 dark:text-neutral-400">
+						{{ feature.description }}
+					</p>
+
+					<!-- 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"
+						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" />
+					</NuxtLink>
+				</article>
+			</div>
+		</template>
+
+		<!-- List Layout -->
+		<template v-else-if="layout === 'list'">
+			<div class="space-y-12">
+				<article
+					v-for="(feature, index) in features"
+					:key="feature.title"
+					class="flex flex-col md:flex-row gap-6 xFadeUp group"
+					:style="{ transitionDelay: `${index * 100}ms` }"
+				>
+					<!-- Icon -->
+					<div
+						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"
+						/>
+					</div>
+
+					<!-- Content -->
+					<div class="flex-1">
+						<h3 class="xText-title text-neutral-900 dark:text-white">
+							{{ feature.title }}
+						</h3>
+						<p class="mt-2 text-neutral-600 dark:text-neutral-400">
+							{{ 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"
+							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" />
+						</NuxtLink>
+					</div>
+				</article>
+			</div>
+		</template>
+
+		<!-- Alternating Layout -->
+		<template v-else-if="layout === 'alternating'">
+			<div class="space-y-24 lg:space-y-32">
+				<article
+					v-for="(feature, index) in features"
+					:key="feature.title"
+					class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center xFadeUp group"
+					:style="{ transitionDelay: `${index * 100}ms` }"
+				>
+					<!-- Image -->
+					<figure
+						v-if="feature.img?.src"
+						class="aspect-[4/3] rounded-2xl overflow-hidden xHover-zoom shadow-lg"
+						:class="{ 'lg:order-2': index % 2 !== 0 }"
+					>
+						<img
+							:src="feature.img.src"
+							:alt="feature.img.alt || feature.title"
+							class="w-full h-full object-cover"
+						/>
+					</figure>
+
+					<!-- Content -->
+					<div :class="{ 'lg:order-1': index % 2 !== 0 }">
+						<!-- Icon -->
+						<div
+							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"
+							/>
+						</div>
+
+						<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">
+							{{ 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"
+							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" />
+						</NuxtLink>
+					</div>
+				</article>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup>
+// Initialize scroll reveal animations automatically
+useScrollReveal()
+
+const props = defineProps({
+	/** Array of features */
+	features: {
+		type: Array,
+		required: true,
+	},
+	/** Display layout */
+	layout: {
+		type: String,
+		default: 'grid',
+		validator: (v) => ['grid', 'list', 'alternating'].includes(v),
+	},
+	/** Grid columns (for grid layout) */
+	columns: {
+		type: Number,
+		default: 3,
+		validator: (v) => [2, 3, 4].includes(v),
+	},
+});
+
+const containerClasses = computed(() => {
+	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',
+	};
+	return cols[props.columns];
+});
+</script>