@xenterprises/nuxt-x-marketing 1.0.1 → 1.0.2

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

@@ -0,0 +1,306 @@
+<template>
+	<article class="listing-detail">
+		<!-- Header -->
+		<header class="mb-10">
+			<div class="flex flex-col sm:flex-row sm:items-start gap-5">
+				<!-- Logo -->
+				<figure
+					v-if="listing.logo"
+					class="w-20 h-20 rounded-2xl overflow-hidden flex-shrink-0 border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 shadow-sm"
+				>
+					<img
+						:src="listing.logo"
+						:alt="listing.name"
+						class="w-full h-full object-contain"
+					/>
+				</figure>
+				<div
+					v-else
+					class="w-20 h-20 rounded-2xl flex-shrink-0 bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center shadow-sm"
+				>
+					<span
+						class="text-primary-600 dark:text-primary-400 font-bold text-3xl"
+					>
+						{{ listing.name.charAt(0) }}
+					</span>
+				</div>
+
+				<!-- Name + Meta -->
+				<div class="flex-1 min-w-0">
+					<div class="flex flex-wrap items-center gap-2 mb-1">
+						<h1
+							class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-white"
+						>
+							{{ listing.name }}
+						</h1>
+						<UBadge
+							v-if="listing.badge"
+							:label="listing.badge"
+							color="primary"
+							variant="solid"
+							size="sm"
+						/>
+					</div>
+
+					<!-- Category + Rating -->
+					<div class="flex flex-wrap items-center gap-3 mt-2">
+						<UBadge
+							v-if="listing.category"
+							:label="listing.category"
+							variant="subtle"
+							color="neutral"
+						/>
+
+						<div v-if="listing.rating" class="flex items-center gap-1.5">
+							<div class="flex items-center gap-0.5">
+								<UIcon
+									v-for="i in 5"
+									:key="i"
+									name="i-lucide-star"
+									class="w-4 h-4"
+									:class="
+										i <= Math.round(listing.rating)
+											? 'text-yellow-400'
+											: 'text-neutral-300 dark:text-neutral-600'
+									"
+								/>
+							</div>
+							<span
+								class="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
+							>
+								{{ listing.rating.toFixed(1) }}
+							</span>
+							<span
+								v-if="listing.reviewCount"
+								class="text-sm text-neutral-500 dark:text-neutral-400"
+							>
+								({{ listing.reviewCount }} reviews)
+							</span>
+						</div>
+					</div>
+
+					<!-- Tags -->
+					<div v-if="listing.tags?.length" class="flex flex-wrap gap-1.5 mt-3">
+						<UBadge
+							v-for="tag in listing.tags"
+							:key="tag"
+							:label="tag"
+							variant="subtle"
+							color="neutral"
+							size="sm"
+						/>
+					</div>
+				</div>
+			</div>
+		</header>
+
+		<!-- Content Grid -->
+		<div
+			:class="[
+				'grid gap-10 lg:gap-14',
+				hasSidebar ? 'lg:grid-cols-[1fr_300px]' : '',
+			]"
+		>
+			<!-- Main Content -->
+			<div class="min-w-0">
+				<!-- Description -->
+				<section v-if="listing.description" class="mb-8">
+					<div class="prose prose-neutral dark:prose-invert max-w-none">
+						<p
+							class="text-lg text-neutral-700 dark:text-neutral-300 leading-relaxed"
+						>
+							{{ listing.description }}
+						</p>
+					</div>
+				</section>
+
+				<!-- After Description Slot -->
+				<slot name="after-description" />
+
+				<!-- Screenshots Gallery -->
+				<section
+					v-if="hasScreenshots && listing.screenshots?.length"
+					class="mb-10"
+				>
+					<h2
+						class="text-lg font-semibold text-neutral-900 dark:text-white mb-4"
+					>
+						Screenshots
+					</h2>
+					<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+						<figure
+							v-for="(screenshot, index) in listing.screenshots"
+							:key="index"
+							class="aspect-video rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 cursor-pointer group"
+						>
+							<img
+								:src="
+									typeof screenshot === 'string' ? screenshot : screenshot.src
+								"
+								:alt="
+									typeof screenshot === 'string'
+										? `Screenshot ${index + 1}`
+										: screenshot.alt || `Screenshot ${index + 1}`
+								"
+								class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+							/>
+						</figure>
+					</div>
+				</section>
+
+				<!-- Features List -->
+				<section v-if="listing.features?.length" class="mb-10">
+					<h2
+						class="text-lg font-semibold text-neutral-900 dark:text-white mb-4"
+					>
+						Features
+					</h2>
+					<ul class="grid sm:grid-cols-2 gap-3">
+						<li
+							v-for="(feature, index) in listing.features"
+							:key="index"
+							class="flex items-start gap-3"
+						>
+							<span
+								class="flex-shrink-0 w-5 h-5 rounded-full bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center mt-0.5"
+							>
+								<UIcon
+									name="i-lucide-check"
+									class="w-3 h-3 text-primary-600 dark:text-primary-400"
+								/>
+							</span>
+							<span class="text-sm text-neutral-700 dark:text-neutral-300">
+								{{ feature }}
+							</span>
+						</li>
+					</ul>
+				</section>
+
+				<!-- Reviews Slot -->
+				<section v-if="hasReviews">
+					<slot name="reviews" />
+				</section>
+			</div>
+
+			<!-- Sidebar -->
+			<aside v-if="hasSidebar" class="hidden lg:block">
+				<div class="sticky top-24 space-y-6">
+					<!-- Default Sidebar Content -->
+					<slot name="sidebar">
+						<!-- Website CTA -->
+						<div
+							class="p-5 rounded-xl bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200/60 dark:border-neutral-800"
+						>
+							<UButton
+								v-if="listing.website"
+								:to="listing.website"
+								label="Visit Website"
+								icon="i-lucide-external-link"
+								color="primary"
+								variant="solid"
+								block
+								target="_blank"
+								rel="noopener noreferrer"
+								class="justify-center mb-4"
+							/>
+
+							<!-- Category -->
+							<div
+								v-if="listing.category"
+								class="flex items-center justify-between py-2.5 border-b border-neutral-200 dark:border-neutral-800"
+							>
+								<span
+									class="text-xs font-semibold uppercase tracking-wider text-neutral-500"
+								>
+									Category
+								</span>
+								<UBadge
+									:label="listing.category"
+									variant="subtle"
+									color="neutral"
+									size="sm"
+								/>
+							</div>
+
+							<!-- Rating Summary -->
+							<div
+								v-if="listing.rating"
+								class="flex items-center justify-between py-2.5 border-b border-neutral-200 dark:border-neutral-800"
+							>
+								<span
+									class="text-xs font-semibold uppercase tracking-wider text-neutral-500"
+								>
+									Rating
+								</span>
+								<div class="flex items-center gap-1.5">
+									<UIcon name="i-lucide-star" class="w-4 h-4 text-yellow-400" />
+									<span
+										class="text-sm font-semibold text-neutral-900 dark:text-white"
+									>
+										{{ listing.rating.toFixed(1) }}
+									</span>
+									<span
+										v-if="listing.reviewCount"
+										class="text-xs text-neutral-500"
+									>
+										({{ listing.reviewCount }})
+									</span>
+								</div>
+							</div>
+
+							<!-- Tags -->
+							<div v-if="listing.tags?.length" class="pt-3">
+								<span
+									class="text-xs font-semibold uppercase tracking-wider text-neutral-500 block mb-2"
+								>
+									Tags
+								</span>
+								<div class="flex flex-wrap gap-1.5">
+									<UBadge
+										v-for="tag in listing.tags"
+										:key="tag"
+										:label="tag"
+										variant="subtle"
+										color="neutral"
+										size="xs"
+									/>
+								</div>
+							</div>
+						</div>
+					</slot>
+				</div>
+			</aside>
+		</div>
+	</article>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Listing object { name, description?, logo?, website?, screenshots?, tags?, category?, rating?, reviewCount?, features? } */
+	listing: {
+		type: Object,
+		default: () => ({
+			name: "Listing Name",
+			description: "Full description of this listing.",
+			category: "General",
+			rating: 4.5,
+			reviewCount: 42,
+		}),
+	},
+	/** Show screenshots gallery */
+	hasScreenshots: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show sidebar */
+	hasSidebar: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show reviews section */
+	hasReviews: {
+		type: Boolean,
+		default: false,
+	},
+});
+</script>

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

