React-1- week-1

app/about_us/ourCrew.js

@@ -0,0 +1,68 @@
+import styles from "./ourCrew.module.css"; // Adjust the path as necessary
+
+const OurCrew = () => {
+  return (
+    <div className={styles.crewSection}>
+      <p>
+        Meet the dedicated team behind our success. Each member brings unique
+        skills and passion to our mission.
+      </p>
+      <div className={styles.crewMembers}>
+        <div className={styles.crewMember}>
+          <img src="/crew/image-mark-shuttleworth.png" alt="Crew Member 1" />
+          <h3>Sarah Vega</h3>
+          <p>Captain</p>
+          <p>
+            A former NASA astronaut with over 15 years of experience, Captain
+            Vega leads our missions with unparalleled expertise and a passion
+            for space exploration.
+          </p>
+        </div>
+        <div className={styles.crewMember}>
+          <img src="/crew/image-douglas-hurley.png" alt="Crew Member 2" />
+          <h3>Dr. Leo Redding</h3>
+          <p>chief astrophysicist</p>
+          <p>
+            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.
+          </p>
+        </div>
+        <div className={styles.crewMember}>
+          <img src="/crew/image-victor-glover.webp" alt="Crew Member 3" />
+          <h3>Hana Lee</h3>
+          <p>Chief Engineer</p>
+          <p>
+            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.
+          </p>
+        </div>
+        <div className={styles.crewMember}>
+          <img src="/crew/image-anousheh-ansari.webp" alt="Crew Member 4" />
+          <h3>Alex Santos</h3>
+          <p>Mission Specialist</p>
+          <p>
+            As a mission specialist, 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.
+          </p>
+        </div>
+        <div className={styles.crewMember}>
+          <img src="/crew/image-mark-shuttleworth.webp" alt="Crew Member 5" />
+          <h3>Maya Patel</h3>
+          <p>Crew Member</p>
+          <p>
+            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.
+          </p>
+        </div>
+        {/* Add more crew members as needed */}
+      </div>
+    </div>
+  );
+};
+
+export default OurCrew;

app/about_us/ourCrew.module.css

@@ -0,0 +1,62 @@
+.crewSection {
+  padding: 3rem 1.5rem;
+  background-color: #0d0d0d;
+  color: #767878;
+  text-align: center;
+}
+
+.crewSection p {
+  max-width: 600px;
+  margin: 0 auto 2rem;
+  font-size: 1.1rem;
+  color: #ccc;
+}
+
+.crewMembers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+}
+
+.crewMember {
+  background-color: #1a1a1a;
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+  max-width: 300px;
+  padding: 1.5rem;
+  text-align: left;
+  transition: transform 0.3s ease;
+}
+
+.crewMember:hover {
+  transform: translateY(-5px);
+}
+
+.crewMember img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 1rem;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.crewMember h3 {
+  font-size: 1.2rem;
+  margin: 0.5rem 0 0.2rem;
+  color: #fff;
+}
+
+.crewMember p {
+  font-size: 0.95rem;
+  color: #ddd;
+  margin: 0.3rem 0;
+}
+
+.crewMember p:first-of-type {
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #00bcd4;
+}

app/about_us/ourPartner.js

