React1 week1/parisa

app/about_us/OurCrew.js

@@ -0,0 +1,25 @@
+const OurCrew = () => {
+    const crewMembers = [
+      { name: "Alex Johnson", role: "Captain", image: "react-1-hw/app/about_us/Boulder_Worldcup_Vienna_28-05-2010_quali-w100_Alex_Johnson.jpg" },
+      { name: "Jordan Smith", role: "Engineer", image: "D:\HYF\Homework\class30-homework\react\react1\week1\react-1-hw\app\about_us\D52_5662.jpg" },
+      { name: "Taylor Lee", role: "Navigator", image: "D:\HYF\Homework\class30-homework\react\react1\week1\react-1-hw\app\about_us\Taylor-Lee-scaled.jpg" },
+      { name: "Morgan Davis", role: "Communications", image: "D:\HYF\Homework\class30-homework\react\react1\week1\react-1-hw\app\about_us\Morgan.webp"},
+    ];
+
+    return (
+      <section className="Crews">
+        <div>
+          {crewMembers.map((member, index) => (
+            <div key={index}>
+              <img
+                src={member.image}
+                alt={member.name}
+              />
+              <h3>{member.name}</h3>
+              <p>{member.role}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  };

app/about_us/OurPartners.js

@@ -0,0 +1,24 @@
+const OurPartners = () => {
+    const partners = [
+      { name: "TechCorp", logo: "/partners/techcorp.png" },
+      { name: "InnovateX", logo: "/partners/innovatex.png" },
+    ];
+
+    return (
+      <section className="partners">
+        <div>
+          {partners.map((partner, index) => (
+            <div key={index}>
+              <img
+                src={partner.logo}
+                alt={partner.name}
+
+              />
+              <h3>{partner.name}</h3>
+            </div>
+          ))};
+        </div>
+      </section>
+    );
+  };
+

app/about_us/OurValues.js

@@ -0,0 +1,20 @@
+const OurValues = () => {
+    const values = [
+      { title: "Integrity", description: "We uphold the highest standards of honesty and ethics in all we do." },
+      { title: "Innovation", description: "We embrace creativity and strive for continuous improvement." },
+      { title: "Collaboration", description: "We work together to achieve more than we could alone." },
+      { title: "Customer Focus", description: "Our customers are at the center of everything we do." },
+    ];
+    return (
+    <section className="values">
+      <div>
+      {values.map((value, index) => (
+            <div key={index}>
+              <h3>{value.title}</h3>
+              <p>{value.description}</p>
+            </div>
+          ))}
+      </div>
+    </section>
+    );
+  };

app/about_us/page.js

@@ -1,41 +1,7 @@
 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.js';
+import OurCrew from './OurCrew.js';
+import OurPartners from './OurPartners.js';
 
 
 export const Crew = () => {
@@ -51,9 +17,10 @@ export const Crew = () => {
           <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>
   );

app/layout.js

@@ -17,9 +17,7 @@ export const RootLayout = ({ children }) => {
       <body className={inter.className}>
         <Navbar />
         {children}
-        {/* TASK - React 1 week 1 */}
-        {/* Import and use the Footer component here */}
-        {/* Footer found in the ui/Footer.js folder */}
+      <Footer/>
       </body>
     </html>
   );

components/ui/Footer.js

@@ -24,8 +24,9 @@ export const Footer = () => {
       </div> */}
       {/* Docs for the Link: https://nextjs.org/docs/pages/api-reference/components/link */}
 
-      {/* TASK - React 1 week 1 */}
-      {/* Add a new list item for LINKEDIN */}
+      <li>
+            <a href="https://linkedin.com">LinkedIn</a>
+          </li>
       <div className={styles.footerLinks}>
         <h3>Follow us</h3>
         <ul className={styles.footerList}>