@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/components/X/Mark/Newsletter/Form.vue

@@ -0,0 +1,174 @@
+<template>
+	<div :class="containerClasses">
+		<!-- Default Variant -->
+		<template v-if="variant === 'default'">
+			<div class="text-center max-w-2xl mx-auto">
+				<h3 class="xText-headline text-neutral-900 dark:text-white">
+					{{ title }}
+				</h3>
+				<p v-if="description" class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
+					{{ description }}
+				</p>
+
+				<form class="mt-8 flex flex-col sm:flex-row gap-3 max-w-md mx-auto" @submit.prevent="handleSubmit">
+					<UInput
+						v-model="email"
+						type="email"
+						placeholder="Enter your email"
+						class="flex-1"
+						required
+					/>
+					<UButton type="submit" :loading="loading" :color="button?.color || 'primary'">
+						{{ button?.label || 'Subscribe' }}
+					</UButton>
+				</form>
+
+				<p v-if="hasPrivacy" class="mt-4 text-sm text-neutral-500">
+					No spam. Unsubscribe anytime.
+				</p>
+			</div>
+		</template>
+
+		<!-- Inline Variant -->
+		<template v-else-if="variant === 'inline'">
+			<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+				<div>
+					<h3 class="text-xl font-semibold text-neutral-900 dark:text-white">
+						{{ title }}
+					</h3>
+					<p v-if="description" class="mt-1 text-neutral-600 dark:text-neutral-400">
+						{{ description }}
+					</p>
+				</div>
+
+				<form class="flex gap-2 flex-shrink-0" @submit.prevent="handleSubmit">
+					<UInput
+						v-model="email"
+						type="email"
+						placeholder="Enter your email"
+						class="w-64"
+						required
+					/>
+					<UButton type="submit" :loading="loading" :color="button?.color || 'primary'">
+						{{ button?.label || 'Subscribe' }}
+					</UButton>
+				</form>
+			</div>
+		</template>
+
+		<!-- Card Variant -->
+		<template v-else-if="variant === 'card'">
+			<div class="rounded-2xl bg-primary-50 dark:bg-primary-950/30 p-8 md:p-12">
+				<div class="max-w-xl mx-auto text-center">
+					<h3 class="xText-title text-neutral-900 dark:text-white">
+						{{ title }}
+					</h3>
+					<p v-if="description" class="mt-3 text-neutral-600 dark:text-neutral-400">
+						{{ description }}
+					</p>
+
+					<form class="mt-6 flex flex-col sm:flex-row gap-3" @submit.prevent="handleSubmit">
+						<UInput
+							v-model="email"
+							type="email"
+							placeholder="Enter your email"
+							class="flex-1"
+							required
+						/>
+						<UButton type="submit" :loading="loading" :color="button?.color || 'primary'">
+							{{ button?.label || 'Subscribe' }}
+						</UButton>
+					</form>
+
+					<p v-if="hasPrivacy" class="mt-4 text-sm text-neutral-500">
+						No spam. Unsubscribe anytime.
+					</p>
+				</div>
+			</div>
+		</template>
+
+		<!-- Compact Variant -->
+		<template v-else-if="variant === 'compact'">
+			<div class="rounded-xl bg-neutral-100 dark:bg-neutral-900 p-6">
+				<h4 class="font-semibold text-neutral-900 dark:text-white">
+					{{ title }}
+				</h4>
+				<p v-if="description" class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+					{{ description }}
+				</p>
+
+				<form class="mt-4 space-y-3" @submit.prevent="handleSubmit">
+					<UInput
+						v-model="email"
+						type="email"
+						placeholder="Enter your email"
+						class="w-full"
+						required
+					/>
+					<UButton type="submit" :loading="loading" :color="button?.color || 'primary'" block>
+						{{ button?.label || 'Subscribe' }}
+					</UButton>
+				</form>
+
+				<p v-if="hasPrivacy" class="mt-3 text-xs text-neutral-500">
+					No spam. Unsubscribe anytime.
+				</p>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** CTA title */
+	title: {
+		type: String,
+		default: 'Subscribe to our newsletter',
+	},
+	/** CTA description */
+	description: {
+		type: String,
+		default: '',
+	},
+	/** Button config { label: string, color?: string } */
+	button: {
+		type: Object,
+		default: () => ({ label: 'Subscribe' }),
+	},
+	/** Style variant */
+	variant: {
+		type: String,
+		default: 'default',
+		validator: (v) => ['default', 'inline', 'card', 'compact'].includes(v),
+	},
+	/** Has privacy note */
+	hasPrivacy: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const emit = defineEmits(['submit']);
+
+const email = ref('');
+const loading = ref(false);
+
+const containerClasses = computed(() => {
+	if (props.variant === 'default') {
+		return '';
+	}
+	return '';
+});
+
+const handleSubmit = async () => {
+	if (!email.value) return;
+
+	loading.value = true;
+	emit('submit', email.value);
+
+	// Reset after emit (parent handles actual submission)
+	setTimeout(() => {
+		loading.value = false;
+	}, 1000);
+};
+</script>

