@myelophone/nuxt 0.18.2

package/app/components/view/CountdownTimer.vue

@@ -0,0 +1,184 @@
+<template>
+	<div
+		data-nosnippet
+		:class="[
+			!isMounted
+				? 'opacity-0 select-none pointer-events-none'
+				: 'opacity-100',
+		]"
+		class="transition-opacity duration-300"
+	>
+		<slot
+			:days="timeLeft.days"
+			:hours="timeLeft.hours"
+			:minutes="timeLeft.minutes"
+			:seconds="timeLeft.seconds"
+			:daysLabel="labels.days"
+			:hoursLabel="labels.hours"
+			:minutesLabel="labels.minutes"
+			:secondsLabel="labels.seconds"
+		>
+			<div class="countdown-default">
+				{{ timeLeft.days }} {{ labels.days }} {{ timeLeft.hours }}:{{
+					timeLeft.minutes
+				}}:{{ timeLeft.seconds }}
+			</div>
+		</slot>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	targetDate: string | Date;
+	timezone?: string;
+}>();
+
+const emit = defineEmits(["finish"]);
+
+const { t } = useMultiLang(["times"]);
+const pinia = useNuxtApp().$pinia;
+const settingsStore = useSettingsStore(pinia);
+
+const isMounted = ref(false);
+const timeLeft = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+let timer: any = null;
+
+const getLabel = (value: number, key: string) => {
+	const locale = settingsStore.currentLocale || "en";
+	try {
+		const pr = new Intl.PluralRules(locale);
+		const rule = pr.select(value);
+		let suffix = "5";
+
+		if (rule === "one") {
+			suffix = "1";
+		} else if (rule === "few") {
+			suffix = "";
+		} else if (rule === "many") {
+			suffix = "5";
+		} else if (locale === "en" && rule === "other") {
+			suffix = "2";
+		}
+		return t(`times.${key}${suffix}`);
+	} catch (e) {
+		console.error("Pluralization error", e);
+		return "";
+	}
+};
+
+const labels = computed(() => ({
+	days: getLabel(timeLeft.value.days, "day"),
+	hours: getLabel(timeLeft.value.hours, "hour"),
+	minutes: getLabel(timeLeft.value.minutes, "minute"),
+	seconds: getLabel(timeLeft.value.seconds, "second"),
+}));
+
+const getTargetTime = () => {
+	if (props.targetDate instanceof Date) return props.targetDate.getTime();
+
+	const parts = props.targetDate.match(
+		/^(\d{2})[./-](\d{2})[./-](\d{4})(?:\s+(\d{2}):(\d{2}))?/,
+	);
+	if (!parts) return new Date(props.targetDate).getTime();
+
+	const [_, d, m, y, h, min] = parts;
+
+	const date = new Date(
+		Date.UTC(
+			Number(y),
+			Number(m) - 1,
+			Number(d),
+			Number(h || 0),
+			Number(min || 0),
+		),
+	);
+
+	if (props.timezone) {
+		try {
+			const formatter = new Intl.DateTimeFormat("en-US", {
+				timeZone: props.timezone,
+				year: "numeric",
+				month: "numeric",
+				day: "numeric",
+				hour: "numeric",
+				minute: "numeric",
+				second: "numeric",
+				hour12: false,
+			});
+
+			const p = formatter.formatToParts(date);
+			const getP = (type: string) =>
+				parseInt(p.find((x) => x.type === type)?.value || "0");
+
+			const tzDate = new Date(
+				Date.UTC(
+					getP("year"),
+					getP("month") - 1,
+					getP("day"),
+					getP("hour"),
+					getP("minute"),
+					getP("second"),
+				),
+			);
+
+			return date.getTime() - (tzDate.getTime() - date.getTime());
+		} catch (e) {
+			console.warn("Invalid timezone, falling back to local");
+		}
+	}
+
+	return new Date(
+		Number(y),
+		Number(m) - 1,
+		Number(d),
+		Number(h || 0),
+		Number(min || 0),
+	).getTime();
+};
+
+const updateCountdown = () => {
+	const target = getTargetTime();
+	const now = Date.now();
+	const distance = target - now;
+
+	if (distance <= 0) {
+		timeLeft.value = { days: 0, hours: 0, minutes: 0, seconds: 0 };
+		if (timer) clearInterval(timer);
+		emit("finish");
+		return;
+	}
+
+	timeLeft.value = {
+		days: Math.floor(distance / (1000 * 60 * 60 * 24)),
+		hours: Math.floor(
+			(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+		),
+		minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
+		seconds: Math.floor((distance % (1000 * 60)) / 1000),
+	};
+};
+
+onMounted(() => {
+	updateCountdown();
+	timer = setInterval(updateCountdown, 1000);
+	setTimeout(() => {
+		isMounted.value = true;
+	}, 50);
+});
+
+onBeforeUnmount(() => {
+	if (timer) clearInterval(timer);
+});
+
+watch(
+	[() => props.targetDate, () => settingsStore.currentLocale],
+	updateCountdown,
+);
+</script>
+
+<style scoped>
+.countdown-default {
+	font-feature-settings: "tnum";
+	font-variant-numeric: tabular-nums;
+}
+</style>

package/app/components/view/CreativeCTA.vue

@@ -0,0 +1,143 @@
+<template>
+	<section
+		class="relative w-full overflow-hidden rounded-2xl isolate shadow-2xl group"
+		:class="[
+			backgroundImage
+				? 'bg-gray-900'
+				: 'bg-(--ui-bg) ring-1 ring-(--ui-text)/10',
+		]"
+	>
+		<div v-if="backgroundImage" class="absolute inset-0 z-0">
+			<img
+				:src="backgroundImage"
+				alt=""
+				class="w-full h-full object-cover transition-transform duration-700 will-change-transform group-hover:scale-105"
+			/>
+			<div
+				class="absolute inset-0 transition-opacity duration-500"
+				:class="{
+					'bg-linear-to-r from-black/90 via-black/50 to-transparent':
+						align === 'left',
+					'bg-linear-to-l from-black/90 via-black/50 to-transparent':
+						align === 'right',
+					'bg-linear-to-t from-black/90 via-black/50 to-black/20':
+						align === 'center',
+				}"
+			></div>
+		</div>
+
+		<div v-else class="absolute inset-0 z-0 overflow-hidden">
+			<div
+				class="absolute inset-0 opacity-[0.05]"
+				style="
+					background-image: radial-gradient(
+						var(--ui-text) 1px,
+						transparent 1px
+					);
+					background-size: 24px 24px;
+				"
+			></div>
+
+			<div
+				class="absolute -top-24 -right-24 w-96 h-96 bg-(--ui-text)/5 rounded-full blur-3xl"
+			></div>
+			<div
+				class="absolute -bottom-24 -left-24 w-96 h-96 bg-(--ui-text)/5 rounded-full blur-3xl"
+			></div>
+		</div>
+
+		<div
+			class="relative z-10 flex flex-col px-6 py-12 md:px-12 md:py-20"
+			:class="{
+				'items-start text-left': align === 'left',
+				'items-center text-center': align === 'center',
+				'items-end text-right': align === 'right',
+				'text-white': backgroundImage,
+				'text-(--ui-text)': !backgroundImage,
+			}"
+		>
+			<div class="max-w-4xl space-y-4">
+				<slot name="title">
+					<h2
+						class="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl leading-[1.2]"
+						:class="{ 'drop-shadow-md': backgroundImage }"
+					>
+						{{ title }}
+					</h2>
+				</slot>
+
+				<slot name="description">
+					<p
+						v-if="description"
+						class="text-base md:text-lg opacity-90 leading-relaxed max-w-2xl"
+						:class="{
+							'mr-auto': align === 'left',
+							'mx-auto': align === 'center',
+							'ml-auto': align === 'right',
+						}"
+					>
+						{{ description }}
+					</p>
+				</slot>
+			</div>
+
+			<div
+				class="flex flex-col w-full gap-4 mt-8 sm:flex-row sm:w-auto"
+				:class="{
+					'sm:self-start': align === 'left',
+					'sm:self-center': align === 'center',
+					'sm:self-end': align === 'right',
+				}"
+			>
+				<slot name="actions">
+					<NuxtLink
+						v-if="primaryText"
+						:to="primaryLink"
+						class="inline-flex items-center justify-center px-6 py-3.5 text-sm font-bold uppercase tracking-wider rounded-lg transition-all duration-200 shadow-lg"
+						:class="[
+							backgroundImage
+								? 'bg-white text-black hover:bg-gray-100'
+								: 'bg-(--ui-text) text-(--ui-bg) hover:opacity-90',
+						]"
+					>
+						{{ primaryText }}
+					</NuxtLink>
+
+					<NuxtLink
+						v-if="secondaryText"
+						:to="secondaryLink"
+						class="inline-flex items-center justify-center px-6 py-3.5 text-sm font-bold uppercase tracking-wider rounded-lg transition-all duration-200 border-2 hover:bg-white/10"
+						:class="[
+							backgroundImage
+								? 'border-white/30 text-white'
+								: 'border-(--ui-text)/20 text-(--ui-text)',
+						]"
+					>
+						{{ secondaryText }}
+					</NuxtLink>
+				</slot>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	title?: string;
+	description?: string;
+	primaryText?: string;
+	primaryLink?: string;
+	secondaryText?: string;
+	secondaryLink?: string;
+	backgroundImage?: string;
+	align?: "left" | "center" | "right";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: "Ready to start?",
+	description: "",
+	primaryLink: "/",
+	secondaryLink: "/",
+	align: "left",
+});
+</script>

