@xenterprises/nuxt-x-marketing 1.0.1 → 1.0.2

package/app/components/X/Mark/Directory/CategoryHero.vue

@@ -0,0 +1,124 @@
+<template>
+	<section
+		class="relative overflow-hidden bg-neutral-900 dark:bg-neutral-950 py-16 sm:py-20 lg:py-24"
+	>
+		<!-- Subtle background pattern -->
+		<XMarkPatternBg
+			pattern="dots"
+			:opacity="0.04"
+			class="absolute inset-0 pointer-events-none"
+		/>
+
+		<!-- Gradient overlay -->
+		<div
+			class="absolute inset-0 bg-gradient-to-b from-primary-900/20 via-transparent to-neutral-900/60 pointer-events-none"
+		/>
+
+		<div
+			class="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 text-center xFadeUp"
+		>
+			<!-- Category Icon -->
+			<div
+				v-if="category.icon"
+				class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500/20 border border-primary-500/30 mb-6"
+			>
+				<UIcon :name="category.icon" class="w-8 h-8 text-primary-400" />
+			</div>
+
+			<!-- Category Name -->
+			<h1 class="xText-headline text-white">
+				{{ category.name }}
+			</h1>
+
+			<!-- Count -->
+			<p
+				v-if="category.count !== undefined"
+				class="mt-3 text-sm font-medium text-neutral-400 uppercase tracking-wider"
+			>
+				{{ category.count.toLocaleString() }} listing{{
+					category.count !== 1 ? "s" : ""
+				}}
+			</p>
+
+			<!-- Description -->
+			<p
+				v-if="category.description"
+				class="mt-4 text-lg text-neutral-300 leading-relaxed max-w-xl mx-auto"
+			>
+				{{ category.description }}
+			</p>
+
+			<!-- Search Input -->
+			<div v-if="hasSearch" class="mt-8 max-w-lg mx-auto">
+				<div class="relative">
+					<UInput
+						v-model="searchQuery"
+						:placeholder="searchPlaceholder"
+						icon="i-lucide-search"
+						size="lg"
+						class="w-full"
+						:ui="{
+							base: 'bg-white/10 dark:bg-white/5 border-white/20 dark:border-white/10 text-white placeholder:text-neutral-400 focus:border-primary-400 focus:ring-primary-400/20',
+						}"
+						@keyup.enter="emitSearch"
+					/>
+					<UButton
+						v-if="searchQuery"
+						icon="i-lucide-x"
+						color="neutral"
+						variant="ghost"
+						size="sm"
+						class="absolute right-2 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white"
+						@click="clearSearch"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+// Initialize scroll reveal animations
+useScrollReveal();
+
+const props = defineProps({
+	/** Category object { name, icon?, count?, description? } */
+	category: {
+		type: Object,
+		default: () => ({
+			name: "All Listings",
+			icon: "i-lucide-grid",
+			count: 0,
+			description: "Browse all listings in this category.",
+		}),
+	},
+	/** Show search input */
+	hasSearch: {
+		type: Boolean,
+		default: true,
+	},
+	/** Search input placeholder */
+	searchPlaceholder: {
+		type: String,
+		default: "Search listings...",
+	},
+});
+
+const emit = defineEmits(["search"]);
+
+const searchQuery = ref("");
+
+const emitSearch = () => {
+	emit("search", searchQuery.value);
+};
+
+const clearSearch = () => {
+	searchQuery.value = "";
+	emit("search", "");
+};
+
+// Emit on each keystroke for live filtering
+watch(searchQuery, (val) => {
+	emit("search", val);
+});
+</script>

package/app/components/X/Mark/Directory/ListingCard.vue

