React1 week3/ali sharifi

app/about_us/OurCrew.js

@@ -0,0 +1,67 @@
+import styles from "./page.module.css";
+
+const crewMembers = [
+  {
+    name: "Captain Sarah Vega",
+    description: "A former NASA astronaut with 15+ years of experience.",
+  },
+  {
+    name: "Dr. Leo Redding",
+    description: "Chief astrophysicist and researcher.",
+  },
+  {
+    name: "Chief Engineer Hana Lee",
+    description: "Aerospace engineer ensuring safety and innovation.",
+  },
+  {
+    name: "Mission Specialist Alex Santos",
+    description: "Science & tourism expert for smooth journeys.",
+  },
+  {
+    name: "Crew Member Maya Patel",
+    description: "Tech + customer service.",
+  },
+];
+
+const OurCrew = () => {
+  return (
+    <section className={styles.ourCrewSection}>
+      <p className={styles.introText}>
+        Our crew is the heart and soul of Galactica...
+      </p>
+
+      <div className={styles.crewList}>
+        {crewMembers.map((member, index) => (
+          <div key={index} className={styles.crewMember}>
+            <strong>{member.name}:</strong> <span>{member.description}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.crewImagesRow}>
+        <img
+          className={styles.ourCrewImage}
+          src="/crew/image-anousheh-ansari.webp"
+          alt="Anousheh Ansari"
+        />
+        <img
+          className={styles.ourCrewImage}
+          src="/crew/image-douglas-hurley.webp"
+          alt="Douglas Hurley"
+        />
+        <img
+          className={styles.ourCrewImage}
+          src="/crew/image-mark-shuttleworth.webp"
+          alt="Mark Shuttleworth"
+        />
+        <img
+          className={styles.ourCrewImage}
+          src="/crew/image-victor-glover.webp"
+          alt="Victor Glover"
+        />
+      </div>
+    </section>
+  );
+};
+
+export default OurCrew;

app/about_us/OurPartners.js

@@ -0,0 +1,57 @@
+import styles from "./page.module.css";
+
+const OurPartners = () => {
+  return (
+    <>
+      <p>
+        We’re proud to work side by side with some of the most trusted names in
+        space and technology partnerships that help us turn bold ideas into
+        unforgettable journeys.
+      </p>
+      <div className={styles.partnersRow}>
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/alphabet-logo.png"
+          alt="Alphabet logo"
+        />
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/amazon_logo.png"
+          alt="Amazon logo"
+        />
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/CBC_Logo_White.png"
+          alt="CBC logo"
+        />
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/Microsoft-logo-white.png"
+          alt="Microsoft logo"
+        />
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/nyu-logo.png"
+          alt="NYU logo"
+        />
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/QueensLogo_white.png"
+          alt="Queens logo"
+        />
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/samsung-logo.png"
+          alt="Samsung logo"
+        />
+        <img
+          className={styles.partnerLogo}
+          src="/business_partners/sodexo-logo.png"
+          alt="Sodexo logo"
+        />
+      </div>
+    </>
+  );
+};
+
+export default OurPartners;

app/about_us/OurValues.js

@@ -0,0 +1,45 @@
+import styles from "./page.module.css";
+
+const values = [
+  {
+    number: "01",
+    title: "Love your craft.",
+    text: "We’re here because we love what we do. It’s our passion, hobby, career, and vocation. We’re looking for others who feel the same way.",
+  },
+  {
+    number: "02",
+    title: "Be bold. Be humble.",
+    text: "There is no top-down. We lead from the bottom and the edges. Everyone drives. We celebrate ideas over egos, where the best idea wins, regardless of who or where it comes from.",
+  },
+  {
+    number: "03",
+    title: "Be better. Always push forward.",
+    text: "We’re on a tireless pursuit to become better and expect those around us to do the same.",
+  },
+  {
+    number: "04",
+    title: "Be a Professional",
+    text: "There’s important work to be done. Speak up. Be present. Provide value, with honesty and candour.",
+  },
+];
+
+const OurValues = () => {
+  return (
+    <section className={styles.ourValuesSection}>
+      <h2 className={styles.sectionLabel}>OUR VALUES</h2>
+      <h1 className={styles.sectionTitle}>Rules to Live By</h1>
+
+      <div className={styles.grid}>
+        {values.map((value) => (
+          <div className={styles.card} key={value.number}>
+            <div className={styles.cardNumber}>{value.number}</div>
+            <div className={styles.cardTitle}>{value.title}</div>
+            <div className={styles.cardText}>{value.text}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default OurValues;

app/about_us/page.js

@@ -1,62 +1,31 @@
-import styles from './page.module.css';
-
-// TASK - React 1 week 1
-// After you are finished with creating the page, move the OurValues, OurCrew, OurPartners components into their own files
-// OurValues.js, OurCrew.js, OurPartners.js should live in this folder
-// import and use the components from the newly created files
-
-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 (
-    <p> ADD OUR VALUES HERE </p>
-  );
-};
-
-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 (
-    <p> ADD OUR CREW HERE </p>
-  );
-}
-
-const OurPartners = () => {
-  // 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 (
-    <p> ADD OUR Partners HERE </p>
-  );
-}
-
+import styles from "./page.module.css";
+import OurValues from "./OurValues";
+import OurCrew from "./OurCrew";
+import OurPartners from "./OurPartners";
 
 export const Crew = () => {
   return (
     <div className="fullBGpicture">
       <main className="mainContent">
         <h1>About us</h1>
+
         <section className="card">
           <h2>Our Values</h2>
-          <OurValues/>
+          <OurValues />
         </section>
+
         <section className="card">
-          <h2>The crew</h2>
-          <OurCrew/>
+          <h2>The Crew</h2>
+          <OurCrew />
         </section>
 
-         {/* TASK - React 1 week 1 */}
-         {/* Add in the "OurPartners" component here */}
+        <section className="card">
+          <h2>Our Partners</h2>
+          <OurPartners />
+        </section>
       </main>
     </div>
   );
-}
+};
 
 export default Crew;

app/about_us/page.module.css

@@ -1,5 +1,44 @@
 .app {
+  font-family: system-ui, sans-serif;
   background-color: black;
   width: 100vw;
   height: 100vh;
 }
+.ourValuesImage {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin: 1rem auto;
+  border-radius: 12px;
+  object-fit: contain;
+}
+
+.crewImagesRow {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.ourCrewImage {
+  width: 23%;
+  height: auto;
+  border-radius: 10px;
+  object-fit: cover;
+}
+
+.partnersRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 1.5rem;
+}
+
+.partnerLogo {
+  width: 120px;
+  height: auto;
+  object-fit: contain;
+  filter: brightness(0) invert(1);
+}