diff --git a/app/about_us/OurCrew.js b/app/about_us/OurCrew.js new file mode 100644 index 00000000..c85ea17c --- /dev/null +++ b/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 ( +
+

+ Meet our highly skilled and passionate space enthusiasts who make it all + possible. +

+
+ {crewMembers.map((member, index) => ( +
+ {member.name} +

+ {member.name} +

+

+ {member.role} +

+
+ ))} +
+
+ ); +}; + +export default OurCrew; diff --git a/app/about_us/OurPartners.js b/app/about_us/OurPartners.js new file mode 100644 index 00000000..83abcebe --- /dev/null +++ b/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 ( +
+

+ We collaborate with progressive, ambitious brands we believe in. +

+
+ {partners.map((partner, index) => ( +
+ {partner.name} +
+ ))} +
+
+ ); +}; + +export default OurPartners; diff --git a/app/about_us/OurValues.js b/app/about_us/OurValues.js new file mode 100644 index 00000000..03390934 --- /dev/null +++ b/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 ( +
+
+ {values.map(value => ( +
+

+ {value.id} +

+

+ {value.title} +

+

+ {value.description} +

+
+ ))} +
+
+ ); +}; + +export default OurValues; diff --git a/app/about_us/page.js b/app/about_us/page.js index 880ec427..08f636b7 100644 --- a/app/about_us/page.js +++ b/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 ( -

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 = () => { return ( @@ -45,18 +9,21 @@ export const Crew = () => {

About us

Our Values

- +
+
-

The crew

- +

Our crew

+
- {/* TASK - React 1 week 1 */} - {/* Add in the "OurPartners" component here */} +
+

Our Partners

+ +
); -} +}; -export default Crew; +export default Crew; \ No newline at end of file diff --git a/app/destination/PlanetWishlistItem.js b/app/destination/PlanetWishlistItem.js new file mode 100644 index 00000000..e75515b3 --- /dev/null +++ b/app/destination/PlanetWishlistItem.js @@ -0,0 +1,17 @@ +import styles from '@/components/destination/destination.module.css'; + +const PlanetWishlistItem = ({ name, onRemove, thumbnail }) => { + return ( +
+ {name} + {name.toUpperCase()} + +
+ ); +}; + +export default PlanetWishlistItem; \ No newline at end of file diff --git a/app/destination/page.js b/app/destination/page.js index 006037be..c90366e6 100644 --- a/app/destination/page.js +++ b/app/destination/page.js @@ -1,40 +1,32 @@ -"use client"; +'use client' import { useState } from 'react'; - import styles from '@/components/destination/destination.module.css'; -import { AddWishlistItem } from '@/components/destination/AddWishlistItem'; - -// TASK - React 1 week 2 -// Move this to its own file -const PlanetWishlistItem = ({ - name, - onRemove, - thumbnail, -}) => { - return ( -
- - {name.toUpperCase()} - -
- ); -} +import PlanetWishlistItem from './PlanetWishlistItem'; +const planetDescriptions = { + Europa: + 'Europa, one of Jupiter’s moons, is an icy world with a hidden ocean beneath its surface. This mysterious moon is a prime candidate for the search for extraterrestrial life, making it a thrilling destination for space explorers.', + Mars: 'Mars, the Red Planet, is a barren yet fascinating world with vast deserts, towering volcanoes, and the deepest canyon in the solar system. As humanity’s next frontier, Mars invites us to dream of colonization and the possibilities of life beyond Earth.', + Moon: "Our closest celestial neighbor, the Moon, is a silent witness to Earth's history. With its stunning craters and desolate landscapes, the Moon offers a unique glimpse into space exploration's past and future, making it a perfect destination for lunar adventurers.", + Titan: + "Titan, Saturn's largest moon, is a world of dense atmosphere and liquid methane lakes. This enigmatic moon is shrouded in a thick orange haze, concealing a landscape that is both alien and strangely familiar, beckoning explorers to uncover its secrets.", +}; -export const Destinations = () => { - const [selectedPlanets, onAddPlanet] = useState([]); +const Description = () => { + const [selectedPlanets, setSelectedPlanets] = useState([]); - let isPlanetSelected = false; - let numberOfPlanets = 0; + const onAddOrRemovePlanet = name => { + setSelectedPlanets(prev => { + if (prev.includes(name)) { + return prev.filter(planet => planet !== name); + } else { + return [...prev, name]; + } + }); + }; - 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) - console.log(`You seleceted the following planet: ${name}, with the index of ${index}`); - } + const numberOfPlanets = selectedPlanets.length; return (
@@ -42,73 +34,50 @@ export const Destinations = () => {

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

- List coming soon after lesson 3! - - {/* STOP! - this is for week 3!*/} - {/* TASK - React 1 week 3 */} - {/* Import the AddWishlistItem react component */} - {/* */} - {/* TASK - React 1 week 3 */} - {/* Convert the list, so it is using selectedPlanets.map() to display the items */} - {/* Implement the "REMOVE" function */} - {/* uncomment the following code snippet: */} - {/* -

Your current wishlist

+ {numberOfPlanets === 0 ? ( +

No planets in wishlist :(

+ ) : ( +

You have {numberOfPlanets} in your wishlist

+ )}
- removeFromWishlist('europa')} - thumbnail="/destination/image-europa.png" - /> - removeFromWishlist('europa')} - thumbnail="/destination/image-europa.png" - /> -
*/} + {selectedPlanets.map(planet => ( + onAddOrRemovePlanet(planet)} + thumbnail={`/destination/image-${planet.toLowerCase()}.png`} + /> + ))} +

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

+ {['Europa', 'Moon', 'Mars', 'Titan'].map((planet, index) => ( +
+ {planet} +
+

+ {planet}{' '} + {selectedPlanets.includes(planet) ? '- SELECTED' : ''} +

+

{planetDescriptions[planet]}

+
+
- -
+ ))}
); -} +}; -export default Destinations; +export default Description; diff --git a/app/globals.css b/app/globals.css index de0f6718..4872b800 100644 --- a/app/globals.css +++ b/app/globals.css @@ -117,7 +117,6 @@ button { text-transform: uppercase; padding: var(--spacing-08); border: none; - background-color: white; font-weight: 600; letter-spacing: 2px; } @@ -180,6 +179,7 @@ button { min-width: 100px; line-height: 100px; cursor: pointer; + color:#000; background-color: white; border-radius: 50%; font-size: 8px; diff --git a/app/layout.js b/app/layout.js index 87ee54a8..4c260d41 100644 --- a/app/layout.js +++ b/app/layout.js @@ -17,9 +17,7 @@ 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 */} +