@xenterprises/nuxt-x-marketing 0.0.24 → 1.0.1

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

@@ -0,0 +1,181 @@
+<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>
+</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,
+  },
+});
+
+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 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",
+  },
+};
+
+const iconName = computed(() => {
+  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 enterFromClass = computed(() => {
+  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";
+});
+
+const currentNotification = ref(null);
+const currentIndex = ref(0);
+let showTimeout = null;
+let hideTimeout = null;
+let cycleTimeout = null;
+
+const showNext = () => {
+  if (props.notifications.length === 0) return;
+
+  currentNotification.value = props.notifications[currentIndex.value];
+  currentIndex.value = (currentIndex.value + 1) % props.notifications.length;
+
+  hideTimeout = setTimeout(() => {
+    currentNotification.value = null;
+
+    cycleTimeout = setTimeout(showNext, props.interval - props.displayDuration);
+  }, props.displayDuration);
+};
+
+onMounted(() => {
+  if (process.client && props.notifications.length > 0) {
+    showTimeout = setTimeout(showNext, props.initialDelay);
+  }
+});
+
+onUnmounted(() => {
+  if (showTimeout) clearTimeout(showTimeout);
+  if (hideTimeout) clearTimeout(hideTimeout);
+  if (cycleTimeout) clearTimeout(cycleTimeout);
+});
+</script>

package/app/components/X/Mark/_archive/Pattern/Background.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="absolute inset-0 pointer-events-none"
+    :style="{
+      opacity: opacity,
+      backgroundImage: `url('${patternSvg}')`,
+      backgroundSize: size
+    }"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern type */
+  pattern: {
+    type: String,
+    default: 'dots',
+    validator: (v) => ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves'].includes(v),
+  },
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.05,
+  },
+  /** Background size */
+  size: {
+    type: String,
+    default: 'auto',
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+});
+
+const patterns = {
+  dots: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="2" cy="2" r="1" fill="${color}"/>
+    </svg>
+  `)}`,
+
+  grid: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 0h40v40H0z" fill="none" stroke="${color}" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  diagonal: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 40L40 0" stroke="${color}" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  topography: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 50 Q25 30 50 50 T100 50" stroke="${color}" fill="none" stroke-width="0.5"/>
+      <path d="M0 70 Q25 50 50 70 T100 70" stroke="${color}" fill="none" stroke-width="0.5"/>
+      <path d="M0 30 Q25 10 50 30 T100 30" stroke="${color}" fill="none" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  circuit: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+      <path d="M30 0v20M30 40v20M0 30h20M40 30h20" stroke="${color}" stroke-width="0.5" fill="none"/>
+      <circle cx="30" cy="30" r="3" stroke="${color}" fill="none" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+
+  waves: (color) => `data:image/svg+xml,${encodeURIComponent(`
+    <svg width="100" height="20" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0 10 Q25 0 50 10 T100 10" stroke="${color}" fill="none" stroke-width="0.5"/>
+    </svg>
+  `)}`,
+};
+
+const patternSvg = computed(() => {
+  // Use fully opaque color - opacity is controlled by the wrapper element
+  const colorValue = props.color === 'currentColor' ? 'rgb(0,0,0)' : props.color;
+  return patterns[props.pattern]?.(colorValue) || patterns.dots(colorValue);
+});
+</script>

