homeworkreact

app/about_us/crew.js

@@ -0,0 +1,50 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image"; // Next.js Image component
+
+const teamMembers = [
+  { name: "Alice Johnson", role: "Aerospace Engineer", image: "/crew/alice.jpg" },
+  { name: "Bob Smith", role: "Mission Control Director", image: "/crew/bob.jpg" },
+  { name: "Charlie Brown", role: "Spacecraft Designer", image: "/crew/charlie.jpg" },
+  { name: "Diana Prince", role: "Astrophysicist", image: "/crew/diana.jpg" },
+  { name: "Aminata Ba", role: "IT Specialist", image: "/crew/aminata.jpg" }, // ✅ Added Aminata
+];
+
+const OurCrew = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const nextSlide = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % teamMembers.length);
+  };
+
+  const prevSlide = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === 0 ? teamMembers.length - 1 : prevIndex - 1
+    );
+  };
+
+  return (
+    <div className="carousel-container">
+      <p>🌌 WE ARE GALACTICA:</p>
+      <p>Meet the experts pioneering the next generation of space exploration:</p>
+
+      <div className="carousel">
+        <button onClick={prevSlide} className="carousel-btn">❮</button>
+        <div className="carousel-slide">
+          <Image
+            src={teamMembers[currentIndex].image}
+            alt={teamMembers[currentIndex].name}
+            width={150}
+            height={150}
+            className="crew-image"
+          />
+          <h3>{teamMembers[currentIndex].name}</h3>
+          <p>{teamMembers[currentIndex].role}</p>
+        </div>
+        <button onClick={nextSlide} className="carousel-btn">❯</button>
+      </div>
+    </div>
+  );
+};
+
+export default OurCrew;

app/about_us/page.js

@@ -1,42 +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 styles from "./page.module.css";
+import OurValues from "./values.js";
+import OurCrew from "./crew.js" ;
+import OurPartners from './OurPartners';  
 
 export const Crew = () => {
   return (
@@ -45,18 +10,19 @@ 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/>
+          <OurCrew />
+        </section>
+        <section className="card">
+          <h2>Our Partners</h2>
+          <OurPartners />  
         </section>
-
-         {/* TASK - React 1 week 1 */}
-         {/* Add in the "OurPartners" component here */}
       </main>
     </div>
   );
-}
+};
 
 export default Crew;

app/about_us/page.module.css

@@ -2,4 +2,44 @@
   background-color: black;
   width: 100vw;
   height: 100vh;
+};
+
+.carousel-container {
+  text-align: center;
+  padding: 20px;
 }
+
+.carousel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.carousel-slide {
+  background: #f9f9f9;
+  padding: 20px;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  width: 250px;
+  transition: transform 0.5s ease-in-out;
+}
+
+.crew-image {
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.carousel-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.carousel-btn:hover {
+  transform: scale(1.2);
+}
+

app/about_us/partners.js

@@ -0,0 +1,19 @@
+const OurPartners = () => {
+    return (
+      <div>
+        <p> OUR PARTNERS </p>
+        <p>They trusted us:</p>
+        <div className="partners">
+          <img src="/partners/partner1.svg.avif" alt="Partner 1" />
+          <img src="/partners/partner2.avif" alt="Partner 2" />
+          <img src="/partners/partner3.png" alt="Partner 3" />
+          <img src="/partners/partner4.png" alt="Partner 4" />
+          <img src="/partners/partner5.png" alt="Partner 5" />
+          <img src="/partners/partner6.svg" alt="Partner 6" />
+        </div>
+      </div>
+    );
+  };
+
+  export default OurPartners;
+

app/about_us/values.js

@@ -0,0 +1,28 @@
+const OurValues = () => {
+    return (
+      <div>
+        <p>VALUES WE HOLD:</p>
+        <ol>
+          <li>
+            INNOVATION
+            <img src="/values/INNOVATION.webp" alt="Innovation" />
+          </li>
+          <li>
+            RESPECT
+            <img src="/values/RESPECT.png" alt="Respect" />
+          </li>
+          <li>
+            INTEGRITY
+            <img src="/values/INTEGRITY.jpg" alt="Integrity" />
+          </li>
+          <li>
+            TEAMWORK
+            <img src="/values/TEAMWORK.jpg" alt="Teamwork" />
+          </li>
+        </ol>
+      </div>
+    );
+  };
+
+  export default OurValues;
+