React1 week2/hossein

app/about_us/OurCrew.js

@@ -0,0 +1,56 @@
+const OurCrew = () => {
+
+  const crewMembers = [
+    {
+      name: "Captain Sarah Vega",
+      role: "Captain",
+      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.",
+      image: "/crew/image-anousheh-ansari.png"
+    },
+    {
+      name: "Dr. Leo Redding",
+      role: "Chief Astrophysicist",
+      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.",
+      image: "/crew/image-douglas-hurley.png"
+    },
+    {
+      name: "Chief Engineer Hana Lee",
+      role: "Chief Engineer",
+      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.",
+      image: "/crew/image-mark-shuttleworth.png"
+    },
+    {
+      name: "Mission Specialist Alex Santos",
+      role: "Mission Specialist",
+      description: "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.",
+      image: "/crew/image-victor-glover.png"
+    },
+    {
+      name: "Crew Member Maya Patel",
+      role: "Crew Member",
+      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.",
+      image:  "/crew/image-mark-shuttleworth.png"
+    }
+  ];
+  // 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  (
+    <section>
+      <h2>Our Crew</h2>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+        {crewMembers.map((member, index) => (
+          <div key={index} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px', width: '220px', textAlign: 'center' }}>
+            <img src={member.image} alt={member.name} style={{ width: '100%', height: '220px', objectFit: 'cover', borderRadius: '5px' }} />
+            <h3>{member.name}</h3>
+            <h4>{member.role}</h4>
+            <p>{member.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+export default OurCrew;

app/about_us/OurPartners.js

@@ -0,0 +1,33 @@
+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
+
+  const partners = [
+    "/business_partners/alphabet-logo.png",
+    "/business_partners/amazon_logo.png",
+    "/business_partners/CBC_Logo_White.png",
+    "/business_partners/Microsoft-Logo-White.png",
+    "/business_partners/nyu-logo.png",
+    "/business_partners/QueensLogo-White.png",
+    "/business_partners/samsung-logo.png",
+    "/business_partners/sodexo-logo.png"
+];
+
+return (
+    <section style={{ padding: "20px" }}>
+        <h2 style={{ textAlign: "center", marginBottom: "20px" }}>Our Partners</h2>
+        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "30px" }}>
+            {partners.map((logo, index) => (
+                <div key={index} style={{ border: "1px solid #ddd", padding: "15px", borderRadius: "8px", width: "150px" }}>
+                    <img src={logo} alt={`Partner ${index + 1}`} style={{ width: "100%", objectFit: "contain" }} />
+                </div>
+            ))}
+        </div>
+    </section>
+);
+}
+
+export default OurPartners;

app/about_us/OurValues.js

@@ -0,0 +1,39 @@
+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
+  const values = [
+    {
+      title: "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."
+    },
+    {
+      title: "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."
+    },
+    {
+      title: "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."
+    },
+    {
+      title: "Community",
+      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."
+    }
+  ];
+
+  return (
+    <section>
+      <h2>Our Values</h2>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        {values.map((value, index) => (
+          <div key={index} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px' }}>
+            <h3>{value.title}</h3>
+            <p>{value.description}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+export default OurValues;

app/about_us/page.js

@@ -1,41 +1,18 @@
 import styles from './page.module.css';
+import OurValues from './OurValues';
+import OurCrew from './OurCrew';
+import OurPartners from './OurPartners';
+
 
-// 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>
-  );
-}
+
+
+
+
 
 
 export const Crew = () => {
@@ -51,9 +28,14 @@ export const Crew = () => {
           <h2>The crew</h2>
           <OurCrew/>
         </section>
+        <section className='card'>
+          <h2> Our Partners</h2>
+          <OurPartners/>
+        </section>
 
-         {/* TASK - React 1 week 1 */}
+
          {/* Add in the "OurPartners" component here */}
+
       </main>
     </div>
   );

app/destination/page.js

@@ -1,26 +1,25 @@
 "use client";
-
-import { useState } from 'react';
-
-import styles from '@/components/destination/destination.module.css';
-import { AddWishlistItem } from '@/components/destination/AddWishlistItem';
+import { useState } from "react";
+import styles from "@/components/destination/destination.module.css";
+import AddWishlistItem from "@/components/destination/AddWishlistItem";
+import PlanetWishlistItem from "@/components/destination/PlanetWishlistItem";
+import PlanetCard from "@/components/destination/PlanetCard";
 
 // TASK - React 1 week 2
-// Move this to its own file
-const PlanetWishlistItem = ({
-  name,
-  onRemove,
-  thumbnail,
-}) => {
-  return (
-    <div className={styles.wishlistItem}>
-      <img className={styles.wishlistItemThumbnail} src={thumbnail} alt="" />
-      <b>{name.toUpperCase()}</b>
-      <button onClick={onRemove}>remove</button>
-    </div>
-  );
-}
-
+// Move this to its own file   ---- done
+// const PlanetWishlistItem = ({
+//   name,
+//   onRemove,
+//   thumbnail,
+// }) => {
+//   return (
+//     <div className={styles.wishlistItem}>
+//       <img className={styles.wishlistItemThumbnail} src={thumbnail} alt="" />
+//       <b>{name.toUpperCase()}</b>
+//       <button onClick={onRemove}>remove</button>
+//     </div>
+//   );
+// }
 
 export const Destinations = () => {
   const [selectedPlanets, onAddPlanet] = useState([]);
@@ -29,36 +28,59 @@ export const Destinations = () => {
   let numberOfPlanets = 0;
 
   const onAddOrRemovePlanet = (name, index) => {
-    // TASK - React 1 week 2
-    // Implement this function
-    // If you press the "ADD PLANET" the selected planet should display "SELECTED"
-    // And the counter should update, how many planets are selected (numberOfPlanets)
-    console.log(`You seleceted the following planet: ${name}, with the index of ${index}`);
-  }
+    const planetIndex = selectedPlanets.indexOf(name);
+
+    if (planetIndex > -1) {
+      const updatedPlanets = [...selectedPlanets];
+      updatedPlanets.splice(planetIndex, 1);
+      onAddPlanet(updatedPlanets);
+    } else {
+      onAddPlanet([...selectedPlanets, name]);
+    }
+
+    console.log(
+      `You seleceted the following planet: ${name}, with the index of ${index}`
+    );
 
+    // TASK - React 1 week 2
+    // Implement this function       ---- done
+    // If you press the "ADD PLANET" the selected planet should display "SELECTED"  ---done
+    // And the counter should update, how many planets are selected (numberOfPlanets)   ---done
+    //console.log(`You seleceted the following planet: ${name}, with the index of ${index}`);   ---done
+  };
+  numberOfPlanets = selectedPlanets.length;
   return (
     <div className="fullBGpicture">
       <main className="mainContent">
         <h1>Travel destinations</h1>
         <section className="card">
           <h2>Wishlist</h2>
-          {/* TASK - React 1 week 2 */}
-          {/* Display the number Of selected planets */}
-          {/* Display the "no planets" message if it is empty! */}
-          <p>No planets in wishlist :(</p>
-          <p>You have {numberOfPlanets} in your wishlist</p>
+          {numberOfPlanets === 0 ? (
+            <p>No planets in wishlist :</p>
+          ) : (
+            <p>You have {numberOfPlanets} planet(s) in your wishlist</p>
+          )}
+
           <b>List coming soon after lesson 3!</b>
-
-          {/* STOP! - this is for week 3!*/}
+
+          {/* TASK - React 1 week 2 */}
+          {/* Display the number Of selected planets    --done--   */}
+
+          {/* Display the "no planets" message if it is empty!     ---done--*/}
+
+          {/* STOP! - t</div>his is for week 3!*/}
           {/* TASK - React 1 week 3 */}
           {/* Import the AddWishlistItem react component */}
           {/* <AddWishlistItem /> */}
           {/* TASK - React 1 week 3 */}
           {/* Convert the list, so it is using selectedPlanets.map() to display the items  */}
           {/* Implement the "REMOVE" function */}
           {/* uncomment the following code snippet: */}
+
           {/* 
           <h3>Your current wishlist</h3>
+
+
           <div className={styles.wishlistList}>
             <PlanetWishlistItem 
               name="europa"
@@ -75,40 +97,46 @@ export const Destinations = () => {
         <section className="card">
           <h2>Possible destinations</h2>
           {/* TASK - React 1 week 2 */}
-          {/* Add all 4 planets! Europa, Moon, Mars, Titan  */}
+          {/* Add all 4 planets! Europa, Moon, Mars, Titan     ---done--- */}
           {/* Use the README.md file for descriptions */}
           {/* Create a <PlanetCard /> component, which accepts the following properties: */}
           {/* name, description, thumbnail, isSelected, onAddOrRemovePlanet */}
-          <div className={styles.planetCard}>
-            <img className={styles.planetThumbnail} src="/destination/image-europa.png" alt="" />
-            <div className={styles.planetDescription}>
-              <h2>EUROPA {isPlanetSelected ? "- SELECTED" : ""}</h2>
-              <p>Lorem ipsum...</p>
-            </div>
-            <button 
-              className="roundButton" 
-              onClick={() => onAddOrRemovePlanet('Pluto', 0)}
-            > 
-              {isPlanetSelected ? "REMOVE" : "ADD PLANET"}
-            </button>
-          </div>
-          <div className={styles.planetCard}>
-            <img className={styles.planetThumbnail} src="/destination/image-europa.png" alt="" />
-            <div className={styles.planetDescription}>
-              <h2>EUROPA {isPlanetSelected ? "- SELECTED" : ""}</h2>
-              <p>Lorem ipsum...</p>
-            </div>
-            <button 
-              className="roundButton" 
-              onClick={() => onAddOrRemovePlanet('Pluto', 0)}
-            > 
-              {isPlanetSelected ? "REMOVE" : "ADD PLANET"}
-            </button>
-          </div>
+
+          <PlanetCard
+            name="Europa"
+            description="Europa, one of Jupiter’s moons, is an icy world with a hidden ocean beneath its surface. This mysterious moon is a prime candidate for the search for extraterrestrial life, making it a thrilling destination for space explorers."
+            thumbnail="/destination/image-europa.png"
+            isSelected={selectedPlanets.includes("Europa")}
+            onAddOrRemovePlanet={() => onAddOrRemovePlanet("Europa")}
+          />
+
+          <PlanetCard
+            name="Moon"
+            description="Our closest celestial neighbor, the Moon, is a silent witness to Earth's history. With its stunning craters and desolate landscapes, the Moon offers a unique glimpse into space exploration's past and future, making it a perfect destination for lunar adventurers."
+            thumbnail="/destination/image-moon.png"
+            isSelected={selectedPlanets.includes("Moon")}
+            onAddOrRemovePlanet={() => onAddOrRemovePlanet("Moon")}
+          />
+
+          <PlanetCard
+            name="Mars"
+            description="Mars, the Red Planet, is a barren yet fascinating world with vast deserts, towering volcanoes, and the deepest canyon in the solar system. As humanity’s next frontier, Mars invites us to dream of colonization and the possibilities of life beyond Earth."
+            thumbnail="/destination/image-mars.png"
+            isSelected={selectedPlanets.includes("Mars")}
+            onAddOrRemovePlanet={() => onAddOrRemovePlanet("Mars")}
+          />
+
+          <PlanetCard
+            name="TITAN"
+            description="Titan, Saturn's largest moon, is a world of dense atmosphere and liquid methane lakes. This enigmatic moon is shrouded in a thick orange haze, concealing a landscape that is both alien and strangely familiar, beckoning explorers to uncover its secrets."
+            thumbnail="/destination/image-titan.png"
+            isSelected={selectedPlanets.includes("TITAN")}
+            onAddOrRemovePlanet={() => onAddOrRemovePlanet("TITAN")}
+          />
         </section>
       </main>
     </div>
   );
-}
+};
 
 export default Destinations;