package/app/components/X/Mark/Pattern/Bg.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="absolute inset-0 pointer-events-none"
+    :style="{ opacity: opacity }"
+  >
+    <div
+      class="absolute inset-0"
+      :style="{
+        backgroundImage: patternSvg,
+        maskImage: fade ? 'linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)' : undefined,
+        WebkitMaskImage: fade ? 'linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%)' : undefined,
+      }"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  /** Pattern type */
+  pattern: {
+    type: String,
+    default: 'dots',
+    validator: (v) => ['dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves', 'plaid', 'diagonalPlaid', 'hexagons', 'triangles', 'crosses', 'zigzag', 'diamonds'].includes(v),
+  },
+  /** Pattern opacity (0-1) */
+  opacity: {
+    type: Number,
+    default: 0.05,
+  },
+  /** Pattern color - 'auto' will use black in light mode and white in dark mode */
+  color: {
+    type: String,
+    default: 'auto',
+  },
+  /** Fade pattern at top and bottom edges */
+  fade: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+// Get color mode for auto color switching
+const colorMode = useColorMode()
+
+const patternSvg = computed(() => {
+  // Determine the color value based on props and color mode
+  let colorValue
+  if (props.color === 'auto' || props.color === 'currentColor') {
+    // Use white in dark mode, black in light mode
+    colorValue = colorMode.value === 'dark' ? 'rgb(255,255,255)' : 'rgb(0,0,0)'
+  } else {
+    colorValue = props.color
+  }
+  const color = encodeURIComponent(colorValue)
+
+  const patterns = {
+    dots: `url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="10" cy="10" r="1.5" fill="${color}"/%3E%3C/svg%3E')`,
+
+    grid: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0h40v40H0z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+
+    diagonal: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 40L40 0M-10 10L10 -10M30 50L50 30" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3C/svg%3E')`,
+
+    topography: `url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 50 Q25 30 50 50 T100 50" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3Cpath d="M0 70 Q25 50 50 70 T100 70" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3Cpath d="M0 30 Q25 10 50 30 T100 30" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+
+    circuit: `url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 30h20M40 30h20M30 0v20M30 40v20" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3Ccircle cx="30" cy="30" r="3" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+
+    waves: `url('data:image/svg+xml,%3Csvg width="120" height="40" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 20 Q30 0 60 20 T120 20" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+
+    plaid: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="40" height="40" fill="none"/%3E%3Cline x1="0" y1="10" x2="40" y2="10" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="0" y1="30" x2="40" y2="30" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="10" y1="0" x2="10" y2="40" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="30" y1="0" x2="30" y2="40" stroke="${color}" stroke-width="0.5"/%3E%3Cline x1="0" y1="20" x2="40" y2="20" stroke="${color}" stroke-width="0.25" opacity="0.5"/%3E%3Cline x1="20" y1="0" x2="20" y2="40" stroke="${color}" stroke-width="0.25" opacity="0.5"/%3E%3C/svg%3E')`,
+
+    diagonalPlaid: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0L40 40M-10 30L30 -10M10 50L50 10" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3Cpath d="M40 0L0 40M50 30L10 -10M30 50L-10 10" stroke="${color}" stroke-width="0.5" fill="none"/%3E%3C/svg%3E')`,
+
+    hexagons: `url('data:image/svg+xml,%3Csvg width="56" height="100" viewBox="0 0 56 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M28 0L56 14v28L28 56 0 42V14L28 0zM28 44L56 58v28L28 100 0 86V58L28 44z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+
+    triangles: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 40L20 0L40 40Z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+
+    crosses: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 15v10M15 20h10" stroke="${color}" stroke-width="0.75" fill="none"/%3E%3C/svg%3E')`,
+
+    zigzag: `url('data:image/svg+xml,%3Csvg width="40" height="20" viewBox="0 0 40 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 10L10 0L20 10L30 0L40 10" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+
+    diamonds: `url('data:image/svg+xml,%3Csvg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 0L40 20L20 40L0 20Z" fill="none" stroke="${color}" stroke-width="0.5"/%3E%3C/svg%3E')`,
+  }
+
+  return patterns[props.pattern] || patterns.dots
+})
+</script>

package/app/components/X/Mark/Pricing/Comparison.vue

@@ -0,0 +1,126 @@
+<template>
+	<div>
+		<!-- Badges (top position) -->
+		<div
+			v-if="badges?.length && badgesPosition === 'top'"
+			class="flex flex-wrap gap-4 mb-8"
+			:class="badgesAlignClasses"
+		>
+			<XMarkSocialProofBadge
+				v-for="badge in badges"
+				:key="typeof badge === 'string' ? badge : badge.preset || badge.label"
+				v-bind="getBadgeProps(badge)"
+				variant="text-muted"
+			/>
+		</div>
+
+		<!-- Pricing Table -->
+		<UPricingTable
+			:tiers="mappedTiers"
+			:sections="mappedSections"
+			:caption="caption"
+		/>
+
+		<!-- Badges (bottom position) -->
+		<div
+			v-if="badges?.length && badgesPosition === 'bottom'"
+			class="flex flex-wrap gap-4 mt-8"
+			:class="badgesAlignClasses"
+		>
+			<XMarkSocialProofBadge
+				v-for="badge in badges"
+				:key="typeof badge === 'string' ? badge : badge.preset || badge.label"
+				v-bind="getBadgeProps(badge)"
+				variant="text-muted"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Array of plans to compare */
+	plans: {
+		type: Array,
+		required: true,
+		// Each plan: { id, name, price?, highlighted?, button? }
+	},
+	/** Feature groups with features */
+	featureGroups: {
+		type: Array,
+		required: true,
+		// Each group: { name?, features: [{ name, tooltip?, values: { [planId]: boolean|string } }] }
+	},
+	/** Caption for the table */
+	caption: {
+		type: String,
+		default: undefined,
+	},
+	/** Social proof badge presets or custom badges */
+	badges: {
+		type: Array,
+		default: () => [],
+	},
+	/** Position of badges */
+	badgesPosition: {
+		type: String,
+		default: 'bottom',
+		validator: (v) => ['top', 'bottom'].includes(v),
+	},
+	/** Alignment of badges */
+	badgesAlign: {
+		type: String,
+		default: 'center',
+		validator: (v) => ['left', 'center', 'right'].includes(v),
+	},
+});
+
+const emit = defineEmits(['select']);
+
+// Map XMark plans to Nuxt UI tiers format
+const mappedTiers = computed(() => {
+	return props.plans.map((plan) => ({
+		id: plan.id,
+		title: plan.name,
+		description: plan.description,
+		price: plan.price,
+		highlight: plan.highlighted,
+		button: plan.button ? {
+			label: plan.button.label || 'Get Started',
+			color: plan.highlighted ? 'primary' : 'neutral',
+			variant: plan.highlighted ? 'solid' : 'outline',
+			onClick: () => emit('select', plan),
+		} : undefined,
+	}));
+});
+
+// Map XMark featureGroups to Nuxt UI sections format
+const mappedSections = computed(() => {
+	return props.featureGroups.map((group, index) => ({
+		id: `section-${index}`,
+		title: group.name,
+		features: group.features.map((feature) => ({
+			title: feature.name,
+			tiers: feature.values,
+		})),
+	}));
+});
+
+// Badge alignment classes
+const badgesAlignClasses = computed(() => {
+	const alignments = {
+		left: 'justify-start',
+		center: 'justify-center',
+		right: 'justify-end',
+	};
+	return alignments[props.badgesAlign];
+});
+
+// Get badge props (handles string presets and object configs)
+const getBadgeProps = (badge) => {
+	if (typeof badge === 'string') {
+		return { preset: badge };
+	}
+	return badge;
+};
+</script>

package/app/components/X/Mark/Pricing/Plans.vue

@@ -0,0 +1,181 @@
+<template>
+	<div>
+		<!-- Billing Toggle -->
+		<div v-if="hasBillingToggle" class="flex justify-center mb-12">
+			<div class="inline-flex items-center gap-4 rounded-full bg-neutral-100 dark:bg-neutral-900 p-1">
+				<button
+					class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
+					:class="billingPeriod === 'monthly' ? 'bg-white dark:bg-neutral-800 shadow-sm' : 'text-neutral-600 dark:text-neutral-400'"
+					@click="billingPeriod = 'monthly'"
+				>
+					Monthly
+				</button>
+				<button
+					class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
+					:class="billingPeriod === 'yearly' ? 'bg-white dark:bg-neutral-800 shadow-sm' : 'text-neutral-600 dark:text-neutral-400'"
+					@click="billingPeriod = 'yearly'"
+				>
+					Yearly
+					<span v-if="yearlyDiscount" class="ml-1 text-xs text-primary-500">
+						Save {{ yearlyDiscount }}%
+					</span>
+				</button>
+			</div>
+		</div>
+
+		<!-- Badges (top position) -->
+		<div
+			v-if="badges?.length && badgesPosition === 'top'"
+			class="flex flex-wrap gap-4 mb-8"
+			:class="badgesAlignClasses"
+		>
+			<XMarkSocialProofBadge
+				v-for="badge in badges"
+				:key="typeof badge === 'string' ? badge : badge.preset || badge.label"
+				v-bind="getBadgeProps(badge)"
+				variant="text-muted"
+			/>
+		</div>
+
+		<!-- Pricing Plans -->
+		<!-- Note: compact and scale on container are mutually exclusive -->
+		<UPricingPlans
+			:plans="mappedPlans"
+			:scale="scale && !compact"
+			:compact="compact && !scale"
+		>
+			<slot />
+		</UPricingPlans>
+
+		<!-- Badges (bottom position) -->
+		<div
+			v-if="badges?.length && badgesPosition === 'bottom'"
+			class="flex flex-wrap gap-4 mt-8"
+			:class="badgesAlignClasses"
+		>
+			<XMarkSocialProofBadge
+				v-for="badge in badges"
+				:key="typeof badge === 'string' ? badge : badge.preset || badge.label"
+				v-bind="getBadgeProps(badge)"
+				variant="text-muted"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Array of pricing plans */
+	plans: {
+		type: Array,
+		required: true,
+	},
+	/** Plan name to highlight (alternative to setting popular: true on plan) */
+	highlighted: {
+		type: String,
+		default: '',
+	},
+	/** Has monthly/yearly billing toggle */
+	hasBillingToggle: {
+		type: Boolean,
+		default: false,
+	},
+	/** Yearly discount percentage to display */
+	yearlyDiscount: {
+		type: Number,
+		default: 10,
+	},
+	/** Scale effect - enlarges plans with highlight */
+	scale: {
+		type: Boolean,
+		default: false,
+	},
+	/** Compact mode - no gap between plans */
+	compact: {
+		type: Boolean,
+		default: true,
+	},
+	/** Variant for all plans */
+	variant: {
+		type: String,
+		default: undefined,
+		validator: (v) => ['soft', 'solid', 'outline', 'subtle'].includes(v),
+	},
+	/** Social proof badge presets or custom badges */
+	badges: {
+		type: Array,
+		default: () => [],
+	},
+	/** Position of badges */
+	badgesPosition: {
+		type: String,
+		default: 'bottom',
+		validator: (v) => ['top', 'bottom'].includes(v),
+	},
+	/** Alignment of badges */
+	badgesAlign: {
+		type: String,
+		default: 'center',
+		validator: (v) => ['left', 'center', 'right'].includes(v),
+	},
+});
+
+const emit = defineEmits(['select']);
+
+const billingPeriod = ref('monthly');
+
+// Map XMark plan format to Nuxt UI format
+const mappedPlans = computed(() => {
+	return props.plans.map((plan) => {
+		// Get the price based on billing period
+		let price = plan.price;
+		let billingCycle = plan.period || '';
+
+		if (typeof plan.price === 'object') {
+			price = billingPeriod.value === 'yearly' ? plan.price.yearly : plan.price.monthly;
+			billingCycle = billingPeriod.value === 'yearly' ? '/year' : '/month';
+		} else if (props.hasBillingToggle && !plan.period) {
+			billingCycle = billingPeriod.value === 'yearly' ? '/year' : '/month';
+		}
+
+		// Determine if this plan should be highlighted
+		const isHighlighted = plan.popular || plan.name === props.highlighted;
+
+		// Determine if this plan should be scaled (only if scale prop is true on container)
+		const shouldScale = props.scale && isHighlighted;
+
+		return {
+			title: plan.name,
+			description: plan.description,
+			price: price,
+			billingCycle: billingCycle,
+			features: plan.features,
+			highlight: isHighlighted,
+			scale: shouldScale,
+			badge: isHighlighted ? 'Most Popular' : undefined,
+			button: {
+				label: plan.button?.label || 'Get Started',
+				onClick: () => emit('select', plan),
+			},
+		};
+	});
+});
+
+// Badge alignment classes
+const badgesAlignClasses = computed(() => {
+	const alignments = {
+		left: 'justify-start',
+		center: 'justify-center',
+		right: 'justify-end',
+	};
+	return alignments[props.badgesAlign];
+});
+
+// Get badge props (handles string presets and object configs)
+const getBadgeProps = (badge) => {
+	if (typeof badge === 'string') {
+		return { preset: badge };
+	}
+	return badge;
+};
+</script>

package/app/components/X/Mark/Privacy/CookieBanner.vue

@@ -0,0 +1,112 @@
+<template>
+	<Transition name="slide-up">
+		<div v-if="visible" class="fixed bottom-0 inset-x-0 z-50 p-4">
+			<UContainer>
+				<div
+					class="bg-white dark:bg-deep-900 rounded-xl shadow-2xl border border-default p-6"
+				>
+					<div class="flex flex-col lg:flex-row lg:items-center gap-4">
+						<div class="flex-1">
+							<h4 class="font-semibold">{{ title }}</h4>
+							<p class="text-sm text-muted mt-1">
+								{{ message }}
+								<NuxtLink
+									v-if="policyLink"
+									:to="policyLink"
+									class="text-primary hover:underline"
+								>
+									{{ policyLabel }}
+								</NuxtLink>
+							</p>
+						</div>
+
+						<div class="flex flex-wrap gap-3">
+							<UButton
+								v-if="hasCustomize"
+								label="Customize"
+								variant="ghost"
+								@click="$emit('customize')"
+							/>
+							<UButton
+								v-if="hasReject"
+								label="Reject All"
+								variant="outline"
+								@click="reject"
+							/>
+							<UButton label="Accept All" @click="accept" />
+						</div>
+					</div>
+				</div>
+			</UContainer>
+		</div>
+	</Transition>
+</template>
+
+<script setup>
+const props = defineProps({
+	title: {
+		type: String,
+		default: "We use cookies",
+	},
+	message: {
+		type: String,
+		default: "We use cookies to improve your experience on our site.",
+	},
+	policyLink: {
+		type: String,
+		default: "/privacy",
+	},
+	policyLabel: {
+		type: String,
+		default: "Learn more",
+	},
+	hasCustomize: {
+		type: Boolean,
+		default: false,
+	},
+	hasReject: {
+		type: Boolean,
+		default: true,
+	},
+	storageKey: {
+		type: String,
+		default: "cookie-consent",
+	},
+});
+
+const emit = defineEmits(["accept", "reject", "customize"]);
+
+const visible = ref(false);
+
+onMounted(() => {
+	const consent = localStorage.getItem(props.storageKey);
+	if (!consent) {
+		visible.value = true;
+	}
+});
+
+const accept = () => {
+	localStorage.setItem(props.storageKey, "accepted");
+	visible.value = false;
+	emit("accept");
+};
+
+const reject = () => {
+	localStorage.setItem(props.storageKey, "rejected");
+	visible.value = false;
+	emit("reject");
+};
+</script>
+
+<style scoped>
+.slide-up-enter-active,
+.slide-up-leave-active {
+	transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+	transform: translateY(100%);
+	opacity: 0;
+}
+</style>