@eventcatalog/core 2.30.8 → 2.31.0

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -268,12 +268,126 @@ const pagefindAttributes =
       if (document.getElementsByClassName('mermaid').length > 0) {
         renderDiagrams(graphs);
       }
+
+      // Set up TOC highlighting and scrolling
+      setupTOCHighlighting();
     });
 
     /**
-     * @params {HTMLCollectionOf<HTMLElement>} graphs
+     * Setup TOC highlighting and scrolling
+     */
+    function setupTOCHighlighting() {
+      // Check if there's a sidebar with navigation
+      const sidebarNav = document.querySelector('aside nav');
+      if (!sidebarNav) return;
+
+      const observerOptions = {
+        rootMargin: '0px 0px -40% 0px',
+        threshold: 0.1,
+      };
+
+      // Flag to temporarily disable observer after click
+      let observerPaused = false;
+
+      /**
+       * Highlights a TOC item and scrolls it into view
+       * @param {string} id - The ID of the heading to highlight in the TOC
+       */
+      function highlightTocItem(id) {
+        // Remove active class from all links
+        document.querySelectorAll('.active-toc-item').forEach((link) => {
+          link.classList.remove('active-toc-item', 'text-primary-600', 'font-medium');
+          link.classList.add('text-gray-400');
+        });
+
+        // Add active class to current link
+        const tocLink = document.querySelector(`aside nav a[href="#${id}"]`);
+        if (tocLink) {
+          tocLink.classList.add('active-toc-item', 'text-primary-600', 'font-medium');
+          tocLink.classList.remove('text-gray-400');
+
+          // Scroll the highlighted item into view with a small delay to ensure DOM updates first
+          setTimeout(() => {
+            tocLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+          }, 10);
+        }
+      }
+
+      // Set up the intersection observer for scrolling
+      const observer = new IntersectionObserver((entries) => {
+        // If observer is paused, don't process entries
+        if (observerPaused) return;
+
+        entries.forEach((entry) => {
+          try {
+            const id = entry.target.getAttribute('id');
+            if (entry.isIntersecting && id) {
+              highlightTocItem(id);
+            }
+          } catch (entryError) {
+            console.error('Error processing intersection entry:', entryError);
+          }
+        });
+      }, observerOptions);
+
+      // Find all headings in the content area
+      const prose = document.querySelector('.prose');
+      if (!prose) return;
+
+      // First try to find headings with IDs
+      const headings = prose.querySelectorAll('h1[id], h2[id], h3[id]');
+
+      if (headings.length > 0) {
+        headings.forEach((heading) => {
+          observer.observe(heading);
+        });
+      } else {
+        // Fallback: If no headings with IDs found, attach IDs to them
+        const allHeadings = prose.querySelectorAll('h1, h2, h3');
+
+        allHeadings.forEach((heading) => {
+          // Only add ID if it doesn't exist
+          if (!heading.id) {
+            const text = heading.textContent || '';
+            const slug = text
+              .toLowerCase()
+              .replace(/[^\w\s-]/g, '')
+              .replace(/\s+/g, '-');
+            heading.id = slug;
+          }
+          observer.observe(heading);
+        });
+      }
+
+      // Add click event listeners to all TOC links
+      const tocLinks = document.querySelectorAll('aside nav a[href^="#"]');
+      tocLinks.forEach((link) => {
+        link.addEventListener('click', (e) => {
+          // Get the ID from the href attribute
+          const hrefAttr = link.getAttribute('href');
+          if (!hrefAttr) return;
+
+          const id = hrefAttr.substring(1);
+
+          // Highlight the clicked item
+          highlightTocItem(id);
+
+          // Temporarily pause the observer to prevent immediate highlighting changes
+          observerPaused = true;
+
+          // Resume the observer after a delay
+          setTimeout(() => {
+            observerPaused = false;
+          }, 500);
+        });
+      });
+    }
+
+    /**
+     * Renders mermaid diagrams in the page
+     * @param {HTMLCollectionOf<HTMLElement>} graphs - The collection of mermaid graph elements
      */