package/app/components/view/CurrencySelect.vue

@@ -0,0 +1,254 @@
+<template>
+	<div
+		ref="selectWrapper"
+		class="ui-currency-select"
+		:class="[
+			containerClass,
+			{
+				'is-open': isOpen,
+				'drop-up': isDropUp,
+				'drop-right': isDropRight,
+			},
+		]"
+		@mousedown.stop
+	>
+		<button
+			type="button"
+			class="currency-trigger"
+			:class="triggerClass"
+			@click.stop="toggleDropdown"
+		>
+			<slot name="trigger">
+				<span class="currency-content">
+					<span class="currency-symbol">{{
+						getSymbol(cart.currency)
+					}}</span>
+					<span class="currency-code">{{ cart.currency }}</span>
+				</span>
+			</slot>
+			<span class="currency-arrow"></span>
+		</button>
+
+		<div v-if="isOpen" class="currency-dropdown" :class="dropdownClass">
+			<div class="currency-dropdown-scroll">
+				<button
+					v-for="c in currencies"
+					:key="c"
+					type="button"
+					class="currency-option"
+					:class="[
+						optionClass,
+						{ 'is-selected': cart.currency === c },
+					]"
+					@click="selectCurrency(c)"
+				>
+					<span class="currency-symbol-mini">{{ getSymbol(c) }}</span>
+					<span class="currency-code">{{ c }}</span>
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	containerClass?: string;
+	triggerClass?: string;
+	dropdownClass?: string;
+	optionClass?: string;
+}>();
+
+const pinia = useNuxtApp().$pinia;
+const cart = useCartStore(pinia);
+
+const currencySymbols: Record<string, string> = {
+	USD: "$",
+	EUR: "€",
+	GBP: "£",
+	JPY: "¥",
+	CHF: "₣",
+	CNY: "¥",
+	RUB: "₽",
+	PLN: "zł",
+	UAH: "₴",
+	KZT: "₸",
+	BYN: "Br",
+	CZK: "Kč",
+	HUF: "Ft",
+	RON: "L",
+	TRY: "₺",
+	AED: "د.إ",
+	ILS: "₪",
+	CAD: "C$",
+	AUD: "A$",
+	INR: "₹",
+	KRW: "₩",
+	BRL: "R$",
+	THB: "฿",
+	GEL: "₾",
+	AMD: "֏",
+};
+
+const getSymbol = (code: string) => currencySymbols[code] || "";
+
+const currencies = computed(() => Object.keys(cart.exchangeRates || {}));
+
+const isOpen = ref(false);
+const isDropUp = ref(false);
+const isDropRight = ref(false);
+const selectWrapper = ref<HTMLElement | null>(null);
+
+const toggleDropdown = () => {
+	if (!isOpen.value) checkPosition();
+	isOpen.value = !isOpen.value;
+};
+
+const checkPosition = () => {
+	if (!selectWrapper.value) return;
+	const rect = selectWrapper.value.getBoundingClientRect();
+	isDropUp.value = window.innerHeight - rect.bottom < 200;
+	isDropRight.value = window.innerWidth - rect.left < 150;
+};
+
+const selectCurrency = (currency: string) => {
+	cart.setCurrency(currency);
+	isOpen.value = false;
+};
+
+const close = () => {
+	isOpen.value = false;
+};
+
+onMounted(() => {
+	window.addEventListener("click", close);
+	window.addEventListener("resize", close);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener("click", close);
+	window.removeEventListener("resize", close);
+});
+</script>
+
+<style scoped>
+.ui-currency-select {
+	position: relative;
+	display: inline-block;
+	--bg: var(--ui-bg);
+	--brd: var(--ui-border);
+	--txt: var(--ui-text);
+	--ui-hover: rgba(128, 128, 128, 0.1);
+	min-width: 6rem;
+}
+
+.currency-trigger {
+	cursor: pointer;
+	background: var(--bg);
+	border: 1px solid var(--brd);
+	color: var(--txt);
+	padding: 8px 14px;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	text-transform: uppercase;
+	font-family: inherit;
+	transition: background 0.2s;
+	min-width: 6rem;
+}
+
+.currency-content {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+}
+
+.currency-code,
+.currency-symbol,
+.currency-symbol-mini {
+	font-size: 1rem;
+	line-height: 1;
+	font-weight: 400;
+}
+
+.currency-symbol {
+	opacity: 0.6;
+}
+
+.currency-symbol-mini {
+	width: 20px;
+	display: inline-block;
+	opacity: 0.5;
+}
+
+.currency-trigger:hover {
+	background: var(--ui-hover);
+}
+
+.currency-arrow {
+	width: 6px;
+	height: 6px;
+	border-right: 1px solid var(--txt);
+	border-bottom: 1px solid var(--txt);
+	transform: rotate(45deg) translateY(-2px);
+	opacity: 0.6;
+}
+
+.is-open .currency-arrow {
+	transform: rotate(-135deg) translateY(1px);
+}
+
+.currency-dropdown {
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	z-index: 1000;
+	background: var(--bg);
+	border: 1px solid var(--brd);
+	min-width: 100%;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+.drop-right .currency-dropdown {
+	left: auto;
+	right: 0;
+}
+.drop-up .currency-dropdown {
+	top: auto;
+	bottom: calc(100% + 4px);
+}
+
+.currency-option {
+	width: 100%;
+	padding: 12px 14px;
+	border: none;
+	background: transparent;
+	color: var(--txt);
+	text-align: left;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	text-transform: uppercase;
+	transition: all 0.2s;
+}
+
+.currency-option:hover {
+	background: var(--ui-hover);
+}
+
+.currency-option.is-selected {
+	background: var(--txt);
+	color: var(--bg);
+}
+
+.currency-option.is-selected .currency-symbol-mini {
+	opacity: 1;
+	color: inherit;
+}
+
+@media (prefers-color-scheme: light) {
+	.ui-currency-select {
+		--ui-hover: rgba(0, 0, 0, 0.05);
+	}
+}
+</style>

package/app/components/view/FeatureBoxGrid.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { NuxtLink } from "#components";
+
+interface FeatureItem {
+	icon?: string;
+	title?: string;
+	subtitle?: string;
+	description?: string;
+	to?: string;
+	iconClass?: string;
+}
+
+interface Props {
+	items: FeatureItem[];
+	columns?: 2 | 3 | 4;
+	vertical?: boolean;
+	iconSize?: number;
+	descAlign?: "left" | "center" | "right" | "justify";
+	defaultIconClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	columns: 3,
+	vertical: false,
+	iconSize: 42,
+	descAlign: "left",
+	defaultIconClass: "text-primary",
+});
+
+const gridColsClass = computed(() => {
+	switch (props.columns) {
+		case 2:
+			return "md:grid-cols-2";
+		case 4:
+			return "md:grid-cols-4";
+		default:
+			return "md:grid-cols-3";
+	}
+});
+
+const shadowStyles = `
+  shadow-[0px_0px_30px_0px_rgba(0,0,0,0.05)]
+  hover:shadow-[0px_0px_30px_0px_rgba(0,0,0,0.15)]
+  dark:shadow-none
+  dark:hover:shadow-[0px_0px_15px_0px_rgba(255,255,255,0.05)]
+  transition-all duration-300 ease-linear
+`;
+
+const cardClass = `
+  relative flex flex-col h-full
+  bg-white dark:bg-neutral-900
+  rounded-xl border border-transparent dark:border-neutral-800
+  overflow-hidden
+  ${shadowStyles}
+`;
+
+const descAlignClass = computed(() => {
+	switch (props.descAlign) {
+		case "center":
+			return "text-center";
+		case "right":
+			return "text-right";
+		case "justify":
+			return "text-justify";
+		default:
+			return "text-left";
+	}
+});
+</script>
+
+<template>
+	<div class="w-full">
+		<div class="grid grid-cols-1 gap-6" :class="gridColsClass">
+			<component
+				:is="item.to ? NuxtLink : 'div'"
+				v-for="(item, index) in items"
+				:key="index"
+				:to="item.to"
+				:class="cardClass"
+				class="group p-6"
+			>
+				<div
+					v-if="item.icon || item.title"
+					class="w-full"
+					:class="
+						vertical
+							? 'flex flex-col items-center text-center gap-3'
+							: 'grid grid-cols-[auto_1fr] items-center gap-4 text-left'
+					"
+				>
+					<div
+						v-if="item.icon"
+						class="flex items-center justify-center leading-none"
+						:class="item.iconClass || defaultIconClass"
+						:style="{
+							width: vertical ? 'auto' : `${iconSize}px`,
+							height: `${iconSize}px`,
+						}"
+					>
+						<UiIcon
+							:name="item.icon"
+							:size="iconSize"
+							class="block"
+						/>
+					</div>
+
+					<div
+						v-if="item.title"
+						class="flex flex-col justify-center min-w-0"
+						:class="vertical ? 'items-center' : 'items-start'"
+					>
+						<p
+							class="text-lg font-semibold text-neutral-900 dark:text-white leading-none pb-0.5"
+						>
+							{{ item.title }}
+						</p>
+
+						<p
+							v-if="item.subtitle"
+							class="text-sm text-neutral-500 dark:text-neutral-400 mt-1.5 leading-none font-medium"
+						>
+							{{ item.subtitle }}
+						</p>
+					</div>
+				</div>
+
+				<hr
+					v-if="(item.icon || item.title) && item.description"
+					class="w-[80%] mx-auto my-5 border-t border-neutral-100 dark:border-neutral-800 group-hover:border-neutral-200 dark:group-hover:border-neutral-700 transition-colors duration-300"
+				/>
+
+				<div
+					v-if="item.description"
+					class="text-sm text-neutral-500 dark:text-neutral-400 leading-relaxed grow"
+					:class="descAlignClass"
+				>
+					{{ item.description }}
+				</div>
+			</component>
+		</div>
+	</div>
+</template>