@@ -0,0 +1,190 @@
+<template>
+	<div>
+		<!-- Search + Filters -->
+		<div v-if="hasSearch || hasFilters" class="flex flex-wrap gap-4 mb-8">
+			<UInput
+				v-if="hasSearch"
+				v-model="search"
+				placeholder="Search listings..."
+				icon="i-lucide-search"
+				class="w-full sm:w-72"
+			/>
+			<USelect
+				v-if="hasFilters && categories.length"
+				v-model="selectedCategory"
+				:options="categoryOptions"
+				placeholder="All Categories"
+				class="w-48"
+			/>
+		</div>
+
+		<!-- Grid / List -->
+		<div :class="containerClasses">
+			<XMarkDirectoryListingCard
+				v-for="(listing, index) in paginatedListings"
+				:key="listing.name + index"
+				:listing="listing"
+				:layout="layout === 'list' ? 'row' : 'card'"
+				class="xFadeUp"
+				:style="{ transitionDelay: `${index * 50}ms` }"
+			/>
+		</div>
+
+		<!-- Empty State -->
+		<div v-if="!paginatedListings.length" class="text-center py-20">
+			<UIcon
+				name="i-lucide-search-x"
+				class="w-12 h-12 text-neutral-300 dark:text-neutral-700 mx-auto mb-4"
+			/>
+			<p
+				class="text-lg font-medium text-neutral-700 dark:text-neutral-300 mb-1"
+			>
+				No listings found
+			</p>
+			<p class="text-sm text-neutral-500 dark:text-neutral-400">
+				Try adjusting your search or filter criteria.
+			</p>
+			<UButton
+				v-if="search || selectedCategory"
+				label="Clear filters"
+				variant="ghost"
+				color="primary"
+				size="sm"
+				class="mt-4"
+				@click="clearFilters"
+			/>
+		</div>
+
+		<!-- Pagination -->
+		<div
+			v-if="hasPagination && totalPages > 1"
+			class="mt-12 flex justify-center"
+		>
+			<UPagination
+				v-model="currentPage"
+				:total="filteredListings.length"
+				:page-count="perPage"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+// Initialize scroll reveal animations
+useScrollReveal();
+
+const props = defineProps({
+	/** Array of listing objects */
+	listings: {
+		type: Array,
+		default: () => [],
+	},
+	/** Available category strings for filter */
+	categories: {
+		type: Array,
+		default: () => [],
+	},
+	/** Display mode */
+	layout: {
+		type: String,
+		default: "grid",
+		validator: (v) => ["grid", "list"].includes(v),
+	},
+	/** Number of columns in grid mode */
+	columns: {
+		type: Number,
+		default: 3,
+		validator: (v) => [2, 3, 4].includes(v),
+	},
+	/** Show search input */
+	hasSearch: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show category filter */
+	hasFilters: {
+		type: Boolean,
+		default: true,
+	},
+	/** Show pagination */
+	hasPagination: {
+		type: Boolean,
+		default: true,
+	},
+	/** Items per page */
+	perPage: {
+		type: Number,
+		default: 12,
+	},
+	/** Optional button config passed through to each ListingCard */
+	cardButton: {
+		type: Object,
+		default: null,
+	},
+});
+
+const search = ref("");
+const selectedCategory = ref("");
+const currentPage = ref(1);
+
+const categoryOptions = computed(() => {
+	return [
+		{ label: "All Categories", value: "" },
+		...props.categories.map((cat) => ({
+			label: cat,
+			value: cat,
+		})),
+	];
+});
+
+const filteredListings = computed(() => {
+	let result = props.listings;
+
+	if (search.value) {
+		const q = search.value.toLowerCase();
+		result = result.filter(
+			(item) =>
+				item.name?.toLowerCase().includes(q) ||
+				item.description?.toLowerCase().includes(q)
+		);
+	}
+
+	if (selectedCategory.value) {
+		result = result.filter((item) => item.category === selectedCategory.value);
+	}
+
+	return result;
+});
+
+const totalPages = computed(() => {
+	return Math.ceil(filteredListings.value.length / props.perPage);
+});
+
+const paginatedListings = computed(() => {
+	const start = (currentPage.value - 1) * props.perPage;
+	const end = start + props.perPage;
+	return filteredListings.value.slice(start, end);
+});
+
+const containerClasses = computed(() => {
+	if (props.layout === "list") {
+		return "flex flex-col gap-3";
+	}
+	const cols = {
+		2: "grid sm:grid-cols-2 gap-6",
+		3: "grid sm:grid-cols-2 lg:grid-cols-3 gap-6",
+		4: "grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",
+	};
+	return cols[props.columns] || cols[3];
+});
+
+const clearFilters = () => {
+	search.value = "";
+	selectedCategory.value = "";
+};
+
+// Reset pagination when filters change
+watch([search, selectedCategory], () => {
+	currentPage.value = 1;
+});
+</script>

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

