@xenterprises/nuxt-x-marketing 1.2.2 → 1.4.0

package/app/pages/index.vue

@@ -46,7 +46,7 @@
 				</h2>
 			</header>
 
-			<XMarkTestimonials :testimonials="testimonials" layout="grid" />
+			<XMarkSocialProofTestimonials :testimonials="testimonials" layout="grid" />
 		</XMarkSection>
 
 		<!-- Pricing Section -->
@@ -63,7 +63,7 @@
 				</p>
 			</header>
 
-			<XMarkPricing :plans="pricingPlans" />
+			<XMarkPricingPlans :plans="pricingPlans" />
 		</XMarkSection>
 
 		<!-- CTA Section -->
@@ -80,128 +80,23 @@
 					</UButton>
 				</div>
 				<div class="mt-6 flex flex-wrap justify-center gap-4">
-					<XMarkBadge preset="no-credit-card" variant="subtle" />
-					<XMarkBadge preset="cancel-anytime" variant="subtle" />
+					<XMarkSocialProofBadge preset="no-credit-card" variant="subtle" />
+					<XMarkSocialProofBadge preset="cancel-anytime" variant="subtle" />
 				</div>
 			</div>
 		</XMarkSection>
 
-		<!-- ─── Affiliate Components Demo ─── -->
-
-		<!-- Affiliate Disclosure variants -->
-		<XMarkSection bg="subtle" padding="xl">
-			<header class="text-center max-w-3xl mx-auto mb-12">
-				<p class="xText-eyebrow text-primary-500 mb-4">Affiliate Components</p>
-				<h2
-					class="xText-headline text-neutral-900 dark:text-white xText-balance"
-				>
-					Affiliate &amp; Review Components
-				</h2>
-				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
-					FTC-compliant disclosures, product cards, grids, detail pages, and
-					comparison tables.
-				</p>
-			</header>
-
-			<!-- Disclosure variants -->
-			<div class="max-w-3xl mx-auto space-y-4 mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-4"
-				>
-					Disclosure Variants
-				</h3>
-				<XMarkAffiliateDisclosure variant="subtle" />
-				<XMarkAffiliateDisclosure variant="banner" />
-				<XMarkAffiliateDisclosure variant="inline" />
-			</div>
-
-			<!-- Product Cards — all 3 layouts -->
-			<div class="mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
-				>
-					Product Card Layouts
-				</h3>
-				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[0]"
-						layout="card"
-						:show-pros="true"
-					/>
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[1]"
-						layout="card"
-						:show-pros="true"
-						:show-cons="true"
-					/>
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[2]"
-						layout="card"
-						:show-pros="true"
-					/>
-				</div>
-				<div class="space-y-4 mb-6">
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[0]"
-						layout="row"
-						:show-pros="true"
-					/>
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[1]"
-						layout="row"
-					/>
-				</div>
-				<div class="space-y-2">
-					<XMarkAffiliateProductCard
-						v-for="p in sampleProducts"
-						:key="p.name"
-						:product="p"
-						layout="compact"
-					/>
-				</div>
-			</div>
-
-			<!-- Product Grid -->
-			<div class="mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
-				>
-					Product Grid (Roundup Post)
-				</h3>
-				<XMarkAffiliateProductGrid
-					:products="sampleProducts"
-					layout="grid"
-					:columns="3"
-					:show-ranking="true"
-					disclosure="This page contains affiliate links. As an Amazon Associate, we earn from qualifying purchases."
-				/>
-			</div>
-
-			<!-- Comparison Table -->
-			<div class="mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
-				>
-					Comparison Table (X vs Y)
-				</h3>
-				<XMarkAffiliateComparisonTable
-					:products="comparisonProducts"
-					:specs="comparisonSpecs"
-					:show-buy-buttons="true"
-					:highlight-best="true"
-					button-label="Buy on Amazon"
-					disclosure="This page contains affiliate links."
-				/>
-			</div>
-		</XMarkSection>
 	</div>
 </template>
 
 <script setup>