@@ -0,0 +1,336 @@
+<template>
+	<!-- Card Layout -->
+	<article
+		v-if="layout === 'card'"
+		class="group relative flex flex-col rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-[0_12px_40px_rgba(128,128,128,0.15)] dark:hover:shadow-[0_12px_40px_rgba(255,255,255,0.07)]"
+	>
+		<!-- Badge -->
+		<div v-if="showBadge && listing.badge" class="absolute top-3 right-3 z-10">
+			<UBadge
+				:label="listing.badge"
+				:color="badgeColor"
+				variant="solid"
+				size="sm"
+			/>
+		</div>
+
+		<!-- Logo / Header -->
+		<div class="p-5 pb-0 flex items-start gap-4">
+			<figure
+				v-if="listing.logo"
+				class="w-14 h-14 rounded-xl overflow-hidden flex-shrink-0 border border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800"
+			>
+				<img
+					:src="listing.logo"
+					:alt="listing.name"
+					class="w-full h-full object-contain"
+				/>
+			</figure>
+			<div
+				v-else
+				class="w-14 h-14 rounded-xl flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"
+			>
+				<span class="text-primary-600 dark:text-primary-400 font-bold text-xl">
+					{{ listing.name.charAt(0) }}
+				</span>
+			</div>
+
+			<div class="flex-1 min-w-0 pt-1">
+				<h3
+					class="font-semibold text-neutral-900 dark:text-white truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors"
+				>
+					{{ listing.name }}
+				</h3>
+				<p
+					v-if="listing.category"
+					class="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5"
+				>
+					{{ listing.category }}
+				</p>
+			</div>
+		</div>
+
+		<!-- Description -->
+		<div class="px-5 pt-3 flex-1">
+			<p
+				v-if="listing.description"
+				class="text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2"
+			>
+				{{ listing.description }}
+			</p>
+		</div>
+
+		<!-- Tags -->
+		<div
+			v-if="showTags && listing.tags?.length"
+			class="px-5 pt-3 flex flex-wrap gap-1.5"
+		>
+			<UBadge
+				v-for="tag in listing.tags.slice(0, 4)"
+				:key="tag"
+				:label="tag"
+				variant="subtle"
+				color="neutral"
+				size="xs"
+			/>
+		</div>
+
+		<!-- Rating -->
+		<div
+			v-if="showRating && listing.rating"
+			class="px-5 pt-3 flex items-center gap-2"
+		>
+			<div class="flex items-center gap-0.5">
+				<UIcon
+					v-for="i in 5"
+					:key="i"
+					name="i-lucide-star"
+					class="w-3.5 h-3.5"
+					:class="
+						i <= Math.round(listing.rating)
+							? 'text-yellow-400'
+							: 'text-neutral-300 dark:text-neutral-600'
+					"
+				/>
+			</div>
+			<span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+				{{ listing.rating.toFixed(1) }}
+			</span>
+			<span
+				v-if="listing.reviewCount"
+				class="text-xs text-neutral-500 dark:text-neutral-400"
+			>
+				({{ listing.reviewCount }})
+			</span>
+		</div>
+
+		<!-- CTA -->
+		<div class="p-5 pt-4 mt-auto">
+			<UButton
+				:to="listing.to || '#'"
+				:label="ctaLabel"
+				color="primary"
+				variant="outline"
+				size="sm"
+				block
+				class="justify-center"
+			/>
+		</div>
+	</article>
+
+	<!-- Row Layout -->
+	<article
+		v-else-if="layout === 'row'"
+		class="group flex items-center gap-4 p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-all duration-300 ease-out hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(128,128,128,0.12)] dark:hover:shadow-[0_8px_24px_rgba(255,255,255,0.06)]"
+	>
+		<!-- Logo -->
+		<figure
+			v-if="listing.logo"
+			class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 border border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800"
+		>
+			<img
+				:src="listing.logo"
+				:alt="listing.name"
+				class="w-full h-full object-contain"
+			/>
+		</figure>
+		<div
+			v-else
+			class="w-12 h-12 rounded-lg flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"
+		>
+			<span class="text-primary-600 dark:text-primary-400 font-bold text-lg">
+				{{ listing.name.charAt(0) }}
+			</span>
+		</div>
+
+		<!-- Content -->
+		<div class="flex-1 min-w-0">
+			<div class="flex items-center gap-2 flex-wrap">
+				<h3
+					class="font-semibold text-neutral-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors"
+				>
+					{{ listing.name }}
+				</h3>
+				<UBadge
+					v-if="showBadge && listing.badge"
+					:label="listing.badge"
+					:color="badgeColor"
+					variant="solid"
+					size="xs"
+				/>
+				<UBadge
+					v-if="listing.category"
+					:label="listing.category"
+					variant="subtle"
+					color="neutral"
+					size="xs"
+				/>
+			</div>
+			<p
+				v-if="listing.description"
+				class="text-sm text-neutral-600 dark:text-neutral-400 mt-0.5 truncate"
+			>
+				{{ listing.description }}
+			</p>
+			<div
+				v-if="showRating && listing.rating"
+				class="flex items-center gap-1.5 mt-1"
+			>
+				<div class="flex items-center gap-0.5">
+					<UIcon
+						v-for="i in 5"
+						:key="i"
+						name="i-lucide-star"
+						class="w-3 h-3"
+						:class="
+							i <= Math.round(listing.rating)
+								? 'text-yellow-400'
+								: 'text-neutral-300 dark:text-neutral-600'
+						"
+					/>
+				</div>
+				<span class="text-xs text-neutral-500 dark:text-neutral-400">
+					{{ listing.rating.toFixed(1) }}
+					<span v-if="listing.reviewCount">({{ listing.reviewCount }})</span>
+				</span>
+			</div>
+		</div>
+
+		<!-- Tags (row) -->
+		<div
+			v-if="showTags && listing.tags?.length"
+			class="hidden sm:flex flex-wrap gap-1 flex-shrink-0"
+		>
+			<UBadge
+				v-for="tag in listing.tags.slice(0, 2)"
+				:key="tag"
+				:label="tag"
+				variant="subtle"
+				color="neutral"
+				size="xs"
+			/>
+		</div>
+
+		<!-- CTA -->
+		<UButton
+			:to="listing.to || '#'"
+			:label="ctaLabel"
+			color="primary"
+			variant="outline"
+			size="sm"
+			class="flex-shrink-0"
+		/>
+	</article>
+
+	<!-- Compact Layout -->
+	<article
+		v-else-if="layout === 'compact'"
+		class="group flex items-center gap-3 py-3 border-b border-neutral-100 dark:border-neutral-800 last:border-0 transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-900/50 px-2 rounded-lg"
+	>
+		<!-- Logo -->
+		<figure
+			v-if="listing.logo"
+			class="w-9 h-9 rounded-lg overflow-hidden flex-shrink-0 border border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800"
+		>
+			<img
+				:src="listing.logo"
+				:alt="listing.name"
+				class="w-full h-full object-contain"
+			/>
+		</figure>
+		<div
+			v-else
+			class="w-9 h-9 rounded-lg flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"
+		>
+			<span class="text-primary-600 dark:text-primary-400 font-bold text-sm">
+				{{ listing.name.charAt(0) }}
+			</span>
+		</div>
+
+		<!-- Name + Category -->
+		<div class="flex-1 min-w-0">
+			<NuxtLink
+				:to="listing.to || '#'"
+				class="font-medium text-sm text-neutral-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors truncate block"
+			>
+				{{ listing.name }}
+			</NuxtLink>
+			<p
+				v-if="listing.category"
+				class="text-xs text-neutral-500 dark:text-neutral-400 truncate"
+			>
+				{{ listing.category }}
+			</p>
+		</div>
+
+		<!-- Rating -->
+		<div
+			v-if="showRating && listing.rating"
+			class="flex items-center gap-1 flex-shrink-0"
+		>
+			<UIcon name="i-lucide-star" class="w-3 h-3 text-yellow-400" />
+			<span class="text-xs font-medium text-neutral-700 dark:text-neutral-300">
+				{{ listing.rating.toFixed(1) }}
+			</span>
+		</div>
+
+		<!-- Badge -->
+		<UBadge
+			v-if="showBadge && listing.badge"
+			:label="listing.badge"
+			:color="badgeColor"
+			variant="solid"
+			size="xs"
+			class="flex-shrink-0"
+		/>
+	</article>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Listing object { name, description?, logo?, category?, tags?, rating?, reviewCount?, badge?, to? } */
+	listing: {
+		type: Object,
+		default: () => ({
+			name: "Example Listing",
+			description: "A great product or service.",
+			category: "General",
+			rating: 4.5,
+			reviewCount: 42,
+		}),
+	},
+	/** Card display layout */
+	layout: {
+		type: String,
+		default: "card",
+		validator: (v) => ["card", "row", "compact"].includes(v),
+	},
+	/** Show star rating */
+	showRating: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show tags */
+	showTags: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show badge (Featured, Sponsored, etc.) */
+	showBadge: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const ctaLabel = computed(() => {
+	return props.listing.ctaLabel || "View Listing";
+});
+
+const badgeColor = computed(() => {
+	const badge = props.listing.badge?.toLowerCase();
+	if (badge === "featured") return "primary";
+	if (badge === "sponsored") return "warning";
+	if (badge === "new") return "success";
+	return "primary";
+});
+</script>