@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/README.md

@@ -1,25 +1,24 @@
 # @xenterprises/nuxt-x-marketing
 
-`@xenterprises/nuxt-x-marketing` is a Nuxt.js layer designed specifically for creating marketing-centric sites. It provides a customizable layout and structure for marketing components such as headers, footers, and social links, allowing you to quickly set up a cohesive, branded marketing site.
+A comprehensive Nuxt layer for building marketing websites with 33+ pre-built components. Features dark mode support, responsive design, accessibility, and seamless integration with Nuxt UI.
 
 ## Features
 
-- **Customizable UI**: Configure primary UI elements such as colors, container layouts, and screen width.
-- **Header & Footer Configuration**: Easily manage header and footer elements, including logos, navigation links, and social media icons.
-- **Project-specific Branding**: Define project-specific settings such as project name, logos, and links for both the header and footer.
-- **Flexible Navigation and Social Links**: Add buttons, links, and social media icons to header and footer sections.
+- **33+ Marketing Components** - Hero, Features, Pricing, Testimonials, Blog, and more
+- **Dark Mode Support** - All components support light and dark themes
+- **Responsive Design** - Mobile-first approach with tablet and desktop breakpoints
+- **Accessible** - WCAG 2.0 AA compliant with proper ARIA attributes
+- **Customizable** - Props-based configuration with slot overrides
+- **Nuxt UI Integration** - Built on top of Nuxt UI v4 components
+- **Animations** - Scroll-triggered fade-in animations and parallax effects
 
 ## Installation
 
-1. **Install the package via npm**:
-
 ```bash
 npm install @xenterprises/nuxt-x-marketing
 ```
 
-2. **Add the Layer to Your Nuxt Config**
-
-   In your `nuxt.config.js` or `nuxt.config.ts` file, import the `@xenterprises/nuxt-x-marketing` layer:
+Add the layer to your `nuxt.config.js`:
 
 ```javascript
 export default defineNuxtConfig({
@@ -27,204 +26,840 @@ export default defineNuxtConfig({
 });
 ```
 
