@eventcatalog/core 2.32.1 → 2.33.0

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.1",
+  "version": "2.33.0",
   "publishConfig": {
     "access": "public"
   },
@@ -22,10 +22,10 @@
   ],
   "dependencies": {
     "@astrojs/markdown-remark": "^6.3.1",
-    "@astrojs/mdx": "^4.2.1",
-    "@astrojs/react": "^4.2.1",
+    "@astrojs/mdx": "^4.2.2",
+    "@astrojs/react": "^4.2.2",
     "@astrojs/rss": "^4.0.11",
-    "@astrojs/tailwind": "^6.0.0",
+    "@astrojs/tailwind": "^6.0.2",
     "@asyncapi/avro-schema-parser": "^3.0.24",
     "@asyncapi/parser": "^3.4.0",
     "@asyncapi/react-component": "^2.4.3",
@@ -46,7 +46,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
-    "astro": "^5.5.3",
+    "astro": "^5.5.5",
     "astro-expressive-code": "^0.40.1",
     "astro-pagefind": "^1.6.0",
     "astro-seo": "^0.8.4",

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

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