From a04b3fd456bd7d636daf81922bb05bdfc3d5e617 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Wed, 3 Jun 2026 10:26:41 +0800
Subject: [PATCH] box

---
 src/blocks/Skills/Component.tsx | 57 ++++++++++++++-------------------
 1 file changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/blocks/Skills/Component.tsx b/src/blocks/Skills/Component.tsx
index 4efa23f..cf7be32 100644
--- a/src/blocks/Skills/Component.tsx
+++ b/src/blocks/Skills/Component.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { cn } from '@/utilities/ui'
 
 type SkillCategory = {
   title: string
@@ -36,39 +35,31 @@ export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps
       )}
 
       {Array.isArray(categories) && categories.length > 0 && (
-        <div className="border border-foreground/8 rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-          {categories.map((cat, i) => {
-            const isLastRow = i >= categories.length - (categories.length % 3 || 3)
-            const isLastCol = (i + 1) % 3 === 0
-            return (
-              <div
-                key={i}
-                className={cn(
-                  'p-6 flex flex-col gap-3',
-                  !isLastCol && 'border-r border-foreground/8',
-                  !isLastRow && 'border-b border-foreground/8',
-                )}
-              >
-                <i
-                  className={`ti ${cat.icon} text-foreground/40`}
-                  style={{ fontSize: 20 }}
-                  aria-hidden="true"
-                />
-                <p className="text-sm font-medium text-foreground/85">{cat.title}</p>
-                <div className="flex flex-wrap gap-1.5">
-                  {Array.isArray(cat.tags) &&
-                    cat.tags.map(({ tag }, j) => (
-                      <span
-                        key={j}
-                        className="text-xs text-foreground/35 border border-foreground/10 rounded-full px-2.5 py-0.5"
-                      >
-                        {tag}
-                      </span>
-                    ))}
-                </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {categories.map((cat, i) => (
+            <div
+              key={i}
+              className="p-6 flex flex-col gap-3 rounded-xl bg-muted/50 border-0 shadow-none"
+            >
+              <i
+                className={`ti ${cat.icon} text-foreground/40`}
+                style={{ fontSize: 20 }}
+                aria-hidden="true"
+              />
+              <p className="text-sm font-medium text-foreground/85">{cat.title}</p>
+              <div className="flex flex-wrap gap-1.5">
+                {Array.isArray(cat.tags) &&
+                  cat.tags.map(({ tag }, j) => (
+                    <span
+                      key={j}
+                      className="text-xs text-foreground/50 bg-background/50 border border-foreground/10 rounded-full px-2.5 py-0.5"
+                    >
+                      {tag}
+                    </span>
+                  ))}
               </div>
-            )
-          })}
+            </div>
+          ))}
         </div>
       )}
     </section>