@@ -0,0 +1,36 @@
+import styles from "./ourPartner.module.css";
+
+const OurPartners = () => {
+  const partners = [
+    { name: "Alphabet", logo: "/business_partners/alphabet-logo.png" },
+    { name: "Amazon", logo: "/business_partners/amazon_logo.png" },
+    { name: "CBS", logo: "/business_partners/CBC_Logo_White.png" },
+    { name: "Microsoft", logo: "/business_partners/Microsoft-Logo-white.png" },
+    { name: "Nyu", logo: "/business_partners/nyu-logo.png" },
+    { name: "Queens", logo: "/business_partners/QueensLogo_white.png" },
+    { name: "Samsung", logo: "/business_partners/samsung-logo.png" },
+    { name: "Sodexo", logo: "/business_partners/sodexo-logo.png" },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <p className={styles.intro}>
+        We collaborate with some of the most respected names in the space and
+        technology industries.
+      </p>
+      <div className={styles.grid}>
+        {partners.map((partner) => (
+          <div key={partner.name} className={styles.logoCard}>
+            <img
+              src={partner.logo}
+              alt={partner.name}
+              className={styles.logo}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OurPartners;

app/about_us/ourPartner.module.css

@@ -0,0 +1,40 @@
+/* ourPartner.module.css */
+
+.container {
+  padding: 4rem 2rem;
+  background-color: #0b0d17;
+  text-align: center;
+  color: white;
+}
+
+.intro {
+  font-size: 1.25rem;
+  max-width: 600px;
+  margin: 0 auto 2rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 2rem;
+  align-items: center;
+  justify-items: center;
+}
+
+.logoCard {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1rem;
+  border-radius: 12px;
+  transition: transform 0.3s ease;
+}
+
+.logoCard:hover {
+  transform: scale(1.05);
+}
+
+.logo {
+  max-width: 100px;
+  max-height: 60px;
+  object-fit: contain;
+  filter: brightness(0) invert(1); /* For white logos */
+}

app/about_us/ourValues.js

@@ -0,0 +1,36 @@
+import styles from "./ourValues.module.css";
+
+const OurValues = () => {
+  return (
+    <section className={styles.crewSection}>
+      <p>
+        <strong>Exploration:</strong> 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>
+      <p>
+        <strong>Innovation:</strong> 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>
+
+      <p>
+        <strong>Sustainability:</strong> 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>
+
+      <p>
+        <strong>Community:</strong> 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>
+    </section>
+  );
+};
+
+export default OurValues;

app/about_us/ourValues.module.css

@@ -0,0 +1,62 @@
+.crewSection {
+  padding: 3rem 1.5rem;
+  background-color: #0d0d0d;
+  color: #767878;
+  text-align: center;
+}
+
+.crewSection p {
+  max-width: 600px;
+  margin: 0 auto 2rem;
+  font-size: 1.1rem;
+  color: #ccc;
+}
+
+.crewMembers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2rem;
+}
+
+.crewMember {
+  background-color: #1a1a1a;
+  border-radius: 12px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+  max-width: 300px;
+  padding: 1.5rem;
+  text-align: left;
+  transition: transform 0.3s ease;
+}
+
+.crewMember:hover {
+  transform: translateY(-5px);
+}
+
+.crewMember img {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 1rem;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.crewMember h3 {
+  font-size: 1.2rem;
+  margin: 0.5rem 0 0.2rem;
+  color: #fff;
+}
+
+.crewMember p {
+  font-size: 0.95rem;
+  color: #ddd;
+  margin: 0.3rem 0;
+}
+
+.crewMember p:first-of-type {
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #00bcd4;
+}

app/about_us/page.js

@@ -1,42 +1,40 @@
-import styles from './page.module.css';
+import styles from "./page.module.css";
+import OurValues from "./ourValues";
+import OurCrew from "./ourCrew";
+import OurPartners from "./ourPartner";
 
 // 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 = () => {
+/*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 = () => {
+/*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>
-  );
-}
-
+  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>
-  );
-}
-
+  return <p> ADD OUR Partners HERE </p>;
+};*/
 
 export const Crew = () => {
   return (
@@ -45,18 +43,22 @@ export const Crew = () => {
         <h1>About us</h1>
         <section className="card">
           <h2>Our Values</h2>
-          <OurValues/>
+          <OurValues />
         </section>
         <section className="card">
           <h2>The crew</h2>
-          <OurCrew/>
+          <OurCrew />
+        </section>
+        <section className="card">
+          <h2>The Partners</h2>
+          <OurPartners />
         </section>
 
-         {/* TASK - React 1 week 1 */}
-         {/* Add in the "OurPartners" component here */}
+        {/* TASK - React 1 week 1 */}
+        {/* Add in the "OurPartners" component here */}
       </main>
     </div>
   );
-}
+};
 
 export default Crew;