@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/hero.vue

@@ -1,257 +0,0 @@
-<template>
-  <div>
-    <!-- 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">Hero</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Full-screen hero section with video/image backgrounds, overlays, and call-to-action buttons.
-      </p>
-    </div>
-
-    <!-- Hero Variants -->
-    <div class="space-y-16 pb-16">
-      <!-- Image Background - Center Aligned -->
-      <section>
-        <div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-          <h2 class="text-lg font-semibold">Image Background - Center Aligned</h2>
-          <p class="text-sm text-neutral-600 dark:text-neutral-400">With gradient overlay and scroll indicator</p>
-        </div>
-        <XMarkHero
-          eyebrow="Introducing"
-          title="Build Beautiful Landing Pages"
-          subtitle="Create stunning marketing pages with our collection of 33 production-ready components. Designed for conversion and built with modern technologies."
-          :buttons="[{ label: 'Get Started', color: 'primary' }, { label: 'Learn More', variant: 'outline', color: 'white' }]"
-          :img="{ src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&h=1080&fit=crop&q=80', alt: 'Team working' }"
-          overlay="gradient"
-          align="center"
-          :has-scroll-indicator="true"
-        />
-      </section>
-
-      <!-- Image Background - Left Aligned -->
-      <section>
-        <div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-          <h2 class="text-lg font-semibold">Image Background - Left Aligned</h2>
-          <p class="text-sm text-neutral-600 dark:text-neutral-400">Classic layout with content on the left</p>
-        </div>
-        <XMarkHero
-          eyebrow="Premium Quality"
-          title="Enterprise-Ready Components"
-          subtitle="Battle-tested in production. Built with accessibility and performance in mind."
-          :buttons="[{ label: 'View Documentation', color: 'primary' }, { label: 'Browse Components', variant: 'outline', color: 'white' }]"
-          :img="{ src: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=1920&h=1080&fit=crop&q=80', alt: 'Office workspace' }"
-          overlay="gradient"
-          align="left"
-          :has-scroll-indicator="false"
-        />
-      </section>
-
-      <!-- Heavy Overlay -->
-      <section>
-        <div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-          <h2 class="text-lg font-semibold">Heavy Overlay</h2>
-          <p class="text-sm text-neutral-600 dark:text-neutral-400">Darker overlay for better text readability</p>
-        </div>
-        <XMarkHero
-          eyebrow="Dark Mode"
-          title="Perfect Contrast Every Time"
-          subtitle="Heavy overlay ensures your text is always readable, regardless of the background image."
-          :buttons="[{ label: 'Try It Now', color: 'primary' }]"
-          :img="{ src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1920&h=1080&fit=crop&q=80', alt: 'Analytics dashboard' }"
-          overlay="heavy"
-          align="center"
-          :has-scroll-indicator="false"
-        />
-      </section>
-
-      <!-- Light Overlay -->
-      <section>
-        <div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-          <h2 class="text-lg font-semibold">Light Overlay</h2>
-          <p class="text-sm text-neutral-600 dark:text-neutral-400">Subtle overlay that lets the background shine</p>
-        </div>
-        <XMarkHero
-          eyebrow="Minimal"
-          title="Let Your Images Speak"
-          subtitle="Light overlay for when you want the background to be the star of the show."
-          :buttons="[{ label: 'Explore', color: 'primary' }]"
-          :img="{ src: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&h=1080&fit=crop&q=80', alt: 'Modern office' }"
-          overlay="light"
-          align="center"
-          :has-scroll-indicator="false"
-        />
-      </section>
-
-      <!-- Bottom Aligned Content -->
-      <section>
-        <div class="px-8 py-6 bg-neutral-50 dark:bg-neutral-800/50">
-          <h2 class="text-lg font-semibold">Bottom Aligned Content</h2>
-          <p class="text-sm text-neutral-600 dark:text-neutral-400">Content positioned at the bottom of the hero</p>
-        </div>
-        <XMarkHero
-          eyebrow="Coming Soon"
-          title="Next Generation Platform"
-          subtitle="Be the first to experience our revolutionary new product."
-          :buttons="[{ label: 'Join Waitlist', color: 'primary' }]"
-          :img="{ src: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&h=1080&fit=crop&q=80', alt: 'Earth from space' }"
-          overlay="gradient"
-          align="left"
-          vertical-align="bottom"
-          :has-scroll-indicator="false"
-        />
-      </section>
-
-      <!-- Props Documentation -->
-      <section class="px-8">
-        <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">img</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">null</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">{ src, alt? } - Background image</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">video</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">null</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">{ src, poster? } - Background video</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 text-neutral-600 dark:text-neutral-400">light, heavy, gradient, none</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">eyebrow</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">Small text above title</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 text-neutral-600 dark:text-neutral-400">Main headline</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">subtitle</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">Supporting text</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">buttons</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">[]</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">[{ label, color?, variant?, to?, icon? }]</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">'left'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">left, center, right</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">verticalAlign</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'center'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">center, bottom</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasScrollIndicator</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 bouncing scroll arrow</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <!-- Slots -->
-      <section class="px-8">
-        <h2 class="text-lg font-semibold mb-4">Slots</h2>
-        <div class="space-y-4">
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#background</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom background content (replaces image/video)</p>
-          </div>
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#title</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom title content with additional elements</p>
-          </div>
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#subtitle</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom subtitle content</p>
-          </div>
-          <div class="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
-            <p class="font-mono text-sm text-primary-500">#actions</p>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">Custom CTA buttons section</p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section class="px-8">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Hero Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<!-- Basic hero with image background -->
-<XMarkHero
-  eyebrow="Introducing"
-  title="Build Beautiful Landing Pages"
-  subtitle="Create stunning marketing pages with our components."
-  :buttons="[
-    { label: 'Get Started', color: 'primary' },
-    { label: 'Learn More', variant: 'outline', color: 'white' }
-  ]"
-  :img="{ src: '/hero-bg.jpg', alt: 'Hero background' }"
-  overlay="gradient"
-  align="center"
-  :has-scroll-indicator="true"
-/>
-
-<!-- With video background -->
-<XMarkHero
-  title="Watch It In Action"
-  subtitle="See how our platform works."
-  :buttons="[{ label: 'Try Free' }]"
-  :video="{ src: '/demo.mp4', poster: '/poster.jpg' }"
-  overlay="heavy"
-/>
-
-<!-- Custom content with slots -->
-<XMarkHero
-  :img="{ src: '/hero.jpg' }"
-  overlay="gradient"
->
-  <template #title>
-    <h1>Custom <span class="text-primary-400">Title</span></h1>
-  </template>
-  <template #actions>
-    <div class="flex gap-4">
-      <UButton size="xl">Custom CTA</UButton>
-    </div>
-  </template>
-</XMarkHero>`
-</script>

package/.playground/pages/index.vue

@@ -1,381 +0,0 @@
-<template>
-  <div>
-    <!-- Navbar - uses appConfig.xMarketing.header for backwards compatibility with XHeaderNav -->
-    <XMarkLayoutNavbar />
-
-    <main>
-      <!-- Hero -->
-      <XMarkHero
-        eyebrow="nuxt-x-marketing"
-        title="38 Production-Ready Marketing Components"
-        subtitle="A comprehensive collection of beautifully designed marketing components built with Nuxt UI v4 and Tailwind CSS. Perfect for landing pages, marketing sites, and SaaS products."
-        :buttons="[
-          { label: 'Browse Components', color: 'primary' },
-          { label: 'View on GitHub', variant: 'outline', color: 'white' }
-        ]"
-        :img="{ src: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1920&h=1080&fit=crop&q=80', alt: 'Team working' }"
-        overlay="gradient"
-        align="center"
-        :has-scroll-indicator="true"
-      />
-
-    <!-- Features Section -->
-    <XMarkSection id="features" bg="subtle">
-      <div class="text-center mb-12">
-        <p class="xText-eyebrow text-primary-500 mb-4">Features</p>
-        <h2 class="xText-headline">Everything you need to build</h2>
-        <p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
-          33 carefully crafted components covering layout, content, blog, UI elements, modals, notifications, and utilities.
-        </p>
-      </div>
-
-      <XMarkFeatures
-        :features="features"
-        :columns="3"
-        layout="grid"
-      />
-    </XMarkSection>
-
-    <!-- Testimonials Section -->
-    <XMarkSection>
-      <div class="text-center mb-12">
-        <p class="xText-eyebrow text-primary-500 mb-4">Testimonials</p>
-        <h2 class="xText-headline">Loved by teams worldwide</h2>
-      </div>
-
-      <XMarkSocialProofTestimonials
-        :testimonials="testimonials"
-        layout="featured"
-        :has-stars="true"
-      />
-    </XMarkSection>
-
-    <!-- Pricing Section -->
-    <XMarkSection bg="subtle">
-      <div class="text-center mb-12">
-        <p class="xText-eyebrow text-primary-500 mb-4">Pricing</p>
-        <h2 class="xText-headline">Simple, transparent pricing</h2>
-        <p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
-          Choose the plan that works best for you.
-        </p>
-
-        <!-- Billing Toggle -->
-        <div class="flex items-center justify-center gap-3 mt-8">
-          <span :class="!isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'">Monthly</span>
-          <USwitch v-model="isYearly" />
-          <span :class="isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'">
-            Yearly
-            <UBadge color="success" variant="subtle" size="xs" class="ml-1">Save 20%</UBadge>
-          </span>
-        </div>
-      </div>
-
-      <UPricingPlans :plans="computedPricingPlans" compact scale />
-    </XMarkSection>
-
-    <!-- Comparison Section -->
-    <XMarkSection>
-      <div class="text-center mb-12">
-        <p class="xText-eyebrow text-primary-500 mb-4">Comparison</p>
-        <h2 class="xText-headline">Compare plans</h2>
-      </div>
-
-      <UPricingTable :tiers="pricingTiers" :sections="pricingSections" />
-    </XMarkSection>
-
-    <!-- Newsletter Section -->
-    <XMarkSectionNewsletter
-      title="Stay in the loop"
-      description="Get notified when we release new components and updates."
-      :button="{ label: 'Subscribe' }"
-      pattern="dots"
-      :pattern-opacity="0.08"
-      @submit="(email) => console.log('Newsletter signup:', email)"
-    />
-
-    <!-- CTA Section -->
-    <XMarkSection bg="bold">
-      <div class="text-center">
-        <h2 class="xText-headline text-white mb-4">Ready to get started?</h2>
-        <p class="text-lg text-white/80 max-w-2xl mx-auto mb-8">
-          Join thousands of developers building amazing marketing sites with our components.
-        </p>
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-          <UButton size="lg" color="white">Get Started Free</UButton>
-          <UButton size="lg" variant="outline" color="white">Talk to Sales</UButton>
-        </div>
-        <div class="flex justify-center gap-6">
-          <XMarkSocialProofBadge preset="no-credit-card" variant="subtle" />
-          <XMarkSocialProofBadge preset="cancel-anytime" variant="subtle" />
-        </div>
-      </div>
-    </XMarkSection>
-
-    <!-- Blog Cards Section -->
-    <XMarkSection>
-      <div class="text-center mb-12">
-        <p class="xText-eyebrow text-primary-500 mb-4">Blog</p>
-        <h2 class="xText-headline">Latest articles</h2>
-      </div>
-
-      <div class="grid md:grid-cols-3 gap-8">
-        <XMarkBlogCard
-          v-for="post in blogPosts"
-          :key="post.slug"
-          :post="post"
-        />
-      </div>
-    </XMarkSection>
-    </main>
-
-    <!-- Footer -->
-    <XXFooter />
-    <XXLegal />
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-// Navigation is configured via app.config.ts -> xMarketing.header
-
-// Features
-const features = [
-  {
-    icon: 'i-lucide-layout',
-    title: 'Layout Components',
-    description: 'Navbar, Footer, Section wrappers with multiple background variants.',
-    link: { label: 'View layouts', to: '/layout/navbar' }
-  },
-  {
-    icon: 'i-lucide-image',
-    title: 'Hero Sections',
-    description: 'Full-screen heroes with video/image backgrounds, overlays, and CTAs.',
-    link: { label: 'Explore heroes', to: '/hero' }
-  },
-  {
-    icon: 'i-lucide-layout-grid',
-    title: 'Content Sections',
-    description: 'Features, Testimonials, Pricing, Comparison, and Newsletter components.',
-    link: { label: 'Browse content', to: '/content/features' }
-  },
-  {
-    icon: 'i-lucide-newspaper',
-    title: 'Blog Components',
-    description: 'Cards, Lists, Detail views, Sidebars, Author bios, and Navigation.',
-    link: { label: 'See blog components', to: '/blog/card' }
-  },
-  {
-    icon: 'i-lucide-palette',
-    title: 'UI Elements',
-    description: 'Badges, Glass Cards, Promo Cards, Dividers, Patterns, and Stitches.',
-    link: { label: 'View UI elements', to: '/ui/badge' }
-  },
-  {
-    icon: 'i-lucide-bell',
-    title: 'Notifications',
-    description: 'Announcement bars, Cookie banners, GDPR modals, and Social proof toasts.',
-    link: { label: 'See notifications', to: '/notifications/announcement-bar' }
-  }
-]
-
-// Testimonials
-const testimonials = [
-  {
-    quote: 'These components saved us weeks of development time. The quality and attention to detail is outstanding.',
-    name: 'Sarah Chen',
-    title: 'CTO',
-    company: 'TechCorp',
-    avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop',
-    rating: 5
-  },
-  {
-    quote: 'The best marketing component library I\'ve used. Beautifully designed and easy to customize.',
-    name: 'Michael Torres',
-    title: 'Lead Developer',
-    company: 'StartupXYZ',
-    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop',
-    rating: 5
-  },
-  {
-    quote: 'Perfect for building marketing sites quickly. The dark mode support is excellent.',
-    name: 'Emma Williams',
-    title: 'Designer',
-    company: 'Creative Agency',
-    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop',
-    rating: 5
-  }
-]
-
-// Billing Toggle
-const isYearly = ref(false)
-
-// Pricing Plans for UPricingPlans
-const pricingPlansData = [
-  {
-    title: 'Starter',
-    description: 'For personal projects',
-    monthlyPrice: '$0',
-    yearlyPrice: '$0',
-    features: [
-      '10 components',
-      'Basic support',
-      'Community access',
-      'MIT license'
-    ],
-    button: {
-      label: 'Get Started',
-      variant: 'outline',
-      color: 'neutral'
-    }
-  },
-  {
-    title: 'Pro',
-    description: 'For professional teams',
-    monthlyPrice: '$29',
-    yearlyPrice: '$279',
-    scale: true,
-    highlight: true,
-    badge: 'Most Popular',
-    features: [
-      'All 38 components',
-      'Priority support',
-      'Figma files',
-      'Updates for 1 year',
-      'Private Discord'
-    ],
-    button: {
-      label: 'Get Pro'
-    }
-  },
-  {
-    title: 'Enterprise',
-    description: 'For large organizations',
-    monthlyPrice: '$99',
-    yearlyPrice: '$949',
-    features: [
-      'Everything in Pro',
-      'Custom components',
-      'Dedicated support',
-      'SLA guarantee',
-      'White-label license'
-    ],
-    button: {
-      label: 'Contact Sales',
-      variant: 'outline',
-      color: 'neutral'
-    }
-  }
-]
-
-const computedPricingPlans = computed(() => {
-  return pricingPlansData.map(plan => ({
-    ...plan,
-    price: isYearly.value ? plan.yearlyPrice : plan.monthlyPrice,
-    billingCycle: isYearly.value ? '/year' : '/month'
-  }))
-})
-
-// Pricing Tiers for UPricingTable
-const pricingTiers = [
-  {
-    id: 'starter',
-    title: 'Starter',
-    description: 'For personal projects',
-    price: '$0',
-    billingCycle: '/month',
-    button: { label: 'Get Started', variant: 'subtle' }
-  },
-  {
-    id: 'pro',
-    title: 'Pro',
-    description: 'For professional teams',
-    price: '$29',
-    billingCycle: '/month',
-    highlight: true,
-    button: { label: 'Get Pro' }
-  },
-  {
-    id: 'enterprise',
-    title: 'Enterprise',
-    description: 'For large organizations',
-    price: '$99',
-    billingCycle: '/month',
-    button: { label: 'Contact Sales', color: 'neutral' }
-  }
-]
-
-// Pricing Sections for UPricingTable
-const pricingSections = [
-  {
-    title: 'Features',
-    features: [
-      { title: 'Number of components', tiers: { starter: '10', pro: '33', enterprise: 'Unlimited' } },
-      { title: 'GitHub repository access', tiers: { starter: true, pro: true, enterprise: true } },
-      { title: 'Updates', tiers: { starter: 'Patch & minor', pro: 'All updates', enterprise: 'All updates' } },
-      { title: 'Support', tiers: { starter: 'Community', pro: 'Priority', enterprise: '24/7' } }
-    ]
-  },
-  {
-    title: 'Extras',
-    features: [
-      { title: 'Figma files', tiers: { starter: false, pro: true, enterprise: true } },
-      { title: 'Custom components', tiers: { starter: false, pro: false, enterprise: true } },
-      { title: 'White-label license', tiers: { starter: false, pro: false, enterprise: true } },
-      { title: 'SLA guarantee', tiers: { starter: false, pro: false, enterprise: true } }
-    ]
-  }
-]
-
-// Blog Posts
-const blogPosts = [
-  {
-    title: 'Getting Started with nuxt-x-marketing',
-    excerpt: 'Learn how to install and configure the component library in your Nuxt project.',
-    img: {
-      src: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&h=300&fit=crop',
-      alt: 'Getting Started with nuxt-x-marketing'
-    },
-    slug: '/blog/getting-started',
-    date: '2024-01-15',
-    author: {
-      name: 'Sarah Chen',
-      avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&fit=crop'
-    },
-    category: 'Tutorial'
-  },
-  {
-    title: 'Building a Landing Page in 10 Minutes',
-    excerpt: 'A step-by-step guide to creating a beautiful landing page with our components.',
-    img: {
-      src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop',
-      alt: 'Building a Landing Page in 10 Minutes'
-    },
-    slug: '/blog/landing-page-tutorial',
-    date: '2024-01-10',
-    author: {
-      name: 'Michael Torres',
-      avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50&h=50&fit=crop'
-    },
-    category: 'Guide'
-  },
-  {
-    title: 'Dark Mode Best Practices',
-    excerpt: 'Tips and tricks for implementing beautiful dark mode in your marketing site.',
-    img: {
-      src: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop',
-      alt: 'Dark Mode Best Practices'
-    },
-    slug: '/blog/dark-mode',
-    date: '2024-01-05',
-    author: {
-      name: 'Emma Williams',
-      avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop'
-    },
-    category: 'Design'
-  }
-]
-
-// Footer is configured via app.config.ts -> xMarketing.footer
-</script>