box

src/blocks/Skills/Component.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { cn } from '@/utilities/ui'
 
 type SkillCategory = {
   title: string
@@ -36,18 +35,11 @@ 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">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {categories.map((cat, i) => {
+          {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(
+              className="p-6 flex flex-col gap-3 rounded-xl bg-muted/50 border-0 shadow-none"
-                  '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`}
@@ -60,15 +52,14 @@ export function SkillsBlock({ heading, keySkills, categories }: SkillsBlockProps
                   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"
+                      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>