package/app/components/X/Mark/_archive/Pattern/CheckBg.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.5,
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  return `url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="diag" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"%3E%3Cline x1="0" y1="60" x2="60" y2="0" stroke="${encodedColor}" stroke-width="1" opacity="0.4"/%3E%3C/pattern%3E%3Crect width="60" height="60" fill="url(%23diag)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/CircuitBg.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.35,
+  },
+  /** Primary pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+  /** Secondary pattern color */
+  colorSecondary: {
+    type: String,
+    default: '#1e3a8a',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  const encodedColorSecondary = encodeURIComponent(props.colorSecondary)
+  return `url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="circuit" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"%3E%3Cpath d="M0 50 H30 V20 H50" fill="none" stroke="${encodedColor}" stroke-width="1"/%3E%3Cpath d="M50 80 V50 H80 V30" fill="none" stroke="${encodedColorSecondary}" stroke-width="1"/%3E%3Ccircle cx="30" cy="50" r="3" fill="${encodedColor}"/%3E%3Ccircle cx="50" cy="20" r="3" fill="${encodedColor}"/%3E%3Ccircle cx="50" cy="80" r="3" fill="${encodedColorSecondary}"/%3E%3Ccircle cx="80" cy="30" r="3" fill="${encodedColorSecondary}"/%3E%3C/pattern%3E%3Crect width="100" height="100" fill="url(%23circuit)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/DotsBg.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.5,
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  return `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"%3E%3Ccircle cx="20" cy="20" r="2" fill="${encodedColor}" opacity="0.6"/%3E%3C/pattern%3E%3Crect width="40" height="40" fill="url(%23dots)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/GlowDivider.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="relative h-px" :class="spacingClasses">
+    <div
+      class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent"
+      :class="lineClasses"
+    />
+    <div
+      v-if="glow"
+      class="absolute inset-0 bg-gradient-to-r from-transparent to-transparent blur-sm"
+      :class="glowClasses"
+    />
+    <div
+      v-if="glow && intensity === 'strong'"
+      class="absolute -inset-1 bg-gradient-to-r from-transparent to-transparent blur-xl"
+      :class="glowXlClasses"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Show glow effect */
+  glow: {
+    type: Boolean,
+    default: true,
+  },
+  /** Glow color preset */
+  color: {
+    type: String,
+    default: 'primary',
+    validator: (v) => ['primary', 'secondary', 'neutral', 'cyan', 'blue', 'purple', 'white'].includes(v),
+  },
+  /** Glow strength */
+  intensity: {
+    type: String,
+    default: 'medium',
+    validator: (v) => ['subtle', 'medium', 'strong'].includes(v),
+  },
+  /** Vertical margin */
+  spacing: {
+    type: String,
+    default: 'my-16',
+  },
+})
+
+const spacingClasses = computed(() => props.spacing)
+
+const lineClasses = computed(() => {
+  const colors = {
+    primary: 'via-primary-500/50',
+    secondary: 'via-secondary-500/50',
+    neutral: 'via-neutral-500/30',
+    cyan: 'via-cyan-500/50',
+    blue: 'via-blue-500/50',
+    purple: 'via-purple-500/50',
+    white: 'via-white/30',
+  }
+  return colors[props.color]
+})
+
+const glowClasses = computed(() => {
+  const colors = {
+    primary: 'via-primary-400',
+    secondary: 'via-secondary-400',
+    neutral: 'via-neutral-400',
+    cyan: 'via-cyan-400',
+    blue: 'via-blue-400',
+    purple: 'via-purple-400',
+    white: 'via-white',
+  }
+  return colors[props.color]
+})
+
+const glowXlClasses = computed(() => {
+  const colors = {
+    primary: 'via-primary-500/20',
+    secondary: 'via-secondary-500/20',
+    neutral: 'via-neutral-500/20',
+    cyan: 'via-cyan-500/20',
+    blue: 'via-blue-500/20',
+    purple: 'via-purple-500/20',
+    white: 'via-white/20',
+  }
+  return colors[props.color]
+})
+</script>

package/app/components/X/Mark/_archive/Pattern/HexBg.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.4,
+  },
+  /** Pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  return `url('data:image/svg+xml,%3Csvg width="60" height="52" viewBox="0 0 60 52" xmlns="http://www.w3.org/2000/svg"%3E%3Cpattern id="hex" x="0" y="0" width="60" height="52" patternUnits="userSpaceOnUse"%3E%3Cpath d="M30 0 L45 13 L45 39 L30 52 L15 39 L15 13 Z" fill="none" stroke="${encodedColor}" stroke-width="1" opacity="0.5"/%3E%3C/pattern%3E%3Crect width="60" height="52" fill="url(%23hex)"/%3E%3C/svg%3E')`
+})
+</script>
+

package/app/components/X/Mark/_archive/Pattern/PlaidBg.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="absolute inset-0 pointer-events-none overflow-hidden">
+    <div
+      class="absolute inset-0 transition-transform duration-100 xParallax"
+      data-parallax-speed="0.4"
+      :style="{
+        opacity: opacity,
+        backgroundImage: patternSvg
+      }"
+    />
+    <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#0a0a0a] to-transparent z-10" />
+    <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.6,
+  },
+  /** Primary pattern color */
+  color: {
+    type: String,
+    default: '#164e63',
+  },
+  /** Secondary pattern color */
+  colorSecondary: {
+    type: String,
+    default: '#1e3a8a',
+  },
+  /** Background color */
+  bgColor: {
+    type: String,
+    default: '#0a0a0a',
+  },
+})
+
+const patternSvg = computed(() => {
+  const encodedColor = encodeURIComponent(props.color)
+  const encodedColorSecondary = encodeURIComponent(props.colorSecondary)
+  const encodedBgColor = encodeURIComponent(props.bgColor)
+  return `url('data:image/svg+xml,%3Csvg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cpattern id="plaid" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"%3E%3Crect width="200" height="200" fill="${encodedBgColor}"/%3E%3Cline x1="0" y1="0" x2="200" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.7"/%3E%3Cline x1="80" y1="0" x2="280" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.6"/%3E%3Cline x1="160" y1="0" x2="360" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.7"/%3E%3Cline x1="-80" y1="0" x2="120" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.6"/%3E%3Cline x1="200" y1="0" x2="0" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.65"/%3E%3Cline x1="280" y1="0" x2="80" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.55"/%3E%3Cline x1="120" y1="0" x2="-80" y2="200" stroke="${encodedColor}" stroke-width="4" opacity="0.65"/%3E%3Cline x1="40" y1="0" x2="-160" y2="200" stroke="${encodedColorSecondary}" stroke-width="4" opacity="0.55"/%3E%3C/pattern%3E%3C/defs%3E%3Crect width="200" height="200" fill="url(%23plaid)"/%3E%3C/svg%3E')`
+})
+</script>
+