React 1/week3/stefany

README.md

@@ -1,5 +1,5 @@
 # Galactica Space Travel App
-
+ 
 ## Introduction
 Galactica is a space travel application built with Next.js and React. This project aims to teach students the fundamentals of React and Next.js by creating a dynamic and interactive space exploration app.
 
@@ -38,4 +38,4 @@ You should be fixing ALL THE INSTANSCES of the current week.
 
 ### How to find the tags?
 
-Use the global search function in your IDE. (`cmnd + shift + F` OR `Control + shift + F`)
+Use the global search function in your IDE. (`cmnd + shift + F` OR `Control + shift + F`)

app/about_us/OurCrew.js

@@ -0,0 +1,63 @@
+import styles from './page.module.css';
+
+const crewMembers = () => [
+    <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>,
+
+    {
+        id: 1,
+        name: 'Sarah Vega',
+        role: 'Captain',
+        imgUrl: '../crew/image-anousheh-ansari.png',
+        description: 'A former NASA astronaut with over 15 years of experience, Captain Vega leads our missions with unparalleled expertise and a passion for space exploration. She is dedicated to ensuring the safety and success of every journey, while inspiring our crew and passengers to reach for the stars.',
+    },
+    {
+        id: 2,
+        name: "Dr. Leo Redding",
+        role: "Chief Astrophysicist",
+        imgUrl: "../crew/image-douglas-hurley.png",
+        description:"Dr. Redding, is a renowned scientist who has contributed to major space discoveries. He ensures that every journey is as educational as it is exhilarating.",
+      },
+      {
+        id: 3,
+        name: "Chief Engineer Hana Lee",
+        role: "Chief Engineer",
+        imgUrl: "../crew/image-anousheh-ansari.png",
+        description:"With her extensive background in aerospace engineering, Hana Lee is responsible for the state-of-the-art technology that powers our spacecraft. Her innovation ensures that our travelers are always in safe hands.",
+      },
+      { 
+        id: 4,
+        name: "Mission Specialist Alex Santos",
+        role: "Mission Specialist",
+        imgUrl: "../crew/image-victor-glover.png",
+        description:"Alex’s job is to ensure that every aspect of the journey runs smoothly. With a background in both science and adventure tourism, Alex is the perfect guide for our space travelers.",
+      },
+      {
+        id: 5,
+        name: "Crew Member Maya Patel",
+        role:"Customer Service Specialist", 
+        imgUrl: "../crew/image-mark-shuttleworth.png",
+        description:
+          "Maya brings a unique blend of technical skills and customer service experience to the team. She’s always ready to assist with any needs and to make sure every traveler has an unforgettable experience.",
+      },
+
+    ];
+const OurCrew = () => {
+    return (
+        <div className={styles.crewContainer}>
+        <div className={styles.crewDescription}>
+            <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>
+            <div className={styles.crewMembers}>
+            {crewMembers().map((member) => (
+                <div key={member.id} className={styles.memberCard}>
+                    <img src={member.imgUrl} alt={member.name} />
+                    <h3>{member.name}</h3>
+                    <p>{member.role}</p>
+                    <p>{member.description}</p>
+                </div>
+            ))}
+        </div>
+        </div>
+    );
+}
+export default OurCrew;

app/about_us/OurPartners.js

