nuxt-x-marketing

Marketing website layer for Nuxt 4. Provides 38+ XMark-prefixed components with zero required props, dark mode support, responsive design, WCAG 2.0 AA accessibility, and a complete CSS design system (typography, animations, glass effects). Built on Nuxt UI v4.

Installation

npm install @xenterprises/nuxt-x-marketing

// nuxt.config.ts
export default defineNuxtConfig({
  extends: "@xenterprises/nuxt-x-marketing",
});

Quick Start

<template>
  <div>
    <XMarkNavbar :links="navLinks" logo-light="/logo-white.svg" logo-dark="/logo-dark.svg">
      <template #actions>
        <UButton variant="ghost">Sign In</UButton>
        <UButton color="primary">Get Started</UButton>
      </template>
    </XMarkNavbar>

    <XMarkHero
      eyebrow="Welcome"
      title="Build something amazing"
      subtitle="The modern platform for teams."
      :buttons="[{ label: 'Get Started', color: 'primary' }, { label: 'Watch Demo', variant: 'outline' }]"
    />

    <XMarkSection bg="subtle" padding="xl">
      <XMarkFeatures :features="features" layout="grid" :columns="3" />
    </XMarkSection>

    <XMarkSection bg="default" padding="xl">
      <XMarkPricing :plans="pricingPlans" :show-billing-toggle="true" />
    </XMarkSection>

    <XMarkFooter
      logo="/logo.svg"
      description="Building the future of modern software."
      :social="socialLinks"
      :columns="footerColumns"
    />
  </div>
</template>

Components

All components are auto-imported with the XMark prefix. Every component works out of the box with zero required props.

Core Layout

XMarkNavbar props: links, logoLight, logoDark, logoAlt, transparent (default true), scrollThreshold (default 100).

XMarkSection props: bg, padding (none/sm/md/lg/xl), container (sm–xl/full), pattern (dots/grid/diagonal/topography/circuit/waves), patternOpacity, bgImage, parallax.

Hero & Landing

XMarkHero props: imageSrc, videoSrc, eyebrow, title, subtitle, align (left/center/right), verticalAlign (center/bottom), overlay (light/heavy/gradient/none), showScrollIndicator.

<XMarkHero
  image-src="/hero.jpg"
  eyebrow="Welcome"
  title="Build something amazing"
  subtitle="The modern platform for teams."
  align="left"
  overlay="gradient"
  :show-scroll-indicator="true"
>
  <template #actions>
    <UButton size="xl" color="white">Get Started</UButton>
  </template>
</XMarkHero>

Content Sections

XMarkPricing props: plans, highlighted, showBillingToggle (default false), yearlyDiscount (default 20). Emits: select.

Blog Components

UI Elements

Modals & Overlays

Notifications & Banners

Affiliate & Review Components

For affiliate marketing, product review sites, and comparison posts.

XMarkAffiliateProductCard props: product ({ name, image, price, rating, reviewCount, pros, cons, affiliateUrl, affiliateTag, badge }), layout, showPros, showCons, showRating, showPrice, buttonLabel.

Utilities

Composables

All composables are SSR-safe and auto-imported.

// Scroll animations are initialized globally by marketing.client.ts plugin.
// Use directly in components for fine-grained control:
const { elementRef } = useElementParallax(0.3);

Configuration

// app.config.ts
export default defineAppConfig({
  xMarketing: {
    name: "X Enterprises",
    config: {
      markerProjectId: "your-marker-project-id", // Optional: Marker.io integration
    },
  },
});

CSS Design System

The layer ships x-marketing.css with utility classes auto-available in all components.

Typography

Scroll Animations

All animations respect prefers-reduced-motion: reduce.

Hover Effects

Glass & Glow

Environment Variables

No required environment variables. All configuration is via app.config.ts.

How It Works

1. Component registration: All components in app/components/X/Mark/ are auto-imported with the XMark prefix. Branded X Enterprises components live under X/X/ with the XX prefix.
2. Design system: app/assets/css/x-marketing.css defines CSS custom properties for typography scale, spacing, colors, shadows, and motion. Uses Tailwind CSS v4 with @theme static for custom color palettes. Dark mode via .dark selector.
3. Animations: A client-side plugin (marketing.client.ts) auto-initializes useScrollReveal() and useParallax() globally on mount. Components can also call these composables directly for fine-grained control.
4. Configuration: app.config.ts defines the xMarketing namespace with Nuxt UI theme overrides. Consumer apps deep-merge their own app.config.ts to customize.
5. Type system: app/types/marketing.d.ts exports interfaces for all data structures (BlogPost, Feature, PricingPlan, Testimonial, AffiliateProduct, etc.).

Layer Architecture

Consumer apps can override app.vue to replace the default shell, or override any page by creating their own pages/blog/index.vue.

AI Context

package: "@xenterprises/nuxt-x-marketing"
type: nuxt-layer
prefix: XMark
use-when: >
  Building a marketing website with Nuxt 4. Provides 38+ XMark-prefixed components
  (hero, features, pricing, testimonials, blog, affiliate, cookie/GDPR, modals) with
  zero required props, dark mode, WCAG 2.0 AA accessibility, and a full CSS design
  system. Includes 5 composables (useScrollReveal, useParallax, useElementParallax,
  useStaggerReveal, useXBlog) and default blog pages. Configure via app.config.ts
  under xMarketing.