feat(core): updated homepage styles (event-catalog#1897)

* feat(core): updated homepage styles

* Create tall-adults-end.md

Author: boyney123

.changeset/tall-adults-end.md

@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): updated homepage styles

eventcatalog/src/components/Grids/DomainGrid.tsx

@@ -135,7 +135,6 @@ const ServiceCard = memo(({ service }: { service: any }) => {
           {/* Receives (Inbound) */}
           <div className="flex-1 bg-blue-50 border border-blue-200 rounded-lg p-3">
             <div className="flex items-center gap-1.5 mb-2">
-              <ArrowRight className="h-3.5 w-3.5 text-blue-500" />
               <span className="text-xs font-semibold text-blue-700 uppercase">Inbound Messages</span>
               <span className="text-xs text-blue-500">({receives.length})</span>
             </div>
@@ -162,7 +161,6 @@ const ServiceCard = memo(({ service }: { service: any }) => {
           {/* Sends (Outbound) */}
           <div className="flex-1 bg-green-50 border border-green-200 rounded-lg p-3">
             <div className="flex items-center gap-1.5 mb-2">
-              <ArrowLeft className="h-3.5 w-3.5 text-green-500" />
               <span className="text-xs font-semibold text-green-700 uppercase">Outbound Messages</span>
               <span className="text-xs text-green-500">({sends.length})</span>
             </div>

eventcatalog/src/components/Grids/MessageGrid.tsx

@@ -41,9 +41,9 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
   );
 
   return (
-    <div className={`rounded-xl overflow-hidden bg-pink-50 p-8 border-2 border-dashed border-pink-300`}>
+    <div className={`rounded-xl overflow-hidden bg-white p-8 border-2 border-dashed border-pink-300`}>
       {/* Service Title */}
-      <div className="flex items-center gap-2 mb-8">
+      {/* <div className="flex items-center gap-2 mb-8">
         <ServerIcon className="h-6 w-6 text-pink-500" />
         <h2 className="text-2xl font-semibold text-gray-900">{service.data.name}</h2>
         <div className="flex gap-2 ml-auto">
@@ -60,7 +60,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             Read documentation
           </a>
         </div>
-      </div>
+      </div> */}
 
       <div className="grid grid-cols-3 gap-8 relative">
         {/* Left Column - Receives Messages & Reads From Containers */}
@@ -70,7 +70,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="mb-6">
               <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
                 <ServerIcon className="h-5 w-5 text-blue-500" />
-                Receives ({receives.length})
+                Inbound Messages ({receives.length})
               </h2>
             </div>
             {receives.length > 0 ? (
@@ -124,7 +124,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
         </div>
 
         {/* Service Information (Center) */}
-        <div className="bg-white border-2 border-pink-100 rounded-lg p-6 flex flex-col justify-center">
+        <div className="bg-pink-50 border-2 border-pink-100 rounded-lg p-6 flex flex-col justify-center">
           <div className="flex flex-col items-center gap-4">
             <ServerIcon className="h-12 w-12 text-pink-500" />
             <p className="text-xl font-semibold text-gray-900 text-center">{service.data.name}</p>
@@ -133,11 +133,11 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="w-full grid grid-cols-2 gap-3 mt-2">
               <div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-200">
                 <div className="text-2xl font-bold text-blue-600">{receives.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Receives</div>
+                <div className="text-xs text-gray-600 mt-1">Inbound Messages</div>
               </div>
               <div className="text-center p-3 bg-green-50 rounded-lg border border-green-200">
                 <div className="text-2xl font-bold text-green-600">{sends.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Sends</div>
+                <div className="text-xs text-gray-600 mt-1">Outbound Messages</div>
               </div>
               {readsFrom.length > 0 && (
                 <div className="text-center p-3 bg-orange-50 rounded-lg border border-orange-200">
@@ -168,7 +168,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="mb-6">
               <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
                 <ServerIcon className="h-5 w-5 text-emerald-500" />
-                Sends ({sends.length})
+                Outbound Messages ({sends.length})
               </h2>
             </div>
             {sends.length > 0 ? (

eventcatalog/src/components/SideNav/NestedSideBar/builders/domain.ts

@@ -65,6 +65,12 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
           },
         ].filter(Boolean) as ChildRef[],
       },
+      renderSubDomains && {
+        type: 'group',
+        title: 'Subdomains',
+        icon: 'Boxes',
+        pages: subDomains.map((domain) => `domain:${(domain as any).data.id}:${(domain as any).data.version}`),
+      },
       hasFlows && {
         type: 'group',
         title: 'Flows',
@@ -81,12 +87,7 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
           href: buildUrl(`/docs/entities/${(entity as any).data.id}/${(entity as any).data.version}`),
         })),
       },
-      renderSubDomains && {
-        type: 'group',
-        title: 'Subdomains',
-        icon: 'Boxes',
-        pages: subDomains.map((domain) => `domain:${(domain as any).data.id}:${(domain as any).data.version}`),
-      },
+
       ...(hasResourceGroups ? buildResourceGroupSections(resourceGroups, context) : []),
       renderServices && {
         type: 'group',

eventcatalog/src/pages/_index.astro

@@ -174,7 +174,7 @@ const topTiles = [
     description: 'Business domains defined',
     href: buildUrl('/discover/domains'),
     icon: RectangleGroupIcon,
-    bgColor: 'bg-yellow-100',
+    bgColor: 'bg-yellow-500',
     textColor: 'text-yellow-600',
     arrowColor: 'text-yellow-600',
   },
@@ -184,7 +184,7 @@ const topTiles = [
     description: 'Services documented in the catalog',
     href: buildUrl('/discover/services'),
     icon: ServerIcon,
-    bgColor: 'bg-pink-100',
+    bgColor: 'bg-pink-500',
     textColor: 'text-pink-600',
     arrowColor: 'text-pink-600',
   },
@@ -194,7 +194,7 @@ const topTiles = [
     description: 'Messages documented in the catalog',
     href: buildUrl('/discover/events'),
     icon: ChatBubbleLeftIcon,
-    bgColor: 'bg-blue-100',
+    bgColor: 'bg-blue-500',
     textColor: 'text-blue-600',
     arrowColor: 'text-blue-600',
   },
@@ -204,7 +204,7 @@ const topTiles = [
     description: 'Business flows documented',
     href: buildUrl('/discover/flows'),
     icon: Workflow,
-    bgColor: 'bg-purple-100',
+    bgColor: 'bg-purple-500',
     textColor: 'text-purple-600',
     arrowColor: 'text-purple-600',
   },
@@ -347,9 +347,7 @@ const quickActions = [
                 <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
 
                 {/* Colored left border accent */}
-                <div
-                  class={`absolute left-0 top-0 bottom-0 w-1 ${tile.bgColor} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
-                />
+                <div class={`absolute left-0 top-0 bottom-0 w-1 ${tile.bgColor} transition-opacity duration-300`} />
 
                 <div class="relative">
                   <div class="flex items-center justify-between mb-4">