update

components/ConceptSection.tsx

@@ -0,0 +1,75 @@
+import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr";
+import styles from "./conceptSection.module.css";
+
+interface ConceptPillar {
+  number: string;
+  title: string;
+  points: string[];
+}
+
+interface ConceptResults {
+  heading: string;
+  intro: string;
+  points: string[];
+}
+
+interface ConceptSectionProps {
+  heading: string;
+  lead: string;
+  pillars: ConceptPillar[];
+  results: ConceptResults;
+}
+
+export default function ConceptSection({
+  heading,
+  lead,
+  pillars,
+  results,
+}: ConceptSectionProps) {
+  return (
+    <section className={styles.concept} aria-labelledby="concept-heading">
+      <div className={styles.inner}>
+        <div className={styles.intro}>
+          <h2 id="concept-heading" className={styles.heading}>
+            {heading}
+          </h2>
+          <p className={styles.lead}>{lead}</p>
+        </div>
+
+        <div className={styles.bento}>
+          {pillars.map((pillar) => (
+            <article key={pillar.number} className={styles.pillarCard}>
+              <span className={styles.number}>{pillar.number}</span>
+              <h3 className={styles.pillarTitle}>{pillar.title}</h3>
+              <ul className={styles.pointList}>
+                {pillar.points.map((point) => (
+                  <li key={point} className={styles.point}>
+                    <span className={styles.pointIcon} aria-hidden="true">
+                      <CheckCircleIcon size={16} weight="duotone" />
+                    </span>
+                    {point}
+                  </li>
+                ))}
+              </ul>
+            </article>
+          ))}
+
+          <article className={styles.resultsCard}>
+            <h3 className={styles.resultsHeading}>{results.heading}</h3>
+            <p className={styles.resultsIntro}>{results.intro}</p>
+            <ul className={styles.pointList}>
+              {results.points.map((point) => (
+                <li key={point} className={styles.point}>
+                  <span className={styles.pointIcon} aria-hidden="true">
+                    <CheckCircleIcon size={16} weight="duotone" />
+                  </span>
+                  {point}
+                </li>
+              ))}
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+  );
+}