+const appConfig = useAppConfig();
+
 useSeoMeta({
 	title: "Modern Platform for Teams",
 	description:
 		"Build, launch, and grow your product with our powerful platform.",
+	ogUrl: appConfig.xMarketing?.url,
 });
 
 // Features data
@@ -265,103 +160,6 @@ const testimonials = [
 	},
 ];
 
-// Affiliate sample products
-const sampleProducts = [
-	{
-		name: "Sony WH-1000XM5",
-		image:
-			"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&q=80",
-		price: "$279.99",
-		originalPrice: "$349.99",
-		rating: 4.8,
-		reviewCount: 12400,
-		pros: ["Best-in-class ANC", "30hr battery life", "Foldable design"],
-		cons: ["No IP rating", "Expensive"],
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-	},
-	{
-		name: "Bose QuietComfort 45",
-		image:
-			"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&q=80",
-		price: "$249.99",
-		rating: 4.6,
-		reviewCount: 8900,
-		pros: ["Comfortable fit", "Great sound quality", "Easy controls"],
-		cons: ["No multipoint", "Older design"],
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-	},
-	{
-		name: "Apple AirPods Max",
-		image:
-			"https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=400&q=80",
-		price: "$449.00",
-		rating: 4.7,
-		reviewCount: 6200,
-		pros: ["Premium build quality", "Excellent ANC", "Spatial audio"],
-		cons: ["Very expensive", "Heavy", "No USB-C charging"],
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-	},
-];
-
-// Comparison table data
-const comparisonProducts = [
-	{
-		name: "Sony WH-1000XM5",
-		image:
-			"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&q=80",
-		price: "$279.99",
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-		specs: {
-			price: "$279.99",
-			rating: "4.8/5",
-			battery: "30 hours",
-			weight: "250g",
-			anc: "Yes",
-		},
-	},
-	{
-		name: "Bose QC45",
-		image:
-			"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=200&q=80",
-		price: "$249.99",
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-		specs: {
-			price: "$249.99",
-			rating: "4.6/5",
-			battery: "24 hours",
-			weight: "238g",
-			anc: "Yes",
-		},
-	},
-	{
-		name: "AirPods Max",
-		image:
-			"https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=200&q=80",
-		price: "$449.00",
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-		specs: {
-			price: "$449.00",
-			rating: "4.7/5",
-			battery: "20 hours",
-			weight: "385g",
-			anc: "Yes",
-		},
-	},
-];
-
-const comparisonSpecs = [
-	{ label: "Price", key: "price" },
-	{ label: "Rating", key: "rating" },
-	{ label: "Battery Life", key: "battery" },
-	{ label: "Weight", key: "weight" },
-	{ label: "ANC", key: "anc" },
-];
 
 // Pricing plans data
 const pricingPlans = [

package/app/types/config.ts

@@ -0,0 +1,134 @@
+/**
+ * Config types for the `xMarketing` app.config.ts namespace.
+ *
+ * Exported so consumers and sibling layers can reference the shape
+ * (config-typing convention, plan 21 §3). This is the *input* contract —
+ * every field is optional so site overrides can set any subset.
+ */
+
+export interface XMarketingNavLink {
+  label: string;
+  to?: string;
+  target?: string;
+  children?: XMarketingNavLink[];
+}
+
+export interface XMarketingTrackingScript {
+  /** Stable ID — used to dedupe re-injection. */
+  id: string;
+  /** External script URL (e.g. "https://www.googletagmanager.com/gtag/js?id=G-XXX"). */
+  src?: string;
+  /** Inline script body (no `src` required). */
+  inline?: string;
+  /** Consent category gate. "necessary" fires immediately; "analytics" / "marketing" gated. */
+  category?: "necessary" | "analytics" | "marketing";
+  /** Extra attributes applied to the injected <script>. */
+  attrs?: Record<string, string>;
+}
+
+/**
+ * Tracking entry — use the convenience IDs for the common tools
+ * (GTM, GA4, Clarity) or `scripts[]` for everything else. Scripts
+ * are injected only after the visitor grants consent for the
+ * matching `category` (default: "analytics").
+ */
+export interface XMarketingTracking {
+  /** Google Tag Manager container ID, e.g. "GTM-XXXXXXX". */
+  gtmId?: string;
+  /** Google Analytics 4 measurement ID, e.g. "G-XXXXXXXX". */
+  ga4Id?: string;
+  /** Microsoft Clarity project ID, e.g. "abc123def4". */
+  clarityId?: string;
+  /**
+   * Arbitrary scripts (Meta Pixel, Hotjar, Segment, LinkedIn Insight,
+   * Pinterest, TikTok, etc.). Each fires once the matching consent
+   * category is granted. Use `inline` for hand-written snippets like
+   * `gtag('js', new Date())`.
+   */
+  scripts?: XMarketingTrackingScript[];
+  /** Auto-inject configured scripts on consent. Default: true. */
+  autoInject?: boolean;
+}
+
+export interface XMarketingConfig {
+  /** Project name */
+  name?: string;
+  /** Project URL */
+  url?: string;
+  config?: {
+    markerProjectId?: string;
+    emailMarketingNewsletters?: {
+      organizationId?: string;
+    };
+  };
+  header?: {
+    /** Set false to opt out of the default navbar in the shipped shell. */
+    active?: boolean;
+    logo?: {
+      src?: string;
+      srcDark?: string;
+      alt?: string;
+    };
+    nav?: {
+      buttons?: {
+        label: string;
+        to: string;
+        icon?: string;
+        target?: string;
+        variant?: string;
+        square?: boolean;
+        color?: string;
+      }[];
+      links?: XMarketingNavLink[];
+    };
+  };
+  footer?: {
+    /** Set false to opt out of the default footer in the shipped shell. */
+    active?: boolean;
+    body?: string;
+    bg?: {
+      color?: string;
+      img?: {
+        src?: string;
+        alt?: string;
+      };
+    };
+    logo?: {
+      src?: string;
+      alt?: string;
+    };
+    socials?: {
+      name: string;
+      url: string;
+      icon: string;
+    }[];
+    columns?: {
+      headerLabel: string;
+      links: {
+        label: string;
+        to: string;
+        target?: string;
+      }[];
+    }[];
+  };
+  /** Cookie-consent banner in the shipped shell; gates tracking injection. */
+  consent?: {
+    active?: boolean;
+  };
+  /** Blog defaults; `active: false` disables the shipped /blog pages (404). */
+  blog?: {
+    active?: boolean;
+    title?: string;
+    description?: string;
+    meta?: {
+      title?: string;
+      description?: string;
+    };
+  };
+  /**
+   * Tracking + analytics config. Read by
+   * `<XMarkPrivacyCookieConsent>` and `useConsentTracking()`.
+   * Only fires after the matching consent category is granted.
+   */
+  tracking?: XMarketingTracking;
+}

package/content.config.ts

@@ -0,0 +1,35 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+import { z } from 'zod'
+
+/**
+ * Default `blog` collection for marketing sites.
+ * Consumers can extend/override this config; markdown lives in the
+ * consumer (or playground) under `content/blog/*.md`.
+ */
+export default defineContentConfig({
+  collections: {
+    blog: defineCollection({
+      type: 'page',
+      source: 'blog/**/*.md',
+      schema: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        date: z.date().optional(),
+        author: z.union([
+          z.string(),
+          z.object({
+            name: z.string(),
+            avatar: z.string().optional(),
+            title: z.string().optional(),
+            bio: z.string().optional(),
+          }),
+        ]).optional(),
+        image: z.string().optional(),
+        category: z.string().optional(),
+        tags: z.array(z.string()).optional(),
+        published: z.boolean().default(true),
+        readingTime: z.number().optional(),
+      }),
+    }),
+  },
+})

