From 782174e33118599ac19af224cb1d8482e1480fa8 Mon Sep 17 00:00:00 2001
From: Mackie <iwan.mackie@gmail.com>
Date: Thu, 4 Jun 2026 17:45:45 +0800
Subject: [PATCH] spacing

---
 src/blocks/AboutProfile/Component.tsx |  9 ++++----
 src/blocks/BentoRow/Component.tsx     | 33 ++++++++++++++-------------
 src/blocks/KanbanColor/Component.tsx  | 20 +++++++++-------
 src/blocks/StatsStrip/Component.tsx   | 32 ++++++++++++++++----------
 src/blocks/ToolStack/Component.tsx    | 13 +++++++----
 5 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/src/blocks/AboutProfile/Component.tsx b/src/blocks/AboutProfile/Component.tsx
index e536863..efeda2e 100644
--- a/src/blocks/AboutProfile/Component.tsx
+++ b/src/blocks/AboutProfile/Component.tsx
@@ -45,9 +45,10 @@ export function AboutProfileBlock({
   const hasSecondary = secondaryButton?.label && secondaryButton?.url
 
   return (
-    <section className="w-full max-w-5xl mx-auto px-6 py-16">
+    // Standardized vertical padding and alignment
+    <section className="w-full max-w-5xl mx-auto py-20 md:py-28">
       {(heading || subheading) && (
-        <div className="text-center mb-12">
+        <div className="text-center mb-16">
           {heading && (
             <h2 className="text-3xl font-semibold tracking-tight text-foreground mb-3">
               {heading}
@@ -60,11 +61,11 @@ export function AboutProfileBlock({
       )}
 
       <div
-        className={`flex flex-col sm:flex-row gap-10 items-center ${isRight ? 'sm:flex-row-reverse' : ''}`}
+        className={`flex flex-col sm:flex-row gap-12 items-center ${isRight ? 'sm:flex-row-reverse' : ''}`}
       >
         {imageEl}
 
-        <div className="flex flex-col gap-5 flex-1">
+        <div className="flex flex-col gap-6 flex-1">
           {body && (
             <p className="text-sm text-foreground/60 leading-relaxed whitespace-pre-line">{body}</p>
           )}
diff --git a/src/blocks/BentoRow/Component.tsx b/src/blocks/BentoRow/Component.tsx
index 0161ed5..52d117a 100644
--- a/src/blocks/BentoRow/Component.tsx
+++ b/src/blocks/BentoRow/Component.tsx
@@ -18,17 +18,19 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
   const { aboutHeading, aboutText, aboutCta, skillsHeading, skills } = props
 
   return (
-    <section className="w-full max-w-5xl mx-auto px-6 py-16">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-        <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6 flex flex-col justify-between gap-6">
+    // Standardized vertical padding and container constraints
+    <section className="w-full max-w-5xl mx-auto py-20 md:py-28">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* About Section */}
+        <div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8 flex flex-col justify-between gap-8">
           <div>
             {aboutHeading && (
-              <p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">
+              <p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
                 {aboutHeading}
               </p>
             )}
             {aboutText && (
-              <p className="text-sm text-foreground/50 leading-relaxed whitespace-pre-line">
+              <p className="text-sm text-foreground/60 leading-relaxed whitespace-pre-line">
                 {aboutText}
               </p>
             )}
@@ -38,7 +40,7 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
               href={aboutCta.url}
               target={aboutCta.newTab ? '_blank' : '_self'}
               rel="noopener noreferrer"
-              className="self-start flex items-center gap-2 text-xs text-foreground/50 border border-foreground/10 rounded-lg px-4 py-2 hover:text-foreground/80 hover:bg-muted transition-colors"
+              className="self-start flex items-center gap-2 text-xs text-foreground/60 border border-foreground/10 rounded-lg px-5 py-2.5 hover:text-foreground/90 hover:bg-muted transition-colors"
             >
               <i className="ti ti-download" style={{ fontSize: 13 }} aria-hidden="true" />
               {aboutCta.label}
@@ -46,40 +48,39 @@ export function BentoRowBlock(props: BentoRowBlockProps) {
           )}
         </div>
 
-        <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6">
+        {/* Skills Section */}
+        <div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8">
           {skillsHeading && (
-            <p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">
+            <p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
               {skillsHeading}
             </p>
           )}
           {Array.isArray(skills) && skills.length > 0 && (
-            <div className="grid grid-cols-2 gap-2">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               {skills.map(function (skill, i) {
                 const tags = skill.tags
                   ? skill.tags
                       .split(',')
-                      .map(function (t) {
-                        return t.trim()
-                      })
+                      .map((t) => t.trim())
                       .filter(Boolean)
                   : []
                 return (
                   <div
                     key={i}
-                    className="bg-background/50 border border-foreground/8 rounded-lg p-3 flex flex-col gap-2"
+                    className="bg-background/50 border border-foreground/10 rounded-xl p-4 flex flex-col gap-3"
                   >
                     <i
                       className={'ti ' + skill.icon + ' text-foreground/30'}
                       style={{ fontSize: 16 }}
                       aria-hidden="true"
                     />
-                    <p className="text-xs font-medium text-foreground/70">{skill.title}</p>
-                    <div className="flex flex-wrap gap-1">
+                    <p className="text-xs font-medium text-foreground/80">{skill.title}</p>
+                    <div className="flex flex-wrap gap-1.5">
                       {tags.map(function (tag, j) {
                         return (
                           <span
                             key={j}
-                            className="text-xs text-foreground/30 border border-foreground/8 rounded-full px-2 py-0.5"
+                            className="text-[10px] text-foreground/40 border border-foreground/5 rounded-full px-2 py-0.5"
                           >
                             {tag}
                           </span>
diff --git a/src/blocks/KanbanColor/Component.tsx b/src/blocks/KanbanColor/Component.tsx
index a0675c7..1c07f7e 100644
--- a/src/blocks/KanbanColor/Component.tsx
+++ b/src/blocks/KanbanColor/Component.tsx
@@ -1,4 +1,3 @@
-// src/blocks/KanbanColor/Component.tsx
 import React from 'react'
 
 const colorMap: Record<string, { border: string; dot: string }> = {
@@ -19,27 +18,32 @@ export function KanbanColorBlock({ columns }: Props) {
   if (!Array.isArray(columns) || columns.length === 0) return null
 
   return (
-    <section className="w-full max-w-5xl mx-auto px-6 py-16">
+    // Standardized vertical padding to match other page sections
+    <section className="w-full max-w-5xl mx-auto py-20 md:py-28">
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {columns.map((col, i) => {
           const { border, dot } = colorMap[col.color ?? 'gray'] ?? colorMap.gray
           return (
             <div
               key={i}
-              className={`bg-muted/50 rounded-xl p-4 flex flex-col gap-3 border-t-[3px] ${border}`}
+              className={`bg-muted/50 rounded-2xl p-6 flex flex-col gap-4 border-t-[3px] ${border}`}
             >
-              <div className="flex items-center gap-2 mb-1">
+              <div className="flex items-center gap-2 mb-2">
                 <span className={`w-2 h-2 rounded-full shrink-0 ${dot}`} />
-                <span className="text-sm font-medium text-foreground/80">{col.title}</span>
+                <span className="text-xs font-bold tracking-[0.2em] uppercase text-foreground/60">
+                  {col.title}
+                </span>
               </div>
               {Array.isArray(col.cards) &&
                 col.cards.map((card, j) => (
                   <div
                     key={j}
-                    className="bg-background/70 border border-foreground/8 rounded-lg px-3 py-2.5 flex flex-col gap-0.5"
+                    className="bg-background/70 border border-foreground/5 rounded-xl px-4 py-3 flex flex-col gap-1"
                   >
-                    <p className="text-sm font-medium text-foreground/85">{card.title}</p>
-                    {card.subtitle && <p className="text-xs text-foreground/40">{card.subtitle}</p>}
+                    <p className="text-sm font-medium text-foreground/80">{card.title}</p>
+                    {card.subtitle && (
+                      <p className="text-[11px] text-foreground/40">{card.subtitle}</p>
+                    )}
                   </div>
                 ))}
             </div>
diff --git a/src/blocks/StatsStrip/Component.tsx b/src/blocks/StatsStrip/Component.tsx
index 3d6197e..8976f2f 100644
--- a/src/blocks/StatsStrip/Component.tsx
+++ b/src/blocks/StatsStrip/Component.tsx
@@ -13,18 +13,26 @@ export function StatsStripBlock({ stats }: StatsStripProps) {
   if (!Array.isArray(stats) || stats.length === 0) return null
 
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 border-b border-t border-foreground/8">
-      {stats.map((stat, i) => (
-        <div
-          key={i}
-          className={`px-6 py-5 ${i % 2 === 0 ? 'border-r border-foreground/8' : ''} ${
-            i < 2 ? 'border-b md:border-b-0 border-foreground/8' : ''
-          } ${i < stats.length - 1 ? 'md:border-r md:border-foreground/8' : ''}`}
-        >
-          <p className="text-2xl font-medium text-foreground">{stat.value}</p>
-          <p className="text-xs text-foreground/30 mt-1">{stat.label}</p>
-        </div>
-      ))}
+    // Applied consistent vertical spacing to match other page sections
+    <div className="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-8 
+              /* Border logic: Maintain right divider for grid structure */
+              ${i % 2 === 0 ? 'border-r border-foreground/10' : ''} 
+              ${i < 2 ? 'border-b md:border-b-0 border-foreground/10' : ''}
+              md:border-r md:border-foreground/10
+              ${i === stats.length - 1 ? 'md:border-r-0' : ''}
+            `}
+          >
+            <p className="text-3xl font-semibold text-foreground">{stat.value}</p>
+            <p className="text-xs uppercase tracking-wider text-foreground/40 mt-2">{stat.label}</p>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/src/blocks/ToolStack/Component.tsx b/src/blocks/ToolStack/Component.tsx
index 58a807d..f472356 100644
--- a/src/blocks/ToolStack/Component.tsx
+++ b/src/blocks/ToolStack/Component.tsx
@@ -9,16 +9,19 @@ export function ToolStackBlock({ heading, tools }: ToolStackBlockProps) {
   if (!Array.isArray(tools) || tools.length === 0) return null
 
   return (
-    <section className="w-full max-w-5xl mx-auto px-6 py-16">
-      <div className="bg-muted/50 border border-foreground/8 rounded-xl p-6">
+    // Standardized vertical spacing to match other page sections
+    <section className="w-full max-w-5xl mx-auto py-20 md:py-28">
+      <div className="bg-muted/50 border border-foreground/10 rounded-2xl p-8">
         {heading && (
-          <p className="text-xs tracking-widest uppercase text-foreground/30 mb-4">{heading}</p>
+          <p className="text-[10px] font-bold tracking-[0.2em] uppercase text-foreground/30 mb-6">
+            {heading}
+          </p>
         )}
-        <div className="flex flex-wrap gap-2">
+        <div className="flex flex-wrap gap-3">
           {tools.map((tool, i) => (
             <span
               key={i}
-              className="text-xs text-foreground/50 bg-background/50 border border-foreground/8 rounded-full px-3 py-1.5 hover:text-foreground/70 hover:border-foreground/15 transition-colors"
+              className="text-xs text-foreground/60 bg-background/50 border border-foreground/10 rounded-full px-4 py-2 hover:text-foreground/90 hover:border-foreground/20 transition-all"
             >
               {tool.name}
             </span>