update

components/MaintenanceCleaningSection.tsx

@@ -0,0 +1,41 @@
+import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr";
+import styles from "./maintenanceCleaningSection.module.css";
+
+interface MaintenanceCleaningSectionProps {
+  heading: string;
+  lead: string;
+  requirements: string[];
+}
+
+export default function MaintenanceCleaningSection({
+  heading,
+  lead,
+  requirements,
+}: MaintenanceCleaningSectionProps) {
+  return (
+    <section
+      className={styles.maintenanceCleaning}
+      aria-labelledby="maintenance-cleaning-heading"
+    >
+      <div className={styles.inner}>
+        <div className={styles.intro}>
+          <h3 id="maintenance-cleaning-heading" className={styles.heading}>
+            {heading}
+          </h3>
+          <p className={`lead ${styles.lead}`}>{lead}</p>
+        </div>
+
+        <div className={styles.grid}>
+          {requirements.map((requirement) => (
+            <article key={requirement} className={styles.card}>
+              <span className={styles.iconWrap} aria-hidden="true">
+                <CheckCircleIcon size={24} weight="duotone" />
+              </span>
+              <p className={styles.cardText}>{requirement}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}