@eventcatalog/core 2.32.2 → 2.33.0

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

@@ -3,13 +3,7 @@ import CustomDocumentationPage from '@enterprise/custom-documentation/pages/docs
 import { getCollection } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
 import type { GetStaticPaths } from 'astro';
-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);
+import { isCustomDocsEnabled } from '@utils/feature';
 
 export const getStaticPaths = (async () => {
   const docs = await getCollection('customPages');
@@ -22,8 +16,8 @@ export const getStaticPaths = (async () => {
 
 const props = Astro.props;
 
-if (!isEventCatalogProEnabled()) {
-  return Astro.redirect('/docs/custom');
+if (!isCustomDocsEnabled()) {
+  return Astro.redirect(buildUrl('/docs/custom/feature'));
 }
 ---
 

package/eventcatalog/src/pages/docs/custom/feature.astro

@@ -0,0 +1,165 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { BookOpenIcon, FileText } from 'lucide-react';
+---
+
+<VerticalSideBarLayout title="Custom Documentation">
+  <div class="min-h-[calc(100vh-60px)] bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      {/* Hero Section */}
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
+        <div>
+          <div class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 font-medium text-sm mb-6">
+            <FileText className="w-4 h-4 mr-2" />
+            New: Bring your documentation into EventCatalog
+          </div>
+          <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">
+            Document Everything. Share Knowledge. Build Better.
+          </h1>
+          <p class="text-xl text-gray-600 mb-8">
+            Add your own documentation to EventCatalog — from ADRs and system guides to runbooks and onboarding material. Connect
+            your knowledge to your architecture.
+          </p>
+          <div class="flex flex-col sm:flex-row gap-4 mb-8">
+            <a
+              href="https://demo.eventcatalog.dev/docs/custom/guides/creating-new-microservices/01-index"
+              target="_blank"
+              class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-150"
+            >
+              View the demo
+              <svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                  fill-rule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"></path>
+              </svg>
+            </a>
+            <a
+              href="https://www.eventcatalog.cloud"
+              target="_blank"
+              class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
+            >
+              Try for free
+            </a>
+          </div>
+          <p class="text-sm text-gray-500">
+            Available with EventCatalog Starter or Scale plans
+            <a href="https://www.eventcatalog.dev/pricing" class="text-blue-600 font-medium block"
+              >Try free for 14 days, no credit card required</a
+            >
+          </p>
+        </div>
+
+        <div class="relative">
+          <div class="absolute -inset-4">
+            <div
+              class="w-full h-full max-w-full mx-auto opacity-30 blur-lg filter"
+              style="background: linear-gradient(90deg, #60A5FA 0%, #3B82F6 100%);"
+            >
+            </div>
+          </div>
+          <div class="relative">
+            <img
+              src="/images/custom-docs-placeholder.png"
+              alt="Custom Documentation Preview"
+              class="rounded-xl shadow-xl border border-gray-200"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Features Section */}
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Centralized Knowledge</h3>
+          <p class="text-gray-600">
+            Keep architecture decisions, system guides, and runbooks in one place — easy to access, easy to trust.
+          </p>
+        </div>
+
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Rich Formatting</h3>
+          <p class="text-gray-600">
+            Use Markdown, diagrams, code blocks, and EventCatalog components to create structured, useful documentation.
+          </p>
+        </div>
+
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Version Control</h3>
+          <p class="text-gray-600">Track changes and ensure your documentation grows alongside your system.</p>
+        </div>
+
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+              ></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Documentation Ownership</h3>
+          <p class="text-gray-600">Assign and track document owners, making it easy to find the right person in seconds.</p>
+        </div>
+
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Customizable Sidebars</h3>
+          <p class="text-gray-600">
+            Auto-generated and fully customizable navigation sidebars to organize your documentation perfectly.
+          </p>
+        </div>
+
+        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path>
+            </svg>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">EventCatalog Chat</h3>
+          <p class="text-gray-600">
+            Interact with your documentation using AI-powered chat to find answers quickly and efficiently.
+          </p>
+        </div>
+      </div>
+
+      {/* Bottom Link */}
+      <div class="mt-16 text-center">
+        <a
+          href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
+          target="_blank"
+          class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
+        >
+          Not ready for custom documentation? You can hide this feature in settings
+        </a>
+      </div>
+    </div>
+  </div>
+</VerticalSideBarLayout>
+
+<style>
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+</style>

package/eventcatalog/src/pages/docs/custom/index.astro

@@ -1,7 +1,7 @@
 ---
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { Code } from 'astro-expressive-code/components';
-import { isEventCatalogProEnabled } from '@utils/feature';
+import { isCustomDocsEnabled } from '@utils/feature';
 
 // Example for folder structure
 const folderStructureExample = `my-catalog/
@@ -92,6 +92,10 @@ module.exports = {
     ]
   }
 }`;
+
+if (!isCustomDocsEnabled()) {
+  return Astro.redirect('/docs/custom/feature');
+}
 ---
 
 <VerticalSideBarLayout title="Custom Documentation">
@@ -121,7 +125,7 @@ module.exports = {
               Read documentation &rarr;
             </a>
             {
-              !isEventCatalogProEnabled() && (
+              !isCustomDocsEnabled() && (
                 <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"

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

@@ -0,0 +1,292 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import {
+  Rocket,
+  Users,
+  Bot,
+  ScrollText,
+  Component,
+  Cpu,
+  Code,
+  LifeBuoy,
+  ExternalLink,
+  Network,
+  Github,
+  Flag,
+} from 'lucide-react';
+---
+
+<VerticalSideBarLayout title="EventCatalog Pro">
+  <div class="min-h-[calc(100vh-60px)] bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      {/* Hero Section */}
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
+        <div>
+          <div class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-700 font-medium text-sm mb-6">
+            <Rocket className="w-4 h-4 mr-2" />
+            Upgrade your Catalog
+          </div>
+          <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Supercharge your EventCatalog</h1>
+          <p class="text-xl text-gray-600 mb-8">
+            Unlock advanced features like automated docs (e.g OpenAPI, AsyncAPI), Custom documentation, AI assistant, and catalog
+            federation — all designed to help you scale without complexity.
+          </p>
+
+          {/* Integration Sources */}
+          <div class="mb-8">
+            <p class="text-sm font-medium text-gray-500 mb-4">Generate documentation from:</p>
+            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+              <a
+                href="https://www.eventcatalog.dev/integrations/openapi"
+                class="flex items-center space-x-2 bg-gray-50 rounded-lg px-4 py-2 hover:bg-gray-100 transition-colors duration-150"
+              >
+                <img src="/icons/openapi.svg" alt="OpenAPI" class="w-6 h-6" />
+                <span class="text-sm font-medium">OpenAPI</span>
+              </a>
+              <a
+                href="https://www.eventcatalog.dev/integrations/asyncapi"
+                class="flex items-center space-x-2 bg-gray-50 rounded-lg px-4 py-2 hover:bg-gray-100 transition-colors duration-150"
+              >
+                <img src="/icons/asyncapi.svg" alt="AsyncAPI" class="w-6 h-6" />
+                <span class="text-sm font-medium">AsyncAPI</span>
+              </a>
+              <a
+                href="https://www.eventcatalog.dev/integrations"
+                class="flex items-center space-x-2 bg-gray-50 rounded-lg px-4 py-2 hover:bg-gray-100 transition-colors duration-150"
+              >
+                <Component className="w-6 h-6 text-purple-600" />
+                <span class="text-sm font-medium">And more...</span>
+              </a>
+            </div>
+          </div>
+
+          <div class="flex flex-col sm:flex-row gap-4 mb-8">
+            <a
+              href="https://www.eventcatalog.cloud"
+              target="_blank"
+              class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-150"
+            >
+              Try for free
+              <svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                  fill-rule="evenodd"
+                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                  clip-rule="evenodd"></path>
+              </svg>
+            </a>
+            <a
+              href="https://www.eventcatalog.dev"
+              target="_blank"
+              class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
+            >
+              View documentation
+            </a>
+          </div>
+          <p class="text-sm text-gray-500">Try free for 14 days, no credit card required</p>
+        </div>
+
+        <div class="relative">
+          <img
+            src="/images/eventcatalog-upgrade.png"
+            alt="EventCatalog Pro"
+            class="w-full rounded-xl shadow-lg border border-gray-200"
+          />
+        </div>
+      </div>
+
+      {/* Why upgrade section */}
+      <div class="mb-16">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-8">Why upgrade EventCatalog?</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+              <ScrollText className="w-6 h-6 text-purple-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">A living source of truth</h3>
+            <p class="text-gray-600">Keep docs in sync with your systems, ensuring your team always has accurate information.</p>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+              <Users className="w-6 h-6 text-purple-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Shared system understanding</h3>
+            <p class="text-gray-600">Align teams and reduce tribal knowledge with centralized architecture documentation.</p>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+              <Component className="w-6 h-6 text-purple-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Architecture that scales</h3>
+            <p class="text-gray-600">Grow without losing context of complexity, making architectural decisions easy to find.</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Documentation Journey Section */}
+      <div class="mb-16">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-4">Scales with your team and architecture</h2>
+        <p class="text-gray-600 mb-8 max-w-3xl">
+          From scattered documentation to a well-governed system, EventCatalog helps you control complexity with well governed
+          documentation for your teams. Choose the plan that fits your needs.
+        </p>
+
+        <div class="relative py-8">
+          {/* Journey Line */}
+          <div class="absolute top-1/2 left-0 w-full h-1 bg-purple-200 transform -translate-y-1/2 hidden md:block"></div>
+
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative">
+            {/* Stage 1 */}
+            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
+              <div
+                class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
+              >
+                <Github className="w-6 h-6 text-purple-600" />
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Community Edition</h3>
+              <p class="text-gray-600 text-sm text-center">You're just beginning to document services, domains, and events.</p>
+            </div>
+
+            {/* Stage 2 */}
+            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
+              <div
+                class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
+              >
+                <Flag className="w-6 h-6 text-purple-600" />
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Starter Plan</h3>
+              <p class="text-gray-600 text-sm text-center">For teams formalizing their architecture documentation</p>
+            </div>
+
+            {/* Stage 3 */}
+            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
+              <div
+                class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
+              >
+                <Network className="w-6 h-6 text-purple-600" />
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Scale Plan</h3>
+              <p class="text-gray-600 text-sm text-center">
+                Built for teams scaling across domains and integrating with external systems
+              </p>
+            </div>
+
+            {/* Stage 4 */}
+            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200 relative">
+              <div
+                class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4 mx-auto md:absolute md:-top-6 md:left-1/2 md:transform md:-translate-x-1/2"
+              >
+                <Rocket className="w-6 h-6 text-purple-600" />
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2 text-center">Enterprise Plan</h3>
+              <p class="text-gray-600 text-sm text-center">
+                Designed for organizations building and governing complex event platforms
+              </p>
+            </div>
+          </div>
+
+          {/* Mobile Progress Indicators */}
+          <div class="flex justify-center items-center space-x-2 mt-4 md:hidden">
+            <div class="w-2 h-2 rounded-full bg-purple-600"></div>
+            <div class="w-2 h-2 rounded-full bg-purple-400"></div>
+            <div class="w-2 h-2 rounded-full bg-purple-300"></div>
+            <div class="w-2 h-2 rounded-full bg-purple-200"></div>
+          </div>
+        </div>
+      </div>
+
+      {/* Features Section */}
+      <div class="mb-16">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-8">Save time with EventCatalog</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+              <ScrollText className="w-6 h-6 text-blue-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Custom Documentation</h3>
+            <p class="text-gray-600">Add ADRs, runbooks, and technical guidelines to create a centralized knowledge hub.</p>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
+              <Bot className="w-6 h-6 text-green-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">AI Assistant</h3>
+            <p class="text-gray-600">Chat with your catalog to quickly find information about your architecture.</p>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+              <Component className="w-6 h-6 text-purple-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Federation</h3>
+            <p class="text-gray-600">Connect multiple catalogs into a unified view for centralized visibility across teams.</p>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
+              <Code className="w-6 h-6 text-indigo-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">IDE Integration</h3>
+            <p class="text-gray-600">Access EventCatalog directly from your IDE for seamless documentation while coding.</p>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
+              <Cpu className="w-6 h-6 text-yellow-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Automated Documentation</h3>
+            <p class="text-gray-600">
+              Generate and maintain documentation automatically with integrations for AsyncAPI and OpenAPI.
+            </p>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
+              <LifeBuoy className="w-6 h-6 text-red-600" />
+            </div>
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Priority Support</h3>
+            <p class="text-gray-600">Get priority email support and assistance from the EventCatalog team.</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Questions Section */}
+      <div class="mt-16">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-8">Questions about EventCatalog?</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Request a Demo</h3>
+            <p class="text-gray-600 mb-4">See EventCatalog in action with a personalized demo from our team.</p>
+            <a
+              href="mailto:hello@eventcatalog.dev"
+              class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center"
+            >
+              Schedule a demo
+              <ExternalLink className="w-4 h-4 ml-1.5" />
+            </a>
+          </div>
+
+          <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+            <h3 class="text-lg font-semibold text-gray-900 mb-2">Join the community</h3>
+            <p class="text-gray-600 mb-4">Join our growing community on Discord. Over 1000+ members.</p>
+            <a
+              href="https://discord.gg/3rjaZMmrAm"
+              class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center"
+            >
+              Join the community
+              <ExternalLink className="w-4 h-4 ml-1.5" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</VerticalSideBarLayout>
+
+<style>
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+</style>

package/eventcatalog/src/utils/feature.ts

@@ -1,5 +1,21 @@
-// manually setting this value to true is against the rules and licenses of the open source project
-// WARNING: Setting this value manually to true without a valid license is against the terms of use.
-// If you require EventCatalog Pro features, please visit https://www.eventcatalog.dev/pricing
-// to purchase a license. Unauthorized use may violate the project's license agreement.
-export const isEventCatalogProEnabled = () => process.env.EVENTCATALOG_PRO === 'true';
+/**
+ * ⚠️ WARNING: IMPORTANT LICENSE NOTICE ⚠️
+ *
+ * Manually setting environment variables (EVENTCATALOG_STARTER or EVENTCATALOG_SCALE) to 'true'
+ * or modifying these functions without a valid license is strictly prohibited and constitutes
+ * a violation of EventCatalog's terms of use and license agreement.
+ *
+ * To access premium features legally:
+ * 1. Visit https://www.eventcatalog.dev/pricing
+ * 2. Purchase an appropriate license
+ * 3. Follow the official activation instructions
+ */
+
+// These functions check for valid, legally obtained access to premium features
+export const isEventCatalogStarterEnabled = () => process.env.EVENTCATALOG_STARTER === 'true';
+export const isEventCatalogScaleEnabled = () => process.env.EVENTCATALOG_SCALE === 'true';
+
+export const isCustomDocsEnabled = () => isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
+export const isEventCatalogChatEnabled = () => isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
+
+export const isEventCatalogUpgradeEnabled = () => !isEventCatalogStarterEnabled() && !isEventCatalogScaleEnabled();

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.32.2",
+  "version": "2.33.0",
   "publishConfig": {
     "access": "public"
   },