React week2/amin

app/about_us/OurCrew.js

@@ -0,0 +1,54 @@
+import Image from "next/image";
+import styles from "./about_us.module.css";
+
+const OurCrew = () => {
+  return (
+    <div className={styles.crewGrid}>
+      <div>
+        <Image
+          src="/crew/image-anousheh-ansari.png"
+          alt="Anousheh Ansari"
+          width={150}
+          height={150}
+        />
+        <h4>Anousheh Ansari</h4>
+        <p>First Iranian woman in space. Brings global vision and inspiration to our missions.</p>
+      </div>
+
+      <div>
+        <Image
+          src="/crew/image-douglas-hurley.png"
+          alt="Douglas Hurley"
+          width={150}
+          height={150}
+        />
+        <h4>Douglas Hurley</h4>
+        <p>Former NASA astronaut and spacecraft commander. Ensures safe operations and mission success.</p>
+      </div>
+
+      <div>
+        <Image
+          src="/crew/image-mark-shuttleworth.png"
+          alt="Mark Shuttleworth"
+          width={150}
+          height={150}
+        />
+        <h4>Mark Shuttleworth</h4>
+        <p>Entrepreneur and space tourist. Shares his passion for discovery and adventure.</p>
+      </div>
+
+      <div>
+        <Image
+          src="/crew/image-victor-glover.png"
+          alt="Victor Glover"
+          width={150}
+          height={150}
+        />
+        <h4>Victor Glover</h4>
+        <p>Pilot and engineer with hands-on space mission experience. Focused on innovation and safety.</p>
+      </div>
+    </div>
+  );
+};
+
+export default OurCrew;

app/about_us/OurPartners.js

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import styles from "./about_us.module.css";
+
+const OurPartners = () => {
+  const partners = [
+    { name: "Alphabet", logo: "/business_partners/alphabet-logo.png" },
+    { name: "Amazon", logo: "/business_partners/amazon_logo.png" },
+    { name: "CBC", 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 University", 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.partnerGrid}>
+      {partners.map((partner) => (
+        <div key={partner.name} className={styles.partnerItem}>
+          <Image
+            src={partner.logo}
+            alt={`${partner.name} Logo`}
+            width={120}
+            height={60}
+            style={{ objectFit: "contain" }}
+          />
+          <p>{partner.name}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OurPartners;

app/about_us/OurValues.js

@@ -0,0 +1,22 @@
+import styles from "./about_us.module.css";
+
+const OurValues = () => {
+  return (
+    <ul className="our-values-list">
+      <li>
+        <strong>Exploration:</strong> We are driven by a desire to explore the unknown and expand our understanding of the universe.
+      </li>
+      <li>
+        <strong>Innovation:</strong> We use the latest technology to ensure our missions are advanced, safe, and meaningful.
+      </li>
+      <li>
+        <strong>Sustainability:</strong> We’re committed to responsible space travel that protects both Earth and space for future generations.
+      </li>
+      <li>
+        <strong>Community:</strong> We build a global community of explorers who share a passion for the stars.
+      </li>
+    </ul>
+  );
+};
+
+export default OurValues;

app/about_us/about_us.module.css

@@ -0,0 +1,50 @@
+
+.our-values-list li {
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 15px 20px 20px 15px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  color: #333;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+}
+
+
+
+.crewGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.crewGrid h4 {
+  margin: 0.5rem 0 0.25rem;
+}
+
+.crewGrid p {
+  font-size: 0.9rem;
+  color: #ccc;
+}
+
+
+.partnerGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+  align-items: center;
+  justify-items: center;
+  text-align: center;
+}
+
+.partnerItem img {
+  max-width: 100%;
+}
+
+.partnerItem p {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #ccc;
+}

app/about_us/page.js

@@ -1,62 +1,38 @@
-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";
+import styles from './about_us.module.css';
 
 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>
   );
-}
+};
+
+<section className="card">
+  <h2>Our Partners</h2>
+  <OurPartners />
+</section>
+
 
 export default Crew;

app/destination/PlanetCard.jsx

@@ -0,0 +1,24 @@
+import styles from "./destination.module.css";
+
+export default function PlanetCard({
+  name,
+  description,
+  thumbnail,
+  isSelected,
+  onAddOrRemovePlanet,
+}) {
+  return (
+    <div className={styles.planetCard}>
+      <img className={styles.planetThumbnail} src={thumbnail} alt={name} />
+      <div className={styles.planetDescription}>
+        <h2>
+          {name.toUpperCase()} {isSelected ? "- SELECTED" : ""}
+        </h2>
+        <p>{description}</p>
+      </div>
+      <button className="roundButton" onClick={() => onAddOrRemovePlanet(name)}>
+        {isSelected ? "REMOVE" : "ADD PLANET"}
+      </button>
+    </div>
+  );
+}

app/destination/destination.module.css

@@ -0,0 +1,25 @@
+.planetGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
+}
+
+.planetCard {
+  background-color: #14213d;
+  color: white;
+  padding: 1rem;
+  border-radius: 8px;
+  text-align: center;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+.planetThumbnail {
+  width: 100%;
+  max-width: 180px;
+  border-radius: 4px;
+}
+
+.planetDescription {
+  margin: 1rem 0;
+}

app/destination/destinations.js

@@ -0,0 +1,24 @@
+const destinations = [
+  {
+    name: "Europa",
+    description: "Europa is an icy moon of Jupiter with a hidden ocean.",
+    thumbnail: "/destination/image-europa.png"
+  },
+  {
+    name: "Moon",
+    description: "The Moon is Earth's natural satellite and our closest neighbor.",
+    thumbnail: "/destination/image-moon.png"
+  },
+  {
+    name: "Mars",
+    description: "Mars is the red planet with dusty landscapes and big dreams.",
+    thumbnail: "/destination/image-mars.png"
+  },
+  {
+    name: "Titan",
+    description: "Titan is Saturn's largest moon, with a thick atmosphere and methane lakes.",
+    thumbnail: "/destination/image-titan.png"
+  }
+];
+
+export default destinations;