test

src/blocks/StatsStrip/Component.tsx

@@ -1,35 +1,28 @@
-import React from 'react'
-
-type Stat = {
-  value: string
-  label: string
-}
-
-type StatsStripProps = {
-  stats?: Stat[]
-}
-
 export function StatsStripBlock({ stats }: StatsStripProps) {
   if (!Array.isArray(stats) || stats.length === 0) return null
 
   return (
-    // 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 */
+              px-6 py-10 flex flex-col items-center text-center
+              /* Desktop: Only show right border if it is NOT the last item */
+              ${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 md:border-b-0 border-foreground/10' : ''}
-              md:border-r md:border-foreground/10
-              ${i === stats.length - 1 ? 'md:border-r-0' : ''}
+              ${i < 2 ? 'border-b border-foreground/10' : ''}
+              md:border-b-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>
+            <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>