React 1 hw/week2/ aminata

app/about_us/README.md

@@ -44,4 +44,4 @@ We collaborate with some of the most respected names in the space and technology
 
 #### Content
 
-Use the content saved in the `/public/business_partners` folder!
+Use the content saved in the `/public/business_partners` folder!

app/about_us/crew.js

@@ -0,0 +1,49 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image"; 
+
+const teamMembers = [
+  { name: "captain Sarah Vegara", role: "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/alice.jpg" },
+  { name: "Dr Leo Redding ", role: "Our chief astrophysicist, 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/bob.jpg" },
+  { name: "Chief Engineer Harah Lee ", role: "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/charlie.jpg" },
+  { name: "Mission specialist Alex Santos ", role: "We collaborate with some of the most respected names in the space and technology industries to make every journey extraordinary. Our partners bring expertise, innovation, and cutting-edge advancements that enhance our space travel experiences.", image: "/crew/diana.jpg" },
+  { name: "Pr Aminata Ba", role: "Aminata 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/aminata.jpg" }, 
+];
+
+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>Our crew is the heart and soul of Galactica. We are a diverse team of seasoned space explorers, engineers, and visionaries who are united by a common goal: to make space travel accessible and exciting for all.</p>
+      <div className="carousel">
+        <button onClick={prevSlide} className="carousel-btn"> next </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,8 @@
-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';  
+import footer from './ui/footer.js';
 
 export const Crew = () => {
   return (
@@ -45,18 +11,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,43 @@
   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>We collaborate with some of the most respected names in the space and technology industries to make every journey extraordinary. Our partners bring expertise, innovation, and cutting-edge advancements that enhance our space travel experiences.</p>
+        <div className="partners">
+          <img src="/.partner1.svg.avif" alt="Partner 1" />
+          <img src="/.partner2.avif" alt="Partner 2" />
+          <img src="/.partner3.png" alt="Partner 3" />
+          <img src="/.partner4.png" alt="Partner 4" />
+          <img src="/.partner5.png" alt="Partner 5" />
+          <img src="/.partner6.svg" alt="Partner 6" />
+        </div>
+      </div>
+    );
+  };
+
+  export default OurPartners;
+

app/about_us/values.js

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