@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/layout/footer.vue

@@ -1,210 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <!-- Page Header -->
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Footer</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Full footer with logo, description, link columns, social icons, and newsletter.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="p-8 space-y-12">
-      <!-- Live Demo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Live Demo</h2>
-        <div class="rounded-lg overflow-hidden">
-          <XMarkLayoutFooter
-            :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Company Logo' }"
-            description="Building beautiful marketing components for the modern web."
-            :columns="columns"
-            :social="socialLinks"
-            :has-newsletter="true"
-            newsletter-title="Subscribe to our newsletter"
-            newsletter-description="Get the latest news and updates."
-            copyright="© 2024 Company Name. All rights reserved."
-          />
-        </div>
-      </section>
-
-      <!-- Without Newsletter -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Without Newsletter</h2>
-        <div class="rounded-lg overflow-hidden">
-          <XMarkLayoutFooter
-            :logo="{ src: 'https://cdn.x.enterprises/logo-x.png' }"
-            description="Minimal footer without the newsletter section."
-            :columns="columns"
-            :social="socialLinks"
-            :has-newsletter="false"
-          />
-        </div>
-      </section>
-
-      <!-- Props Table -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Props</h2>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-neutral-200 dark:border-neutral-700">
-                <th class="text-left py-3 px-4 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">Description</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">logo</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">-</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Logo object { src, alt? }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">description</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">-</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Company description text</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">columns</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">[]</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Array of { title, links: [{ label, to }] }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">social</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">[]</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Array of { name, icon, href }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">legalLinks</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">[]</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Array of { label, to } for legal/policy links</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">copyright</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">auto</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Copyright text</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasNewsletter</td>
-                <td class="py-3 px-4">Boolean</td>
-                <td class="py-3 px-4">false</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Has newsletter signup section</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">newsletterTitle</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'Subscribe to our newsletter'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Newsletter section title</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">newsletterDescription</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'Get the latest updates and news.'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Newsletter section description</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- Slots -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Slots</h2>
-        <div class="space-y-4">
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#brand</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom brand section (logo + description)</p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Footer Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<XMarkLayoutFooter
-  :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Company Logo' }"
-  description="Building beautiful marketing components."
-  :columns="[
-    {
-      title: 'Product',
-      links: [
-        { label: 'Features', to: '/features' },
-        { label: 'Pricing', to: '/pricing' }
-      ]
-    },
-    {
-      title: 'Company',
-      links: [
-        { label: 'About', to: '/about' },
-        { label: 'Blog', to: '/blog' }
-      ]
-    }
-  ]"
-  :social="[
-    { name: 'Twitter', icon: 'i-lucide-twitter', href: '#' },
-    { name: 'GitHub', icon: 'i-lucide-github', href: '#' }
-  ]"
-  :has-newsletter="true"
-  newsletter-title="Subscribe to our newsletter"
-  copyright="© 2024 Company Name. All rights reserved."
-/>`
-
-const columns = [
-  {
-    title: 'Product',
-    links: [
-      { label: 'Features', to: '#' },
-      { label: 'Pricing', to: '#' },
-      { label: 'Changelog', to: '#' },
-      { label: 'Roadmap', to: '#' }
-    ]
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'About', to: '#' },
-      { label: 'Blog', to: '#' },
-      { label: 'Careers', to: '#' },
-      { label: 'Contact', to: '#' }
-    ]
-  },
-  {
-    title: 'Resources',
-    links: [
-      { label: 'Documentation', to: '#' },
-      { label: 'Help Center', to: '#' },
-      { label: 'Community', to: '#' },
-      { label: 'Status', to: '#' }
-    ]
-  },
-  {
-    title: 'Legal',
-    links: [
-      { label: 'Privacy', to: '#' },
-      { label: 'Terms', to: '#' },
-      { label: 'Cookies', to: '#' }
-    ]
-  }
-]
-
-const socialLinks = [
-  { name: 'Twitter', icon: 'i-lucide-twitter', href: '#' },
-  { name: 'GitHub', icon: 'i-lucide-github', href: '#' },
-  { name: 'LinkedIn', icon: 'i-lucide-linkedin', href: '#' },
-  { name: 'YouTube', icon: 'i-lucide-youtube', href: '#' }
-]
-</script>

package/.playground/pages/layout/legal-footer.vue

@@ -1,121 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <!-- Page Header -->
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Legal Footer</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Minimal footer with copyright text and legal/policy links.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="p-8 space-y-12">
-      <!-- Default -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Default</h2>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XMarkLayoutFooterLegal />
-        </div>
-      </section>
-
-      <!-- Custom Copyright -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Copyright</h2>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XMarkLayoutFooterLegal
-            copyright="© 2024 Acme Inc. Built with love."
-          />
-        </div>
-      </section>
-
-      <!-- Custom Links -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Links</h2>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XMarkLayoutFooterLegal
-            copyright="© 2024 Your Company. All rights reserved."
-            :links="customLinks"
-          />
-        </div>
-      </section>
-
-      <!-- No Links -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">No Links</h2>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XMarkLayoutFooterLegal
-            copyright="© 2024 Simple Company"
-            :links="[]"
-          />
-        </div>
-      </section>
-
-      <!-- Props Table -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Props</h2>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-neutral-200 dark:border-neutral-700">
-                <th class="text-left py-3 px-4 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">Description</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">copyright</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">Auto-generated with year</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Copyright text displayed on the left</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">links</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">[Privacy, Terms]</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Array of { label, to } for legal links</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Legal Footer Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Basic usage with defaults -->
-<XMarkLayoutFooterLegal />
-
-<!-- Custom copyright and links -->
-<XMarkLayoutFooterLegal
-  copyright="© 2024 Your Company. All rights reserved."
-  :links="[
-    { label: 'Privacy Policy', to: '/privacy' },
-    { label: 'Terms of Service', to: '/terms' },
-    { label: 'Cookie Policy', to: '/cookies' },
-    { label: 'GDPR', to: '/gdpr' }
-  ]"
-/>
-
-<!-- Minimal (no links) -->
-<XMarkLayoutFooterLegal
-  copyright="© 2024 Simple Company"
-  :links="[]"
-/>`
-
-const customLinks = [
-  { label: 'Privacy Policy', to: '/privacy' },
-  { label: 'Terms of Service', to: '/terms' },
-  { label: 'Cookie Policy', to: '/cookies' },
-  { label: 'GDPR', to: '/gdpr' },
-  { label: 'Accessibility', to: '/accessibility' }
-]
-</script>