package/nuxt.config.ts

@@ -5,10 +5,23 @@ export default defineNuxtConfig({
   ssr: true,
   devtools: { enabled: process.env.NODE_ENV === "development" },
   runtimeConfig: {
-    public: {
-
-    },
+    public: {},
   },
-  modules: ["@nuxt/ui"],
+  // Blog pages use Nuxt Content (`queryCollection('blog')`). Consumers must
+  // install `@nuxt/content` (peer) and provide `content/blog/**/*.md`.
+  // Builder.io is no longer used.
+  modules: ["@nuxt/ui", "@nuxt/content"],
   css: [resolve(__dirname, "app/assets/css/x-marketing.css")],
-});
+  content: {
+    build: {
+      markdown: {
+        highlight: {
+          theme: {
+            default: "github-light",
+            dark: "github-dark",
+          },
+        },
+      },
+    },
+  },
+});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -10,42 +10,64 @@
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
+    "typecheck": "nuxt typecheck .playground",
+    "lint": "eslint .",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "vitest run --config test/vitest.config.js",
     "test:unit:watch": "vitest --config test/vitest.config.js",
     "test:unit:coverage": "vitest run --config test/vitest.config.js --coverage",
-    "test:e2e": "playwright test --config test/playwright.config.js",
-    "test:e2e:ui": "playwright test --config test/playwright.config.js --ui",
-    "test:e2e:headed": "playwright test --config test/playwright.config.js --headed",
+    "test:run": "vitest run --config test/vitest.config.js",
+    "test:coverage": "vitest run --config test/vitest.config.js --coverage",
+    "test:e2e": "playwright test --config test/playwright.smoke.config.js",
+    "test:e2e:ui": "playwright test --config test/playwright.smoke.config.js --ui",
+    "test:e2e:headed": "playwright test --config test/playwright.smoke.config.js --headed",
+    "test:e2e:full": "playwright test --config test/playwright.config.js",
     "test:visual": "playwright test --config test/playwright.config.js visual-regression",
