From ededf81941851300b3c2c1f1552dcb26e83da364 Mon Sep 17 00:00:00 2001
From: Claude Code Bot <claude@vibentec-it.io>
Date: Wed, 1 Apr 2026 13:16:51 +0000
Subject: [PATCH] fix: resolve issue #29 - Homepage: Implement Highlight
 section (3Bear, drSquatch)

---
 .../vt-category-highlight/index.tsx           | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/modules/home/components/vt-category-highlight/index.tsx b/src/modules/home/components/vt-category-highlight/index.tsx
index 8f0fd0f..496f37d 100644
--- a/src/modules/home/components/vt-category-highlight/index.tsx
+++ b/src/modules/home/components/vt-category-highlight/index.tsx
@@ -34,28 +34,34 @@ export default async function VtCategoryHighlight({
   }
 
   const renderTile = (tile: any, idx: number) => {
-    const imageEl = tile.imageSrc ? (
-      <img
-        src={tile.imageSrc}
-        alt={tile.label ?? `category-${idx}`}
-        className={clx(classes.image, tile.imageClassName)}
-      />
-    ) : (
-      <div
-        className={clx(
-          "w-full h-full flex items-center justify-center",
-          tile.className
-        )}
-      >
-        <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
-        <div className={tile.descriptionClassName}>{tile.descriptionLabel}</div>
-        <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
-      </div>
-    )
+    if (!tile.imageSrc) {
+      return (
+        <div
+          className={clx("flex w-full h-full", tile.className)}
+          key={`tile-${idx}`}
+        >
+          {tile.headingLabel && (
+            <div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
+          )}
+          {tile.descriptionLabel && (
+            <div className={tile.descriptionClassName}>
+              {tile.descriptionLabel}
+            </div>
+          )}
+          {tile.buttonLabel && (
+            <button className={tile.buttonClassName}>{tile.buttonLabel}</button>
+          )}
+        </div>
+      )
+    }
 
     const content = (
       <div className={clx("relative w-full h-full")}>
-        {imageEl}
+        <img
+          src={tile.imageSrc}
+          alt={tile.label ?? `category-${idx}`}
+          className={clx(classes.image, tile.imageClassName)}
+        />
         {tile.label && <span className={classes.label}>{tile.label}</span>}
       </div>
     )
-- 
2.40.1