package/.playground/pages/layout/navbar.vue

@@ -1,285 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <!-- Page Header -->
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Navbar</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Fixed navigation header with scroll transition, mobile menu, and appConfig support.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="space-y-0">
-      <!-- Live Demo - Transparent -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Transparent Mode</span>
-          <h2 class="xText-headline">Transparent Navbar</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Starts transparent over hero content, becomes solid on scroll</p>
-        </div>
-
-        <div class="relative rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-700">
-          <div class="bg-gradient-to-br from-primary-600 to-primary-800 h-64 relative">
-            <XMarkLayoutNavbar
-              :links="links"
-              :buttons="buttons"
-              logo-alt="Acme Inc"
-              :transparent="true"
-              class="!fixed !relative"
-            >
-              <template #logo>
-                <span class="text-xl font-bold transition-colors duration-300" :class="logoColor">Acme Inc</span>
-              </template>
-            </XMarkLayoutNavbar>
-            <div class="absolute inset-0 flex items-center justify-center pt-16">
-              <div class="text-center text-white">
-                <h3 class="text-2xl font-bold">Transparent Navbar Demo</h3>
-                <p class="mt-2 text-white/80">Buttons adapt to transparent state with soft variant</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </XMarkSection>
-
-      <!-- Solid Navbar -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Solid Mode</span>
-          <h2 class="xText-headline">Solid Navbar</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Non-transparent with white/dark background</p>
-        </div>
-
-        <div class="relative rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-700">
-          <XMarkLayoutNavbar
-            :links="links"
-            :buttons="buttons"
-            logo-alt="Acme Inc"
-            :transparent="false"
-            class="!fixed !relative"
-          >
-            <template #logo>
-              <span class="text-xl font-bold text-neutral-900 dark:text-white">Acme Inc</span>
-            </template>
-          </XMarkLayoutNavbar>
-        </div>
-      </XMarkSection>
-
-      <!-- AppConfig Example -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">AppConfig</span>
-          <h2 class="xText-headline">Using AppConfig</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Configure navbar via app.config.ts for centralized management</p>
-        </div>
-
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
-          <pre>// app.config.ts
-export default defineAppConfig({
-  xMarketing: {
-    header: {
-      logo: {
-        src: 'https://cdn.x.enterprises/logo-x.png',      // For transparent state
-        srcDark: 'https://cdn.x.enterprises/logo-x.png',   // For scrolled/solid state
-        alt: 'Company Name'
-      },
-      nav: {
-        links: [
-          { label: 'Features', to: '/features' },
-          { label: 'Pricing', to: '/pricing' },
-          { label: 'About', to: '/about' }
-        ],
-        buttons: [
-          { label: 'Sign In', to: '/login' },
-          { label: 'Get Started', to: '/signup' }
-        ]
-      }
-    }
-  }
-})
-
-// Then use without props:
-&lt;XMarkLayoutNavbar /&gt;</pre>
-        </div>
-      </XMarkSection>
-
-      <!-- Props Table -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-6">Props</h2>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-neutral-200 dark:border-neutral-700">
-                <th class="text-left py-3 px-4 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">Description</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">transparent</td>
-                <td class="py-3 px-4">Boolean</td>
-                <td class="py-3 px-4">true</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Start transparent over hero content</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">links</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">appConfig</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Navigation links [{ label, to }]</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">buttons</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">appConfig</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Action buttons [{ label, to, icon?, target? }]</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">logo</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">appConfig</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Logo object { src, srcDark?, alt? }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">scrollThreshold</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">100</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Pixels to scroll before transition</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Button Behavior -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-6">Button Behavior</h2>
-        <div class="grid md:grid-cols-2 gap-6">
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <h3 class="font-medium mb-2">Transparent State</h3>
-            <ul class="text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
-              <li>• First buttons: <code class="text-primary-500">soft</code> variant, <code class="text-primary-500">white</code> color</li>
-              <li>• Last button: <code class="text-primary-500">solid</code> variant, <code class="text-primary-500">primary</code> color</li>
-              <li>• Links: white with drop shadow</li>
-            </ul>
-          </div>
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <h3 class="font-medium mb-2">Scrolled/Solid State</h3>
-            <ul class="text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
-              <li>• First buttons: <code class="text-primary-500">outline</code> variant, <code class="text-primary-500">neutral</code> color</li>
-              <li>• Last button: <code class="text-primary-500">solid</code> variant, <code class="text-primary-500">primary</code> color</li>
-              <li>• Links: neutral text color</li>
-            </ul>
-          </div>
-        </div>
-      </XMarkSection>
-
-      <!-- Slots -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Slots</h2>
-        <div class="grid md:grid-cols-2 gap-4">
-          <div class="p-4 bg-white dark:bg-neutral-800 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#logo</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom logo content</p>
-          </div>
-          <div class="p-4 bg-white dark:bg-neutral-800 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#links</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom navigation links</p>
-          </div>
-          <div class="p-4 bg-white dark:bg-neutral-800 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#actions</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom action buttons</p>
-          </div>
-          <div class="p-4 bg-white dark:bg-neutral-800 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#mobile-actions</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom mobile menu actions</p>
-          </div>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Navbar Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-// Demo data
-const links = [
-  { label: 'Features', to: '#features' },
-  { label: 'Pricing', to: '#pricing' },
-  { label: 'About', to: '#about' },
-  { label: 'Blog', to: '#blog' }
-]
-
-const buttons = [
-  { label: 'Sign In', to: '/login' },
-  { label: 'Get Started', to: '/signup' }
-]
-
-const codeExample = `<!-- Basic navbar with props -->
-<XMarkLayoutNavbar
-  :links="[
-    { label: 'Features', to: '/features' },
-    { label: 'Pricing', to: '/pricing' },
-    { label: 'About', to: '/about' }
-  ]"
-  :buttons="[
-    { label: 'Sign In', to: '/login' },
-    { label: 'Get Started', to: '/signup' }
-  ]"
-  :transparent="true"
-/>
-
-<!-- With custom logo slot -->
-<XMarkLayoutNavbar :links="links" :buttons="buttons">
-  <template #logo>
-    <span class="text-xl font-bold">Acme Inc</span>
-  </template>
-</XMarkLayoutNavbar>
-
-<!-- Using appConfig (recommended) -->
-// app.config.ts
-export default defineAppConfig({
-  xMarketing: {
-    header: {
-      logo: { src: '/logo.svg', alt: 'Company' },
-      nav: {
-        links: [...],
-        buttons: [...]
-      }
-    }
-  }
-})
-
-// Then simply:
-<XMarkLayoutNavbar />`
-
-// Transparent navbar demo - track scroll for logo color
-const isScrolled = ref(false)
-
-const logoColor = computed(() => {
-  return isScrolled.value
-    ? 'text-neutral-900 dark:text-white'
-    : 'text-white'
-})
-
-onMounted(() => {
-  const handleScroll = () => {
-    isScrolled.value = window.scrollY > 100
-  }
-
-  window.addEventListener('scroll', handleScroll, { passive: true })
-  handleScroll()
-
-  onUnmounted(() => {
-    window.removeEventListener('scroll', handleScroll)
-  })
-})
-</script>