React 1/week3

app/about_us/Crew.jsx

@@ -0,0 +1,18 @@
+import OurCrew from "./OurCrew";
+import OurValues from "./OurValues";
+import styles from "./about.module.css";
+import OurPartners from "./OurPartners";
+import OurMission from "./OurMission";
+
+export const Crew = () => {
+  return (
+    <div>
+      <OurMission />
+      <OurValues />
+      <OurCrew />
+      <OurPartners />
+    </div>
+  );
+};
+
+export default Crew;

app/about_us/OurCrew.jsx

@@ -0,0 +1,42 @@
+"use client";
+
+import aboutData from "../../data/about_data.json";
+import Image from "next/image";
+import styles from "./about.module.css";
+
+const OurCrew = () => {
+  // TASK - React 1 week 1
+  // Create the "Our Crew section"
+  // Use the descriptions provided in /app/about_us/README.md
+  // Use the pictures from /public/crew
+  // Some inspiration ideas found in /data/inspiration_about_us
+  return (
+    <section className={styles.ourCrew}>
+      <div className={styles.ourCrewContainer}>
+        <h2>Our Crew</h2>
+        <p className={styles.crewDescription}>{aboutData.crewDescription}</p>
+        <div className={styles.teamGrid}>
+          {aboutData.crew.map((member) => (
+            <div key={member.name} className={styles.teamMember}>
+              <Image
+                src={member.image}
+                alt={member.name}
+                width={250}
+                height={300}
+                className={styles.crewImage}
+                priority
+              />
+              <h3>{member.name}</h3>
+              <p className={styles.teamMemberRole}>
+                <strong>{member.role}</strong>
+              </p>
+              <p className={styles.memberDescription}>{member.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OurCrew;

app/about_us/OurMission.jsx

@@ -0,0 +1,15 @@
+import aboutData from "../../data/about_data.json";
+import styles from "./about.module.css";
+
+export default function OurMission() {
+  return (
+    <section className={styles.mission}>
+      <div className={styles.missionContainer}>
+        <h2>{aboutData.mission.title}</h2>
+        <p className={styles.missionDescription}>
+          {aboutData.mission.description}
+        </p>
+      </div>
+    </section>
+  );
+}

app/about_us/OurPartners.jsx

@@ -0,0 +1,28 @@
+import styles from "./about.module.css";
+import aboutData from "../../data/about_data.json";
+import Image from "next/image";
+
+const OurPartners = () => {
+  return (
+    <section className={styles.partners}>
+      <div className={styles.partnersContainer}>
+        <h2>Our Partners</h2>
+        <p className={styles.partnerIntro}>{aboutData.partnerIntro}</p>
+        <div className={styles.partnersGrid}>
+          {aboutData.partners.map((partner) => (
+            <div key={partner.name} className={styles.partnerLogo}>
+              <Image
+                src={partner.logo}
+                alt={partner.name}
+                width={150}
+                height={80}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OurPartners;

app/about_us/OurValues.jsx

@@ -0,0 +1,29 @@
+import aboutData from "../../data/about_data.json";
+import styles from "./about.module.css";
+
+const OurValues = () => {
+  // TASK - React 1 week 1
+  // Create the "Our Values" section
+  // Use the descriptions provided in /app/about_us/README.md
+  // Some inspiration ideas found in /data/inspiration_about_us
+  return (
+    <section className={styles.values}>
+      <div className={styles.valuesContainer}>
+        <h2>Our Values</h2>
+        <div className={styles.valuesGrid}>
+          {aboutData.values.map((value, index) => (
+            <div key={index} className={styles.valueCard}>
+              <span className={styles.valueNumber}>
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <h3 className={styles.valueTitle}>{value.title}</h3>
+              <p className={styles.valueDescription}>{value.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default OurValues;