@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/.playground/pages/ui/section-stitch.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="min-h-screen">
+    <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 Stitch</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Dramatic decorative dividers between page sections.</p>
+    </div>
+
+    <div class="p-8 space-y-16">
+      <!-- Diagonal Variants -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">Diagonal Shapes (Full Width)</h2>
+        <div class="grid md:grid-cols-2 gap-8">
+          <!-- Diagonal -->
+          <div>
+            <p class="text-sm font-medium mb-2">Diagonal (top-left to bottom-right)</p>
+            <div class="rounded-xl overflow-hidden">
+              <div class="bg-primary-600 p-8 text-center">
+                <p class="text-white font-medium">Hero Section</p>
+              </div>
+              <XMarkSectionStitch
+                variant="diagonal"
+                top-color="rgb(79 70 229)"
+                bottom-color="rgb(17 24 39)"
+                height="xl"
+              />
+              <div class="bg-gray-900 p-8 text-center">
+                <p class="text-gray-300">Content Section</p>
+              </div>
+            </div>
+          </div>
+          <!-- Slant -->
+          <div>
+            <p class="text-sm font-medium mb-2">Slant (top-right to bottom-left)</p>
+            <div class="rounded-xl overflow-hidden">
+              <div class="bg-emerald-600 p-8 text-center">
+                <p class="text-white font-medium">Hero Section</p>
+              </div>
+              <XMarkSectionStitch
+                variant="slant"
+                top-color="rgb(5 150 105)"
+                bottom-color="rgb(17 24 39)"
+                height="xl"
+              />
+              <div class="bg-gray-900 p-8 text-center">
+                <p class="text-gray-300">Content Section</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Curved Variants -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">Curved Shapes</h2>
+        <div class="space-y-0 rounded-xl overflow-hidden">
+          <!-- Concave -->
+          <div class="bg-neutral-800 p-8 text-center">
+            <p class="text-white font-medium">Concave</p>
+            <p class="text-neutral-400 text-sm">Curves inward (scoops down)</p>
+          </div>
+          <XMarkSectionStitch
+            variant="concave"
+            top-color="rgb(38 38 38)"
+            bottom-color="rgb(64 64 64)"
+            height="xl"
+          />
+          <div class="bg-neutral-700 p-6" />
+
+          <!-- Convex -->
+          <div class="bg-neutral-700 p-8 text-center">
+            <p class="text-white font-medium">Convex</p>
+            <p class="text-neutral-400 text-sm">Curves outward (bulges up)</p>
+          </div>
+          <XMarkSectionStitch
+            variant="convex"
+            top-color="rgb(64 64 64)"
+            bottom-color="rgb(82 82 82)"
+            height="xl"
+          />
+          <div class="bg-neutral-600 p-6" />
+        </div>
+      </section>
+
+      <!-- Dramatic Variants -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">Dramatic Shapes</h2>
+        <div class="space-y-0 rounded-xl overflow-hidden">
+          <!-- Clouds -->
+          <div class="bg-sky-500 p-8 text-center">
+            <p class="text-white font-medium">Clouds</p>
+            <p class="text-sky-100 text-sm">Fluffy cloud-like bumps</p>
+          </div>
+          <XMarkSectionStitch
+            variant="clouds"
+            top-color="rgb(14 165 233)"
+            bottom-color="rgb(2 132 199)"
+            height="2xl"
+          />
+          <div class="bg-sky-600 p-6" />
+
+          <!-- Waves -->
+          <div class="bg-sky-600 p-8 text-center">
+            <p class="text-white font-medium">Waves</p>
+            <p class="text-sky-100 text-sm">Flowing wave pattern</p>
+          </div>
+          <XMarkSectionStitch
+            variant="waves"
+            top-color="rgb(2 132 199)"
+            bottom-color="rgb(3 105 161)"
+            height="xl"
+          />
+          <div class="bg-sky-700 p-6" />
+
+          <!-- Peaks -->
+          <div class="bg-sky-700 p-8 text-center">
+            <p class="text-white font-medium">Peaks</p>
+            <p class="text-sky-100 text-sm">Mountain-like jagged edges</p>
+          </div>
+          <XMarkSectionStitch
+            variant="peaks"
+            top-color="rgb(3 105 161)"
+            bottom-color="rgb(7 89 133)"
+            height="xl"
+          />
+          <div class="bg-sky-800 p-6" />
+        </div>
+      </section>
+
+      <!-- More Variants -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">More Shapes</h2>
+        <div class="space-y-0 rounded-xl overflow-hidden">
+          <!-- Scallop -->
+          <div class="bg-purple-500 p-8 text-center">
+            <p class="text-white font-medium">Scallop</p>
+            <p class="text-purple-100 text-sm">Repeating curved pattern</p>
+          </div>
+          <XMarkSectionStitch
+            variant="scallop"
+            top-color="rgb(168 85 247)"
+            bottom-color="rgb(147 51 234)"
+            height="lg"
+          />
+          <div class="bg-purple-600 p-6" />
+
+          <!-- Arrow -->
+          <div class="bg-purple-600 p-8 text-center">
+            <p class="text-white font-medium">Arrow</p>
+            <p class="text-purple-100 text-sm">Pointed center arrow</p>
+          </div>
+          <XMarkSectionStitch
+            variant="arrow"
+            top-color="rgb(147 51 234)"
+            bottom-color="rgb(126 34 206)"
+            height="xl"
+          />
+          <div class="bg-purple-700 p-6" />
+
+          <!-- Tilt -->
+          <div class="bg-purple-700 p-8 text-center">
+            <p class="text-white font-medium">Tilt</p>
+            <p class="text-purple-100 text-sm">Steep diagonal angle</p>
+          </div>
+          <XMarkSectionStitch
+            variant="tilt"
+            top-color="rgb(126 34 206)"
+            bottom-color="rgb(107 33 168)"
+            height="lg"
+          />
+          <div class="bg-purple-800 p-6" />
+        </div>
+      </section>
+
+      <!-- Height Sizes -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">Height Sizes</h2>
+        <div class="grid md:grid-cols-3 lg:grid-cols-6 gap-4">
+          <div v-for="size in ['sm', 'md', 'lg', 'xl', '2xl', '3xl']" :key="size">
+            <p class="text-sm font-medium mb-2 text-center">{{ size }}</p>
+            <div class="bg-primary-500 rounded-t-lg p-4" />
+            <XMarkSectionStitch
+              variant="concave"
+              top-color="rgb(99 102 241)"
+              bottom-color="rgb(79 70 229)"
+              :height="size"
+            />
+            <div class="bg-primary-600 rounded-b-lg p-4" />
+          </div>
+        </div>
+      </section>
+
+      <!-- Reverse Options -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">Reverse &amp; Invert</h2>
+        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div>
+            <p class="text-sm font-medium mb-2">Normal</p>
+            <div class="rounded-xl overflow-hidden">
+              <div class="bg-amber-500 p-4 text-center">
+                <p class="text-white text-sm">Top</p>
+              </div>
+              <XMarkSectionStitch
+                variant="diagonal"
+                top-color="rgb(245 158 11)"
+                bottom-color="rgb(217 119 6)"
+                height="lg"
+              />
+              <div class="bg-amber-600 p-4 text-center">
+                <p class="text-white text-sm">Bottom</p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <p class="text-sm font-medium mb-2">Reverse (horizontal)</p>
+            <div class="rounded-xl overflow-hidden">
+              <div class="bg-amber-500 p-4 text-center">
+                <p class="text-white text-sm">Top</p>
+              </div>
+              <XMarkSectionStitch
+                variant="diagonal"
+                top-color="rgb(245 158 11)"
+                bottom-color="rgb(217 119 6)"
+                height="lg"
+                reverse
+              />
+              <div class="bg-amber-600 p-4 text-center">
+                <p class="text-white text-sm">Bottom</p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <p class="text-sm font-medium mb-2">Invert (vertical)</p>
+            <div class="rounded-xl overflow-hidden">
+              <div class="bg-amber-500 p-4 text-center">
+                <p class="text-white text-sm">Top</p>
+              </div>
+              <XMarkSectionStitch
+                variant="diagonal"
+                top-color="rgb(245 158 11)"
+                bottom-color="rgb(217 119 6)"
+                height="lg"
+                invert
+              />
+              <div class="bg-amber-600 p-4 text-center">
+                <p class="text-white text-sm">Bottom</p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <p class="text-sm font-medium mb-2">Both</p>
+            <div class="rounded-xl overflow-hidden">
+              <div class="bg-amber-500 p-4 text-center">
+                <p class="text-white text-sm">Top</p>
+              </div>
+              <XMarkSectionStitch
+                variant="diagonal"
+                top-color="rgb(245 158 11)"
+                bottom-color="rgb(217 119 6)"
+                height="lg"
+                reverse
+                invert
+              />
+              <div class="bg-amber-600 p-4 text-center">
+                <p class="text-white text-sm">Bottom</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- With Glow -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">With Glow Effect</h2>
+        <div class="rounded-xl overflow-hidden">
+          <div class="bg-neutral-950 p-12 text-center">
+            <p class="text-white text-xl font-bold">Dark Hero Section</p>
+            <p class="text-neutral-400 mt-2">With glowing accent divider</p>
+          </div>
+          <XMarkSectionStitch
+            variant="convex"
+            top-color="rgb(10 10 10)"
+            bottom-color="rgb(23 23 23)"
+            glow
+            glow-color="rgba(99, 102, 241, 0.6)"
+            height="2xl"
+          />
+          <div class="bg-neutral-900 p-12 text-center">
+            <p class="text-neutral-300">Content continues below</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Real World Example -->
+      <section>
+        <h2 class="text-lg font-semibold mb-6">Real World Example</h2>
+        <div class="rounded-xl overflow-hidden">
+          <div class="bg-gradient-to-b from-primary-600 to-primary-700 p-16 text-center">
+            <h3 class="text-3xl font-bold text-white mb-4">Ready to get started?</h3>
+            <p class="text-primary-100 text-lg mb-8">Join thousands of happy customers today.</p>
+            <UButton size="lg" color="white">Start Free Trial</UButton>
+          </div>
+          <XMarkSectionStitch
+            variant="clouds"
+            top-color="rgb(67 56 202)"
+            bottom-color="rgb(17 24 39)"
+            height="3xl"
+          />
+          <div class="bg-gray-900 p-16 text-center">
+            <h3 class="text-2xl font-bold text-white mb-4">Footer Section</h3>
+            <p class="text-gray-400">Beautiful cloud transition to footer</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Props -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Props</h2>
+        <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">Prop</th>
+              <th class="text-left py-3 px-4">Type</th>
+              <th class="text-left py-3 px-4">Default</th>
+              <th class="text-left py-3 px-4">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">diagonal</td><td class="py-3 px-4">diagonal, slant, concave, convex, clouds, waves, peaks, scallop, arrow, tilt</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">topColor</td><td class="py-3 px-4">String</td><td class="py-3 px-4">rgb(243 244 246)</td><td class="py-3 px-4">Top section color (CSS)</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">bottomColor</td><td class="py-3 px-4">String</td><td class="py-3 px-4">rgb(249 250 251)</td><td class="py-3 px-4">Bottom section color (CSS)</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">height</td><td class="py-3 px-4">String</td><td class="py-3 px-4">md</td><td class="py-3 px-4">sm, md, lg, xl, 2xl, 3xl</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">reverse</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">false</td><td class="py-3 px-4">Reverse direction (flip horizontally)</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">invert</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">false</td><td class="py-3 px-4">Invert vertically (swap top/bottom)</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">glow</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">false</td><td class="py-3 px-4">Add glow line at center</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">glowColor</td><td class="py-3 px-4">String</td><td class="py-3 px-4">rgba(99, 102, 241, 0.5)</td><td class="py-3 px-4">Glow line color</td></tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- Code Example -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
+        <CodeExample title="Section Stitch Usage" :code="codeExample" />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const codeExample = `<!-- Full diagonal (corner to corner) -->
+<XMarkSectionStitch
+  variant="diagonal"
+  top-color="rgb(79 70 229)"
+  bottom-color="rgb(17 24 39)"
+  height="xl"
+/>
+
+<!-- Slant (opposite direction) -->
+<XMarkSectionStitch
+  variant="slant"
+  top-color="rgb(5 150 105)"
+  bottom-color="rgb(17 24 39)"
+  height="xl"
+/>
+
+<!-- Diagonal reversed -->
+<XMarkSectionStitch
+  variant="diagonal"
+  top-color="rgb(79 70 229)"
+  bottom-color="rgb(17 24 39)"
+  height="xl"
+  reverse
+/>
+
+<!-- Dramatic cloud transition -->
+<XMarkSectionStitch
+  variant="clouds"
+  top-color="rgb(79 70 229)"
+  bottom-color="rgb(17 24 39)"
+  height="3xl"
+/>
+
+<!-- Concave (scoops down) -->
+<XMarkSectionStitch
+  variant="concave"
+  top-color="rgb(255 255 255)"
+  bottom-color="rgb(243 244 246)"
+  height="xl"
+/>
+
+<!-- Convex (bulges up) -->
+<XMarkSectionStitch
+  variant="convex"
+  top-color="rgb(243 244 246)"
+  bottom-color="rgb(229 231 235)"
+  height="xl"
+/>
+
+<!-- With glow effect -->
+<XMarkSectionStitch
+  variant="convex"
+  top-color="rgb(10 10 10)"
+  bottom-color="rgb(23 23 23)"
+  glow
+  glow-color="rgba(99, 102, 241, 0.6)"
+  height="2xl"
+/>
+
+<!-- Available variants -->
+<!-- diagonal, slant, concave, convex, clouds, waves, peaks, scallop, arrow, tilt -->`
+</script>

