Skip to content

refactor: adjust spacing and typography in HowItWorks component #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JosueBrenes merged 1 commit into from
Mar 20, 2026
Merged

refactor: adjust spacing and typography in HowItWorks component #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/features/how-it-works/HowItWorks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,15 +82,15 @@ 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"
aria-expanded={isExpanded}
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"
)}
Expand All @@ -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
Expand All @@ -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
>
Expand All @@ -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"
)}
>
Expand All @@ -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>

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -224,15 +224,15 @@ 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 />
<span className="text-[#616161]">Zero complexity.</span>
</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}`;
Expand Down
Loading