43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { AppCard } from "@/components/ui/app-card";
|
|
import { SectionHeading } from "./section-heading";
|
|
import type { ProcessSectionCopy } from "./types";
|
|
|
|
type ProcessSectionProps = {
|
|
copy: ProcessSectionCopy;
|
|
};
|
|
|
|
export function ProcessSection({ copy }: ProcessSectionProps) {
|
|
return (
|
|
<section className="space-y-8">
|
|
<SectionHeading
|
|
eyebrow={copy.eyebrow}
|
|
title={copy.title}
|
|
description={copy.description}
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
|
|
{copy.steps.map((step, index) => (
|
|
<AppCard
|
|
key={step.title}
|
|
layer="single"
|
|
interactive
|
|
className="group border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:shadow-panel"
|
|
>
|
|
<div className="flex h-full flex-col gap-5 p-6">
|
|
<p className="text-sm font-semibold tracking-[0.18em] text-muted-foreground">
|
|
{String(index + 1).padStart(2, "0")}
|
|
</p>
|
|
<div className="space-y-3">
|
|
<h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-sm leading-7 text-muted-foreground">{step.description}</p>
|
|
</div>
|
|
</div>
|
|
</AppCard>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|