React1/week2/yuusuf

app/about_us/OurCrew.js

@@ -0,0 +1,46 @@
+import styles from "./page.module.css"
+
+const OurCrew = () => {
+    return (
+      <div className={styles.container}>
+        <p>Our Team</p>
+        <h1>Who we are</h1>
+        <p>
+        Our crew is the heart and soul of Galactica. We are a diverse team of seasoned space explorers, engineers, and visionaries who are united by a common goal: to make space travel accessible and exciting for all.
+        </p>
+
+        <div className={styles.crewContainer}>
+          <div className={styles.crewBox}>
+            <img src={"/crew/image-anousheh-ansari.png"}></img>
+            <h5>Anousheh Ansari</h5>
+            <h6>Founder + CEO</h6>
+          </div>
+
+          <div className={styles.crewBox}>
+            <img src={"/crew/image-mark-shuttleworth.png"}></img>
+            <h5>Mark Shuttleworth</h5>
+            <h6>Founder + CEO</h6>
+          </div>
+
+          <div className={styles.crewBox}>
+            <img src={"/crew/image-douglas-hurley.png"}></img>
+            <h5>Douglas Hurley</h5>
+            <h6>Founder + CEO</h6>
+          </div>
+
+          <div className={styles.crewBox}>
+            <img src={"/crew/image-victor-glover.png"}></img>
+            <h5>Victor Glover</h5>
+            <h6>Founder + CEO</h6>
+          </div>
+
+        </div>
+      </div>
+
+
+
+    );
+  }
+
+
+  export default OurCrew;

app/about_us/OurPartners.js

@@ -0,0 +1,39 @@
+import styles from "./page.module.css"
+const OurPartners = () => {
+    return (
+      <div className={styles.pContainer}>
+        <p>Our Partners</p>
+        <h1>We Collaborate with progressive, ambitious brands we believe in.</h1>
+        <div className={styles.partnersContainer}>
+
+        <div className={styles.partnersBox}>
+            <img src={"/business_partners/amazon_logo.png"}></img>
+          </div>
+
+          <div className={styles.partnersBox}>
+            <img src={"/business_partners/alphabet-logo.png"}></img>
+          </div>
+
+          <div className={styles.partnersBox}>
+            <img src={"/business_partners/nyu-logo.png"}></img>
+          </div>
+
+          <div className={styles.partnersBox}>
+            <img src={"/business_partners/CBC_Logo_white.png"}></img>
+          </div>
+
+          <div className={styles.partnersBox}>
+            <img src={"/business_partners/QueensLogo_white.png"}></img>
+          </div>
+
+          <div className={styles.partnersBox}>
+            <img src={"/business_partners/samsung-logo.png"}></img>
+          </div>
+
+        </div>
+
+      </div>
+    );
+  }
+
+  export default OurPartners;

app/about_us/OurValues.js

@@ -0,0 +1,37 @@
+import styles from "./page.module.css"
+
+const OurValues = () => {
+
+    return (
+      <div className={styles.Container}>
+        <p>Our Values</p>
+        <h1>Rules to live by</h1>
+
+      <div class={styles.valuesContainer}>
+        <div className={styles.valueBox}>
+            <h2>01</h2>
+            <h3>Love your craft</h3>
+            <p>Exploration: We are driven by a deep-seated desire to explore the unknown. We believe that the pursuit of discovery is at the heart of human nature, and we are committed to pushing the boundaries of what is possible.</p>
+        </div>
+        <div className={styles.valueBox}>
+            <h2>02</h2>
+            <h3>Be bold. Be humble.</h3>
+            <p>Innovation: At Galactica, we prioritize cutting-edge technology and innovation. We are constantly evolving our spacecraft, safety protocols, and services to ensure that our travelers experience the most advanced and secure space journeys available.</p>
+        </div>
+        <div className={styles.valueBox}>
+            <h2>03</h2>
+            <h3>Be better. Always push forward.</h3>
+            <p>Sustainability: We are committed to making space exploration sustainable for future generations. Our space missions are designed to minimize environmental impact, both on Earth and in space, and to foster a spirit of responsibility towards our universe.</p>
+        </div>
+        <div className={styles.valueBox}>
+            <h2>04</h2>
+            <h3>Be a Professional</h3>
+            <p>Community: We believe in the power of collective exploration. Our journeys are not just about reaching new destinations; they are about building a community of space enthusiasts who share a passion for the stars.</p>
+        </div>
+      </div>
+      </div>
+
+    );
+  };
+
+  export default OurValues;

app/about_us/page.js

@@ -1,41 +1,6 @@
-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 OurValues from './OurValues';
+import OurCrew from "./OurCrew"
+import OurPartners from './OurPartners';
 
 
 export const Crew = () => {
@@ -44,16 +9,14 @@ export const Crew = () => {
       <main className="mainContent">
         <h1>About us</h1>
         <section className="card">
-          <h2>Our Values</h2>
           <OurValues/>
         </section>
         <section className="card">
-          <h2>The crew</h2>
-          <OurCrew/>
+          <OurCrew></OurCrew>
+        </section>
+        <section className="card">
+          <OurPartners></OurPartners>
         </section>
-
-         {/* TASK - React 1 week 1 */}
-         {/* Add in the "OurPartners" component here */}
       </main>
     </div>
   );

app/about_us/page.module.css

@@ -3,3 +3,81 @@
   width: 100vw;
   height: 100vh;
 }
+
+/*Our Values*/
+.valuesContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;  
+  gap: 30px; 
+  max-width: 1000px;
+  margin: auto;
+}
+
+.valueBox {
+  flex: 1 1 calc(50% - 20px); 
+  background: black; 
+  padding: 20px;
+  border-radius: 10px;
+  min-width: 200px;
+}
+
+.valueBox h2 {
+  font-size: 30px;
+  margin-bottom: 10px;
+}
+
+.valueBox h3 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.valueBox p {
+  font-size: 16px;
+}
+
+
+/*Our Crew*/
+
+.crewContainer{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 100px;
+
+}
+
+
+.crewBox img{
+  height: 300px;
+  width: 200px;
+
+}
+
+
+/*Our Partners*/
+
+.pContainer{
+  background-color: black;
+}
+
+.partnersContainer{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 20px; 
+  padding: 20px;
+}
+
+.partnersBox {
+  flex: 1 1 calc(33.33% - 20px); 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.partnersBox img {
+  max-width: 160px; 
+  height: auto;
+}