From 8718eddcd300b29f1190f39a17190f5b7d19b77d Mon Sep 17 00:00:00 2001
From: Josue Brenes <josuebrenes3005@gmail.com>
Date: Fri, 20 Mar 2026 10:56:43 -0600
Subject: [PATCH] refactor: adjust spacing and typography in HowItWorks
 component

Modified the HowItWorks component to enhance visual consistency by adjusting spacing and font sizes across various elements. These changes improve the overall layout and readability of the component.
---
 src/features/how-it-works/HowItWorks.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/features/how-it-works/HowItWorks.tsx b/src/features/how-it-works/HowItWorks.tsx
index 765c60b..58c1e91 100644
--- a/src/features/how-it-works/HowItWorks.tsx
+++ b/src/features/how-it-works/HowItWorks.tsx
@@ -82,7 +82,7 @@ function StepRow({
       role="presentation"
     >
       {/* Grid: number | icon | title + content area | chevron */}
-      <div className="grid grid-cols-[auto_auto_1fr_auto] items-start gap-4">
+      <div className="grid grid-cols-[auto_auto_1fr_auto] items-start gap-3">
         <button
           id={triggerId}
           type="button"
@@ -90,7 +90,7 @@ function StepRow({
           aria-controls={contentId}
           onClick={onToggle}
           className={cn(
-            "col-span-4 grid grid-cols-subgrid items-center gap-4 py-5 text-left outline-none transition-colors",
+            "col-span-4 grid grid-cols-subgrid items-center gap-3 py-4 text-left outline-none transition-colors",
             "focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
             "hover:opacity-90"
           )}
@@ -99,7 +99,7 @@ function StepRow({
           <span
             className={cn(
               "tabular-nums font-semibold transition-colors duration-300",
-              "text-5xl sm:text-6xl md:text-7xl lg:text-8xl",
+              "text-4xl sm:text-5xl md:text-6xl lg:text-7xl",
               isExpanded ? "text-white" : "text-white/20"
             )}
             aria-hidden
@@ -112,8 +112,8 @@ function StepRow({
             className={cn(
               "flex shrink-0 items-center justify-center rounded-full transition-all duration-300",
               isExpanded
-                ? "bg-white p-3 text-black ring-1 ring-white/20"
-                : "bg-transparent p-2 text-white/40"
+                ? "bg-white p-2.5 text-black ring-1 ring-white/20"
+                : "bg-transparent p-1.5 text-white/40"
             )}
             aria-hidden
           >
@@ -123,7 +123,7 @@ function StepRow({
           {/* Title */}
           <span
             className={cn(
-              "text-lg font-semibold sm:text-xl md:text-2xl transition-colors duration-300",
+              "text-base font-semibold sm:text-lg md:text-xl transition-colors duration-300",
               isExpanded ? "text-white" : "text-white/50"
             )}
           >
@@ -138,7 +138,7 @@ function StepRow({
             )}
             aria-hidden
           >
-            <ChevronDown className="h-5 w-5 sm:h-6 sm:w-6" />
+            <ChevronDown className="h-4 w-4 sm:h-5 sm:w-5" />
           </span>
         </button>
 
@@ -178,13 +178,13 @@ function StepRow({
                         transition: { duration: OPEN_DURATION * 0.75, ease },
                       },
                     }}
-                    className="pb-6 pr-0"
+                    className="pb-5 pr-0"
                   >
                     <div className="max-w-2xl">
-                      <p className="text-sm text-[#616161] sm:text-base leading-relaxed">
+                      <p className="text-xs text-[#616161] sm:text-sm leading-relaxed">
                         {step.description}
                       </p>
-                      <ul className="mt-4 space-y-4 text-sm text-white/70 sm:text-base">
+                      <ul className="mt-3 space-y-3 text-xs text-white/70 sm:text-sm">
                         {step.bullets.map((b, k) => (
                           <li key={k} className="flex items-start gap-2">
                             <span
@@ -224,7 +224,7 @@ export default function HowItWorks() {
       {/* Headline */}
       <h2
         id="how-it-works-heading"
-        className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl"
+        className="mt-2 text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl"
       >
         Three steps.
         <br />
@@ -232,7 +232,7 @@ export default function HowItWorks() {
       </h2>
 
       {/* Accordion steps */}
-      <div className="mt-10 sm:mt-12">
+      <div className="mt-8 sm:mt-10">
         {stepsData.map((step, index) => {
           const triggerId = `${baseId}-trigger-${step.id}`;
           const contentId = `${baseId}-content-${step.id}`;