-3. **Configure Your Project Settings**
+## Quick Start
+
+### Basic App Layout
+
+Create your `app.vue` with Navbar, Newsletter, and Footer:
+
+```vue
+<template>
+  <div class="min-h-screen flex flex-col">
+    <XMarkNavbar
+      :links="navLinks"
+      :logo-light="'/logo-white.svg'"
+      :logo-dark="'/logo-dark.svg'"
+      logo-alt="Company"
+    >
+      <template #actions>
+        <UButton variant="ghost" color="neutral">Sign In</UButton>
+        <UButton color="primary">Get Started</UButton>
+      </template>
+    </XMarkNavbar>
+
+    <main class="flex-grow">
+      <NuxtPage />
+    </main>
+
+    <XMarkSection bg="subtle" padding="lg">
+      <XMarkNewsletter
+        title="Stay in the loop"
+        description="Get the latest updates delivered to your inbox."
+        @submit="handleNewsletterSubmit"
+      />
+    </XMarkSection>
+
+    <XMarkFooter
+      :logo="'/logo-dark.svg'"
+      description="Building the future of modern software."
+      :social="socialLinks"
+      :columns="footerColumns"
+      :legal-links="legalLinks"
+    />
+  </div>
+</template>
+
+<script setup>
+const navLinks = [
+  { label: "Features", to: "/#features" },
+  { label: "Pricing", to: "/pricing" },
+  { label: "Blog", to: "/blog" },
+];
+
+const socialLinks = [
+  { name: "Twitter", href: "https://twitter.com", icon: "i-lucide-twitter" },
+  { name: "GitHub", href: "https://github.com", icon: "i-lucide-github" },
+];
+
+const footerColumns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Features", to: "/#features" },
+      { label: "Pricing", to: "/pricing" },
+    ],
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", to: "/about" },
+      { label: "Blog", to: "/blog" },
+    ],
+  },
+];
 
-   Add configuration settings in your `app.config.ts` or `app.config.js` file to set up branding, navigation, and other customizable options.
+const legalLinks = [
+  { label: "Privacy Policy", to: "/privacy" },
+  { label: "Terms of Service", to: "/terms" },
+];
 
-```javascript
-export default defineAppConfig({
-  ui: {
-    primary: "sky",
-    header: {
-      container: "max-w-screen-2xl container mx-auto",
-    },
+const handleNewsletterSubmit = (email) => {
+  console.log("Newsletter signup:", email);
+};
+</script>
+```
+
+### Example Landing Page
+
+```vue
+<template>
+  <div>
+    <!-- Hero -->
+    <XMarkHero
+      image-src="https://images.unsplash.com/photo-1551434678-e076c223a692"
+      eyebrow="Welcome to the future"
+      title="Build something amazing today"
+      subtitle="The modern platform for teams who want to ship faster."
+      align="left"
+      overlay="gradient"
+    >
+      <template #actions>
+        <UButton size="xl" color="white">Get Started Free</UButton>
+        <UButton size="xl" variant="outline" color="white">Watch Demo</UButton>
+      </template>
+    </XMarkHero>
+
+    <!-- Features -->
+    <XMarkSection id="features" bg="default" padding="xl">
+      <header class="text-center max-w-3xl mx-auto mb-16">
+        <h2 class="xText-headline">Everything you need to succeed</h2>
+        <p class="mt-4 text-lg text-neutral-600">
+          Powerful tools designed to help you build, launch, and grow.
+        </p>
+      </header>
+      <XMarkFeatures :features="features" layout="grid" :columns="3" />
+    </XMarkSection>
+
+    <!-- Testimonials -->
+    <XMarkSection bg="subtle" padding="xl">
+      <header class="text-center max-w-3xl mx-auto mb-16">
+        <h2 class="xText-headline">Loved by teams worldwide</h2>
+      </header>
+      <XMarkTestimonials :testimonials="testimonials" layout="grid" />
+    </XMarkSection>
+
+    <!-- Pricing -->
+    <XMarkSection bg="default" padding="xl">
+      <header class="text-center max-w-3xl mx-auto mb-16">
+        <h2 class="xText-headline">Simple, transparent pricing</h2>
+      </header>
+      <XMarkPricing :plans="pricingPlans" />
+    </XMarkSection>
+  </div>
+</template>
+
+<script setup>
+const features = [
+  {
+    icon: "i-lucide-zap",
+    title: "Lightning Fast",
+    description: "Built for speed with optimized performance.",
   },
-  xMarketing: {
-    name: "X Enterprises",
-    config: {
-      markerProjectId: "project-1234",
+  {
+    icon: "i-lucide-shield-check",
+    title: "Secure by Default",
+    description: "Enterprise-grade security with SOC 2 compliance.",
+  },
+  {
+    icon: "i-lucide-users",
+    title: "Team Collaboration",
+    description: "Real-time collaboration tools for modern teams.",
+  },
+];
+
+const testimonials = [
+  {
+    quote: "This platform transformed how our team works.",
+    name: "Sarah Chen",
+    title: "CTO",
+    company: "TechStart",
+    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
+  },
+];
+
+const pricingPlans = [
+  {
+    name: "Starter",
+    price: "$19",
+    period: "month",
+    features: ["Up to 5 team members", "Basic analytics", "Email support"],
+    cta: "Start Free Trial",
+  },
+  {
+    name: "Pro",
+    price: "$49",
+    period: "month",
+    features: ["Up to 25 team members", "Advanced analytics", "Priority support"],
+    cta: "Start Free Trial",
+    popular: true,
+  },
+];
+</script>
+```
+
+---
+
+## Components
+
+### Core Layout
+
+#### XMarkNavbar
+
+Fixed navigation header with transparent-to-solid scroll transition.
+
+```vue
+<XMarkNavbar
+  :links="[{ label: 'Features', to: '/#features' }]"
+  logo-light="/logo-white.svg"
+  logo-dark="/logo-dark.svg"
+  logo-alt="Company"
+  :transparent="true"
+  :scroll-threshold="100"
+>
+  <template #actions>
+    <UButton variant="ghost">Sign In</UButton>
+    <UButton color="primary">Get Started</UButton>
+  </template>
+</XMarkNavbar>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `links` | `Array` | `[]` | Navigation links `{ label, to }` |
+| `logoLight` | `String` | required | Logo for transparent state |
+| `logoDark` | `String` | required | Logo for solid state |
+| `logoAlt` | `String` | `'Logo'` | Logo alt text |
+| `transparent` | `Boolean` | `true` | Start transparent over hero |
+| `scrollThreshold` | `Number` | `100` | Pixels before transition |
+
+#### XMarkSection
+
+Section wrapper with background variants and optional patterns.
+
+```vue
+<XMarkSection bg="subtle" padding="xl" pattern="dots">
+  <h2>Section Content</h2>
+</XMarkSection>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `bg` | `String` | `'default'` | `default`, `subtle`, `elevated`, `bold`, `transparent` |
+| `padding` | `String` | `'lg'` | `none`, `sm`, `md`, `lg`, `xl` |
+| `container` | `String` | `'lg'` | `sm`, `md`, `lg`, `xl`, `full`, `none` |
+| `pattern` | `String` | `''` | `dots`, `grid`, `diagonal`, `topography`, `circuit`, `waves` |
+| `patternOpacity` | `Number` | `0.05` | Pattern opacity (0-1) |
+| `bgImage` | `String` | `''` | Background image URL |
+| `parallax` | `Boolean` | `false` | Enable parallax on bg image |
+
+#### XMarkFooter
+
+Full footer with brand, link columns, social icons, and newsletter.
+
+```vue
+<XMarkFooter
+  logo="/logo.svg"
+  logo-alt="Company"
+  description="Building the future of modern software."
+  :social="[{ name: 'Twitter', href: 'https://twitter.com', icon: 'i-lucide-twitter' }]"
+  :columns="[{ title: 'Product', links: [{ label: 'Features', to: '/features' }] }]"
+  :legal-links="[{ label: 'Privacy', to: '/privacy' }]"
+  :show-newsletter="true"
+  @newsletter-submit="handleSubmit"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `logo` | `String` | `''` | Logo image URL |
+| `description` | `String` | `''` | Brand description |
+| `social` | `Array` | `[]` | Social links `{ name, href, icon }` |
+| `columns` | `Array` | `[]` | Link columns `{ title, links: [{ label, to }] }` |
+| `legalLinks` | `Array` | `[]` | Legal links `{ label, to }` |
+| `copyright` | `String` | auto | Copyright text |
+| `showNewsletter` | `Boolean` | `false` | Show newsletter section |
+
+#### XMarkLegalFooter
+
+Minimal footer with copyright and legal links only.
+
+```vue
+<XMarkLegalFooter
+  company-name="X Enterprises"
+  :links="[{ label: 'Privacy', to: '/privacy' }]"
+/>
+```
+
+---
+
+### Hero & Landing
+
+#### XMarkHero
+
+Full-screen hero with image/video background and overlay.
+
+```vue
+<XMarkHero
+  image-src="https://example.com/hero.jpg"
+  video-src="https://example.com/hero.mp4"
+  eyebrow="Welcome"
+  title="Build something amazing"
+  subtitle="The modern platform for teams."
+  align="left"
+  vertical-align="center"
+  overlay="gradient"
+  :show-scroll-indicator="true"
+>
+  <template #actions>
+    <UButton size="xl" color="white">Get Started</UButton>
+  </template>
+</XMarkHero>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `imageSrc` | `String` | `''` | Background image URL |
+| `videoSrc` | `String` | `''` | Background video URL |
+| `eyebrow` | `String` | `''` | Small text above title |
+| `title` | `String` | required | Main headline |
+| `subtitle` | `String` | `''` | Supporting text |
+| `align` | `String` | `'left'` | `left`, `center`, `right` |
+| `verticalAlign` | `String` | `'center'` | `center`, `bottom` |
+| `overlay` | `String` | `'gradient'` | `light`, `heavy`, `gradient`, `none` |
+| `showScrollIndicator` | `Boolean` | `true` | Show scroll arrow |
+
+---
+
+### Content Sections
+
+#### XMarkFeatures
+
+Feature grid with icons, images, and optional links.
+
+```vue
+<XMarkFeatures
+  :features="[
+    { icon: 'i-lucide-zap', title: 'Fast', description: 'Lightning fast performance.' },
+    { icon: 'i-lucide-shield', title: 'Secure', description: 'Enterprise security.' },
+  ]"
+  layout="grid"
+  :columns="3"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `features` | `Array` | required | Features `{ icon?, image?, title, description, link? }` |
+| `layout` | `String` | `'grid'` | `grid`, `list`, `alternating` |
+| `columns` | `Number` | `3` | Grid columns (2, 3, or 4) |
+
+#### XMarkTestimonials
+
+Testimonial cards in grid or carousel layout.
+
+```vue
+<XMarkTestimonials
+  :testimonials="[
+    {
+      quote: 'Amazing product!',
+      name: 'John Doe',
+      title: 'CEO',
+      company: 'Acme Inc',
+      avatar: 'https://example.com/avatar.jpg',
     },
-    header: {
-      logo: {
-        src: "/images/logo.png",
-        alt: "X Enterprises",
-      },
-      nav: {
-        buttons: [{ label: "Contact Us", to: "/contact" }],
-        links: [{ label: "About", to: "/about" }],
-      },
+  ]"
+  layout="grid"
+/>
+```
+
+#### XMarkPricing
+
+Pricing cards with billing toggle and popular badge.
+
+```vue
+<XMarkPricing
+  :plans="[
+    {
+      name: 'Starter',
+      price: '$19',
+      period: 'month',
+      description: 'Perfect for small teams.',
+      features: ['5 team members', 'Basic analytics'],
+      cta: 'Start Free Trial',
     },
-    footer: {
-      logo: {
-        src: "/images/footer-logo.png",
-        alt: "X Enterprises Footer Logo",
-      },
-      bg: {
-        color: "#f3f3f3",
-        img: {
-          src: "/images/footer-bg.png",
-          alt: "Footer Background Image",
-        },
-      },
-      body: "© 2024 X Enterprises. All rights reserved.",
-      socials: [
-        {
-          name: "Facebook",
-          url: "https://facebook.com",
-          icon: "facebook-icon",
-        },
-      ],
-      columns: [
-        {
-          headerLabel: "Company",
-          links: [{ label: "About Us", to: "/about" }],
-        },
+    {
+      name: 'Pro',
+      price: '$49',
+      period: 'month',
+      features: ['25 team members', 'Advanced analytics'],
+      cta: 'Start Free Trial',
+      popular: true,
+    },
+  ]"
+  :show-billing-toggle="true"
+  :yearly-discount="20"
+  @select="handlePlanSelect"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `plans` | `Array` | required | Pricing plans |
+| `highlighted` | `String` | `''` | Plan name to highlight |
+| `showBillingToggle` | `Boolean` | `false` | Show monthly/yearly toggle |
+| `yearlyDiscount` | `Number` | `20` | Yearly discount percentage |
+
+#### XMarkComparison
+
+Feature comparison table across plans.
+
+```vue
+<XMarkComparison
+  :plans="['Starter', 'Pro', 'Enterprise']"
+  :highlighted="'Pro'"
+  :feature-groups="[
+    {
+      name: 'Core Features',
+      features: [
+        { name: 'Users', values: ['5', '25', 'Unlimited'] },
+        { name: 'Storage', values: ['1GB', '10GB', 'Unlimited'] },
       ],
     },
-  },
-});
+  ]"
+/>
 ```
 
-4. **Run Your Nuxt Application**
+#### XMarkNewsletter
 
-   Start your Nuxt application to see `@xenterprises/nuxt-x-marketing` in action:
+Email signup form with variants.
 
-```bash
-npm run dev
+```vue
+<XMarkNewsletter
+  title="Subscribe to our newsletter"
+  description="Get the latest updates."
+  :button="{ label: 'Subscribe' }"
+  placeholder="Enter your email"
+  variant="default"
+  @submit="handleSubmit"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `String` | `'Subscribe...'` | Form title |
+| `description` | `String` | `''` | Form description |
+| `button` | `Object` | `{ label: 'Subscribe' }` | Button config { label, color? } |
+| `variant` | `String` | `'default'` | `default`, `minimal`, `inline` |
+
+---
+
+### Blog Components
+
+#### XMarkBlogCard
+
+Blog post card with image, title, excerpt, and author.
+
+```vue
+<XMarkBlogCard
+  :post="{
+    title: 'Getting Started with Nuxt',
+    slug: 'getting-started',
+    excerpt: 'Learn how to build modern web apps.',
+    image: '/blog/cover.jpg',
+    date: '2024-01-15',
+    author: { name: 'John Doe', avatar: '/avatars/john.jpg' },
+    category: 'Tutorial',
+  }"
+  variant="default"
+/>
 ```
 
-## Configuration Options
+#### XMarkBlogList
 
-The following options are available for customization in the `xMarketing` layer configuration:
+Blog listing grid with optional featured post.
 
-### UI
+```vue
+<XMarkBlogList
+  :posts="posts"
+  :columns="3"
+  :show-featured="true"
+/>
+```
 
-Configure general UI settings for the app layout.
+#### XMarkBlogDetail
 
-```javascript
-ui: {
-  primary: "sky", // Primary color theme
-  header: {
-    container: "max-w-screen-2xl container mx-auto" // Maximum screen width for container
-  }
-}
+Full blog post view with author, share buttons, and navigation.
+
+```vue
+<XMarkBlogDetail
+  :post="post"
+  :author="author"
+  :related-posts="relatedPosts"
+/>
 ```
 
