@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/modals/feature-modal.vue

@@ -1,320 +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">Feature Modal</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Full-screen scrollable modal for detailed feature showcases with Apple-style presentation.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo Trigger -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Feature Showcase Modal</h2>
-        <p class="text-sm text-neutral-500 mb-4">Opens a full-screen scrollable presentation with hero, content blocks, and CTA.</p>
-        <XMarkModalFeature
-          :hero="hero"
-          :blocks="blocks"
-          :cta="cta"
-          :button="{ label: 'Explore Feature', size: 'lg', icon: 'i-lucide-maximize-2' }"
-          @cta-click="handleCtaClick"
-        />
-      </section>
-
-      <!-- Button Object -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Button Object</h2>
-        <p class="text-sm text-neutral-500 mb-4">Configure the trigger button with a single object prop.</p>
-        <div class="flex flex-wrap gap-4">
-          <XMarkModalFeature
-            :hero="hero"
-            :blocks="blocks"
-            :button="{ label: 'Learn More', color: 'primary' }"
-          />
-          <XMarkModalFeature
-            :hero="hero"
-            :blocks="blocks"
-            :button="{ label: 'View Details', color: 'secondary', variant: 'outline' }"
-          />
-          <XMarkModalFeature
-            :hero="hero"
-            :blocks="blocks"
-            :button="{ label: 'Explore', color: 'neutral', size: 'lg', icon: 'i-lucide-sparkles' }"
-          />
-        </div>
-      </section>
-
-      <!-- Custom Trigger -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Trigger (Slot)</h2>
-        <p class="text-sm text-neutral-500 mb-4">Use the default slot for a completely custom trigger.</p>
-        <XMarkModalFeature
-          :hero="hero"
-          :blocks="blocks"
-          :cta="cta"
-        >
-          <UButton size="xl" label="Advanced Analytics" leading-icon="i-lucide-layers" trailing-icon="i-lucide-arrow-right" />
-        </XMarkModalFeature>
-      </section>
-
-      <!-- Block Types -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Available Block Types</h2>
-        <div class="grid md:grid-cols-3 gap-6">
-          <article class="p-6 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-semibold mb-2">Image Block</h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">Full-screen image section</p>
-            <pre class="mt-4 text-xs bg-neutral-200 dark:bg-neutral-700 p-2 rounded overflow-x-auto"><code>{
-  type: 'image',
-  image: 'url',
-  alt: 'description'
-}</code></pre>
-          </article>
-          <article class="p-6 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-semibold mb-2">Text Block</h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">Centered text content</p>
-            <pre class="mt-4 text-xs bg-neutral-200 dark:bg-neutral-700 p-2 rounded overflow-x-auto"><code>{
-  type: 'text',
-  title: 'Heading',
-  body: 'Content...',
-  bg: 'bg-white'
-}</code></pre>
-          </article>
-          <article class="p-6 rounded-lg bg-neutral-100 dark:bg-neutral-800">
-            <h3 class="font-semibold mb-2">Split Block</h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">Image + text side by side</p>
-            <pre class="mt-4 text-xs bg-neutral-200 dark:bg-neutral-700 p-2 rounded overflow-x-auto"><code>{
-  type: 'split',
-  title: 'Feature',
-  body: 'Details...',
-  image: 'url',
-  imagePosition: 'left',
-  features: [...]
-}</code></pre>
-          </article>
-        </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">hero</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">null</td><td class="py-3 px-4">Hero section { image, title, subtitle }</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">blocks</td><td class="py-3 px-4">Array</td><td class="py-3 px-4">[]</td><td class="py-3 px-4">Array of content blocks</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">cta</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">null</td><td class="py-3 px-4">CTA section { title, subtitle, button, bg }</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">{}</td><td class="py-3 px-4">{ label, color, variant, size, icon }</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Button Object Properties -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Button Object Properties</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">Property</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</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">label</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Learn More'</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">'primary'</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">'solid'</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">size</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'md'</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">''</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Hero Configuration -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Hero Configuration</h2>
-        <pre class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"><code>hero: {
-  image: 'https://example.com/hero.jpg',
-  title: 'Feature Name',
-  subtitle: 'Feature description'
-}</code></pre>
-      </section>
-
-      <!-- Blocks Configuration -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Blocks Configuration</h2>
-        <pre class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"><code>blocks: [
-  // Full-width image
-  {
-    type: 'image',
-    image: 'https://example.com/showcase.jpg',
-    alt: 'Feature showcase'
-  },
-
-  // Centered text section
-  {
-    type: 'text',
-    title: 'Section Title',
-    body: 'Detailed explanation of the feature...',
-    bg: 'bg-neutral-50'  // Optional background class
-  },
-
-  // Split layout with image
-  {
-    type: 'split',
-    title: 'Feature Highlight',
-    body: 'Description of this specific feature...',
-    image: 'https://example.com/feature.jpg',
-    imagePosition: 'left',  // 'left' or 'right'
-    features: [              // Optional bullet points
-      'Benefit one',
-      'Benefit two',
-      'Benefit three'
-    ],
-    bg: 'bg-white'
-  }
-]</code></pre>
-      </section>
-
-      <!-- CTA Configuration -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">CTA Configuration</h2>
-        <pre class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"><code>cta: {
-  title: 'Ready to get started?',
-  subtitle: 'Join thousands of satisfied customers',
-  button: { label: 'Start Free Trial', color: 'primary' },
-  bg: 'bg-neutral-950'  // Optional background class
-}</code></pre>
-      </section>
-
-      <!-- Events -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Events</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">Event</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">@open</td><td class="py-3 px-4">Emitted when modal opens</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">@close</td><td class="py-3 px-4">Emitted when modal closes</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">@cta-click</td><td class="py-3 px-4">Emitted when CTA button is clicked</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Feature Modal Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- With button trigger (object) -->
-<XMarkModalFeature
-  :hero="{
-    image: '/images/hero.jpg',
-    title: 'Advanced Analytics',
-    subtitle: 'Gain deep insights into your data'
-  }"
-  :blocks="[
-    { type: 'text', title: 'Overview', body: 'Description...' },
-    { type: 'image', image: '/showcase.jpg', alt: 'Feature showcase' },
-    {
-      type: 'split',
-      title: 'Key Feature',
-      body: 'Feature details...',
-      image: '/feature.jpg',
-      imagePosition: 'right',
-      features: ['Benefit 1', 'Benefit 2', 'Benefit 3']
-    }
-  ]"
-  :cta="{
-    title: 'Ready to start?',
-    subtitle: 'Free 14-day trial',
-    button: { label: 'Start Free Trial', color: 'primary' }
-  }"
-  :button="{ label: 'Learn More', size: 'lg', icon: 'i-lucide-maximize-2' }"
-  @cta-click="handleCtaClick"
-/>
-
-<!-- Custom trigger (slot) -->
-<XMarkModalFeature :hero="hero" :blocks="blocks">
-  <UButton size="lg" label="Explore Feature" leading-icon="i-lucide-layers" />
-</XMarkModalFeature>
-
-<!-- Minimal (no hero/CTA) -->
-<XMarkModalFeature
-  :blocks="blocks"
-  :button="{ label: 'View Feature' }"
-/>`
-
-const hero = {
-  image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&h=1080&fit=crop',
-  title: 'Advanced Analytics',
-  subtitle: 'Gain deep insights into your data with powerful visualization tools'
-}
-
-const blocks = [
-  {
-    type: 'text',
-    title: 'Understand Your Data Like Never Before',
-    body: 'Our analytics platform transforms raw data into actionable insights. With real-time dashboards and customizable reports, you can make data-driven decisions faster than ever before.',
-    bg: 'bg-white dark:bg-neutral-950'
-  },
-  {
-    type: 'image',
-    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1920&h=1080&fit=crop',
-    alt: 'Analytics dashboard'
-  },
-  {
-    type: 'split',
-    title: 'Real-Time Monitoring',
-    body: 'Track your key metrics as they happen. Our real-time monitoring system ensures you never miss an important trend or anomaly.',
-    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop',
-    imagePosition: 'right',
-    features: [
-      'Live data streaming',
-      'Customizable alerts',
-      'Trend detection',
-      'Anomaly identification'
-    ],
-    bg: 'bg-neutral-50 dark:bg-neutral-900'
-  },
-  {
-    type: 'split',
-    title: 'Powerful Reporting',
-    body: 'Generate beautiful, shareable reports with just a few clicks. Export to PDF, Excel, or share via link with your team.',
-    image: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop',
-    imagePosition: 'left',
-    features: [
-      'Automated report generation',
-      'Custom branding options',
-      'Scheduled delivery',
-      'Interactive charts'
-    ],
-    bg: 'bg-white dark:bg-neutral-950'
-  }
-]
-
-const cta = {
-  title: 'Ready to Transform Your Data?',
-  subtitle: 'Start your free 14-day trial today. No credit card required.',
-  button: { label: 'Start Free Trial', color: 'primary' },
-  bg: 'bg-primary-600'
-}
-
-const handleCtaClick = () => {
-  console.log('CTA clicked!')
-}
-</script>

package/.playground/pages/modals/image-lightbox.vue

@@ -1,277 +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">Image Lightbox</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Full-screen image viewer with gallery navigation.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Single Image -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Single Image</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click to open lightbox</p>
-        <button
-          class="rounded-xl overflow-hidden cursor-zoom-in"
-          @click="openSingle"
-        >
-          <img
-            :src="singleImage[0].src"
-            :alt="singleImage[0].alt"
-            class="w-80 h-60 object-cover hover:opacity-90 transition-opacity"
-          />
-        </button>
-        <XMarkModalImage
-          v-model="singleOpen"
-          :images="singleImage"
-        />
-      </section>
-
-      <!-- Gallery Grid -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Gallery with Navigation</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click any image to open gallery. Use arrows or keyboard to navigate.</p>
-        <div class="grid grid-cols-4 gap-4">
-          <button
-            v-for="(image, index) in galleryImages"
-            :key="index"
-            class="rounded-lg overflow-hidden aspect-square cursor-zoom-in"
-            @click="openGallery(index)"
-          >
-            <img
-              :src="image.src"
-              :alt="image.alt"
-              class="w-full h-full object-cover hover:opacity-90 transition-opacity"
-            />
-          </button>
-        </div>
-        <XMarkModalImage
-          v-model="galleryOpen"
-          :images="galleryImages"
-          :start-index="galleryIndex"
-          :has-counter="true"
-        />
-      </section>
-
-      <!-- With Thumbnails -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">With Thumbnail Navigation</h2>
-        <div class="grid grid-cols-6 gap-2">
-          <button
-            v-for="(image, index) in thumbnailImages"
-            :key="index"
-            class="rounded-lg overflow-hidden aspect-square cursor-zoom-in"
-            @click="openThumbnails(index)"
-          >
-            <img
-              :src="image.src"
-              :alt="image.alt"
-              class="w-full h-full object-cover hover:opacity-90 transition-opacity"
-            />
-          </button>
-        </div>
-        <XMarkModalImage
-          v-model="thumbnailOpen"
-          :images="thumbnailImages"
-          :start-index="thumbnailIndex"
-          :has-counter="true"
-          :has-thumbnails="true"
-        />
-      </section>
-
-      <!-- With Captions -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">With Captions</h2>
-        <div class="flex gap-4">
-          <button
-            v-for="(image, index) in captionImages"
-            :key="index"
-            class="rounded-lg overflow-hidden w-48 h-32 cursor-zoom-in"
-            @click="openCaptions(index)"
-          >
-            <img
-              :src="image.src"
-              :alt="image.alt"
-              class="w-full h-full object-cover hover:opacity-90 transition-opacity"
-            />
-          </button>
-        </div>
-        <XMarkModalImage
-          v-model="captionOpen"
-          :images="captionImages"
-          :start-index="captionIndex"
-        />
-      </section>
-
-      <!-- Props -->
-      <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">v-model</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">Lightbox visibility state</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">images</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 { src, alt, caption? }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">startIndex</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">0</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Starting image index for gallery</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasCounter</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">Show image counter (1/5)</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasThumbnails</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">Show thumbnail navigation strip</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- Image Object -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Image Object Structure</h2>
-        <pre class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"><code>{
-  src: 'https://example.com/image.jpg',   // Required
-  alt: 'Image description',                // Required
-  caption: 'Optional caption text'         // Optional
-}</code></pre>
-      </section>
-
-      <!-- Keyboard Navigation -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Keyboard Navigation</h2>
-        <div class="grid md:grid-cols-3 gap-4">
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-center">
-            <kbd class="px-2 py-1 bg-neutral-200 dark:bg-neutral-700 rounded text-sm">Arrow Left</kbd>
-            <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">Previous image</p>
-          </div>
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-center">
-            <kbd class="px-2 py-1 bg-neutral-200 dark:bg-neutral-700 rounded text-sm">Arrow Right</kbd>
-            <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">Next image</p>
-          </div>
-          <div class="p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-center">
-            <kbd class="px-2 py-1 bg-neutral-200 dark:bg-neutral-700 rounded text-sm">Escape</kbd>
-            <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">Close lightbox</p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Image Lightbox Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Single image -->
-<button @click="lightboxOpen = true">
-  <img :src="images[0].src" :alt="images[0].alt" />
-</button>
-<XMarkModalImage
-  v-model="lightboxOpen"
-  :images="images"
-/>
-
-<!-- Gallery with thumbnails -->
-<div class="grid grid-cols-4 gap-4">
-  <button
-    v-for="(image, index) in images"
-    :key="index"
-    @click="openGallery(index)"
-  >
-    <img :src="image.src" :alt="image.alt" />
-  </button>
-</div>
-<XMarkModalImage
-  v-model="galleryOpen"
-  :images="images"
-  :start-index="startIndex"
-  :has-counter="true"
-  :has-thumbnails="true"
-/>
-
-<!-- Image data structure -->
-const images = [
-  { src: 'https://...', alt: 'Image 1', caption: 'Optional caption' },
-  { src: 'https://...', alt: 'Image 2' }
-]`
-
-const singleOpen = ref(false)
-const singleImage = [
-  { src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=800&fit=crop', alt: 'Mountain landscape' }
-]
-
-const openSingle = () => {
-  singleOpen.value = true
-}
-
-const galleryOpen = ref(false)
-const galleryIndex = ref(0)
-const galleryImages = [
-  { src: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&h=800&fit=crop', alt: 'Nature 1' },
-  { src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=1200&h=800&fit=crop', alt: 'Nature 2' },
-  { src: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=1200&h=800&fit=crop', alt: 'Nature 3' },
-  { src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=1200&h=800&fit=crop', alt: 'Nature 4' }
-]
-
-const openGallery = (index) => {
-  galleryIndex.value = index
-  galleryOpen.value = true
-}
-
-const thumbnailOpen = ref(false)
-const thumbnailIndex = ref(0)
-const thumbnailImages = [
-  { src: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1200&h=800&fit=crop', alt: 'Mountain 1' },
-  { src: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1200&h=800&fit=crop', alt: 'Mountain 2' },
-  { src: 'https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?w=1200&h=800&fit=crop', alt: 'Mountain 3' },
-  { src: 'https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=1200&h=800&fit=crop', alt: 'Mountain 4' },
-  { src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1200&h=800&fit=crop', alt: 'Mountain 5' },
-  { src: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=1200&h=800&fit=crop', alt: 'Mountain 6' }
-]
-
-const openThumbnails = (index) => {
-  thumbnailIndex.value = index
-  thumbnailOpen.value = true
-}
-
-const captionOpen = ref(false)
-const captionIndex = ref(0)
-const captionImages = [
-  { src: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=1200&h=800&fit=crop', alt: 'Architecture 1', caption: 'Modern Architecture in Downtown' },
-  { src: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=1200&h=800&fit=crop', alt: 'Architecture 2', caption: 'Glass and Steel Office Building' },
-  { src: 'https://images.unsplash.com/photo-1479839672679-a46483c0e7c8?w=1200&h=800&fit=crop', alt: 'Architecture 3', caption: 'Historic Church Exterior' }
-]
-
-const openCaptions = (index) => {
-  captionIndex.value = index
-  captionOpen.value = true
-}
-</script>