-    async function renderDiagrams(graphs: any) {
+    async function renderDiagrams(graphs) {
       const { default: mermaid } = await import('mermaid');
 
       if (window.eventcatalog.mermaid) {
@@ -281,7 +395,7 @@ const pagefindAttributes =
         const { iconPacks = [] } = window.eventcatalog.mermaid ?? {};
 
         if (iconPacks.length > 0) {
-          const iconPacksToRegister = iconPacks.map((name: string) => {
+          const iconPacksToRegister = iconPacks.map((name) => {
             return {
               name,
               icons,

package/eventcatalog/src/pages/docs/custom/[...path]/index.astro

@@ -0,0 +1,260 @@
+---
+import CustomDocumentationPage from '@enterprise/custom-documentation/pages/index.astro';
+import { getCollection } from 'astro:content';
+import type { GetStaticPaths } from 'astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { Code } from 'astro-expressive-code/components';
+import { isEventCatalogProEnabled } from '@utils/feature';
+import path from 'node:path';
+import fs from 'node:fs';
+
+const PROJECT_DIR = path.resolve(process.env.PROJECT_DIR || process.cwd());
+const CUSTOM_DOCS_DIR = path.resolve(PROJECT_DIR, 'docs/');
+const directoryExists = fs.existsSync(CUSTOM_DOCS_DIR);
+
+export const getStaticPaths = (async () => {
+  const docs = await getCollection('customPages');
+  const paths = docs.map((doc) => ({
+    params: { path: doc.id.replace('docs/', '') },
+    props: doc,
+  }));
+  console.log(
+    'paths',
+    paths.map((path) => path.params.path)
+  );
+  return paths;
+}) satisfies GetStaticPaths;
+
+const props = Astro.props;
+
+// Example for folder structure
+const folderStructureExample = `my-catalog/
+  └── docs/
+      ├── getting-started/
+      │   ├── 01-introduction.mdx
+      │   └── 02-quick-start.mdx
+      ├── architecture-decisions/
+      │   ├── 01-what-are-architecture-decisions.mdx
+      │   ├── 02-how-to-create-architecture-decisions.mdx
+      │   ├── published/
+      │   │   ├── 01-adr-001-event-driven.mdx
+      │   │   └── 02-adr-002-api-first.mdx
+      │   └── drafts/
+      │       ├── 01-adr-003-microservices.mdx
+      │       └── 02-adr-004-monolith.mdx
+      └`;
+// Example MDX file content
+const mdxFileExample = `---
+title: Getting Started
+description: How to get started with our event-driven architecture
+---
+
+# Getting Started with our Event-Driven Architecture
+
+This guide will help you understand how our services communicate using events.
+
+## Prerequisites
+
+- Understanding of basic messaging patterns
+- Node.js installed on your machine
+
+## Key Concepts
+
+Events are the backbone of our architecture. They represent facts that have happened in our system.
+`;
+
+// Example config file
+const configExample = `// eventcatalog.config.js
+  
+module.exports = {
+  // Your existing config...
+  
+  customDocs: {
+    sidebar: [
+      {
+        label: 'Getting Started',
+        badge: {
+          text: 'New', color: 'green'
+        },
+        collapsed: false,
+        items: [
+          { label: 'Introduction', slug: 'getting-started/01-introduction' },
+          { label: 'Quick Start', slug: 'getting-started/02-quick-start' }
+        ]
+      },
+      {
+        label: 'Architecture Decisions',
+        badge: {
+          text: 'New', color: 'green'
+        },
+        collapsed: true,
+        items: [
+          { 
+            label: 'What are Architecture Decisions?', 
+            slug: 'architecture-decisions/01-what-are-architecture-decisions' 
+          },
+          { 
+            label: 'How to Create Architecture Decisions', 
+            slug: 'architecture-decisions/02-how-to-create-architecture-decisions' 
+          },
+          {
+            label: 'Published ADRs',
+            autogenerated: { 
+              directory: 'architecture-decisions/published', 
+              collapsed: true 
+            }
+          },
+          {
+            label: 'Draft ADRs',
+            autogenerated: { 
+              directory: 'architecture-decisions/drafts', 
+              collapsed: true 
+            }
+          }
+        ]
+      }
+    ]
+  }
+}`;
+---
+
+{
+  directoryExists && isEventCatalogProEnabled() ? (
+    <CustomDocumentationPage {...props} />
+  ) : (
+    <VerticalSideBarLayout title="Custom Documentation">
+      <body class="min-h-screen  font-inter">
+        <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
+          <div class="mb-12">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
+              <div>
+                <div class="flex flex-wrap items-center gap-3 mb-3">
+                  <h1 class="text-4xl font-semibold text-gray-900 font-inter">Custom Documentation</h1>
+                  <div class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 border border-purple-200 shadow-sm">
+                    Pro feature
+                  </div>
+                </div>
+                <p class="text-base mb-0 text-gray-600 max-w-3xl">
+                  Add custom documentation to EventCatalog to create a unified source of truth for your team. Document your
+                  architecture decisions, patterns, and guidelines.
+                </p>
+              </div>
+              <div class="flex space-x-4 shrink-0">
+                <a
+                  href="https://www.eventcatalog.dev/docs/custom-documentation"
+                  class="inline-flex items-center justify-center px-5 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                >
+                  Read documentation &rarr;
+                </a>
+                {!isEventCatalogProEnabled() && (
+                  <a
+                    href="https://www.eventcatalog.dev/pro/trial"
+                    class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 shadow-sm"
+                  >
+                    Start 14-day trial
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <h2 class="text-2xl font-semibold mb-2 text-gray-900">Setup Guide</h2>
+          <p class="text-gray-600 mb-8 max-w-3xl">
+            Custom documentation let's you bring any documentation into EventCatalog. This is useful for documenting your
+            architecture decisions, patterns, and guidelines. Follow these steps to get started:
+          </p>
+
+          <div class="space-y-10 mb-12">
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  1
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Create the content structure</h3>
+                  <p class="text-gray-600 mb-4">Create a folder structure in your directory to organize your documentation.</p>
+                  <Code code={folderStructureExample} lang="bash" frame="terminal" />
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  2
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Add MDX files</h3>
+                  <p class="text-gray-600 mb-4">Create MDX files with frontmatter and markdown content.</p>
+                  <Code code={mdxFileExample} lang="mdx" frame="terminal" />
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  3
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Update your eventcatalog.config.js file</h3>
+                  <p class="text-gray-600 mb-4">
+                    Add the customDocs configuration to your eventcatalog.config.js file to define your sidebar structure.
+                  </p>
+                  <Code code={configExample} lang="js" frame="terminal" />
+                  <p class="text-gray-600 mt-4">
+                    This configuration defines the sidebar structure for your custom documentation:
+                  </p>
+                  <ul class="list-disc list-inside text-gray-600 mt-2 ml-2 space-y-1">
+                    <li>
+                      <strong>label</strong>: The display name for each sidebar section
+                    </li>
+                    <li>
+                      <strong>badge</strong>: Optional badge to highlight new sections
+                    </li>
+                    <li>
+                      <strong>collapsed</strong>: Whether the section is collapsed by default
+                    </li>
+                    <li>
+                      <strong>autogenerated</strong>: Automatically generate sidebar items from a directory
+                    </li>
+                    <li>
+                      <strong>slug</strong>: Direct link to a specific page
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+              <div class="flex items-start gap-4">
+                <div class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1">
+                  4
+                </div>
+                <div class="w-full">
+                  <h3 class="text-xl font-semibold text-gray-900 mb-3">Restart EventCatalog</h3>
+                  <p class="text-gray-600 mb-4">
+                    After configuring your documentation, restart EventCatalog to see your custom documentation.
+                  </p>
+                  <div class="mb-4">
+                    <Code code="npm run dev" lang="bash" frame="terminal" />
+                  </div>
+                  <p class="text-gray-600 mb-4">
+                    Once restarted, you'll see your custom documentation displayed with the sidebar structure you defined:
+                  </p>
+                  <div class="border border-gray-200 rounded-lg overflow-hidden">
+                    <img
+                      src="/images/custom-docs-placeholder.png"
+                      alt="Example of custom documentation interface"
+                      class="w-full"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </body>
+    </VerticalSideBarLayout>
+  )
+}

package/eventcatalog/src/pages/pro/index.astro

@@ -0,0 +1,272 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { Star, Users, Bot, ScrollText, Component, PanelLeft, Cpu, Code, LifeBuoy, ExternalLink, Eye } from 'lucide-react';
+import { buildUrl } from '@utils/url-builder';
+---
+
+<VerticalSideBarLayout title="EventCatalog Pro">
+  <div class="min-h-[calc(100vh-60px)] bg-white">
+    {/* Hero section with solid purple background */}
+    <div class="bg-purple-600 pt-10 pb-20">
+      <div class="container px-8 lg:px-8 mx-auto max-w-[80em]">
+        <div class="flex flex-col pt-10">
+          <!-- <div class="mb-5">
+            <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-white text-purple-700">
+              Premium Features
+            </div>
+          </div> -->
+
+          <div class="flex flex-col md:flex-row justify-between items-start">
+            <div class="md:w-1/2 mt-10 pr-10">
+              <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">EventCatalog Pro</h1>
+              <h2 class="text-2xl font-normal text-white mb-4">Take your documentation to the next level</h2>
+              <p class="text-base text-white opacity-90 mb-10 max-w-2xl">
+                <!-- Unlock premium features to enhance your event catalog and streamline your architecture documentation. -->
+                Keep documentation up-to-date, reduce onboarding time, and make architectural decisions easy to find — all in one place
+              </p>
+
+              <div class="flex flex-col sm:flex-row gap-4">
+                <a
+                  href="https://www.eventcatalog.dev/pricing"
+                  class="inline-flex items-center justify-center px-6 py-2.5 bg-white text-purple-700 text-sm font-medium rounded transition-colors hover:bg-purple-50"
+                >
+                  Upgrade to Pro
+                  <ExternalLink className="w-4 h-4 ml-1.5" />
+                </a>
+              </div>
+              <span class="text-white text-[12px] mt-4 block"> Get 14 day trial - no credit card required </span>
+            </div>
+
+            <div class="md:w-1/2 flex justify-center md:justify-end items-center mt-10 md:mt-0">
+              <div class="flex flex-col items-center">
+                <img
+                  src="/images/custom-docs-placeholder.png"
+                  alt="EventCatalog Pro Features"
+                  class="rounded-md shadow-md max-w-full h-auto w-full object-cover"
+                />
+                <p class="text-white text-xs block w-full mt-2 font-medium text-right">Custom documentation example</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <main class="container px-8 lg:px-8 mx-auto py-10 max-w-[80em]">
+      {/* Feature Section */}
+      <div class="mb-14">
+        <h2 class="text-2xl font-semibold mb-8 text-gray-900">Premium Features</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {/* Custom Documentation */}
+          <div
+            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:border-purple-200 hover:shadow-md transition-all duration-200"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="p-2 bg-purple-100 rounded-lg flex-shrink-0">
+                  <ScrollText className="w-5 h-5 text-purple-600" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-900">Custom Documentation</h3>
+                </div>
+              </div>
+              <p class="text-gray-600 text-sm mb-3">
+                Add any type of documentation such as ADRs, runbooks, and technical guidelines to create a centralized knowledge
+                hub.
+              </p>
+              <a href={buildUrl('/docs/custom')} class="text-sm text-purple-600 hover:text-purple-700 font-medium">
+                Learn more →
+              </a>
+            </div>
+          </div>
+
+          {/* AI Assistant */}
+          <div
+            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:border-blue-200 hover:shadow-md transition-all duration-200"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="p-2 bg-blue-100 rounded-lg flex-shrink-0">
+                  <Bot className="w-5 h-5 text-blue-600" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-900">AI Assistant</h3>
+                </div>
+              </div>
+              <p class="text-gray-600 text-sm mb-3">
+                Chat with your catalog to quickly find information and get instant answers about your architecture.
+              </p>
+              <a href={buildUrl('/chat')} class="text-sm text-blue-600 hover:text-blue-700 font-medium"> Learn more → </a>
+            </div>
+          </div>
+
+          {/* EventCatalog Federation */}
+          <div
+            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:border-green-200 hover:shadow-md transition-all duration-200"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="p-2 bg-green-100 rounded-lg flex-shrink-0">
+                  <Component className="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-900">Federation</h3>
+                </div>
+              </div>
+              <p class="text-gray-600 text-sm mb-3">
+                Connect 1-3 separate event catalogs into a unified view for centralized visibility across teams.
+              </p>
+              <a
+                href="https://www.eventcatalog.dev/features/federation"
+                class="text-sm text-green-600 hover:text-green-700 font-medium"
+              >
+                Learn more →
+              </a>
+            </div>
+          </div>
+
+          {/* IDE Integration */}
+          <div
+            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:border-indigo-200 hover:shadow-md transition-all duration-200"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="p-2 bg-indigo-100 rounded-lg flex-shrink-0">
+                  <Code className="w-5 h-5 text-indigo-600" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-900">IDE Integration</h3>
+                </div>
+              </div>
+              <p class="text-gray-600 text-sm mb-3">
+                Access EventCatalog directly from your IDE for seamless documentation while coding.
+              </p>
+              <a
+                href="https://www.eventcatalog.dev/features/ide"
+                class="text-sm text-indigo-600 hover:text-indigo-700 font-medium"
+              >
+                Learn more →
+              </a>
+            </div>
+          </div>
+
+          {/* Automated Documentation */}
+          <div
+            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:border-yellow-200 hover:shadow-md transition-all duration-200"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="p-2 bg-yellow-100 rounded-lg flex-shrink-0">
+                  <Cpu className="w-5 h-5 text-yellow-600" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-900">Automated Documentation</h3>
+                </div>
+              </div>
+              <p class="text-gray-600 text-sm mb-3">
+                Automate the generation and maintenance of your EventCatalog documentation with integrations (e.g generate
+                catalogs from AsyncAPI and OpenAPI)
+              </p>
+              <a
+                href="https://www.eventcatalog.dev/features/automation"
+                class="text-sm text-yellow-600 hover:text-yellow-700 font-medium"
+              >
+                Learn more →
+              </a>
+            </div>
+          </div>
+
+          {/* Priority Support */}
+          <div
+            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:border-red-200 hover:shadow-md transition-all duration-200"
+          >
+            <div class="p-6">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="p-2 bg-red-100 rounded-lg flex-shrink-0">
+                  <LifeBuoy className="w-5 h-5 text-red-600" />
+                </div>
+                <div>
+                  <h3 class="text-lg font-semibold text-gray-900">Priority Support</h3>
+                </div>
+              </div>
+              <p class="text-gray-600 text-sm mb-3">Get priority email support and assistance from the EventCatalog team.</p>
+              <a href="https://www.eventcatalog.dev/support" class="text-sm text-red-600 hover:text-red-700 font-medium">
+                Learn more →
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Why Upgrade section - value bullet bar */}
+      <div class="mb-10 bg-gray-50 p-6 rounded-lg border border-gray-100">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div class="flex items-center">
+            <div class="p-2 bg-purple-100 rounded-lg mr-3 flex-shrink-0">
+              <ScrollText className="w-5 h-5 text-purple-600" />
+            </div>
+            <span class="text-sm font-medium text-gray-800">Automated documentation</span>
+          </div>
+          <div class="flex items-center">
+            <div class="p-2 bg-indigo-100 rounded-lg mr-3 flex-shrink-0">
+              <Code className="w-5 h-5 text-indigo-600" />
+            </div>
+            <span class="text-sm font-medium text-gray-800">Integrated with your IDE</span>
+          </div>
+          <div class="flex items-center">
+            <div class="p-2 bg-blue-100 rounded-lg mr-3 flex-shrink-0">
+              <Bot className="w-5 h-5 text-blue-600" />
+            </div>
+            <span class="text-sm font-medium text-gray-800">AI-powered search</span>
+          </div>
+          <div class="flex items-center">
+            <div class="p-2 bg-green-100 rounded-lg mr-3 flex-shrink-0">
+              <Component className="w-5 h-5 text-green-600" />
+            </div>
+            <span class="text-sm font-medium text-gray-800">Unified view across teams</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Ready to upgrade section */}
+      <div class="mb-14">
+        <h2 class="text-2xl font-semibold mb-6 text-gray-900">Ready to upgrade?</h2>
+        <div class="flex flex-col md:flex-row justify-between md:items-center bg-gray-50 p-8 rounded-lg border border-gray-200">
+          <div class="mb-6 md:mb-0">
+            <p class="text-gray-700 mb-2">Get started with EventCatalog Pro today and unlock all premium features.</p>
+          </div>
+          <a
+            href="https://www.eventcatalog.dev/pricing"
+            class="flex items-center justify-center px-5 py-2.5 bg-purple-600 text-white text-sm font-medium rounded hover:bg-purple-700 transition-colors"
+          >
+            View pricing and plans
+            <ExternalLink className="w-4 h-4 ml-1.5" />
+          </a>
+        </div>
+      </div>
+
+      {/* Questions section */}
+      <div class="mb-14">
+        <h2 class="text-2xl font-semibold mb-6 text-gray-900">Questions about EventCatalog Pro?</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div class="bg-white p-6 rounded-lg border border-gray-200">
+            <h3 class="text-lg font-semibold text-gray-900 mb-3">Request a Demo</h3>
+            <p class="text-gray-600 text-sm mb-4">See EventCatalog Pro in action with a personalized demo from our team.</p>
+            <a href="https://www.eventcatalog.dev/demo" class="text-sm text-purple-600 hover:text-purple-700 font-medium">
+              Schedule a demo →
+            </a>
+          </div>
+          <div class="bg-white p-6 rounded-lg border border-gray-200">
+            <h3 class="text-lg font-semibold text-gray-900 mb-3">Contact Sales</h3>
+            <p class="text-gray-600 text-sm mb-4">
+              Have questions about pricing, features, or implementation? Our team is here to help.
+            </p>
+            <a href="mailto:sales@eventcatalog.dev" class="text-sm text-purple-600 hover:text-purple-700 font-medium">
+              Contact our sales team →
+            </a>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</VerticalSideBarLayout>