package/.playground/pages/utilities/back-to-top.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="min-h-screen">
+    <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">Back to Top</h1>
+      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Scroll-to-top button that appears after scrolling down.</p>
+    </div>
+
+    <div class="p-8 space-y-12">
+      <!-- Demo Instructions -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Demo</h2>
+        <p class="text-sm text-neutral-500 mb-4">Scroll down this page to see the back-to-top button appear in the bottom-right corner.</p>
+        <div class="p-4 bg-primary-50 dark:bg-primary-900/20 rounded-lg border border-primary-200 dark:border-primary-800">
+          <p class="text-primary-800 dark:text-primary-200 text-sm">
+            The button appears after scrolling 400px (default threshold).
+          </p>
+        </div>
+      </section>
+
+      <!-- Variants Preview -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Style Variants</h2>
+        <p class="text-sm text-neutral-500 mb-4">Available button styles (current demo uses primary)</p>
+        <div class="flex gap-6">
+          <div class="text-center">
+            <div class="w-12 h-12 rounded-full bg-primary-500 text-white flex items-center justify-center mb-2 shadow-lg">
+              <UIcon name="i-lucide-arrow-up" class="w-5 h-5" />
+            </div>
+            <span class="text-sm">Primary</span>
+          </div>
+          <div class="text-center">
+            <div class="w-12 h-12 rounded-full bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 flex items-center justify-center mb-2 shadow-lg">
+              <UIcon name="i-lucide-arrow-up" class="w-5 h-5" />
+            </div>
+            <span class="text-sm">Neutral</span>
+          </div>
+          <div class="text-center">
+            <div class="w-12 h-12 rounded-full xGlass text-neutral-900 dark:text-white flex items-center justify-center mb-2 shadow-lg">
+              <UIcon name="i-lucide-arrow-up" class="w-5 h-5" />
+            </div>
+            <span class="text-sm">Glass</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Position Options -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Position Options</h2>
+        <div class="grid md:grid-cols-3 gap-4">
+          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 relative h-32">
+            <div class="absolute bottom-4 right-4 w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
+              <UIcon name="i-lucide-arrow-up" class="w-4 h-4 text-white" />
+            </div>
+            <span class="text-sm font-mono">bottom-right</span>
+          </div>
+          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 relative h-32">
+            <div class="absolute bottom-4 left-4 w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
+              <UIcon name="i-lucide-arrow-up" class="w-4 h-4 text-white" />
+            </div>
+            <span class="text-sm font-mono">bottom-left</span>
+          </div>
+          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700 relative h-32">
+            <div class="absolute bottom-4 left-1/2 -translate-x-1/2 w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
+              <UIcon name="i-lucide-arrow-up" class="w-4 h-4 text-white" />
+            </div>
+            <span class="text-sm font-mono">bottom-center</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Props -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Props</h2>
+        <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">Prop</th>
+              <th class="text-left py-3 px-4">Type</th>
+              <th class="text-left py-3 px-4">Default</th>
+              <th class="text-left py-3 px-4">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">threshold</td><td class="py-3 px-4">Number</td><td class="py-3 px-4">400</td><td class="py-3 px-4">Scroll distance (px) before button appears</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">position</td><td class="py-3 px-4">String</td><td class="py-3 px-4">bottom-right</td><td class="py-3 px-4">bottom-right, bottom-left, bottom-center</td></tr>
+            <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">primary</td><td class="py-3 px-4">primary, neutral, glass</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">icon</td><td class="py-3 px-4">String</td><td class="py-3 px-4">i-lucide-arrow-up</td><td class="py-3 px-4">Icon name</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">label</td><td class="py-3 px-4">String</td><td class="py-3 px-4">Back to top</td><td class="py-3 px-4">Aria label for accessibility</td></tr>
+            <tr><td class="py-3 px-4 font-mono text-xs">smooth</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Enable smooth scroll animation</td></tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- Code Example -->
+      <section>
+        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
+        <CodeExample title="Back to Top Usage" :code="codeExample" />
+      </section>
+
+      <!-- Spacer content for scrolling demo -->
+      <section v-for="i in 5" :key="i" class="py-12">
+        <h2 class="text-lg font-semibold mb-4">Sample Content Section {{ i }}</h2>
+        <p class="text-neutral-600 dark:text-neutral-400">
+          This is placeholder content to demonstrate the back-to-top button.
+          Keep scrolling to see the button appear in the bottom-right corner.
+        </p>
+        <div class="mt-4 grid grid-cols-3 gap-4">
+          <div v-for="j in 3" :key="j" class="h-32 rounded-lg bg-neutral-100 dark:bg-neutral-800" />
+        </div>
+      </section>
+
+      <!-- End Notice -->
+      <section class="py-12 text-center">
+        <p class="text-neutral-500">You've reached the bottom. Click the back-to-top button to scroll up!</p>
+      </section>
+    </div>
+
+    <!-- Actual Component -->
+    <XMarkButtonBackToTop
+      :threshold="400"
+      position="bottom-right"
+      variant="primary"
+    />
+  </div>
+</template>
+
+<script setup>
+const codeExample = `<!-- Default - bottom right, primary color -->
+<XMarkButtonBackToTop />
+
+<!-- Custom configuration -->
+<XMarkButtonBackToTop
+  :threshold="400"
+  position="bottom-right"
+  variant="primary"
+/>
+
+<!-- Glass variant, bottom left -->
+<XMarkButtonBackToTop
+  position="bottom-left"
+  variant="glass"
+  :threshold="200"
+/>
+
+<!-- Neutral variant, centered -->
+<XMarkButtonBackToTop
+  position="bottom-center"
+  variant="neutral"
+  icon="i-lucide-chevron-up"
+  label="Scroll to top"
+  :smooth="true"
+/>`
+</script>