From 97422f8bd720e493d9d2db6e614b46b3bc292d5e Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Fri, 5 Jun 2026 16:40:40 +0800
Subject: [PATCH] wrapper

---
 src/blocks/StatsStrip/Component.tsx | 36 +++++++++++------------------
 1 file changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/blocks/StatsStrip/Component.tsx b/src/blocks/StatsStrip/Component.tsx
index 78acc09..c39d6a6 100644
--- a/src/blocks/StatsStrip/Component.tsx
+++ b/src/blocks/StatsStrip/Component.tsx
@@ -2,30 +2,20 @@ export function StatsStripBlock({ stats }: StatsStripProps) {
   if (!Array.isArray(stats) || stats.length === 0) return null
 
   return (
-    // Wrap in a container to match the max-width of your other blocks
     <section className="w-full max-w-5xl mx-auto px-6 py-20 md:py-28">
-      <div className="grid grid-cols-2 md:grid-cols-4 border-t border-b border-foreground/10">
-        {stats.map((stat, i) => (
-          <div
-            key={i}
-            className={`
-              px-6 py-10 flex flex-col items-center text-center
-              /* Desktop: Vertical borders between items, but not on the last one */
-              ${i < stats.length - 1 ? 'md:border-r md:border-foreground/10' : ''}
-              /* Mobile: Checkerboard border logic */
-              ${i % 2 === 0 ? 'border-r border-foreground/10' : ''} 
-              ${i < 2 ? 'border-b border-foreground/10' : ''}
-              md:border-b-0
-            `}
-          >
-            <p className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
-              {stat.value}
-            </p>
-            <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-foreground/40 mt-3">
-              {stat.label}
-            </p>
-          </div>
-        ))}
+      <div className="bg-muted/50 border border-foreground/8 rounded-xl overflow-hidden">
+        <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-y md:divide-y-0 divide-foreground/10">
+          {stats.map((stat, i) => (
+            <div key={i} className="px-6 py-10 flex flex-col items-center text-center">
+              <p className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
+                {stat.value}
+              </p>
+              <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-foreground/40 mt-3">
+                {stat.label}
+              </p>
+            </div>
+          ))}
+        </div>
       </div>
     </section>
   )