@eventcatalog/core 2.63.0 → 2.64.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.63.0";
+var version = "2.64.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-I2FMV7LN.js";
-import "../chunk-IRFM5IS7.js";
+} from "../chunk-6AMZOBWI.js";
+import "../chunk-CWGFHLMX.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.63.0";
+var version = "2.64.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-GA274FBN.js";
-import "../chunk-I2FMV7LN.js";
-import "../chunk-IRFM5IS7.js";
+} from "../chunk-PLMTJHGH.js";
+import "../chunk-6AMZOBWI.js";
+import "../chunk-CWGFHLMX.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-I2FMV7LN.js → chunk-6AMZOBWI.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-IRFM5IS7.js";
+} from "./chunk-CWGFHLMX.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-IRFM5IS7.js → chunk-CWGFHLMX.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.63.0";
+var version = "2.64.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-GA274FBN.js → chunk-PLMTJHGH.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-I2FMV7LN.js";
+} from "./chunk-6AMZOBWI.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.63.0";
+var version = "2.64.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-IRFM5IS7.js";
+} from "./chunk-CWGFHLMX.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.63.0";
+var version = "2.64.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-GA274FBN.js";
-import "./chunk-I2FMV7LN.js";
+} from "./chunk-PLMTJHGH.js";
+import "./chunk-6AMZOBWI.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-IRFM5IS7.js";
+} from "./chunk-CWGFHLMX.js";
 import {
   getProjectOutDir,
   isAuthEnabled,

package/eventcatalog/astro.config.mjs

@@ -107,7 +107,8 @@ export default defineConfig({
           './node_modules/@fontsource',
           searchForWorkspaceRoot(process.cwd()),
         ]
-      }
+      },
+      ...(config.server?.allowedHosts ? { allowedHosts: config.server?.allowedHosts } : {}),
     },
     worker: {
       format: 'es',

package/eventcatalog/public/icons/avro.svg

@@ -0,0 +1,21 @@
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <defs>
+    <linearGradient id="avroGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0066CC;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#003D7A;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background circle -->
+  <circle cx="128" cy="128" r="120" fill="url(#avroGradient)"/>
+
+  <!-- Letter A -->
+  <path d="M 85 180 L 105 130 L 125 180 Z M 115 110 L 95 160 L 135 160 Z M 108 90 L 128 140 L 148 90 Z"
+        fill="#FFFFFF" stroke="#FFFFFF" stroke-width="3" stroke-linejoin="round"/>
+
+  <!-- Simplified wave pattern representing data serialization -->
+  <path d="M 50 200 Q 70 190 90 200 T 130 200 T 170 200 T 210 200"
+        fill="none" stroke="#66B3FF" stroke-width="2" opacity="0.6"/>
+  <path d="M 50 210 Q 70 200 90 210 T 130 210 T 170 210 T 210 210"
+        fill="none" stroke="#66B3FF" stroke-width="2" opacity="0.4"/>
+</svg>

package/eventcatalog/public/icons/json-schema.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Json-Schema-Icon--Streamline-Svg-Logos" height="24" width="24">
+  <desc>
+    Json Schema Icon Streamline Icon: https://streamlinehq.com
+  </desc>
+  <path fill="#002cc4" d="M6.694725 1.9422925v1.5391575c-0.60735 0 -1.086225 0.094725 -1.43405 0.2829 -0.3478 0.188175 -0.594375 0.480175 -0.7384 0.876 -0.14405 0.395825 -0.216725 0.900675 -0.216725 1.5132V9.29675c0 0.408775 -0.0532 0.781275 -0.16095 1.116075 -0.107725 0.33485 -0.304975 0.622925 -0.593075 0.864325 -0.2894 0.2414 -0.6982 0.426975 -1.2302875 0.55805 -0.06748 0.01555 -0.1440475 0.028525 -0.2167275 0.042825v0.242675l0.1466975 0.0274c0.0240325 0.00475 0.0475375 0.0098 0.07003 0.015425 0.5320875 0.131075 0.9421875 0.31665 1.2302875 0.55805 0.2881 0.24135 0.48535 0.529475 0.593075 0.864325 0.10775 0.3361 0.16095 0.70725 0.16095 1.116075v3.143175c0 0.61385 0.072675 1.116075 0.216725 1.5093 0.144025 0.393225 0.3906 0.68525 0.7384 0.876025 0.347825 0.19075 0.8267 0.2868 1.43405 0.2868v1.540425c-0.770875 0 -1.417175 -0.084325 -1.941475 -0.25175 -0.524275 -0.167425 -0.942175 -0.424375 -1.257525 -0.769575 -0.31535 -0.345225 -0.541175 -0.78255 -0.680025 -1.31205 -0.138875 -0.5295 -0.20765 -1.155 -0.20765 -1.87785V15.3327c0 -0.85915 -0.1752 -1.4717 -0.5230025 -1.838975C1.735945 13.12645 1.124695 12.943475 0.25 12.943475v-1.88565c0.874695 0 1.4872425 -0.182975 1.8350475 -0.55025 0.3491 -0.367275 0.5230025 -0.9798 0.5230025 -1.83895V6.15355c0 -0.72285 0.068775 -1.348375 0.20765 -1.877875 0.13885 -0.529475 0.364675 -0.966825 0.680025 -1.31205 0.31535 -0.3452 0.73325 -0.6021525 1.257525 -0.7695675 0.5243 -0.16741 1.1719 -0.251765 1.941475 -0.251765Zm10.61055 0c0.769575 0 1.417175 0.084355 1.94145 0.251765 0.5243 0.167415 0.9422 0.4243675 1.257525 0.7695675 0.314075 0.345225 0.5412 0.782575 0.68005 1.31205 0.138875 0.5295 0.20765 1.155025 0.20765 1.877875v2.515075c0 0.85915 0.1739 1.471675 0.523 1.83895 0.3478 0.367275 0.96035 0.55025 1.83505 0.55025v1.884375c-0.8747 0 -1.485975 0.182975 -1.83505 0.55025 -0.347825 0.36725 -0.523 0.979825 -0.523 1.838925v2.513775c0 0.72285 -0.068775 1.3484 -0.20765 1.8779 -0.13885 0.529475 -0.36465 0.966825 -0.68005 1.312025 -0.31405 0.345225 -0.733225 0.602175 -1.257525 0.769575 -0.524275 0.1674 -1.1706 0.251775 -1.94145 0.251775v-1.54045c0.60735 0 1.086225 -0.096025 1.43405 -0.2868 0.347775 -0.1908 0.59435 -0.482775 0.7384 -0.876 0.14405 -0.393225 0.216725 -0.895475 0.216725 -1.509325V14.70065c0 -0.408775 0.053225 -0.77995 0.16095 -1.116075 0.107675 -0.334825 0.30495 -0.622925 0.593075 -0.864325 0.288075 -0.24135 0.698175 -0.42695 1.230275 -0.558 0.0675 -0.016875 0.14405 -0.028575 0.216725 -0.042875v-0.242675l-0.1467 -0.027975c-0.024025 -0.00475 -0.047525 -0.00965 -0.070025 -0.014825 -0.5321 -0.129775 -0.9409 -0.31535 -1.230275 -0.55675 -0.288125 -0.2414 -0.4854 -0.529475 -0.593075 -0.864325 -0.107725 -0.3348 -0.16095 -0.7073 -0.16095 -1.116075V6.15355c0 -0.612525 -0.072675 -1.117375 -0.216725 -1.5132 -0.14405 -0.395825 -0.390625 -0.687825 -0.7384 -0.876 -0.347825 -0.188175 -0.8267 -0.2829 -1.43405 -0.2829V1.9422925Zm1.457425 10.0317575c0 0.089575 -0.171275 0.315375 -0.378925 0.50225 -0.348025 0.312525 -0.856875 0.799325 -1.337325 1.2717l-0.352025 0.348625 -0.46925 0.474125c-0.30605 0.31405 -0.512225 0.538025 -0.512225 0.565975 0 0.049325 0.365975 0.681325 0.815025 1.405475l0.757875 1.225125c0.03375 0.054475 0.02725 0.12455 -0.015575 0.171275l-0.180375 0.138875c-0.136275 0.15055 -0.2284 0.268625 -0.246575 0.4166 0.023575 0.06605 -0.04205 0.1074 -0.12705 0.147l-0.100075 0.04505c-0.2887 0.134175 -0.50775 -0.007 -1.290975 -0.911425l-0.369625 -0.43005c-0.370475 -0.42505 -0.683325 -0.7481 -0.729875 -0.74925 -0.1181 -0.002575 -1.42495 1.42625 -2.435925 2.663025 -0.891575 1.090125 -1.6767 1.1122 -1.903825 0.898075 -0.382825 -0.363375 -0.327025 -0.985 0.144075 -1.594975l0.061175 -0.0761c0.230975 -0.278525 0.725425 -0.79945 1.288125 -1.364825l0.1879 -0.1879 0.336075 -0.331875c0.338475 -0.33155 0.680025 -0.65795 0.987 -0.9411l0.42565 -0.39195 -0.8685 -1.864825c-0.524625 -1.14765 -0.479725 -1.2488 0.27985 -1.340675l0.70935 -0.079125 0.61645 0.9318c0.3387 0.5126 0.665725 0.9318 0.72415 0.9318 0.05435 0 0.585725 -0.422975 1.2107 -0.96205l0.5852 -0.5074c0.70615 -0.6057 0.852075 -0.6786 1.1371 -0.65055l0.0817 0.009825c0.222475 0.0309 0.422025 0.01605 0.492725 -0.033625l0.016025 -0.0144c0.119375 -0.14275 0.461975 0.068775 0.461975 0.2855ZM15.232725 3.4464c0.5658 0 0.650175 0.197275 0.650175 0.197275 -1.922025 1.003175 -3.548125 2.791475 -5.227425 6.085225l-0.2705 0.539225 -1.04415 2.030375c-0.08235 0.149725 -0.098725 -0.059275 -0.466725 -0.5613l-0.06275 -0.0837C6.849425 8.72465 5.4194 8.174275 5.428 8.127875c0.757975 -0.488375 2.177725 -0.0108 3.055025 0.769175l0.03245 0.03115 0.086825 0.07575c0.143 0.1284 0.21015 0.211325 0.4232 0.448525 0.021275 0 0.245875 -0.35445 0.479175 -0.732125l0.54345 -0.891375c1.95445 -3.0822 3.998425 -4.385175 5.1846 -4.382575Z" stroke-width="0.25"></path>
+</svg>

package/eventcatalog/public/icons/proto.svg

@@ -0,0 +1,10 @@
+<svg width="120" height="120" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g fill-rule="nonzero" fill="none">
+        <path fill="#db4437" d="M4.056 3.062L2.713 5.316l1.42 3.01 3.09-5.264z"/>
+        <path fill="#4285f4" d="M1.044 8.04l3.012 4.977h3.167l-4.51-7.7z"/>
+    </g>
+    <g>
+        <path fill="#ffc107" d="M12 13.017l1.343-2.255-1.42-3.009-3.09 5.264z"/>
+        <path fill="#0f9d58" d="M15.012 8.04L12 3.061H8.833l4.51 7.7z"/>
+    </g>
+</svg>

package/eventcatalog/src/components/Grids/utils.tsx

@@ -1,7 +1,7 @@
-import { BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon, EnvelopeIcon } from '@heroicons/react/24/outline';
-import type { CollectionMessageTypes } from '@types';
+import { BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon, EnvelopeIcon, ServerIcon } from '@heroicons/react/24/outline';
+import type { CollectionMessageTypes, CollectionTypes } from '@types';
 
-export const getCollectionStyles = (collection: CollectionMessageTypes) => {
+export const getCollectionStyles = (collection: CollectionMessageTypes | CollectionTypes) => {
   switch (collection) {
     case 'events':
       return { color: 'orange', Icon: BoltIcon };
@@ -9,6 +9,8 @@ export const getCollectionStyles = (collection: CollectionMessageTypes) => {
       return { color: 'blue', Icon: ChatBubbleLeftIcon };
     case 'queries':
       return { color: 'green', Icon: MagnifyingGlassIcon };
+    case 'services':
+      return { color: 'pink', Icon: ServerIcon };
     default:
       return { color: 'gray', Icon: EnvelopeIcon };
   }

package/eventcatalog/src/components/MDX/RemoteFile.astro

@@ -1,6 +1,6 @@
 ---
 import jsonpath from 'jsonpath';
-import SchemaViewer from './SchemaViewer/SchemaViewer.astro';
+import JSONSchemaViewer from '@components/SchemaExplorer/JSONSchemaViewer';
 import { Code } from 'astro-expressive-code/components';
 import { isPrivateRemoteSchemaEnabled } from '@utils/feature';
 
@@ -151,16 +151,10 @@ if (renderAs === 'auto') {
   ) : (
     <div class="remote-file-content">
       {finalRenderAs === 'schema' ? (
-        <SchemaViewer
-          schema={processedData}
-          schemaPath={resolvedUrl}
-          title={title}
-          maxHeight={maxHeight}
-          file="remote"
-          id={`remote-schema-${Math.random().toString(36).substring(2, 9)}`}
-          expand={false}
-          search={true}
-        />
+        <div class="not-prose my-4">
+          {title && <h2 class="text-3xl font-bold mb-2 !mt-0">{title}</h2>}
+          <JSONSchemaViewer client:load schema={processedData} maxHeight={maxHeight} expand={false} search={true} />
+        </div>
       ) : (
         <div class="not-prose max-w-4xl overflow-x-auto" style={`max-height: ${maxHeight}px;`}>
           <Code code={content} title={title || ''} lang="json" />

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewerRoot.astro

@@ -3,11 +3,11 @@ const { id, filePath } = Astro.props;
 import fs from 'node:fs/promises';
 import { existsSync } from 'fs';
 import yaml from 'js-yaml';
-import path from 'path';
-import SchemaViewerClient from './SchemaViewer.astro';
+import JSONSchemaViewer from '@components/SchemaExplorer/JSONSchemaViewer';
+import AvroSchemaViewer from '@components/SchemaExplorer/AvroSchemaViewer';
 import Admonition from '../Admonition';
 import { getMDXComponentsByName } from '@utils/markdown';
-import { getAbsoluteFilePathForAstroFile, resolveProjectPath } from '@utils/files';
+import { getAbsoluteFilePathForAstroFile, resolveProjectPath, isAvroSchema } from '@utils/files';
 
 let schemas = [];
 
@@ -22,16 +22,22 @@ try {
     const exists = existsSync(schemaPath);
     let schema;
     let render = true;
+    let isAvro = false;
 
     if (exists) {
+      // Check if this is an Avro schema file
+      isAvro = isAvroSchema(schemaPath);
+
       // Load the schema for the component
       schema = await fs.readFile(schemaPath, 'utf-8');
+
       if (schemaPath.endsWith('.yml') || schemaPath.endsWith('.yaml')) {
         schema = yaml.load(schema);
       } else {
         schema = JSON.parse(schema);
-        // Lets JSON schema control if the component should be rendered or not
-        if (schema['x-eventcatalog-render-schema-viewer'] !== undefined) {
+
+        // For non-Avro schemas, let JSON schema control if the component should be rendered
+        if (!isAvro && schema['x-eventcatalog-render-schema-viewer'] !== undefined) {
           render = schema['x-eventcatalog-render-schema-viewer'];
         }
       }
@@ -42,6 +48,7 @@ try {
       exists,
       schema,
       schemaPath,
+      isAvroSchema: isAvro,
       ...schemaViewerProps,
       render,
       index,
@@ -62,7 +69,35 @@ try {
         if (!schema.render) return null;
         return (
           <div>
-            {schema.exists && <SchemaViewerClient {...schema} id={`${schema.id}-${schema.file}-SchemaViewer-client`} />}
+            {schema.exists && (
+              <div
+                id={`${schema.id}-${schema.file}-SchemaViewer-client`}
+                class="not-prose my-4"
+                data-expand={schema.expand ? 'true' : 'false'}
+                data-search={schema.search !== false ? 'true' : 'false'}
+              >
+                {schema.title && <h2 class="text-2xl font-bold mb-2 !mt-0">{schema.title}</h2>}
+
+                {/* Render AvroSchemaViewer for Avro schemas */}
+                {schema.isAvroSchema ? (
+                  <AvroSchemaViewer
+                    client:load
+                    schema={schema.schema}
+                    maxHeight={schema.maxHeight}
+                    expand={schema.expand}
+                    search={schema.search}
+                  />
+                ) : (
+                  <JSONSchemaViewer
+                    client:load
+                    schema={schema.schema}
+                    maxHeight={schema.maxHeight}
+                    expand={schema.expand}
+                    search={schema.search}
+                  />
+                )}
+              </div>
+            )}
 
             {/* User has tried to load the schema, but it was not found on file system */}
             {!schema.exists && (

package/eventcatalog/src/components/SchemaExplorer/ApiAccessSection.tsx

@@ -0,0 +1,139 @@
+import { ChevronUpIcon, ChevronDownIcon, ClipboardDocumentIcon } from '@heroicons/react/24/outline';
+import type { SchemaItem } from './types';
+
+interface ApiAccessSectionProps {
+  message: SchemaItem;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onCopy: (content: string, id: string) => void;
+  copiedId: string | null;
+  apiAccessEnabled?: boolean;
+}
+
+export default function ApiAccessSection({
+  message,
+  isExpanded,
+  onToggle,
+  onCopy,
+  copiedId,
+  apiAccessEnabled = false,
+}: ApiAccessSectionProps) {
+  // Generate API path based on collection type
+  let apiPath = '';
+  if (message.collection === 'services') {
+    const specType = message.specType || 'openapi';
+    apiPath = `/api/schemas/services/${message.data.id}/${message.data.version}/${specType}`;
+  } else {
+    apiPath = `/api/schemas/${message.collection}/${message.data.id}/${message.data.version}`;
+  }
+
+  const curlCommand = typeof window !== 'undefined' ? `curl -X GET "${window.location.origin}${apiPath}"` : '';
+
+  return (
+    <div className="flex-shrink-0 border-b border-gray-200">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-4 py-1.5 text-left hover:bg-gray-50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 text-gray-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+          <span className="text-xs font-semibold text-gray-900">API Access</span>
+          <span className="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800">
+            Scale
+          </span>
+        </div>
+        {isExpanded ? <ChevronUpIcon className="h-4 w-4 text-gray-600" /> : <ChevronDownIcon className="h-4 w-4 text-gray-600" />}
+      </button>
+
+      {isExpanded && (
+        <div className="px-4 pb-2 bg-gray-50">
+          {apiAccessEnabled ? (
+            <>
+              <p className="text-xs text-gray-600 mb-2">Access this schema programmatically via API</p>
+              <div className="bg-gray-900 rounded-md p-3">
+                <div className="flex items-start justify-between mb-2">
+                  <span className="text-xs text-gray-400 font-mono">GET</span>
+                  <button
+                    onClick={() => onCopy(curlCommand, `${message.data.id}-api`)}
+                    className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-300 hover:text-white transition-colors"
+                    title="Copy curl command"
+                  >
+                    <ClipboardDocumentIcon className="h-3.5 w-3.5" />
+                    {copiedId === `${message.data.id}-api` ? 'Copied!' : 'Copy'}
+                  </button>
+                </div>
+                <code className="block text-xs text-green-400 font-mono break-all">{apiPath}</code>
+                <div className="mt-3 pt-3 border-t border-gray-700">
+                  <p className="text-xs text-gray-400 mb-2">Example:</p>
+                  <code className="block text-xs text-gray-300 font-mono whitespace-pre-wrap break-all">{curlCommand}</code>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="bg-white border border-purple-200 rounded-md p-4">
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-5 w-5 text-purple-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                    />
+                  </svg>
+                </div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-semibold text-gray-900 mb-1">Upgrade to Scale</h4>
+                  <p className="text-xs text-gray-600 mb-3">
+                    Access your schemas programmatically via API. Perfect for CI/CD pipelines, automation, and integrations.
+                  </p>
+                  <a
+                    href="https://eventcatalog.cloud"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700 transition-colors"
+                  >
+                    Start 14-day free trial
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-3.5 w-3.5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}