From 6ef8cc6db6bd2f9be6b0b2600d1400a9da064939 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Mon, 30 Mar 2026 09:32:49 +0100
Subject: [PATCH] feat: restructure feature grid into categorized sections for
 better organization

---
 .../Partials/hero-cards/product-grid.ejs      | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/Home/Views/Partials/hero-cards/product-grid.ejs b/Home/Views/Partials/hero-cards/product-grid.ejs
index ced2dc6b1f..4a63ead7be 100644
--- a/Home/Views/Partials/hero-cards/product-grid.ejs
+++ b/Home/Views/Partials/hero-cards/product-grid.ejs
@@ -1,17 +1,39 @@
-<!-- Feature grid -->
-<div class="mt-16 grid grid-cols-2 gap-4 sm:grid-cols-5 sm:gap-5 auto-rows-fr" id="hero-feature-grid">
-  <%- include('./status-page') -%>
-  <%- include('./incidents') -%>
-  <%- include('./monitoring') -%>
-  <%- include('./on-call') -%>
-  <%- include('./scheduled-maintenance') -%>
-  <%- include('./logs') -%>
-  <%- include('./metrics') -%>
-  <%- include('./traces') -%>
-  <%- include('./exceptions') -%>
-  <%- include('./workflows') -%>
-  <%- include('./dashboards') -%>
-  <%- include('./kubernetes') -%>
-  <%- include('./profiles') -%>
-  <%- include('./ai-agent-grid') -%>
+<!-- Feature grid with categories -->
+<div class="mt-16 space-y-10" id="hero-feature-grid">
+
+  <!-- Essentials -->
+  <div>
+    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4 text-left">Essentials</h3>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-5 sm:gap-5 auto-rows-fr">
+      <%- include('./status-page') -%>
+      <%- include('./incidents') -%>
+      <%- include('./monitoring') -%>
+      <%- include('./on-call') -%>
+      <%- include('./scheduled-maintenance') -%>
+    </div>
+  </div>
+
+  <!-- Observability -->
+  <div>
+    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4 text-left">Observability</h3>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-5 sm:gap-5 auto-rows-fr">
+      <%- include('./logs') -%>
+      <%- include('./metrics') -%>
+      <%- include('./traces') -%>
+      <%- include('./exceptions') -%>
+      <%- include('./profiles') -%>
+    </div>
+  </div>
+
+  <!-- Automation & Intelligence -->
+  <div>
+    <h3 class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4 text-left">Automation & Intelligence</h3>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 sm:gap-5 auto-rows-fr">
+      <%- include('./kubernetes') -%>
+      <%- include('./workflows') -%>
+      <%- include('./dashboards') -%>
+      <%- include('./ai-agent-grid') -%>
+    </div>
+  </div>
+
 </div>