@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/layout/section.vue

@@ -1,266 +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">Section</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Container wrapper with background variants, patterns, and images.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="space-y-0">
-      <!-- Default Background -->
-      <XMarkSection bg="default" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-neutral-200 dark:bg-neutral-700 text-xs font-medium mb-4">bg="default"</span>
-          <h2 class="xText-headline">Default Background</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
-            White in light mode, dark in dark mode. The standard section background.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- Subtle Background -->
-      <XMarkSection bg="subtle" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-neutral-200 dark:bg-neutral-700 text-xs font-medium mb-4">bg="subtle"</span>
-          <h2 class="xText-headline">Subtle Background</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
-            Light gray in light mode, slightly elevated in dark mode. Good for alternating sections.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- Elevated Background -->
-      <XMarkSection bg="elevated" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-200 dark:bg-primary-800 text-xs font-medium mb-4">bg="elevated"</span>
-          <h2 class="xText-headline">Elevated Background</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
-            Light primary tint for emphasis. Draws attention to featured sections.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- Bold Background -->
-      <XMarkSection bg="bold" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-neutral-700 dark:bg-neutral-200 text-white dark:text-neutral-900 text-xs font-medium mb-4">bg="bold"</span>
-          <h2 class="xText-headline">Bold Background</h2>
-          <p class="mt-4 text-neutral-300 dark:text-neutral-600 max-w-xl mx-auto">
-            Dark in light mode, light in dark mode. Great for CTAs and contrast.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- Custom Color -->
-      <XMarkSection :bg="{ color: 'bg-gradient-to-br from-primary-500 to-primary-700' }" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-white/20 text-white text-xs font-medium mb-4">:bg="{ color: '...' }"</span>
-          <h2 class="xText-headline text-white">Custom Color</h2>
-          <p class="mt-4 text-white/80 max-w-xl mx-auto">
-            Use bg.color for custom Tailwind background classes. Overrides variant presets.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- Custom Color with Pattern -->
-      <XMarkSection :bg="{ color: 'bg-amber-50 dark:bg-amber-950', pattern: 'waves', patternOpacity: 0.08 }" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 text-xs font-medium mb-4">color + pattern</span>
-          <h2 class="xText-headline">Custom Color with Pattern</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
-            Combine custom colors with patterns for unique section designs.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- With Pattern -->
-      <XMarkSection :bg="{ variant: 'default', pattern: 'dots', patternOpacity: 0.1 }" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-neutral-200 dark:bg-neutral-700 text-xs font-medium mb-4">pattern: 'dots'</span>
-          <h2 class="xText-headline">With Dot Pattern</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
-            Subtle dot pattern overlay. Available patterns: dots, grid, diagonal, topography, circuit, waves.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- With Grid Pattern -->
-      <XMarkSection :bg="{ variant: 'subtle', pattern: 'grid', patternOpacity: 0.08 }" padding="lg">
-        <div class="text-center">
-          <span class="inline-block px-3 py-1 rounded-full bg-neutral-200 dark:bg-neutral-700 text-xs font-medium mb-4">pattern: 'grid'</span>
-          <h2 class="xText-headline">With Grid Pattern</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
-            Grid pattern adds a technical, structured feel to sections.
-          </p>
-        </div>
-      </XMarkSection>
-
-      <!-- Props Documentation -->
-      <XMarkSection bg="default" padding="xl">
-        <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">bg</td>
-                <td class="py-3 px-4">String | Object</td>
-                <td class="py-3 px-4">'default'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">String shorthand for variant, or object with all bg options</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">padding</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'lg'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">none, xs, sm, md, lg, xl</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">container</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'lg'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">sm, md, lg, xl, full, none</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <h3 class="text-md font-semibold mt-8 mb-4">bg Object Properties</h3>
-        <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">Property</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">variant</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'default'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">default, subtle, elevated, bold, transparent</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">color</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">Custom Tailwind classes (overrides variant)</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">image</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">Background image URL</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">imageAlt</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">Background image alt text</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">imageOverlay</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">light, heavy, gradient</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">imagePosition</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'object-center'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Tailwind object-position class</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">pattern</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">dots, grid, diagonal, topography, circuit, waves</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">patternOpacity</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">0.05</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">0 to 1</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">parallax</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">Enable parallax on background image</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">parallaxSpeed</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">0.3</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Parallax intensity (0.1 - 1.0)</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="subtle" padding="lg">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Section Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<!-- String shorthand for variant -->
-<XMarkSection bg="default" padding="lg">
-  <h2>Your Content</h2>
-</XMarkSection>
-
-<!-- Alternating sections -->
-<XMarkSection bg="default">...</XMarkSection>
-<XMarkSection bg="subtle">...</XMarkSection>
-<XMarkSection bg="default">...</XMarkSection>
-
-<!-- Object syntax with pattern -->
-<XMarkSection
-  :bg="{
-    variant: 'default',
-    pattern: 'dots',
-    patternOpacity: 0.08
-  }"
->
-  <h2>Section with Pattern</h2>
-</XMarkSection>
-
-<!-- Custom color background -->
-<XMarkSection
-  :bg="{ color: 'bg-gradient-to-br from-primary-500 to-primary-700' }"
-  padding="xl"
->
-  <h2 class="text-white">CTA Section</h2>
-</XMarkSection>
-
-<!-- With background image -->
-<XMarkSection
-  :bg="{
-    image: '/hero-bg.jpg',
-    imageOverlay: 'gradient',
-    parallax: true
-  }"
->
-  <h2>Hero Section</h2>
-</XMarkSection>`
-</script>

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

@@ -1,199 +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">X Legal Footer</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        X Enterprises branded legal footer with configurable props. Defaults to X Enterprises branding if no props are set.
-      </p>
-    </div>
-
-    <!-- Demo Content -->
-    <div class="p-8 space-y-12">
-      <!-- Default (X Enterprises) -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Default (X Enterprises Branding)</h2>
-        <p class="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-          Without any props, displays X Enterprises logo, copyright, and legal links.
-        </p>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XXLegal />
-        </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">
-          <XXLegal
-            copyright="© 2024 Acme Corporation. All rights reserved."
-          />
-        </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">
-          <XXLegal
-            :links="customLinks"
-          />
-        </div>
-      </section>
-
-      <!-- Custom Logo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Logo</h2>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XXLegal
-            :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Custom Logo', href: '/' }"
-            copyright="© 2024 Custom Company"
-          />
-        </div>
-      </section>
-
-      <!-- No Logo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">No Logo</h2>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XXLegal
-            :logo="false"
-            copyright="© 2024 Simple Company. All rights reserved."
-          />
-        </div>
-      </section>
-
-      <!-- Fully Custom -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Fully Customized</h2>
-        <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
-          <XXLegal
-            :logo="{ src: 'https://cdn.x.enterprises/logo-x.png', alt: 'Acme Inc', href: 'https://example.com' }"
-            copyright="© 2020-2024 Acme Inc. Built with love."
-            :links="fullCustomLinks"
-          />
-        </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">X Enterprises copyright</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">X Enterprises legal links</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Array of { label, href } for legal links</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">logo</td>
-                <td class="py-3 px-4">Object | false</td>
-                <td class="py-3 px-4">X Enterprises logo</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Logo config { src, alt, href } or false to hide</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- Default Values -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Default Values</h2>
-        <div class="bg-neutral-50 dark:bg-neutral-800/50 rounded-lg p-6 space-y-4">
-          <div>
-            <h3 class="font-medium text-sm mb-2">Default Logo</h3>
-            <code class="text-xs bg-neutral-200 dark:bg-neutral-700 px-2 py-1 rounded">
-              { src: 'https://cdn.x.enterprises/logo-x.png', alt: 'X Enterprises', href: 'https://x.enterprises' }
-            </code>
-          </div>
-          <div>
-            <h3 class="font-medium text-sm mb-2">Default Copyright</h3>
-            <code class="text-xs bg-neutral-200 dark:bg-neutral-700 px-2 py-1 rounded">
-              Copyright ©2016-{{ new Date().getFullYear() }} X Enterprises, LLC. All Rights Reserved.
-            </code>
-          </div>
-          <div>
-            <h3 class="font-medium text-sm mb-2">Default Links</h3>
-            <ul class="text-xs space-y-1 text-neutral-600 dark:text-neutral-400">
-              <li>Terms of Service → https://x.enterprises/legal/terms</li>
-              <li>Privacy Policy → https://x.enterprises/legal/privacy-policy</li>
-              <li>Cookie Policy → https://x.enterprises/legal/cookie-policy</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="X Legal Footer Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const customLinks = [
-  { label: 'Privacy Policy', href: '/privacy' },
-  { label: 'Terms of Service', href: '/terms' },
-  { label: 'Cookie Policy', href: '/cookies' },
-]
-
-const fullCustomLinks = [
-  { label: 'Terms', href: 'https://example.com/terms' },
-  { label: 'Privacy', href: 'https://example.com/privacy' },
-  { label: 'Cookies', href: 'https://example.com/cookies' },
-  { label: 'GDPR', href: 'https://example.com/gdpr' },
-]
-
-const codeExample = `<!-- Default (X Enterprises branding) -->
-<XXLegal />
-
-<!-- Custom copyright only -->
-<XXLegal
-  copyright="© 2024 Your Company. All rights reserved."
-/>
-
-<!-- Custom links -->
-<XXLegal
-  :links="[
-    { label: 'Privacy Policy', href: '/privacy' },
-    { label: 'Terms of Service', href: '/terms' },
-    { label: 'Cookie Policy', href: '/cookies' }
-  ]"
-/>
-
-<!-- Custom logo -->
-<XXLegal
-  :logo="{ src: '/logo.png', alt: 'Company', href: '/' }"
-/>
-
-<!-- Hide logo -->
-<XXLegal :logo="false" />
-
-<!-- Fully customized -->
-<XXLegal
-  :logo="{ src: '/logo.png', alt: 'Company', href: '/' }"
-  copyright="© 2024 Company Inc. All rights reserved."
-  :links="[
-    { label: 'Terms', href: '/terms' },
-    { label: 'Privacy', href: '/privacy' }
-  ]"
-/>`
-</script>