juan:react-1/week1

app/about_us/OurCrew.js

@@ -0,0 +1,49 @@
+import styles from './page.module.css';
+
+
+const crewMembers = [
+  {
+    name: 'Anousheh Ansari',
+    role: 'Flight Engineer',
+    image: '/crew/image-anousheh-ansari.png',
+    description: 'Anousheh is the first female private space explorer. She brings unmatched expertise in engineering and leadership.',
+  },
+  {
+    name: 'Douglas Hurley',
+    role: 'Commander',
+    image: '/crew/image-douglas-hurley.png',
+    description: 'Doug is a veteran astronaut and pilot, responsible for leading crewed spaceflights with precision and skill.',
+  },
+  {
+    name: 'Mark Shuttleworth',
+    role: 'Mission Specialist',
+    image: '/crew/image-mark-shuttleworth.png',
+    description: 'Mark is an entrepreneur and space traveler, passionate about pushing the boundaries of private space travel.',
+  },
+  {
+    name: 'Victor Glover',
+    role: 'Pilot',
+    image: '/crew/image-victor-glover.png',
+    description: 'Victor is a skilled pilot with extensive experience in space missions, known for his calm under pressure.',
+  },
+];
+
+const OurCrew = () => {
+  return (
+<div className={styles.crewSection}>
+  {crewMembers.map((member) => (
+    <div className={styles.crewCard} key={member.name}>
+      <img src={member.image} alt={member.name} />
+      <div className={styles.crewCardContent}>
+        <h3>{member.name}</h3>
+        <h5>{member.role}</h5>
+        <p>{member.description}</p>
+      </div>
+    </div>
+  ))}
+</div>
+
+  );
+};
+
+export default OurCrew;

app/about_us/OurPartners.js

@@ -0,0 +1,65 @@
+import styles from './page.module.css'; 
+
+const OurPartners = () => {
+  const partners = [
+    {
+      name: 'Alphabet',
+      logo: '/business_partners/alphabet-logo.png',
+      description: 'Providing AI-driven navigation systems and data analysis for our missions.',
+    },
+    {
+      name: 'Amazon',
+      logo: '/business_partners/amazon_logo.png',
+      description: 'Supporting us with cloud infrastructure and smart logistics solutions.',
+    },
+    {
+      name: 'CBC',
+      logo: '/business_partners/CBC_Logo_White.png',
+      description: 'Broadcasting our missions and sharing our story with the world.',
+    },
+    {
+      name: 'Microsoft',
+      logo: '/business_partners/Microsoft-Logo-white.png',
+      description: 'Partnering in software development and security for interstellar systems.',
+    },
+    {
+      name: 'NYU',
+      logo: '/business_partners/nyu-logo.png',
+      description: 'Collaborating on space education and research programs.',
+    },
+    {
+      name: 'Queen’s University',
+      logo: '/business_partners/QueensLogo_white.png',
+      description: 'Conducting joint research in space science and exploration.',
+    },
+    {
+      name: 'Samsung',
+      logo: '/business_partners/samsung-logo.png',
+      description: 'Providing cutting-edge hardware and display technology.',
+    },
+    {
+      name: 'Sodexo',
+      logo: '/business_partners/sodexo-logo.png',
+      description: 'Ensuring quality life support services for long-term missions.',
+    },
+  ];
+
+  return (
+    <div className={styles.partnersSection}>
+      <p>
+        We collaborate with world-class companies and institutions to make space exploration smarter, safer, and more inspiring.
+      </p>
+      <div className={styles.partnerGrid}>
+        {partners.map((partner) => (
+          <div className={styles.partnerCard} key={partner.name}>
+            <img src={partner.logo} alt={partner.name} />
+            <h4>{partner.name}</h4>
+            <p>{partner.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OurPartners;

app/about_us/OurValues.js

@@ -0,0 +1,43 @@
+import styles from './page.module.css'; 
+
+
+const OurValues = () => {
+  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 (
+    <div className="valuesSection">
+      {values.map((value) => (
+        <div className="valueCard" key={value.title}>
+          <h3>{value.title}</h3>
+          <p>{value.description}</p>
+
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OurValues;

app/about_us/page.js

@@ -1,59 +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>
-  );
-}
+import styles from './page.module.css'; 
+
+import OurValues from './OurValues';
+import OurPartners from './OurPartners';
+import OurCrew from './OurCrew';
 
-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 = () => {
   return (
     <div className="fullBGpicture">
       <main className="mainContent">
+
         <h1>About us</h1>
+
         <section className="card">
+
           <h2>Our Values</h2>
           <OurValues/>
+
         </section>
+
         <section className="card">
           <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/about_us/page.module.css

@@ -1,5 +1,96 @@
-.app {
-  background-color: black;
-  width: 100vw;
-  height: 100vh;
+.partnersSection {
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.partnerGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.partnerCard {
+  background-color: #ffffff10;
+  padding: 1.5rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(5px);
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.partnerCard:hover {
+  transform: scale(1.03);
+}
+
+.partnerCard img {
+  max-width: 120px;
+  height: auto;
+  margin-bottom: 1rem;
+}
+
+
+
+
+
+.valuesSection {
+  display: grid;
+  gap: 1.5rem;
+  padding: 1rem;
+}
+
+.valueCard {
+  background: #ffffff0a;
+  border-left: 4px solid #00ffffaa;
+  padding: 1rem;
+  border-radius: 8px;
+  backdrop-filter: blur(4px);
+}
+
+
+.crewSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 2rem 1rem;
+}
+
+.crewCard {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2rem;
+  background-color: #ffffff08;
+  border-radius: 12px;
+  padding: 1rem 2rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(4px);
+}
+
+.crewCard img {
+  width: 150px;
+  height: auto;
+  border-radius: 8px;
+}
+
+.crewCard h3 {
+  margin: 0;
+}
+
+.crewCard h5 {
+  margin: 0;
+  color: #ccc;
+  font-weight: normal;
+}
+
+.crewCard p {
+  margin-top: 0.5rem;
+}
+
+.crewCardContent {
+  display: flex;
+  flex-direction: column;
 }

app/destination/PlanetCard.js

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

app/destination/PlanetWishlistItem.js

@@ -0,0 +1,17 @@
+import styles from '@/components/destination/destination.module.css';
+
+const PlanetWishlistItem = ({
+  name,
+  onRemove,
+  thumbnail,
+}) => {
+  return (
+    <div className={styles.wishlistItem}>
+      <img className={styles.wishlistItemThumbnail} src={thumbnail} alt={name || "planet"} />
+      <b>{name ? name.toUpperCase() : "Unnamed"}</b>
+      <button onClick={onRemove}>remove</button>
+    </div>
+  );
+}
+
+export default PlanetWishlistItem;