-### xMarketing
+#### XMarkBlogSidebar
 
-Define the core marketing elements for your project under `xMarketing`.
+Blog sidebar with search, categories, tags, and recent posts.
 
-```javascript
-xMarketing: {
-  name: "X Enterprises", // Project name to display
-  config: {
-    markerProjectId: "", // Placeholder for your project ID if needed
-  },
+```vue
+<XMarkBlogSidebar
+  :categories="['Tutorials', 'News', 'Updates']"
+  :tags="['vue', 'nuxt', 'javascript']"
+  :recent-posts="recentPosts"
+  :show-search="true"
+  @search="handleSearch"
+  @category-click="handleCategoryClick"
+/>
 ```
 
-#### Header Configuration
+#### XMarkBlogAuthor
+
+Author bio with social links.
+
+```vue
+<XMarkBlogAuthor
+  :author="{
+    name: 'John Doe',
+    title: 'Senior Developer',
+    avatar: '/avatars/john.jpg',
+    bio: 'Passionate about building great software.',
+    social: { twitter: 'https://twitter.com/johndoe' },
+  }"
+  variant="full"
+/>
+```
 
-Set up the header, including logo and navigation elements.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `author` | `Object` | required | Author data |
+| `variant` | `String` | `'inline'` | `inline`, `sm`, `full`, `card` |
 
-```javascript
-header: {
-  logo: {
-    src: "", // Source URL of the logo
-    alt: "", // Alt text for the logo
-  },
-  nav: {
-    buttons: [], // Array of buttons with `label` and `to` attributes
-    links: [], // Array of navigation links with `label` and `to` attributes
-  },
-}
+#### XMarkBlogNavigation
+
+Previous/next post navigation.
+
+```vue
+<XMarkBlogNavigation
+  :previous="{ title: 'Previous Post', slug: 'prev-post' }"
+  :next="{ title: 'Next Post', slug: 'next-post' }"
+  base-path="/blog"
+/>
 ```
 
