@xenterprises/nuxt-x-marketing 1.0.3 → 1.1.0

package/.playground/pages/ui/promo-card.vue

@@ -1,259 +0,0 @@
-<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">Promo Card</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Story-style promotional cards with background images.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Basic Grid -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Promo Card Grid</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <XMarkCardPromo
-            v-for="card in promoCards"
-            :key="card.title"
-            :img="{ src: card.image }"
-            :title="card.title"
-            :badge="card.badge"
-          >
-            {{ card.description }}
-          </XMarkCardPromo>
-        </div>
-      </section>
-
-      <!-- Alignment Options -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Content Alignment</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=400&h=600&fit=crop' }"
-            title="Bottom Left"
-            align="bottomLeft"
-          />
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400&h=600&fit=crop' }"
-            title="Bottom Right"
-            align="bottomRight"
-          />
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1557682268-e3955ed5d83f?w=400&h=600&fit=crop' }"
-            title="Bottom Center"
-            align="bottomCenter"
-          />
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?w=400&h=600&fit=crop' }"
-            title="Top Left"
-            badge="NEW"
-            align="topLeft"
-          />
-        </div>
-      </section>
-
-      <!-- Overlay Styles -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Overlay Styles</h2>
-        <div class="grid grid-cols-3 gap-4">
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1533134486753-c833f0ed4866?w=400&h=600&fit=crop' }"
-            title="Light Overlay"
-            overlay="light"
-          >
-            30% opacity
-          </XMarkCardPromo>
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1533134486753-c833f0ed4866?w=400&h=600&fit=crop' }"
-            title="Gradient Overlay"
-            overlay="gradient"
-          >
-            Default gradient
-          </XMarkCardPromo>
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1533134486753-c833f0ed4866?w=400&h=600&fit=crop' }"
-            title="Heavy Overlay"
-            overlay="heavy"
-          >
-            60% opacity
-          </XMarkCardPromo>
-        </div>
-      </section>
-
-      <!-- With CTA Button -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">With CTA Button</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?w=400&h=600&fit=crop' }"
-            title="Summer Sale"
-            badge="50% OFF"
-            :button="{ label: 'Shop Now', color: 'white' }"
-          >
-            Limited time offer
-          </XMarkCardPromo>
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1614850523296-d8c1af93d400?w=400&h=600&fit=crop' }"
-            title="New Collection"
-            :button="{ label: 'Explore', variant: 'outline', color: 'white' }"
-          >
-            Fresh arrivals
-          </XMarkCardPromo>
-        </div>
-      </section>
-
-      <!-- Title Sizes -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Title Sizes</h2>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=400&h=600&fit=crop' }"
-            title="Small Title"
-            title-size="lg"
-          />
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=400&h=600&fit=crop' }"
-            title="Default XL"
-            title-size="xl"
-          />
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1557682268-e3955ed5d83f?w=400&h=600&fit=crop' }"
-            title="Large 3XL"
-            title-size="3xl"
-          />
-          <XMarkCardPromo
-            :img="{ src: 'https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?w=400&h=600&fit=crop' }"
-            title="Hero 5XL"
-            title-size="5xl"
-          />
-        </div>
-      </section>
-
-      <!-- As Links -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">As Navigation Links</h2>
-        <p class="text-sm text-neutral-500 mb-4">Use the `to` prop to make cards navigable with NuxtLink</p>
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <XMarkCardPromo
-            to="/blog"
-            :img="{ src: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=400&h=600&fit=crop' }"
-            title="Blog"
-            badge="NEW"
-            :button="{ label: 'Read More' }"
-          >
-            Latest articles
-          </XMarkCardPromo>
-          <XMarkCardPromo
-            to="/docs"
-            :img="{ src: 'https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=400&h=600&fit=crop' }"
-            title="Documentation"
-            :button="{ label: 'Get Started' }"
-          >
-            Learn the basics
-          </XMarkCardPromo>
-        </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">to</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Navigation URL (uses NuxtLink)</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">img</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">required</td><td class="py-3 px-4">{ src: string, alt?: string }</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">title</td><td class="py-3 px-4">String</td><td class="py-3 px-4">required</td><td class="py-3 px-4">Card title</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">badge</td><td class="py-3 px-4">String</td><td class="py-3 px-4">''</td><td class="py-3 px-4">Optional badge text</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">button</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">null</td><td class="py-3 px-4">{ label: string, color?: string, variant?: string }</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">align</td><td class="py-3 px-4">String</td><td class="py-3 px-4">bottomLeft</td><td class="py-3 px-4">bottomLeft, bottomRight, bottomCenter, topLeft</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">overlay</td><td class="py-3 px-4">String</td><td class="py-3 px-4">gradient</td><td class="py-3 px-4">light, heavy, gradient</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">hoverable</td><td class="py-3 px-4">Boolean</td><td class="py-3 px-4">true</td><td class="py-3 px-4">Enable lift on hover</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">titleSize</td><td class="py-3 px-4">String</td><td class="py-3 px-4">xl</td><td class="py-3 px-4">xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Promo Card Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Basic promo card -->
-<XMarkCardPromo
-  :img="{ src: 'https://images.unsplash.com/photo-...' }"
-  title="Summer Sale"
-  badge="50% OFF"
->
-  Limited time offer
-</XMarkCardPromo>
-
-<!-- With large title -->
-<XMarkCardPromo
-  :img="{ src: 'https://images.unsplash.com/photo-...' }"
-  title="Big Impact"
-  title-size="5xl"
-/>
-
-<!-- With CTA button -->
-<XMarkCardPromo
-  :img="{ src: 'https://images.unsplash.com/photo-...' }"
-  title="New Collection"
-  :button="{ label: 'Shop Now' }"
-  overlay="gradient"
-/>
-
-<!-- As navigation link -->
-<XMarkCardPromo
-  to="/products"
-  :img="{ src: 'https://images.unsplash.com/photo-...', alt: 'Products' }"
-  title="Browse Products"
-  :button="{ label: 'View All' }"
-/>
-
-<!-- Grid layout -->
-<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-  <XMarkCardPromo
-    v-for="card in cards"
-    :key="card.title"
-    :to="card.url"
-    :img="{ src: card.image, alt: card.title }"
-    :title="card.title"
-    :badge="card.badge"
-  />
-</div>`
-
-const promoCards = [
-  {
-    image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=600&fit=crop',
-    title: 'Design',
-    badge: 'NEW',
-    description: 'Modern aesthetics'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&h=600&fit=crop',
-    title: 'Development',
-    description: 'Clean code'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1618172193763-c511deb635ca?w=400&h=600&fit=crop',
-    title: 'Marketing',
-    badge: 'HOT',
-    description: 'Growth focused'
-  },
-  {
-    image: 'https://images.unsplash.com/photo-1618336753974-aae8e04506aa?w=400&h=600&fit=crop',
-    title: 'Analytics',
-    description: 'Data driven'
-  }
-]
-</script>

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

@@ -1,411 +0,0 @@
-<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>