React1 week2

app/about_us/OurCrew.js

@@ -0,0 +1,78 @@
+const OurCrew = () => {
+  const crewMembers = [
+    {
+      name: 'Anousheh Ansari',
+      src: '/crew/image-anousheh-ansari.png',
+      role: 'Founder & CEO',
+    },
+    {
+      name: 'Douglas Hurley',
+      src: '/crew/image-douglas-hurley.png',
+      role: 'Commander',
+    },
+    {
+      name: 'Mark Shuttleworth',
+      src: '/crew/image-mark-shuttleworth.png',
+      role: 'Flight Engineer',
+    },
+    {
+      name: 'Victor Glover',
+      src: '/crew/image-victor-glover.png',
+      role: 'Pilot',
+    },
+  ];
+
+  return (
+    <div style={{ textAlign: 'center', padding: '20px' }}>
+      <p style={{ marginBottom: '30px' }}>
+        Meet our highly skilled and passionate space enthusiasts who make it all
+        possible.
+      </p>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+          gap: '40px',
+          justifyItems: 'center',
+          maxWidth: '900px',
+          margin: '0 auto',
+        }}
+      >
+        {crewMembers.map((member, index) => (
+          <div
+            key={index}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
+              minWidth: '180px',
+            }}
+          >
+            <img
+              src={member.src}
+              alt={member.name}
+              style={{
+                width: '180px',
+                height: '220px', 
+                objectFit: 'cover', 
+                borderRadius: '10px',
+                marginBottom: '10px',
+              }}
+            />
+            <p
+              style={{ margin: '10px 0', fontSize: '16px', fontWeight: 'bold' }}
+            >
+              {member.name}
+            </p>
+            <p style={{ margin: '5px 0', fontSize: '14px', color: '#666' }}>
+              {member.role}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OurCrew;

app/about_us/OurPartners.js

@@ -0,0 +1,40 @@
+const OurPartners = () => {
+  const partners = [
+    { name: 'Alphabet', src: '/business_partners/alphabet-logo.png' },
+    { name: 'Amazon', src: '/business_partners/amazon_logo.png' },
+    { name: 'CBC', src: '/business_partners/CBC_Logo_White.png' },
+    { name: 'Microsoft', src: '/business_partners/Microsoft-Logo-white.png' },
+    { name: 'NYU', src: '/business_partners/nyu-logo.png' },
+    { name: 'Samsung', src: '/business_partners/samsung-logo.png' },
+  ];
+
+  return (
+    <div style={{ textAlign: 'center', padding: '20px' }}>
+      <h3 style={{ marginBottom: '30px' }}>
+        We collaborate with progressive, ambitious brands we believe in.
+      </h3>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          gap: '40px',
+          justifyItems: 'center',
+          maxWidth: '800px',
+          margin: '0 auto',
+        }}
+      >
+        {partners.map((partner, index) => (
+          <div key={index} style={{ textAlign: 'center' }}>
+            <img
+              src={partner.src}
+              alt={partner.name}
+              style={{ width: '150px', height: 'auto', marginBottom: '15px' }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OurPartners;

app/about_us/OurValues.js

@@ -0,0 +1,79 @@
+const OurValues = () => {
+  const values = [
+    {
+      id: '01',
+      title: 'Love your craft.',
+      description:
+        'We’re here because we love what we do. It’s our passion, hobby, career, and vocation. We’re looking for others who feel the same way.',
+    },
+    {
+      id: '02',
+      title: 'Be bold. Be humble.',
+      description:
+        'There is no top-down. We lead from the bottom and the edges. Everyone drives. We celebrate ideas over egos, where the best idea wins, regardless of who or where it comes from.',
+    },
+    {
+      id: '03',
+      title: 'Be better. Always push forward.',
+      description:
+        'We’re on a tireless pursuit to become better and expect those around us to do the same.',
+    },
+    {
+      id: '04',
+      title: 'Be a Professional',
+      description:
+        'There’s important work to be done. Speak up. Be present. Provide value, with honesty and candour.',
+    },
+  ];
+
+  return (
+    <div
+      style={{
+        padding: '20px',
+        color: '#fff',
+        textAlign: 'center',
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+          gap: '40px',
+          maxWidth: '900px',
+          margin: '0 auto',
+        }}
+      >
+        {values.map(value => (
+          <div
+            key={value.id}
+            style={{
+              textAlign: 'left',
+              padding: '20px',
+              borderBottom: '1px solid white',
+            }}
+          >
+            <h1
+              style={{ fontSize: '50px', marginBottom: '10px', color: '#fff' }}
+            >
+              {value.id}
+            </h1>
+            <h3
+              style={{
+                fontSize: '20px',
+                fontWeight: 'bold',
+                marginBottom: '10px',
+              }}
+            >
+              {value.title}
+            </h3>
+            <p style={{ fontSize: '14px', color: '#aaa', lineHeight: '1.6' }}>
+              {value.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default OurValues;

app/about_us/page.js

@@ -1,42 +1,6 @@
-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";
 
 export const Crew = () => {
   return (
@@ -45,18 +9,21 @@ 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/>
+          <h2>Our 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>
   );
-}
+};
 
-export default Crew;
+export default Crew;

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}
+      />
+      <b>{name.toUpperCase()}</b>
+      <button onClick={onRemove}>REMOVE</button>
+    </div>
+  );
+};
+
+export default PlanetWishlistItem;