update

components/ProcessSection.tsx

@@ -0,0 +1,42 @@
+import styles from "./processSection.module.css";
+
+interface ProcessStep {
+  number: string;
+  title: string;
+}
+
+interface ProcessSectionProps {
+  heading: string;
+  lead: string;
+  steps: ProcessStep[];
+}
+
+export default function ProcessSection({
+  heading,
+  lead,
+  steps,
+}: ProcessSectionProps) {
+  return (
+    <section className={styles.process} aria-labelledby="process-heading">
+      <div className={styles.inner}>
+        <div className={styles.intro}>
+          <h2 id="process-heading" className={styles.heading}>
+            {heading}
+          </h2>
+          <p className={`lead ${styles.lead}`}>{lead}</p>
+        </div>
+
+        <div className={styles.steps}>
+          {steps.map((step) => (
+            <div key={step.number} className={styles.step}>
+              <span className={styles.stepNumber} aria-hidden="true">
+                {step.number}
+              </span>
+              <span className={styles.stepTitle}>{step.title}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}