@eventcatalog/core 3.0.0 → 3.1.0

package/eventcatalog/src/layouts/Footer.astro

@@ -4,14 +4,14 @@ import { showEventCatalogBranding } from '@utils/feature';
 const { className } = Astro.props;
 ---
 
-<footer class={`relative py-4 space-y-8 border-t border-gray-300 ${className}`}>
+<footer class={`relative py-4 space-y-8 border-t border-[rgb(var(--ec-page-border))] ${className}`}>
   {
     showEventCatalogBranding() && (
-      <div class="flex justify-between items-center py-8 text-gray-500 text-sm font-light">
+      <div class="flex justify-between items-center py-8 text-[rgb(var(--ec-page-text-muted))] text-sm font-light">
         <div class="flex space-x-5">
           <a href="https://github.com/event-catalog/eventcatalog" target="_blank" aria-label="View EventCatalog on GitHub">
             <svg
-              class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
+              class="w-5 h-5 bg-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-accent))]"
               style={`mask-image: url("${buildUrl('/icons/github.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
               aria-hidden="true"
             />
@@ -19,7 +19,7 @@ const { className } = Astro.props;
           <a href="https://x.com/event_catalog" target="_blank" aria-label="Follow EventCatalog on X (Twitter)">
             <span class="sr-only">X (Twitter)</span>
             <svg
-              class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
+              class="w-5 h-5 bg-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-accent))]"
               style={`mask-image: url("${buildUrl('/icons/x-twitter.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
               aria-hidden="true"
             />
@@ -27,7 +27,7 @@ const { className } = Astro.props;
           <a href="https://www.youtube.com/@event-catalog" target="_blank" aria-label="Watch EventCatalog on YouTube">
             <span class="sr-only">YouTube</span>
             <svg
-              class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
+              class="w-5 h-5 bg-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-accent))]"
               style={`mask-image: url("${buildUrl('/icons/youtube.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
               aria-hidden="true"
             />
@@ -35,7 +35,7 @@ const { className } = Astro.props;
         </div>
         <a
           target="_blank"
-          class="hover:text-primary hover:underline text-gray-400 font-light not-prose"
+          class="hover:text-[rgb(var(--ec-accent))] hover:underline text-[rgb(var(--ec-icon-color))] font-light not-prose"
           href="https://eventcatalog.dev"
         >
           Powered by EventCatalog

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -27,6 +27,18 @@ import '@fontsource/inter';
 import '@fontsource/inter/400.css'; // Specify weight
 import '@fontsource/inter/700.css'; // Specify weight
 
+// Theme CSS variables (must load before user styles)
+import '../styles/theme.css';
+
+// Theme files - imported so they're available, applied via data-catalog-theme attribute
+import '../styles/themes/ocean.css';
+import '../styles/themes/sapphire.css';
+import '../styles/themes/sunset.css';
+import '../styles/themes/forest.css';
+
+// Get configured theme (default, ocean, etc.)
+const catalogTheme = config.theme || 'default';
+
 import { ClientRouter } from 'astro:transitions';
 
 import { getCommands } from '@utils/collections/commands';
@@ -39,7 +51,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/collections/queries';
 import { hasLandingPageForDocs } from '@utils/pages';
 
-import { isEventCatalogUpgradeEnabled, isEmbedEnabled } from '@utils/feature';
+import { isEventCatalogUpgradeEnabled, isEmbedEnabled, isCustomStylesEnabled } from '@utils/feature';
 
 const catalogHasDefaultLandingPageForDocs = await hasLandingPageForDocs();
 const customDocs = await getCollection('customPages');
@@ -63,9 +75,11 @@ if (!catalogHasDefaultLandingPageForDocs) {
 }
 
 // Try and load any custom styles if they exist
-try {
-  await import('../../eventcatalog.styles.css');
-} catch (error) {}
+if (isCustomStylesEnabled()) {
+  try {
+    await import('../../eventcatalog.styles.css');
+  } catch (error) {}
+}
 
 const currentPath = Astro.url.pathname;
 
@@ -173,8 +187,35 @@ const canPageBeEmbedded = isEmbedEnabled();
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" data-catalog-theme={catalogTheme}>
   <head>
+    <!-- Inline script to prevent flash of wrong theme -->
+    <script is:inline define:vars={{ catalogTheme }}>
+      (function () {
+        function getSystemTheme() {
+          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+          }
+          return 'light';
+        }
+
+        function applyTheme() {
+          // Check localStorage first, fall back to system preference
+          const stored = localStorage.getItem('eventcatalog-theme');
+          const theme = stored === 'light' || stored === 'dark' ? stored : getSystemTheme();
+          document.documentElement.setAttribute('data-theme', theme);
+          // Also ensure catalog theme is set (for page transitions)
+          document.documentElement.setAttribute('data-catalog-theme', catalogTheme);
+        }
+
+        // Apply on initial load
+        applyTheme();
+
+        // Apply after Astro page transitions
+        document.addEventListener('astro:after-swap', applyTheme);
+        document.addEventListener('astro:page-load', applyTheme);
+      })();
+    </script>
     <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
     <style is:global>
       .sidebar-transition {
@@ -233,7 +274,7 @@ const canPageBeEmbedded = isEmbedEnabled();
       <div class="flex">
         <aside class="flex" id="eventcatalog-vertical-nav">
           <div
-            class="fixed flex flex-col items-center w-14 h-screen py-3 bg-white bg-gradient-to-b from-white to-gray-100 border-r border-gray-200 z-20 shadow-md justify-between"
+            class="fixed flex flex-col items-center w-14 h-screen py-3 bg-[rgb(var(--ec-sidebar-bg))] bg-gradient-to-b from-[rgb(var(--ec-sidebar-bg))] to-[rgb(var(--ec-sidebar-bg-gradient))] border-r border-[rgb(var(--ec-sidebar-border))] z-20 shadow-md justify-between"
           >
             <nav class="flex flex-col h-[calc(100vh-70px)] justify-between">
               <div class="flex flex-col items-center flex-1 space-y-6">
@@ -246,7 +287,9 @@ const canPageBeEmbedded = isEmbedEnabled();
                         href={item.href}
                         aria-label={item.label}
                         class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${
-                          item.current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'
+                          item.current
+                            ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]'
+                            : 'hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'
                         }`}
                       >
                         <div class="has-tooltip">
@@ -263,7 +306,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                   })
                 }
 
-                <hr class="w-8 border-t border-gray-200" />
+                <hr class="w-8 border-t border-[rgb(var(--ec-sidebar-border))]" />
 
                 {
                   studioNavigationItem.length > 0 && (
@@ -272,7 +315,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                       data-role="nav-item"
                       href={studioNavigationItem[0].href}
                       aria-label={studioNavigationItem[0].label}
-                      class={`p-1.5 inline-block pt-1 pb-1 mt-0 mb-0 transition-colors duration-200 rounded-lg relative ${studioNavigationItem[0].current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'}`}
+                      class={`p-1.5 inline-block pt-1 pb-1 mt-0 mb-0 transition-colors duration-200 rounded-lg relative ${studioNavigationItem[0].current ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]' : 'hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'}`}
                     >
                       <div class="has-tooltip">
                         <span
@@ -287,7 +330,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                   )
                 }
 
-                {studioNavigationItem.length > 0 && <hr class="w-8 border-t border-gray-200" />}
+                {studioNavigationItem.length > 0 && <hr class="w-8 border-t border-[rgb(var(--ec-sidebar-border))]" />}
 
                 {
                   premiumFeatures.map((item) => (
@@ -297,7 +340,9 @@ const canPageBeEmbedded = isEmbedEnabled();
                       href={item.href}
                       aria-label={item.label}
                       class={`p-1.5 inline-block transition-colors duration-200 rounded-lg mb-8 relative ${
-                        item.current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'
+                        item.current
+                          ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]'
+                          : 'hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'
                       }`}
                     >
                       <div class="has-tooltip">
@@ -328,7 +373,7 @@ const canPageBeEmbedded = isEmbedEnabled();
                       data-role="nav-item"
                       href={buildUrl('/plans')}
                       aria-label="Upgrade EventCatalog"
-                      class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gray-900' : 'bg-gray-200 hover:bg-gray-800 hover:text-white text-gray-700'}`}
+                      class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]' : 'bg-[rgb(var(--ec-sidebar-bg-gradient))] hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'}`}
                     >
                       <div class="has-tooltip">
                         <span
@@ -348,12 +393,15 @@ const canPageBeEmbedded = isEmbedEnabled();
 
           {
             showNestedSideBar && (
-              <SideNav id="sidebar" class={`sidebar-transition h-content bg-white  border-r border-gray-100 w-[320px] ml-14`} />
+              <SideNav
+                id="sidebar"
+                class={`sidebar-transition h-content bg-[rgb(var(--ec-sidebar-bg))] border-r border-[rgb(var(--ec-sidebar-border))] w-[320px] ml-14`}
+              />
             )
           }
         </aside>
         <main
-          class={`sidebar-transition w-full max-h-content overflow-y-auto ${showNestedSideBar ? 'ml-0' : 'ml-14'}`}
+          class={`sidebar-transition w-full max-h-content overflow-y-auto bg-[rgb(var(--ec-page-bg))] ${showNestedSideBar ? 'ml-0' : 'ml-14'}`}
           id="content"
         >
           <slot />

package/eventcatalog/src/pages/_index.astro

@@ -77,9 +77,9 @@ const topTiles = [
     description: 'Business flows',
     href: buildUrl('/discover/flows'),
     icon: Workflow,
-    bgColor: 'bg-purple-500',
-    borderColor: 'border-purple-200',
-    textColor: 'text-purple-600',
+    bgColor: 'bg-[rgb(var(--ec-accent))]',
+    borderColor: 'border-[rgb(var(--ec-accent)/0.3)]',
+    textColor: 'text-[rgb(var(--ec-accent))]',
     emptyText: 'No flows yet',
     addHref: 'https://www.eventcatalog.dev/docs/flows',
   },
@@ -91,71 +91,63 @@ const quickActions = [
     description: 'Browse all documented resources',
     icon: BookOpenText,
     href: getDefaultUrl('docs', 'domains'),
-    iconBg: 'bg-blue-50',
-    iconColor: 'text-blue-600',
-    hoverBorder: 'hover:border-blue-300',
+    iconBg: 'bg-blue-50 dark:bg-blue-500/10',
+    iconColor: 'text-blue-600 dark:text-blue-400',
   },
   {
     title: 'Visualizer',
     description: 'Interactive architecture diagrams',
     icon: Workflow,
     href: getDefaultUrl('visualiser', 'domains'),
-    iconBg: 'bg-purple-50',
-    iconColor: 'text-purple-600',
-    hoverBorder: 'hover:border-purple-300',
+    iconBg: 'bg-[rgb(var(--ec-accent-subtle))]',
+    iconColor: 'text-[rgb(var(--ec-accent))]',
   },
   {
     title: 'Discover',
     description: 'Search and filter all resources',
     icon: TableProperties,
     href: buildUrl('/discover/events'),
-    iconBg: 'bg-teal-50',
-    iconColor: 'text-teal-600',
-    hoverBorder: 'hover:border-teal-300',
+    iconBg: 'bg-teal-50 dark:bg-teal-500/10',
+    iconColor: 'text-teal-600 dark:text-teal-400',
   },
   {
     title: 'Schema Explorer',
     description: 'Browse and compare schemas',
     icon: FileJson,
     href: buildUrl('/schemas/explorer'),
-    iconBg: 'bg-amber-50',
-    iconColor: 'text-amber-600',
-    hoverBorder: 'hover:border-amber-300',
-  },
-];
-
-const learnLinks = [
-  {
-    title: 'Getting Started',
-    description: 'Set up your first catalog',
-    href: 'https://www.eventcatalog.dev/docs/development/getting-started/introduction',
-    icon: BookOpenText,
+    iconBg: 'bg-amber-50 dark:bg-amber-500/10',
+    iconColor: 'text-amber-600 dark:text-amber-400',
   },
   {
-    title: 'Generators & Plugins',
-    description: 'AsyncAPI, OpenAPI integrations',
-    href: 'https://www.eventcatalog.dev/integrations',
-    icon: Zap,
+    title: 'Team Directory',
+    description: 'Ownership & contacts',
+    icon: BookUser,
+    href: buildUrl('/directory/users'),
+    iconBg: 'bg-orange-50 dark:bg-orange-500/10',
+    iconColor: 'text-orange-600 dark:text-orange-400',
   },
   {
-    title: 'SDK & CLI',
-    description: 'Programmatic catalog access',
+    title: 'API & SDK',
+    description: 'Programmatic access',
+    icon: Code2,
     href: 'https://www.eventcatalog.dev/docs/sdk',
-    icon: Terminal,
+    iconBg: 'bg-indigo-50 dark:bg-indigo-500/10',
+    iconColor: 'text-indigo-600 dark:text-indigo-400',
+    external: true,
   },
 ];
 ---
 
 <VerticalSideBarLayout title="EventCatalog">
-  <body class="min-h-screen bg-gray-50/50 font-inter">
+  <div class="min-h-screen font-inter">
     <!-- Hero Section -->
-    <div class="relative bg-white border-b border-gray-200">
+    <div class="relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border-b border-[rgb(var(--ec-page-border))]">
       <main class="container px-6 lg:px-8 mx-auto py-10 max-w-[85em]">
         <div class="max-w-3xl">
-          <h1 class="text-3xl md:text-4xl font-bold mb-3 text-gray-900 tracking-tight">
+          <h1 class="text-3xl md:text-4xl font-bold mb-3 text-[rgb(var(--ec-page-text))] tracking-tight">
             {config?.organizationName || 'EventCatalog'}
           </h1>
-          <p class="text-base text-gray-600 leading-relaxed mb-6">
+          <p class="text-base text-[rgb(var(--ec-page-text-muted))] leading-relaxed mb-6">
             {
               config.tagline ||
                 'Explore and understand your event-driven architecture. Browse documentation, visualize dependencies, and discover how your systems communicate.'
@@ -166,14 +158,14 @@ const learnLinks = [
           <div class="flex flex-wrap items-center gap-3">
             <a
               href={getDefaultUrl('docs', 'domains')}
-              class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 transition-colors"
+              class="inline-flex items-center gap-2 px-5 py-2.5 bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] rounded-lg font-medium hover:bg-[rgb(var(--ec-button-bg-hover))] transition-colors"
             >
               <BookOpenText className="w-4 h-4" />
               Explore Docs
             </a>
             <a
               href={getDefaultUrl('visualiser', 'domains')}
-              class="inline-flex items-center gap-2 px-5 py-2.5 bg-white text-gray-700 border border-gray-300 rounded-lg font-medium hover:bg-gray-50 hover:border-gray-400 transition-colors"
+              class="inline-flex items-center gap-2 px-5 py-2.5 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] rounded-lg font-medium hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-accent))] transition-colors"
             >
               <Workflow className="w-4 h-4" />
               View Architecture
@@ -188,10 +180,13 @@ const learnLinks = [
       <!-- Architecture Stats -->
       <section class="mb-10">
         <div class="flex items-center justify-between mb-4">
-          <h2 class="text-sm font-semibold uppercase tracking-wider text-gray-500">Your Catalog</h2>
+          <h2 class="text-sm font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]">Your Catalog</h2>
           {
             hasContent && (
-              <a href={buildUrl('/discover/events')} class="text-sm text-gray-500 hover:text-gray-700 flex items-center gap-1">
+              <a
+                href={buildUrl('/discover/events')}
+                class="text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] flex items-center gap-1"
+              >
                 View all
                 <ArrowRightIcon className="w-3 h-3" />
               </a>
@@ -204,31 +199,31 @@ const learnLinks = [
               tile.count > 0 ? (
                 <a
                   href={tile.href}
-                  class={`group relative bg-white p-5 rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all`}
+                  class={`group relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] p-5 rounded-xl border border-[rgb(var(--ec-page-border))] hover:border-t-[rgb(var(--ec-accent))] hover:border-r-[rgb(var(--ec-accent))] hover:border-b-[rgb(var(--ec-accent))] hover:shadow-sm transition-all`}
                 >
                   <div class={`absolute left-0 top-0 bottom-0 w-1 ${tile.bgColor} rounded-l-xl`} />
                   <div class="flex items-start justify-between mb-3">
-                    <div class={`p-2 rounded-lg ${tile.iconBg || 'bg-gray-100'}`}>
+                    <div class={`p-2 rounded-lg ${tile.iconBg || 'bg-[rgb(var(--ec-content-hover))]'}`}>
                       <tile.icon className={`w-4 h-4 ${tile.textColor}`} />
                     </div>
-                    <ArrowRightIcon className="w-4 h-4 text-gray-300 group-hover:text-gray-500 transition-colors" />
+                    <ArrowRightIcon className="w-4 h-4 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-page-text-muted))] transition-colors" />
                   </div>
-                  <div class="text-2xl font-bold text-gray-900 mb-0.5">{tile.count}</div>
-                  <div class="text-sm text-gray-500">{tile.description}</div>
+                  <div class="text-2xl font-bold text-[rgb(var(--ec-page-text))] mb-0.5">{tile.count}</div>
+                  <div class="text-sm text-[rgb(var(--ec-page-text-muted))]">{tile.description}</div>
                 </a>
               ) : (
-                <div class="relative bg-gray-50 p-5 rounded-xl border border-dashed border-gray-300">
-                  <div class={`absolute left-0 top-0 bottom-0 w-1 bg-gray-300 rounded-l-xl`} />
+                <div class="relative bg-[rgb(var(--ec-content-hover))] p-5 rounded-xl border border-dashed border-[rgb(var(--ec-page-border))]">
+                  <div class={`absolute left-0 top-0 bottom-0 w-1 bg-[rgb(var(--ec-icon-color))] rounded-l-xl`} />
                   <div class="flex items-start justify-between mb-3">
-                    <div class="p-2 rounded-lg bg-gray-100">
-                      <tile.icon className="w-4 h-4 text-gray-400" />
+                    <div class="p-2 rounded-lg bg-[rgb(var(--ec-content-hover))]">
+                      <tile.icon className="w-4 h-4 text-[rgb(var(--ec-icon-color))]" />
                     </div>
                   </div>
-                  <div class="text-sm font-medium text-gray-500 mb-2">{tile.emptyText}</div>
+                  <div class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] mb-2">{tile.emptyText}</div>
                   <a
                     href={tile.addHref}
                     target="_blank"
-                    class="inline-flex items-center gap-1 text-xs font-medium text-gray-600 hover:text-gray-900"
+                    class="inline-flex items-center gap-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
                   >
                     <PlusIcon className="w-3 h-3" />
                     Add {tile.title.toLowerCase()}
@@ -240,143 +235,104 @@ const learnLinks = [
         </div>
       </section>
 
-      <!-- Two Column Layout -->
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-10">
-        <!-- Main Column -->
-        <div class="lg:col-span-2 space-y-8">
-          <!-- Quick Actions -->
-          <section>
-            <h2 class="text-lg font-semibold text-gray-900 mb-4">Explore</h2>
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              {
-                quickActions.map((action) => (
-                  <a
-                    href={action.href}
-                    class={`group flex items-start gap-4 bg-white p-5 rounded-xl border border-gray-200 ${action.hoverBorder} hover:shadow-sm transition-all`}
-                  >
-                    <div class={`${action.iconBg} p-3 rounded-xl`}>
-                      <action.icon className={`w-6 h-6 ${action.iconColor}`} />
-                    </div>
-                    <div class="flex-1 min-w-0 pt-0.5">
-                      <div class="font-semibold text-gray-900 group-hover:text-gray-700 mb-1">{action.title}</div>
-                      <div class="text-sm text-gray-500 leading-relaxed">{action.description}</div>
-                    </div>
-                  </a>
-                ))
-              }
-            </div>
-          </section>
+      <!-- Explore Section - Full Width -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-4">Explore</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {
+            quickActions.map((action: any) => (
+              <a
+                href={action.href}
+                target={action.external ? '_blank' : undefined}
+                class="group flex items-start gap-4 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] p-5 rounded-xl border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-sm transition-all"
+              >
+                <div class={`${action.iconBg} p-3 rounded-xl flex-shrink-0`}>
+                  <action.icon className={`w-5 h-5 ${action.iconColor}`} />
+                </div>
+                <div class="flex-1 min-w-0 pt-0.5">
+                  <div class="font-semibold text-[rgb(var(--ec-page-text))] mb-1 flex items-center gap-1.5">
+                    {action.title}
+                    {action.external && (
+                      <svg
+                        class="w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                        />
+                      </svg>
+                    )}
+                  </div>
+                  <div class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">{action.description}</div>
+                </div>
+              </a>
+            ))
+          }
+        </div>
+      </section>
 
-          <!-- Additional Links -->
-          <section class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <!-- Resources & Community - Compact Footer Style -->
+      <section class="border-t border-[rgb(var(--ec-page-border))] pt-8 pb-4">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
+          <div class="flex flex-wrap items-center gap-x-6 gap-y-3">
             <a
-              href={buildUrl('/directory/users')}
-              class="group flex items-center gap-4 bg-white p-4 rounded-xl border border-gray-200 hover:border-orange-200 hover:shadow-sm transition-all"
+              href="https://www.eventcatalog.dev/docs/development/getting-started/introduction"
+              target="_blank"
+              class="text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors"
             >
-              <div class="bg-orange-50 p-2.5 rounded-lg">
-                <BookUser className="w-5 h-5 text-orange-600" />
-              </div>
-              <div class="flex-1 min-w-0">
-                <div class="font-medium text-gray-900 group-hover:text-orange-600 transition-colors">Team Directory</div>
-                <div class="text-sm text-gray-500 truncate">Ownership & contacts</div>
-              </div>
+              Getting Started
             </a>
             <a
-              href="https://www.eventcatalog.dev/docs/sdk"
+              href="https://www.eventcatalog.dev/integrations"
               target="_blank"
-              class="group flex items-center gap-4 bg-white p-4 rounded-xl border border-gray-200 hover:border-indigo-200 hover:shadow-sm transition-all"
+              class="text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors"
             >
-              <div class="bg-indigo-50 p-2.5 rounded-lg">
-                <Code2 className="w-5 h-5 text-indigo-600" />
-              </div>
-              <div class="flex-1 min-w-0">
-                <div class="font-medium text-gray-900 group-hover:text-indigo-600 transition-colors">API & SDK</div>
-                <div class="text-sm text-gray-500 truncate">Programmatic access</div>
-              </div>
+              Integrations
             </a>
-          </section>
-        </div>
-
-        <!-- Sidebar -->
-        <div class="space-y-6">
-          <!-- Learn More -->
-          <section class="bg-white rounded-xl border border-gray-200 p-5">
-            <h3 class="font-semibold text-gray-900 mb-4">Learn More</h3>
-            <div class="space-y-3">
-              {
-                learnLinks.map((link) => (
-                  <a
-                    href={link.href}
-                    target="_blank"
-                    class="group flex items-start gap-3 text-sm hover:bg-gray-50 -mx-2 px-2 py-2 rounded-lg transition-colors"
-                  >
-                    <link.icon className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" />
-                    <div>
-                      <div class="font-medium text-gray-700 group-hover:text-gray-900">{link.title}</div>
-                      <div class="text-gray-500">{link.description}</div>
-                    </div>
-                  </a>
-                ))
-              }
-            </div>
-          </section>
-
-          <!-- Community -->
-          <section class="bg-white rounded-xl border border-gray-200 p-5">
-            <h3 class="font-semibold text-gray-900 mb-4">Community</h3>
-            <div class="space-y-3">
-              <a
-                href="https://discord.gg/3rjaZMmrAm"
-                target="_blank"
-                class="group flex items-center gap-3 p-3 -mx-1 rounded-lg hover:bg-gray-50 transition-colors"
-              >
-                <div class="bg-indigo-100 p-2 rounded-lg">
-                  <svg class="w-4 h-4 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
-                    <path
-                      d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"
-                    ></path>
-                  </svg>
-                </div>
-                <div>
-                  <div class="text-sm font-medium text-gray-900 group-hover:text-indigo-600">Join Discord</div>
-                  <div class="text-xs text-gray-500">Chat with the community</div>
-                </div>
-              </a>
-              <a
-                href="https://github.com/event-catalog/eventcatalog"
-                target="_blank"
-                class="group flex items-center gap-3 p-3 -mx-1 rounded-lg hover:bg-gray-50 transition-colors"
-              >
-                <div class="bg-gray-100 p-2 rounded-lg">
-                  <svg class="w-4 h-4 text-gray-700" fill="currentColor" viewBox="0 0 24 24">
-                    <path
-                      fill-rule="evenodd"
-                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                      clip-rule="evenodd"></path>
-                  </svg>
-                </div>
-                <div>
-                  <div class="text-sm font-medium text-gray-900 group-hover:text-gray-700">GitHub</div>
-                  <div class="text-xs text-gray-500">Star & contribute</div>
-                </div>
-              </a>
-              <a
-                href="https://www.eventcatalog.dev/docs"
-                target="_blank"
-                class="group flex items-center gap-3 p-3 -mx-1 rounded-lg hover:bg-gray-50 transition-colors"
-              >
-                <div class="bg-blue-100 p-2 rounded-lg">
-                  <DocumentTextIcon className="w-4 h-4 text-blue-600" />
-                </div>
-                <div>
-                  <div class="text-sm font-medium text-gray-900 group-hover:text-blue-600">Documentation</div>
-                  <div class="text-xs text-gray-500">Guides & references</div>
-                </div>
-              </a>
-            </div>
-          </section>
+            <a
+              href="https://www.eventcatalog.dev/docs"
+              target="_blank"
+              class="text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors"
+            >
+              Documentation
+            </a>
+          </div>
+          <div class="flex items-center gap-4">
+            <a
+              href="https://discord.gg/3rjaZMmrAm"
+              target="_blank"
+              class="flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors"
+              title="Join Discord"
+            >
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path
+                  d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"
+                ></path>
+              </svg>
+              <span class="hidden sm:inline">Discord</span>
+            </a>
+            <a
+              href="https://github.com/event-catalog/eventcatalog"
+              target="_blank"
+              class="flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] transition-colors"
+              title="GitHub"
+            >
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path
+                  fill-rule="evenodd"
+                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span class="hidden sm:inline">GitHub</span>
+            </a>
+          </div>
         </div>
-      </div>
+      </section>
     </main>
-  </body>
+  </div>
 </VerticalSideBarLayout>