@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.2

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

@@ -2,17 +2,27 @@
 	<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">
+			<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'"
+					: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'"
+					:class="
+						billingPeriod === 'yearly'
+							? 'bg-white dark:bg-neutral-800 shadow-sm'
+							: 'text-neutral-600 dark:text-neutral-400'
+					"
 					@click="billingPeriod = 'yearly'"
 				>
 					Yearly
@@ -65,15 +75,52 @@
 
 <script setup>
 const props = defineProps({
-	/** Array of pricing plans */
+	/** Array of pricing plans [{ name, price, period?, description?, features, button?, popular? }] */
 	plans: {
 		type: Array,
-		required: true,
+		default: () => [
+			{
+				name: "Starter",
+				price: "$9",
+				period: "/month",
+				description: "Perfect for individuals and small projects.",
+				features: ["5 projects", "10GB storage", "Email support"],
+				button: { label: "Get Started" },
+			},
+			{
+				name: "Pro",
+				price: "$29",
+				period: "/month",
+				description: "For growing teams that need more power.",
+				features: [
+					"Unlimited projects",
+					"100GB storage",
+					"Priority support",
+					"Advanced analytics",
+				],
+				button: { label: "Get Pro" },
+				popular: true,
+			},
+			{
+				name: "Enterprise",
+				price: "$99",
+				period: "/month",
+				description: "For large organizations with custom needs.",
+				features: [
+					"Unlimited everything",
+					"1TB storage",
+					"Dedicated support",
+					"Custom integrations",
+					"SLA guarantee",
+				],
+				button: { label: "Contact Sales" },
+			},
+		],
 	},
 	/** Plan name to highlight (alternative to setting popular: true on plan) */
 	highlighted: {
 		type: String,
-		default: '',
+		default: "",
 	},
 	/** Has monthly/yearly billing toggle */
 	hasBillingToggle: {
@@ -99,7 +146,7 @@ const props = defineProps({
 	variant: {
 		type: String,
 		default: undefined,
-		validator: (v) => ['soft', 'solid', 'outline', 'subtle'].includes(v),
+		validator: (v) => ["soft", "solid", "outline", "subtle"].includes(v),
 	},
 	/** Social proof badge presets or custom badges */
 	badges: {
@@ -109,33 +156,36 @@ const props = defineProps({
 	/** Position of badges */
 	badgesPosition: {
 		type: String,
-		default: 'bottom',
-		validator: (v) => ['top', 'bottom'].includes(v),
+		default: "bottom",
+		validator: (v) => ["top", "bottom"].includes(v),
 	},
 	/** Alignment of badges */
 	badgesAlign: {
 		type: String,
-		default: 'center',
-		validator: (v) => ['left', 'center', 'right'].includes(v),
+		default: "center",
+		validator: (v) => ["left", "center", "right"].includes(v),
 	},
 });
 
-const emit = defineEmits(['select']);
+const emit = defineEmits(["select"]);
 
-const billingPeriod = ref('monthly');
+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 || '';
+		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';
+		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';
+			billingCycle = billingPeriod.value === "yearly" ? "/year" : "/month";
 		}
 
 		// Determine if this plan should be highlighted
@@ -152,10 +202,10 @@ const mappedPlans = computed(() => {
 			features: plan.features,
 			highlight: isHighlighted,
 			scale: shouldScale,
-			badge: isHighlighted ? 'Most Popular' : undefined,
+			badge: isHighlighted ? "Most Popular" : undefined,
 			button: {
-				label: plan.button?.label || 'Get Started',
-				onClick: () => emit('select', plan),
+				label: plan.button?.label || "Get Started",
+				onClick: () => emit("select", plan),
 			},
 		};
 	});
@@ -164,16 +214,16 @@ const mappedPlans = computed(() => {
 // Badge alignment classes
 const badgesAlignClasses = computed(() => {
 	const alignments = {
-		left: 'justify-start',
-		center: 'justify-center',
-		right: 'justify-end',
+		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') {
+	if (typeof badge === "string") {
 		return { preset: badge };
 	}
 	return badge;

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

@@ -9,14 +9,20 @@
 					class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 lg:-translate-x-16 w-11 h-11 flex items-center justify-center rounded-full bg-white dark:bg-neutral-800 shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-300 opacity-60 hover:opacity-100"
 					@click="prev"
 				>
-					<UIcon name="i-lucide-chevron-left" class="w-5 h-5 text-neutral-700 dark:text-neutral-300" />
+					<UIcon
+						name="i-lucide-chevron-left"
+						class="w-5 h-5 text-neutral-700 dark:text-neutral-300"
+					/>
 				</button>
 				<button
 					v-if="testimonials.length > 1"
 					class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 lg:translate-x-16 w-11 h-11 flex items-center justify-center rounded-full bg-white dark:bg-neutral-800 shadow-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-300 opacity-60 hover:opacity-100"
 					@click="next"
 				>
-					<UIcon name="i-lucide-chevron-right" class="w-5 h-5 text-neutral-700 dark:text-neutral-300" />
+					<UIcon
+						name="i-lucide-chevron-right"
+						class="w-5 h-5 text-neutral-700 dark:text-neutral-300"
+					/>
 				</button>
 
 				<!-- Quote Icon -->
@@ -26,25 +32,38 @@
 
 				<!-- Quote with crossfade -->
 				<Transition name="fade" mode="out-in">
-					<blockquote :key="currentIndex" class="xText-headline text-neutral-900 dark:text-white xText-balance">
+					<blockquote
+						:key="currentIndex"
+						class="xText-headline text-neutral-900 dark:text-white xText-balance"
+					>
 						"{{ currentTestimonial.quote }}"
 					</blockquote>
 				</Transition>
 
 				<!-- Stars -->
-				<div v-if="hasStars && currentTestimonial.rating" class="flex justify-center gap-1 mt-6">
+				<div
+					v-if="hasStars && currentTestimonial.rating"
+					class="flex justify-center gap-1 mt-6"
+				>
 					<UIcon
 						v-for="i in 5"
 						:key="i"
 						name="i-lucide-star"
 						class="w-5 h-5"
-						:class="i <= currentTestimonial.rating ? 'text-yellow-400' : 'text-neutral-300 dark:text-neutral-600'"
+						:class="
+							i <= currentTestimonial.rating
+								? 'text-yellow-400'
+								: 'text-neutral-300 dark:text-neutral-600'
+						"
 					/>
 				</div>
 
 				<!-- Attribution with crossfade -->
 				<Transition name="fade" mode="out-in">
-					<div :key="currentIndex" class="mt-8 flex items-center justify-center gap-4">
+					<div
+						:key="currentIndex"
+						class="mt-8 flex items-center justify-center gap-4"
+					>
 						<div class="relative">
 							<img
 								v-if="currentTestimonial.avatar"
@@ -52,7 +71,9 @@
 								:alt="currentTestimonial.name"
 								class="w-14 h-14 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800 shadow-lg"
 							/>
-							<div class="absolute inset-0 rounded-full ring-2 ring-primary-500/20 ring-offset-2 ring-offset-white dark:ring-offset-neutral-950" />
+							<div
+								class="absolute inset-0 rounded-full ring-2 ring-primary-500/20 ring-offset-2 ring-offset-white dark:ring-offset-neutral-950"
+							/>
 						</div>
 						<div class="text-left">
 							<p class="font-semibold text-neutral-900 dark:text-white">
@@ -83,7 +104,11 @@
 						v-for="(_, index) in testimonials"
 						:key="index"
 						class="w-2 h-2 rounded-full transition-colors duration-300"
-						:class="index === currentIndex ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600'"
+						:class="
+							index === currentIndex
+								? 'bg-primary-500'
+								: 'bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600'
+						"
 						@click="goToIndex(index)"
 					/>
 				</div>
@@ -106,7 +131,11 @@
 							:key="i"
 							name="i-lucide-star"
 							class="w-5 h-5"
-							:class="i <= (testimonial.rating || 5) ? 'text-yellow-400' : 'text-neutral-300 dark:text-neutral-600'"
+							:class="
+								i <= (testimonial.rating || 5)
+									? 'text-yellow-400'
+									: 'text-neutral-300 dark:text-neutral-600'
+							"
 						/>
 					</div>
 
@@ -137,7 +166,9 @@
 							</p>
 							<p class="text-xs text-neutral-500">
 								{{ testimonial.title }}
-								<span v-if="testimonial.company"> at {{ testimonial.company }}</span>
+								<span v-if="testimonial.company">
+									at {{ testimonial.company }}</span
+								>
 							</p>
 						</div>
 					</div>
@@ -150,7 +181,10 @@
 			<div class="relative overflow-hidden">
 				<div
 					class="flex transition-transform duration-500"
-					:style="{ transform: `translateX(-${currentIndex * 100}%)`, transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }"
+					:style="{
+						transform: `translateX(-${currentIndex * 100}%)`,
+						transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+					}"
 				>
 					<article
 						v-for="testimonial in testimonials"
@@ -165,7 +199,11 @@
 									:key="i"
 									name="i-lucide-star"
 									class="w-5 h-5"
-									:class="i <= (testimonial.rating || 5) ? 'text-yellow-400' : 'text-neutral-300'"
+									:class="
+										i <= (testimonial.rating || 5)
+											? 'text-yellow-400'
+											: 'text-neutral-300'
+									"
 								/>
 							</div>
 
@@ -220,7 +258,11 @@
 						v-for="(_, index) in testimonials"
 						:key="index"
 						class="w-2 h-2 rounded-full transition-colors"
-						:class="index === currentIndex ? 'bg-primary-500' : 'bg-neutral-300 dark:bg-neutral-700'"
+						:class="
+							index === currentIndex
+								? 'bg-primary-500'
+								: 'bg-neutral-300 dark:bg-neutral-700'
+						"
 						@click="goToIndex(index)"
 					/>
 				</div>
@@ -231,19 +273,44 @@
 
 <script setup>
 // Initialize scroll reveal animations
-useScrollReveal()
+useScrollReveal();
 
 const props = defineProps({
-	/** Array of testimonials */
+	/** Array of testimonials [{ quote, name, title?, company?, avatar?, logo?, rating? }] */
 	testimonials: {
 		type: Array,
-		required: true,
+		default: () => [
+			{
+				quote:
+					"This product completely transformed how our team works. Highly recommended.",
+				name: "Alex Johnson",
+				title: "CEO",
+				company: "Acme Inc",
+				rating: 5,
+			},
+			{
+				quote:
+					"The best investment we made this year. Setup was a breeze and results were immediate.",
+				name: "Sarah Chen",
+				title: "CTO",
+				company: "TechCorp",
+				rating: 5,
+			},
+			{
+				quote:
+					"Outstanding support and a product that actually delivers on its promises.",
+				name: "Marcus Williams",
+				title: "Product Manager",
+				company: "StartupXYZ",
+				rating: 5,
+			},
+		],
 	},
 	/** Display layout */
 	layout: {
 		type: String,
-		default: 'featured',
-		validator: (v) => ['featured', 'grid', 'carousel'].includes(v),
+		default: "featured",
+		validator: (v) => ["featured", "grid", "carousel"].includes(v),
 	},
 	/** Show star ratings */
 	hasStars: {
@@ -280,9 +347,10 @@ const next = () => {
 };
 
 const prev = () => {
-	currentIndex.value = currentIndex.value === 0
-		? props.testimonials.length - 1
-		: currentIndex.value - 1;
+	currentIndex.value =
+		currentIndex.value === 0
+			? props.testimonials.length - 1
+			: currentIndex.value - 1;
 	resetAutoplay();
 };