-    "test:visual:update": "playwright test --config test/playwright.config.js visual-regression --update-snapshots"
+    "test:visual:update": "playwright test --config test/playwright.config.js visual-regression --update-snapshots",
+    "prepublishOnly": "npm run test:run && npm run typecheck && npm run lint"
   },
   "dependencies": {
     "@marker.io/browser": "^0.20.2",
     "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "@iconify-json/lucide": ">=1.2.82",
-    "@nuxt/ui": ">=4.6.1",
-    "@tailwindcss/typography": ">=0.5.0",
-    "nuxt": ">=4.0.0",
-    "vue": ">=3.0.0"
+    "@iconify-json/lucide": "^1.2.82",
+    "@nuxt/content": "^3.0.0",
+    "@nuxt/ui": "^4.6.1",
+    "@tailwindcss/typography": "^0.5.0",
+    "better-sqlite3": "^11.0.0 || ^12.0.0",
+    "nuxt": "^4.0.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/content": {
+      "optional": false
+    },
+    "better-sqlite3": {
+      "optional": false
+    }
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.8.4",
     "@iconify-json/lucide": "^1.2.82",
+    "@nuxt/content": "^3.8.2",
+    "@nuxt/eslint": "^1.15.2",
     "@nuxt/ui": "^4.6.1",
     "@playwright/test": "^1.41.1",
     "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^22.14.1",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/test-utils": "^2.4.4",
+    "better-sqlite3": "^12.5.0",
+    "eslint": "^9.39.0",
     "happy-dom": "^13.3.8",
     "nuxt": "^4.4.2",
     "nuxt-shiki": "^0.3.2",
     "typescript": "^5.6.3",
     "vitest": "^2.1.8",
-    "vue": "latest"
+    "vue": "^3.5.39",
+    "vue-tsc": "^2.2.8"
   },
   "publishConfig": {
     "access": "public"