@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/.claude/settings.local.json

@@ -0,0 +1,22 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(curl:*)",
+      "Bash(npm run dev:*)",
+      "Bash(cat:*)",
+      "Bash(npm install:*)",
+      "Bash(find:*)",
+      "Bash(ls:*)",
+      "Skill(frontend-design)",
+      "Bash(git log:*)",
+      "Bash(test:*)",
+      "Bash(timeout 300 npx playwright test:*)",
+      "Bash(npx playwright test:*)",
+      "Bash(npx playwright install:*)",
+      "Bash({} ;)",
+      "mcp__plugin_context7_context7__resolve-library-id",
+      "mcp__plugin_context7_context7__query-docs",
+      "Bash(git reset:*)"
+    ]
+  }
+}

package/.playground/app.config.ts

@@ -1,72 +1,71 @@
 export default defineAppConfig({
   xMarketing: {
-    name: "My amazing Nuxt layer (overwritten)",
+    name: "X Marketing Components",
     config: {
-      markerProjectId: "67191169861c84dffad87d71",
+      markerProjectId: "",
       emailMarketingNewsletters: {
-        organizationId: "test-org-id",
+        organizationId: "",  // Disabled for documentation playground
       },
     },
     header: {
       logo: {
         src: "https://cdn.x.enterprises/logo-x.png",
-        alt: "X Enterprises",
+        srcDark: "https://cdn.x.enterprises/logo-x.png",
+        alt: "nuxt-x-marketing",
       },
       nav: {
-        buttons: [
-          {
-            label: "Get Started",
-            to: "/get-started",
-          },
-        ],
         links: [
-          {
-            label: "Home",
-            to: "/",
-          },
-          {
-            label: "Blog",
-            to: "/blog",
-          },
+          { label: "Features", to: "#features" },
+          { label: "Testimonials", to: "#testimonials" },
+          { label: "Pricing", to: "#pricing" },
+          { label: "Blog", to: "/blog/card" },
+        ],
+        buttons: [
+          { label: "Sign In", to: "#" },
+          { label: "Get Started", to: "#", color: "primary" },
         ],
       },
     },
     footer: {
+      bg: {
+        color: "bg-gray-900",
+      },
       logo: {
         src: "https://cdn.x.enterprises/logo-x.png",
-        alt: "",
+        alt: "nuxt-x-marketing",
       },
-      bg: {
-        color: "",
-        img: {
-          src: "https://cdn.x.enterprises/bg-gradient.svg",
-          alt: "Gradient background",
-        },
-      },
-      body: "Rock Your Band's World with Bandmate - the all-in-one platform	designed to streamline your band's management, collaboration,	and growth. Stay connected, stay inspired, and keep rocking	with Bandmate! Follow us on social media and join our	newsletter for the latest updates, tips, and industry news.	Let's make music together!",
+      body: "A comprehensive collection of beautifully designed marketing components built with Nuxt UI v4 and Tailwind CSS. Perfect for landing pages, marketing sites, and SaaS products.",
       socials: [
-        {
-          name: "Instagram",
-          url: "https://www.instagram.com/bandmate.io",
-          icon: "i-simple-icons-instagram",
-        },
+        { name: "GitHub", url: "https://github.com", icon: "i-lucide-github" },
+        { name: "Twitter", url: "https://twitter.com", icon: "i-lucide-twitter" },
+        { name: "LinkedIn", url: "https://linkedin.com", icon: "i-lucide-linkedin" },
       ],
       columns: [
         {
-          headerLabel: "Products",
+          headerLabel: "Product",
+          links: [
+            { label: "Features", to: "#features" },
+            { label: "Pricing", to: "#pricing" },
+            { label: "Changelog", to: "#" },
+            { label: "Roadmap", to: "#" },
+          ],
+        },
+        {
+          headerLabel: "Company",
+          links: [
+            { label: "About", to: "#" },
+            { label: "Blog", to: "/blog/card" },
+            { label: "Careers", to: "#" },
+            { label: "Contact", to: "#" },
+          ],
+        },
+        {
+          headerLabel: "Resources",
           links: [
-            {
-              label: "Features",
-              to: "/features",
-            },
-            {
-              label: "Pricing",
-              to: "/pricing",
-            },
-            {
-              label: "Customers",
-              to: "/customers",
-            },
+            { label: "Documentation", to: "#" },
+            { label: "Guides", to: "#" },
+            { label: "Help Center", to: "#" },
+            { label: "Community", to: "#" },
           ],
         },
       ],

package/.playground/app.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
+    <!-- Sidebar Navigation -->
+    <aside class="fixed top-0 left-0 w-64 h-screen bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 overflow-y-auto z-50">
+      <!-- Header -->
+      <div class="p-6 border-b border-neutral-200 dark:border-neutral-800">
+        <NuxtLink to="/" class="block">
+          <h1 class="text-lg font-bold text-neutral-900 dark:text-white">nuxt-x-marketing</h1>
+          <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Component Playground</p>
+        </NuxtLink>
+      </div>
+
+      <!-- Dark Mode Toggle -->
+      <div class="px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
+        <button
+          @click="toggleDarkMode"
+          class="flex items-center gap-2 px-3 py-2 w-full rounded-lg text-sm text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+        >
+          <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-4 h-4" />
+          <span>{{ isDark ? 'Light Mode' : 'Dark Mode' }}</span>
+        </button>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="p-4 space-y-6">
+        <!-- Getting Started -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Getting Started</h3>
+          <ul class="space-y-1">
+            <li>
+              <NuxtLink
+                to="/"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+                :class="isActive('/') ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <UIcon name="i-lucide-home" class="w-4 h-4" />
+                <span>Kitchen Sink</span>
+              </NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="/config"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+                :class="isActive('/config') ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <UIcon name="i-lucide-settings" class="w-4 h-4" />
+                <span>App Config</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Layout -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Layout</h3>
+          <ul class="space-y-1">
+            <li v-for="item in navItems.layout" :key="item.to">
+              <NuxtLink
+                :to="item.to"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Hero -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Hero</h3>
+          <ul class="space-y-1">
+            <li>
+              <NuxtLink
+                to="/hero"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive('/hero') ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>Hero</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Content -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Content</h3>
+          <ul class="space-y-1">
+            <li v-for="item in navItems.content" :key="item.to">
+              <NuxtLink
+                :to="item.to"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Blog -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Blog</h3>
+          <ul class="space-y-1">
+            <li v-for="item in navItems.blog" :key="item.to">
+              <NuxtLink
+                :to="item.to"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- UI Elements -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">UI Elements</h3>
+          <ul class="space-y-1">
+            <li v-for="item in navItems.ui" :key="item.to">
+              <NuxtLink
+                :to="item.to"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Modals -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Modals</h3>
+          <ul class="space-y-1">
+            <li v-for="item in navItems.modals" :key="item.to">
+              <NuxtLink
+                :to="item.to"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Notifications -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Notifications</h3>
+          <ul class="space-y-1">
+            <li v-for="item in navItems.notifications" :key="item.to">
+              <NuxtLink
+                :to="item.to"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Utilities -->
+        <div>
+          <h3 class="px-3 text-xs font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">Utilities</h3>
+          <ul class="space-y-1">
+            <li v-for="item in navItems.utilities" :key="item.to">
+              <NuxtLink
+                :to="item.to"
+                class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors"
+                :class="isActive(item.to) ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300' : 'text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800'"
+              >
+                <span>{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <!-- Footer -->
+      <div class="p-4 border-t border-neutral-200 dark:border-neutral-800 mt-auto">
+        <p class="text-xs text-neutral-400 dark:text-neutral-500 text-center">33 Components</p>
+      </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="ml-64">
+      <NuxtPage />
+    </main>
+
+    <!-- Nuxt UI Providers for modals and toasts -->
+    <UModals />
+    <UToaster />
+  </div>
+</template>
+
+<script setup>
+const colorMode = useColorMode()
+const route = useRoute()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+function toggleDarkMode() {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
+function isActive(path) {
+  return route.path === path
+}
+
+const navItems = {
+  layout: [
+    { label: 'Navbar', to: '/layout/navbar' },
+    { label: 'Section', to: '/layout/section' },
+    { label: 'Footer', to: '/layout/footer' },
+    { label: 'Legal Footer', to: '/layout/legal-footer' },
+    { label: 'X Legal Footer', to: '/layout/x-legal' }
+  ],
+  content: [
+    { label: 'Features', to: '/content/features' },
+    { label: 'Testimonials', to: '/content/testimonials' },
+    { label: 'Pricing', to: '/content/pricing' },
+    { label: 'Comparison', to: '/content/comparison' },
+    { label: 'Newsletter', to: '/content/newsletter' },
+    { label: 'CTA', to: '/content/cta' }
+  ],
+  blog: [
+    { label: 'Card', to: '/blog/card' },
+    { label: 'List', to: '/blog/list' },
+    { label: 'Detail', to: '/blog/detail' },
+    { label: 'Sidebar', to: '/blog/sidebar' },
+    { label: 'Author', to: '/blog/author' },
+    { label: 'Navigation', to: '/blog/navigation' },
+    { label: 'Newsletter CTA', to: '/blog/cta' }
+  ],
+  ui: [
+    { label: 'Badge', to: '/ui/badge' },
+    { label: 'Glass Card', to: '/ui/glass-card' },
+    { label: 'Promo Card', to: '/ui/promo-card' },
+    { label: 'Glow Divider', to: '/ui/glow-divider' },
+    { label: 'Bg Pattern', to: '/ui/bg-pattern' },
+    { label: 'Section Stitch', to: '/ui/section-stitch' }
+  ],
+  modals: [
+    { label: 'Video Modal', to: '/modals/video-modal' },
+    { label: 'Image Lightbox', to: '/modals/image-lightbox' },
+    { label: 'Feature Modal', to: '/modals/feature-modal' }
+  ],
+  notifications: [
+    { label: 'Announcement Bar', to: '/notifications/announcement-bar' },
+    { label: 'Cookie Banner', to: '/notifications/cookie-banner' },
+    { label: 'Cookie Toast', to: '/notifications/cookie-toast' },
+    { label: 'GDPR', to: '/notifications/gdpr' },
+    { label: 'Social Proof Toast', to: '/notifications/social-proof-toast' }
+  ],
+  utilities: [
+    { label: 'Back to Top', to: '/utilities/back-to-top' },
+    { label: 'Popup Chat', to: '/utilities/popup-chat' }
+  ]
+}
+</script>

package/.playground/components/AppFooter.vue

@@ -0,0 +1,103 @@
+<template>
+	<footer class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
+				<!-- About -->
+				<div>
+					<h3 class="font-semibold text-gray-900 dark:text-white mb-4">
+						X Marketing Components
+					</h3>
+					<p class="text-sm text-gray-600 dark:text-gray-400">
+						A comprehensive collection of 60+ production-ready marketing components built with Nuxt UI v4.
+					</p>
+				</div>
+
+				<!-- Documentation -->
+				<div>
+					<h4 class="font-semibold text-gray-900 dark:text-white mb-4">Documentation</h4>
+					<ul class="space-y-2">
+						<li>
+							<NuxtLink
+								to="/docs"
+								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+							>
+								Getting Started
+							</NuxtLink>
+						</li>
+						<li>
+							<NuxtLink
+								to="/docs/quick-start"
+								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+							>
+								Quick Start
+							</NuxtLink>
+						</li>
+						<li>
+							<NuxtLink
+								to="/docs/components"
+								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+							>
+								All Components
+							</NuxtLink>
+						</li>
+					</ul>
+				</div>
+
+				<!-- Resources -->
+				<div>
+					<h4 class="font-semibold text-gray-900 dark:text-white mb-4">Resources</h4>
+					<ul class="space-y-2">
+						<li>
+							<a
+								href="https://ui.nuxt.com"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+							>
+								Nuxt UI Docs
+							</a>
+						</li>
+						<li>
+							<a
+								href="https://nuxt.com"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+							>
+								Nuxt Docs
+							</a>
+						</li>
+						<li>
+							<a
+								href="https://tailwindcss.com"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+							>
+								Tailwind CSS
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<!-- Bottom -->
+			<div class="border-t border-gray-200 dark:border-gray-800 pt-8 flex justify-between items-center">
+				<p class="text-sm text-gray-600 dark:text-gray-400">
+					© 2025 X Marketing. Built with Nuxt UI v4.
+				</p>
+				<div class="flex items-center gap-4">
+					<a
+						href="https://github.com"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+					>
+						<UIcon name="i-lucide-github" class="w-5 h-5" />
+					</a>
+				</div>
+			</div>
+		</div>
+	</footer>
+</template>
+

package/.playground/components/AppHeader.vue

@@ -0,0 +1,41 @@
+<template>
+	<header class="sticky top-0 z-40 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950">
+		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+			<div class="flex justify-between items-center h-16">
+				<!-- Logo -->
+				<NuxtLink to="/" class="flex items-center gap-2 font-semibold text-lg">
+					<UIcon name="i-lucide-layers" class="w-6 h-6 text-primary" />
+					<span>X Marketing</span>
+				</NuxtLink>
+
+				<!-- Navigation -->
+				<nav class="hidden md:flex items-center gap-8">
+					<NuxtLink
+						to="/"
+						class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+					>
+						Demo
+					</NuxtLink>
+					<NuxtLink
+						to="/docs"
+						class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+					>
+						Documentation
+					</NuxtLink>
+				</nav>
+
+				<!-- Right Actions -->
+				<div class="flex items-center gap-4">
+					<UButton
+						to="/docs/quick-start"
+						variant="soft"
+						size="sm"
+						label="Get Started"
+					/>
+					<UColorModeButton />
+				</div>
+			</div>
+		</div>
+	</header>
+</template>
+

package/.playground/components/CodeExample.vue

@@ -0,0 +1,70 @@
+<template>
+	<div
+		class="border border-default rounded-lg overflow-hidden bg-white dark:bg-slate-950 shadow-sm"
+	>
+		<div
+			class="flex items-center justify-between bg-gradient-to-r from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 py-3 border-b border-default"
+		>
+			<div class="flex items-center gap-2">
+				<div class="w-2 h-2 rounded-full bg-blue-500"></div>
+				<span
+					class="text-sm font-semibold text-slate-700 dark:text-slate-300"
+					>{{ title }}</span
+				>
+			</div>
+			<div class="flex items-center gap-2">
+				<span
+					v-if="copied"
+					class="text-xs text-green-600 dark:text-green-400 font-medium flex items-center gap-1"
+				>
+					<i class="i-lucide-check w-3 h-3" />
+					Copied!
+				</span>
+				<UButton
+					:icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
+					:color="copied ? 'green' : 'gray'"
+					variant="ghost"
+					size="xs"
+					@click="copyCode"
+					:disabled="copied"
+					class="transition-all"
+				>
+					{{ copied ? "Copied" : "Copy" }}
+				</UButton>
+			</div>
+		</div>
+		<div class="overflow-x-auto bg-white dark:bg-slate-950">
+			<pre
+				class="p-4 text-sm leading-relaxed text-slate-800 dark:text-slate-200 font-mono whitespace-pre-wrap break-words"
+			><code>{{ code }}</code></pre>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	title: {
+		type: String,
+		default: "Code Example",
+	},
+	code: {
+		type: String,
+		required: true,
+	},
+});
+
+const copied = ref(false);
+
+const copyCode = async () => {
+	try {
+		await navigator.clipboard.writeText(props.code);
+		copied.value = true;
+		setTimeout(() => {
+			copied.value = false;
+		}, 2000);
+	} catch (err) {
+		console.error("Failed to copy:", err);
+	}
+};
+</script>
+