@@ -0,0 +1,62 @@
+import styles from './page.module.css';
+
+const partners = [
+    {
+        id: 1,
+        name: 'Alphabet',
+        imgUrl:'../business_partners/alphabet-logo.png',
+
+    },
+    {   id: 2,
+        name: 'Amazon',
+        imgUrl: '../business_partners/amazon_logo.png',
+    },
+    {
+        id: 3,
+        name: 'CBC',
+        imgUrl: '../business_partners/CBC_Logo_White.png',
+    },
+    {   id: 4,
+        name: 'Microsoft',
+        imgUrl: '../business_partners/Microsoft-Logo-white.png',
+    },
+    {
+        id: 5,
+        name: 'Nyu',
+        imgUrl: '../business_partners/nyu-logo.png',
+    },
+    {
+        id: 6,
+        name: 'QueensLogo',
+        imgUrl: '../business_partners/QueensLogo_white.png',
+    },
+    {
+        id: 7,
+        name: 'Samsung',
+        imgUrl: '../business_partners/samsung-logo.png',
+    },
+    {
+        id: 8,
+        name: 'Sodexo',
+        imgUrl: '../business_partners/sodexo-logo.png',
+    },
+];
+const OurPartners = () => {
+    return (
+        <div className={styles.ourPartnersContainer}>
+        <div className={styles.ourPartnerDescription}>
+            <p> We are proud to partner with leading organizations in the tech industry. Our partners share our commitment to innovation, excellence, and making a positive impact in the world.</p>
+            </div>
+            <div className={styles.partnersLogos}>
+                {partners.map((partner) => (
+                    <div key={partner.id} className={styles.partnerCard}>
+                        <img src={partner.imgUrl} alt={partner.name} />
+
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default OurPartners;

app/about_us/OurValues.js

@@ -0,0 +1,60 @@
+import styles from './page.module.css';
+
+const values = [
+    {
+        id: 1,
+        title: '1) Exploration',
+        description: '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.',
+
+    },
+    {
+        id: 2,
+        title: '2) Innovation',
+        description: '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.'
+    },
+    {
+        id: 3,
+        title: '3) Sustainability',
+        description: '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.',
+
+    },
+    {
+        id: 4,
+        title: '4) Community',
+        description: 'We believe in the power of community. Our crew and travelers form a unique bond that transcends borders and backgrounds. We are dedicated to creating a welcoming and inclusive environment for everyone who shares our passion for space.'
+    },
+    {
+        id: 5,
+        title: '5) Safety',
+        description: '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.'
+
+    },
+];
+const OurValues = () => {
+    return (
+        <section className={styles.ourValuesMission}>
+            <h1>Our mission & Values</h1>
+            <p>At Galactica, we are driven by our core values that guide our mission and shape our culture. These values reflect our commitment to exploration, innovation, sustainability, community, and safety.</p>
+
+            <div className={styles.ourValuesContainer}>
+                <div className={styles.ourValuesDescription}>
+
+                    <div className={styles.valuesList}>
+                        {values.map((value) => (
+                            <div key={value.id} className={styles.valueCard}>
+                                <h3>{value.title}</h3>
+                                <p>{value.description}</p>
+
+
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+            </div>
+        </section>
+
+    );
+};
+
+export default OurValues;

app/about_us/page.js

@@ -1,42 +1,7 @@
 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 OurCrew from './OurCrew';
+import OurPartners from './OurPartners'
+import OurValues from './OurValues';
 
 export const Crew = () => {
   return (
@@ -51,9 +16,10 @@ export const Crew = () => {
           <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>
   );

app/about_us/page.module.css

@@ -3,3 +3,122 @@
   width: 100vw;
   height: 100vh;
 }
+.ourValuesContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.ourValuesMission{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #1e1e1e;
+  font-family: 'Poppins', sans-serif;
+   gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 10px;
+  font-size: 20px;
+}
+
+.valuesList{
+  background-color: #1e1e1e;
+  padding: 10px;
+  border-radius: 10px;
+  display: flex;
+  gap: 3rem;
+  border-top: var(--border-style);
+  border-bottom: var(--border-style);
+  margin: 20px 20px;
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  flex-direction: column;
+  font-size: 20px;
+
+}
+
+
+.crewContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  margin-top: 20px;
+
+
+}
+
+.crewMembers {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+
+}
+.crewDescription {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  font-family: 'Poppins', sans-serif;
+  border-top: var(--border-style);
+  border-bottom: var(--border-style);
+  font-size: 20px;
+  padding: 10px;
+}
+.memberCard{
+  background-color: #1e1e1e;
+  padding: 10px;
+  border-radius: 10px;
+  height: 50%;
+  width: 50%;
+  display: flex;
+  border-bottom: 1.5px solid var(--primary-text-color);
+  border-top:1.5px solid var(--primary-text-color);;
+  margin: 10px 10px;
+  text-align: center;
+  font-family: 'Poppins', sans-serif;
+  flex-direction: column;
+  font-size: 20px;
+
+}
+.ourPartnersContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+.ourPartnersDescription {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #1e1e1e;
+  font-family: 'Poppins', sans-serif;
+   gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 10px;
+  font-size: 20px;
+}
+
+.partnersLogos{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+
+