-#### Footer Configuration
+#### XMarkBlogCTA
 
-Define the footer layout, logo, background, and social links.
+In-article newsletter signup.
 
-```javascript
-footer: {
-  logo: {
-    src: "", // Footer logo URL
-    alt: "", // Footer logo alt text
-  },
-  bg: {
-    color: "", // Background color for the footer
-    img: {
-      src: "", // Background image URL for the footer
-      alt: "", // Alt text for the background image
-    },
-  },
-  body: "", // Optional text for the footer
-  socials: [], // Array of social media objects with `name`, `url`, and `icon`
-  columns: [], // Footer columns with links
-}
+```vue
+<XMarkBlogCTA
+  title="Enjoyed this article?"
+  description="Subscribe for more content."
+  variant="featured"
+  @submit="handleSubmit"
+/>
+```
+
+---
+
+### UI Elements
+
+#### XMarkBadge
+
+Trust and feature badges with presets.
+
+```vue
+<XMarkBadge preset="no-credit-card" variant="subtle" />
+<XMarkBadge preset="cancel-anytime" />
+<XMarkBadge icon="i-lucide-star" label="5-star rated" />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `preset` | `String` | `''` | `no-credit-card`, `cancel-anytime`, `money-back`, `free-trial`, `secure` |
+| `icon` | `String` | `''` | Custom icon (if no preset) |
+| `label` | `String` | `''` | Custom label (if no preset) |
+| `variant` | `String` | `'default'` | `default`, `subtle`, `outline` |
+
+#### XMarkGlassCard
+
+Glassmorphism card with blur effect.
+
+```vue
+<XMarkGlassCard :blur="10" :opacity="0.1">
+  <h3>Card Content</h3>
+</XMarkGlassCard>
+```
+
+#### XMarkPromoCard
+
+Promotional card with image and CTA.
+
+```vue
+<XMarkPromoCard
+  title="Special Offer"
+  description="Get 50% off your first month."
+  image="/promo.jpg"
+  cta-text="Claim Offer"
+  cta-link="/pricing"
+/>
+```
+
+#### XMarkGlowDivider
+
+Glowing section divider.
+
+```vue
+<XMarkGlowDivider color="primary" :intensity="0.5" />
+```
+
+#### XMarkPatternBg
+
+SVG background patterns.
+
+```vue
+<XMarkPatternBg pattern="dots" :opacity="0.05" />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `pattern` | `String` | `'dots'` | `dots`, `grid`, `diagonal`, `topography`, `circuit`, `waves` |
+| `opacity` | `Number` | `0.05` | Pattern opacity |
+
+#### XMarkSectionStitch
+
+Section divider shapes.
+
+```vue
+<XMarkSectionStitch shape="wave" position="top" :flip="false" />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `shape` | `String` | `'wave'` | `angle`, `wave`, `curve`, `triangle`, `zigzag` |
+| `position` | `String` | `'bottom'` | `top`, `bottom` |
+| `flip` | `Boolean` | `false` | Flip horizontally |
+
+---
+
+### Modals & Overlays
+
+#### XMarkVideoModal
+
+Video lightbox supporting YouTube, Vimeo, and direct URLs.
+
+```vue
+<XMarkVideoModal
+  v-model="showVideo"
+  url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+  title="Product Demo"
+/>
+```
+
+#### XMarkImageLightbox
+
+Image gallery lightbox with keyboard navigation.
+
+```vue
+<XMarkImageLightbox
+  v-model="showLightbox"
+  :images="[
+    { src: '/gallery/1.jpg', alt: 'Image 1', caption: 'First image' },
+    { src: '/gallery/2.jpg', alt: 'Image 2' },
+  ]"
+  :start-index="0"
+/>
+```
+
+#### XMarkFeatureModal
+
+Feature detail modal.
+
+```vue
+<XMarkFeatureModal
+  v-model="showFeature"
+  :feature="{
+    icon: 'i-lucide-zap',
+    title: 'Lightning Fast',
+    description: 'Detailed description...',
+    image: '/features/speed.jpg',
+  }"
+/>
+```
+
+---
+
+### Notifications & Banners
+
+#### XMarkAnnouncementBar
+
+Dismissible top announcement banner.
+
+```vue
+<XMarkAnnouncementBar
+  message="New feature available!"
+  link-text="Learn more"
+  link-url="/features"
+  variant="primary"
+  :dismissible="true"
+  @dismiss="handleDismiss"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `message` | `String` | required | Announcement text |
+| `linkText` | `String` | `''` | Optional link text |
+| `linkUrl` | `String` | `''` | Optional link URL |
+| `variant` | `String` | `'primary'` | `primary`, `neutral`, `success`, `warning`, `error` |
+| `dismissible` | `Boolean` | `true` | Show dismiss button |
+
+#### XMarkCookieBanner
+
+Cookie consent banner.
+
+```vue
+<XMarkCookieBanner
+  message="We use cookies to improve your experience."
+  accept-text="Accept All"
+  decline-text="Decline"
+  :show-preferences="true"
+  @accept="handleAccept"
+  @decline="handleDecline"
+  @preferences="handlePreferences"
+/>
+```
+
+#### XMarkCookieToast
+
+Cookie toast notification.
+
+```vue
+<XMarkCookieToast
+  message="We use cookies"
+  @accept="handleAccept"
+/>
 ```
 
-### Example Configuration
+#### XMarkGDPR
 
-Below is an example configuration for `xMarketing`:
+GDPR cookie preference modal.
+
+```vue
+<XMarkGDPR
+  v-model="showGDPR"
+  :categories="[
+    { id: 'necessary', name: 'Necessary', description: 'Required for the site to work.', required: true },
+    { id: 'analytics', name: 'Analytics', description: 'Help us improve.', default: false },
+  ]"
+  @save="handleSavePreferences"
+/>
+```
+
+#### XMarkSocialProofToast
+
+Social proof notification toasts.
+
+```vue
+<XMarkSocialProofToast
+  :notifications="[
+    { name: 'John', location: 'New York', action: 'signed up', time: '2 minutes ago' },
+  ]"
+  :interval="5000"
+  position="bottom-left"
+/>
+```
+
+---
+
+### Utilities
+
+#### XMarkBackToTop
+
+Scroll to top button.
+
+```vue
+<XMarkBackToTop :show-after="300" :smooth="true" />
+```
+
+#### XMarkPopupChat
+
+Chat widget trigger.
+
+```vue
+<XMarkPopupChat
+  provider="intercom"
+  :config="{ app_id: 'your-app-id' }"
+/>
+```
+
+---
+
+## Configuration
+
+Configure the layer in your `app.config.js`:
 
 ```javascript
 export default defineAppConfig({
-  ui: {
-    primary: "sky",
-    header: {
-      container: "max-w-screen-2xl container mx-auto",
-    },
-  },
   xMarketing: {
     name: "X Enterprises",
     config: {
-      markerProjectId: "project-1234",
-    },
-    header: {
-      logo: {
-        src: "/images/logo.png",
-        alt: "X Enterprises",
-      },
-      nav: {
-        buttons: [{ label: "Contact Us", to: "/contact" }],
-        links: [{ label: "About", to: "/about" }],
-      },
-    },
-    footer: {
-      logo: {
-        src: "/images/footer-logo.png",
-        alt: "X Enterprises Footer Logo",
-      },
-      bg: {
-        color: "#f3f3f3",
-        img: {
-          src: "/images/footer-bg.png",
-          alt: "Footer Background Image",
-        },
-      },
-      body: "© 2024 X Enterprises. All rights reserved.",
-      socials: [
-        {
-          name: "Facebook",
-          url: "https://facebook.com",
-          icon: "facebook-icon",
-        },
-      ],
-      columns: [
-        {
-          headerLabel: "Company",
-          links: [{ label: "About Us", to: "/about" }],
-        },
-      ],
+      markerProjectId: "your-marker-project-id", // Optional: Marker.io integration
     },
   },
 });
 ```
 
-### Additional Notes
+---
+
+## Testing
+
+### Unit Tests
+
+Run unit tests with Vitest:
+
+```bash
+npm run test:unit
+```
+
+### E2E Tests
+
+Run end-to-end tests with Playwright:
+
+```bash
+npm run test:e2e
+```
+
+---
+
+## CSS Classes
+
+The layer provides utility classes for consistent styling:
+
+| Class | Description |
+|-------|-------------|
+| `xText-display` | Large display heading |
+| `xText-headline` | Section headline |
+| `xText-title` | Card/feature title |
+| `xText-eyebrow` | Small uppercase label |
+| `xText-balance` | Text wrap balance |
+| `xFadeUp` | Scroll-triggered fade-in animation |
+| `xHover-zoom` | Zoom on hover effect |
+| `xParallax` | Parallax scroll effect |
+| `xGlass` | Glassmorphism effect |
 
-- **Icons for Socials**: Icons should be referenced by name and sourced from your project’s icon library.
-- **Responsive Layouts**: Use `container` and `max-w-screen` utilities for responsive designs.
+---
 
 ## License
 
-This project is open-source and can be modified as per your project requirements.
+MIT License - see LICENSE file for details.