@@ -0,0 +1,201 @@
+<template>
+	<section :class="['relative overflow-hidden rounded-2xl', bgClasses]">
+		<!-- Background Pattern -->
+		<XMarkPatternBg
+			v-if="bg !== 'bold' && bg !== 'gradient'"
+			pattern="dots"
+			:opacity="0.04"
+			class="absolute inset-0 pointer-events-none"
+		/>
+
+		<div class="relative z-10 p-8 md:p-12 lg:p-16">
+			<div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
+				<!-- Left: Text + Features -->
+				<div class="xFadeUp">
+					<!-- Title -->
+					<h2
+						:class="[
+							'xText-headline',
+							isBold ? 'text-white' : 'text-neutral-900 dark:text-white',
+						]"
+					>
+						{{ title }}
+					</h2>
+
+					<!-- Description -->
+					<p
+						v-if="description"
+						:class="[
+							'mt-4 text-lg leading-relaxed',
+							isBold
+								? 'text-white/80'
+								: 'text-neutral-600 dark:text-neutral-400',
+						]"
+					>
+						{{ description }}
+					</p>
+
+					<!-- Features List -->
+					<ul v-if="features.length" class="mt-6 space-y-3">
+						<li
+							v-for="(feature, index) in features"
+							:key="index"
+							class="flex items-center gap-3"
+						>
+							<span
+								:class="[
+									'flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center',
+									isBold
+										? 'bg-white/20'
+										: 'bg-primary-100 dark:bg-primary-900/40',
+								]"
+							>
+								<UIcon
+									name="i-lucide-check"
+									:class="[
+										'w-3 h-3',
+										isBold
+											? 'text-white'
+											: 'text-primary-600 dark:text-primary-400',
+									]"
+								/>
+							</span>
+							<span
+								:class="[
+									'text-sm font-medium',
+									isBold
+										? 'text-white/90'
+										: 'text-neutral-700 dark:text-neutral-300',
+								]"
+							>
+								{{ feature }}
+							</span>
+						</li>
+					</ul>
+				</div>
+
+				<!-- Right: CTA Card -->
+				<div class="xFadeUp" style="transition-delay: 100ms">
+					<div
+						:class="[
+							'rounded-2xl p-8 text-center',
+							isBold
+								? 'bg-white/10 backdrop-blur-sm border border-white/20'
+								: 'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 shadow-lg',
+						]"
+					>
+						<!-- Icon -->
+						<div
+							:class="[
+								'inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-5',
+								isBold
+									? 'bg-white/20'
+									: 'bg-primary-100 dark:bg-primary-900/40',
+							]"
+						>
+							<UIcon
+								name="i-lucide-plus-circle"
+								:class="[
+									'w-7 h-7',
+									isBold
+										? 'text-white'
+										: 'text-primary-600 dark:text-primary-400',
+								]"
+							/>
+						</div>
+
+						<!-- Card Title -->
+						<h3
+							:class="[
+								'text-xl font-semibold mb-2',
+								isBold ? 'text-white' : 'text-neutral-900 dark:text-white',
+							]"
+						>
+							{{ button.label || "Submit a Listing" }}
+						</h3>
+
+						<p
+							:class="[
+								'text-sm mb-6',
+								isBold
+									? 'text-white/70'
+									: 'text-neutral-500 dark:text-neutral-400',
+							]"
+						>
+							Get your product in front of thousands of buyers.
+						</p>
+
+						<!-- CTA Button -->
+						<UButton
+							:to="button.to || '/submit'"
+							:label="button.label || 'Submit a Listing'"
+							:color="isBold ? 'neutral' : 'primary'"
+							:class="
+								isBold
+									? 'bg-white text-neutral-900 hover:bg-white/90 w-full justify-center'
+									: 'w-full justify-center'
+							"
+							size="lg"
+							block
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+// Initialize scroll reveal animations
+useScrollReveal();
+
+const props = defineProps({
+	/** Section title */
+	title: {
+		type: String,
+		default: "List your product",
+	},
+	/** Section description */
+	description: {
+		type: String,
+		default:
+			"Reach thousands of buyers actively searching for solutions like yours.",
+	},
+	/** CTA button config { label, to } */
+	button: {
+		type: Object,
+		default: () => ({
+			label: "Submit a Listing",
+			to: "/submit",
+		}),
+	},
+	/** Feature bullet points */
+	features: {
+		type: Array,
+		default: () => [
+			"Free basic listing",
+			"Featured placement available",
+			"Analytics dashboard",
+		],
+	},
+	/** Background style */
+	bg: {
+		type: String,
+		default: "subtle",
+		validator: (v) => ["subtle", "bold", "gradient"].includes(v),
+	},
+});
+
+const isBold = computed(() => {
+	return props.bg === "bold" || props.bg === "gradient";
+});
+
+const bgClasses = computed(() => {
+	const variants = {
+		subtle: "bg-neutral-100 dark:bg-neutral-900",
+		bold: "bg-primary-600 dark:bg-primary-700",
+		gradient: "bg-gradient-to-br from-primary-600 to-primary-800",
+	};
+	return variants[props.bg] || variants.subtle;
+});
+</script>