diff --git a/app/about_us/OurCrew.js b/app/about_us/OurCrew.js new file mode 100644 index 00000000..ef788bf5 --- /dev/null +++ b/app/about_us/OurCrew.js @@ -0,0 +1,46 @@ +import styles from "./page.module.css" + +const OurCrew = () => { + return ( +
+

Our Team

+

Who we are

+

+ 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. +

+ +
+
+ +
Anousheh Ansari
+
Founder + CEO
+
+ +
+ +
Mark Shuttleworth
+
Founder + CEO
+
+ +
+ +
Douglas Hurley
+
Founder + CEO
+
+ +
+ +
Victor Glover
+
Founder + CEO
+
+ +
+
+ + + + ); + } + + + export default OurCrew; \ No newline at end of file diff --git a/app/about_us/OurPartners.js b/app/about_us/OurPartners.js new file mode 100644 index 00000000..fd1e794f --- /dev/null +++ b/app/about_us/OurPartners.js @@ -0,0 +1,39 @@ +import styles from "./page.module.css" +const OurPartners = () => { + return ( +
+

Our Partners

+

We Collaborate with progressive, ambitious brands we believe in.

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ ); + } + + export default OurPartners; \ No newline at end of file diff --git a/app/about_us/OurValues.js b/app/about_us/OurValues.js new file mode 100644 index 00000000..9f6f2f0d --- /dev/null +++ b/app/about_us/OurValues.js @@ -0,0 +1,37 @@ +import styles from "./page.module.css" + +const OurValues = () => { + + return ( +
+

Our Values

+

Rules to live by

+ +
+
+

01

+

Love your craft

+

Exploration: 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.

+
+
+

02

+

Be bold. Be humble.

+

Innovation: 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.

+
+
+

03

+

Be better. Always push forward.

+

Sustainability: 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.

+
+
+

04

+

Be a Professional

+

Community: 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.

+
+
+
+ + ); + }; + + export default OurValues; \ No newline at end of file diff --git a/app/about_us/page.js b/app/about_us/page.js index 880ec427..cdcc8243 100644 --- a/app/about_us/page.js +++ b/app/about_us/page.js @@ -1,41 +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 ( -

ADD OUR VALUES HERE

- ); -}; - -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 ( -

ADD OUR CREW HERE

- ); -} - -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 ( -

ADD OUR Partners HERE

- ); -} +import OurValues from './OurValues'; +import OurCrew from "./OurCrew" +import OurPartners from './OurPartners'; export const Crew = () => { @@ -44,16 +9,14 @@ export const Crew = () => {

About us

-

Our Values

-

The crew

- + +
+
+
- - {/* TASK - React 1 week 1 */} - {/* Add in the "OurPartners" component here */}
); diff --git a/app/about_us/page.module.css b/app/about_us/page.module.css index 8cd08626..9022b1da 100644 --- a/app/about_us/page.module.css +++ b/app/about_us/page.module.css @@ -3,3 +3,81 @@ width: 100vw; height: 100vh; } + +/*Our Values*/ +.valuesContainer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 30px; + max-width: 1000px; + margin: auto; +} + +.valueBox { + flex: 1 1 calc(50% - 20px); + background: black; + padding: 20px; + border-radius: 10px; + min-width: 200px; +} + +.valueBox h2 { + font-size: 30px; + margin-bottom: 10px; +} + +.valueBox h3 { + font-size: 24px; + margin-bottom: 10px; +} + +.valueBox p { + font-size: 16px; +} + + +/*Our Crew*/ + +.crewContainer{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 100px; + +} + + +.crewBox img{ + height: 300px; + width: 200px; + +} + + +/*Our Partners*/ + +.pContainer{ + background-color: black; +} + +.partnersContainer{ + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 20px; + padding: 20px; +} + +.partnersBox { + flex: 1 1 calc(33.33% - 20px); + display: flex; + justify-content: center; + align-items: center; +} + +.partnersBox img { + max-width: 160px; + height: auto; +} \ No newline at end of file diff --git a/app/destination/page.js b/app/destination/page.js index 006037be..da16fb73 100644 --- a/app/destination/page.js +++ b/app/destination/page.js @@ -1,53 +1,70 @@ -"use client"; -import { useState } from 'react'; +"use client"; -import styles from '@/components/destination/destination.module.css'; -import { AddWishlistItem } from '@/components/destination/AddWishlistItem'; +import { useState } from "react"; +import styles from "@/components/destination/destination.module.css"; +import { AddWishlistItem } from "@/components/destination/AddWishlistItem"; +import PlanetCard from "../../components/destination/PlanetCard"; +//import PlanetWishlistItem from "../../components/destination/PlanetWishlistItem"; -// TASK - React 1 week 2 -// Move this to its own file -const PlanetWishlistItem = ({ - name, - onRemove, - thumbnail, -}) => { - return ( -
- - {name.toUpperCase()} - -
- ); -} +const planetData = [ + { + name: "Europa", + description: "Europa, one of Jupiter’s moons...", + thumbnail: "/destination/image-europa.png", + isSelected: false, + }, + { + name: "Mars", + description: "Mars, the Red Planet...", + thumbnail: "/destination/image-mars.png", + isSelected: false, + } +]; export const Destinations = () => { - const [selectedPlanets, onAddPlanet] = useState([]); + const [planets, setPlanets] = useState(planetData); + const selectedPlanets = planets.filter(planet => planet.isSelected); + - let isPlanetSelected = false; - let numberOfPlanets = 0; - - const onAddOrRemovePlanet = (name, index) => { - // TASK - React 1 week 2 - // Implement this function - // If you press the "ADD PLANET" the selected planet should display "SELECTED" - // And the counter should update, how many planets are selected (numberOfPlanets) +const onAddOrRemovePlanet = (name,index) => { + setPlanets((prevPlanets) =>{ + return prevPlanets.map((planet) => { + return planet.name === name + ? { ...planet, isSelected: !planet.isSelected } + : planet + }); + }); console.log(`You seleceted the following planet: ${name}, with the index of ${index}`); - } - + }; + const numberOfPlanets = selectedPlanets.length; return (

Travel destinations

Wishlist

- {/* TASK - React 1 week 2 */} - {/* Display the number Of selected planets */} - {/* Display the "no planets" message if it is empty! */} -

No planets in wishlist :(

-

You have {numberOfPlanets} in your wishlist

+ {numberOfPlanets === 0 ? ( +

No planets in wishlist :

+ ) : ( +

You have {numberOfPlanets} planets in your wishlist.

+ )} List coming soon after lesson 3! + +
+
+

Possible destinations

+ {planets.map((planet) => ( + onAddOrRemovePlanet(planet.name)} + /> + ))} {/* STOP! - this is for week 3!*/} {/* TASK - React 1 week 3 */} @@ -72,40 +89,6 @@ export const Destinations = () => { />
*/} -
-

Possible destinations

- {/* TASK - React 1 week 2 */} - {/* Add all 4 planets! Europa, Moon, Mars, Titan */} - {/* Use the README.md file for descriptions */} - {/* Create a component, which accepts the following properties: */} - {/* name, description, thumbnail, isSelected, onAddOrRemovePlanet */} -
- -
-

EUROPA {isPlanetSelected ? "- SELECTED" : ""}

-

Lorem ipsum...

-
- -
-
- -
-

EUROPA {isPlanetSelected ? "- SELECTED" : ""}

-

Lorem ipsum...

-
- -
-
); diff --git a/app/layout.js b/app/layout.js index 87ee54a8..45f459aa 100644 --- a/app/layout.js +++ b/app/layout.js @@ -17,9 +17,8 @@ export const RootLayout = ({ children }) => { {children} - {/* TASK - React 1 week 1 */} - {/* Import and use the Footer component here */} - {/* Footer found in the ui/Footer.js folder */} + + ); diff --git a/components/destination/PlanetCard.js b/components/destination/PlanetCard.js new file mode 100644 index 00000000..64fcdcc9 --- /dev/null +++ b/components/destination/PlanetCard.js @@ -0,0 +1,29 @@ +import styles from "./destination.module.css"; + +const PlanetCard = ({ + name, + description, + thumbnail, + isSelected, + onAddOrRemovePlanet, +}) => { + return ( +
+ {name} +
+

+ {name} {isSelected ? "Selected" : ""} +

+

{description}

+
+ +
+ ); +}; + +export default PlanetCard; \ No newline at end of file diff --git a/components/destination/PlanetWishListItem.js b/components/destination/PlanetWishListItem.js new file mode 100644 index 00000000..200d9a26 --- /dev/null +++ b/components/destination/PlanetWishListItem.js @@ -0,0 +1,17 @@ +import styles from '@/components/destination/destination.module.css'; + +const PlanetWishlistItem = ({ + name, + onRemove, + thumbnail, + }) => { + return ( +
+ + {name.toUpperCase()} + +
+ ); + } + + export default PlanetWishlistItem; \ No newline at end of file diff --git a/components/ui/Footer.js b/components/ui/Footer.js index eed82876..0e886fb1 100644 --- a/components/ui/Footer.js +++ b/components/ui/Footer.js @@ -2,6 +2,8 @@ import { usePathname } from 'next/navigation'; import styles from './Footer.module.css'; +import Link from 'next/link' +import SocialMediaItem from "./SocialMediaItem"; export const Footer = () => { const path = usePathname().split('?')[0]; @@ -12,40 +14,46 @@ export const Footer = () => {

Explore the universe and beyond. Your journey to the stars starts here.

© 2024 Galactica. All rights reserved.

- {/* TASK - React 1 week 2 */} - {/* Create a new List for the Pages */} - {/* We need to use the component here */} - {/*
+ +

Pages

    -
    • - ... +
  • About us
    • +
  • Destination
    • +
  • Nasa collaboration
-
*/} - {/* 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 */} +

Follow us

diff --git a/components/ui/Navbar.js b/components/ui/Navbar.js index 3868afc5..38506b54 100644 --- a/components/ui/Navbar.js +++ b/components/ui/Navbar.js @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { usePathname } from 'next/navigation'; import Link from 'next/link' - +import NavItem from "./navItem"; import styles from './Navbar.module.css'; const navbarItems = [ @@ -32,24 +32,17 @@ export const Navbar = () => {