Update

components/AboutUsSection.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import Image from "next/image";
+import styles from "./AboutUsSection.module.css";
+import { aboutUsData } from "./AboutUsData";
+
+export default function AboutUsSection() {
+  const { title, paragraphs, members } = aboutUsData;
+
+  return (
+    <section className={styles.section} aria-labelledby="about-us-heading">
+      <div className={styles.inner}>
+        <h2 id="about-us-heading" className={styles.heading}>
+          {title}
+        </h2>
+
+        <div className={styles.team}>
+          {members.map((member) => (
+            <article key={member.name} className={styles.card}>
+              <div className={styles.imageWrap}>
+                <Image
+                  src={member.imageSrc}
+                  alt={member.imageAlt}
+                  fill
+                  className={styles.image}
+                  sizes="(max-width: 767px) 42vw, 180px"
+                />
+              </div>
+
+              <p className={styles.name}>{member.name}</p>
+            </article>
+          ))}
+        </div>
+
+        <div className={styles.textBlock}>
+          {paragraphs.map((paragraph, index) => (
+            <p key={index} className={styles.text}>
+              {paragraph}
+            </p>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}