diff --git a/app/about_us/Crew.jsx b/app/about_us/Crew.jsx new file mode 100644 index 00000000..58383f7a --- /dev/null +++ b/app/about_us/Crew.jsx @@ -0,0 +1,18 @@ +import OurCrew from "./OurCrew"; +import OurValues from "./OurValues"; +import styles from "./about.module.css"; +import OurPartners from "./OurPartners"; +import OurMission from "./OurMission"; + +export const Crew = () => { + return ( +
+ + + + +
+ ); +}; + +export default Crew; diff --git a/app/about_us/OurCrew.jsx b/app/about_us/OurCrew.jsx new file mode 100644 index 00000000..fa586ba0 --- /dev/null +++ b/app/about_us/OurCrew.jsx @@ -0,0 +1,42 @@ +"use client"; + +import aboutData from "../../data/about_data.json"; +import Image from "next/image"; +import styles from "./about.module.css"; + +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 ( +
+
+

Our Crew

+

{aboutData.crewDescription}

+
+ {aboutData.crew.map((member) => ( +
+ {member.name} +

{member.name}

+

+ {member.role} +

+

{member.description}

+
+ ))} +
+
+
+ ); +}; + +export default OurCrew; diff --git a/app/about_us/OurMission.jsx b/app/about_us/OurMission.jsx new file mode 100644 index 00000000..423987f4 --- /dev/null +++ b/app/about_us/OurMission.jsx @@ -0,0 +1,15 @@ +import aboutData from "../../data/about_data.json"; +import styles from "./about.module.css"; + +export default function OurMission() { + return ( +
+
+

{aboutData.mission.title}

+

+ {aboutData.mission.description} +

+
+
+ ); +} diff --git a/app/about_us/OurPartners.jsx b/app/about_us/OurPartners.jsx new file mode 100644 index 00000000..7018935b --- /dev/null +++ b/app/about_us/OurPartners.jsx @@ -0,0 +1,28 @@ +import styles from "./about.module.css"; +import aboutData from "../../data/about_data.json"; +import Image from "next/image"; + +const OurPartners = () => { + return ( +
+
+

Our Partners

+

{aboutData.partnerIntro}

+
+ {aboutData.partners.map((partner) => ( +
+ {partner.name} +
+ ))} +
+
+
+ ); +}; + +export default OurPartners; diff --git a/app/about_us/OurValues.jsx b/app/about_us/OurValues.jsx new file mode 100644 index 00000000..9aea4cb0 --- /dev/null +++ b/app/about_us/OurValues.jsx @@ -0,0 +1,29 @@ +import aboutData from "../../data/about_data.json"; +import styles from "./about.module.css"; + +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 ( +
+
+

Our Values

+
+ {aboutData.values.map((value, index) => ( +
+ + {String(index + 1).padStart(2, "0")} + +

{value.title}

+

{value.description}

+
+ ))} +
+
+
+ ); +}; + +export default OurValues; diff --git a/app/about_us/about.module.css b/app/about_us/about.module.css new file mode 100644 index 00000000..5275923c --- /dev/null +++ b/app/about_us/about.module.css @@ -0,0 +1,293 @@ +.app { + background-color: black; +} + +.about { + padding-top: 4em; + padding-left: 2em; + font-family: "Open Sans", sans-serif; + font-weight: 100; + text-transform: uppercase; +} + +.section { + margin-bottom: 10px; +} + +/* Mission Section */ +.mission { + padding: 40px; + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.missionContainer { + max-width: 1200px; + height: 300px; + box-sizing: border-box; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #111; +} + +.mission h2 { + font-size: 1.2rem; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 0.05em; + font-family: "Poppins", sans-serif; + align-self: flex-start; + margin-bottom: 2em; +} + +.missionDescription { + font-size: 1.2rem; + font-weight: 200; + line-height: 1.6; + color: #fff; + opacity: 0.7; + font-family: "Poppins", sans-serif; +} + +/* Values Section */ +.values { + padding: 40px; + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.valuesContainer { + max-width: 1200px; + height: 800px; + box-sizing: border-box; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #111; +} + +.values h2 { + font-size: 1.2rem; + font-weight: 200; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 10px; + font-family: "Poppins", sans-serif; + align-self: flex-start; +} + +.valuesGrid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + margin: auto; + font-family: "Open Sans", sans-serif; +} + +.valueCard { + background: #111; + padding: 30px; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.valueNumber { + font-size: 2.8rem; + font-weight: 550; + font-family: "Open Sans", sans-serif; + letter-spacing: 0.02rem; + color: white; + margin-bottom: 10px; +} + +.valueTitle { + font-size: 1.3rem; + font-weight: 530; + margin-bottom: 1em; + letter-spacing: 0.05rem; +} + +.valueDescription { + font-size: 0.9rem; + color: #ddd; + font-family: "Nunito", sans-serif; + letter-spacing: 0.05rem; + line-height: 1.2rem; +} + +/* Our Crew Section */ + +.ourCrew { + padding: 40px; + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.ourCrewContainer { + max-width: 1200px; + height: 800px; + box-sizing: border-box; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.ourCrew h2 { + font-size: 1.2rem; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 1em; + font-family: "Poppins", sans-serif; + align-self: flex-start; +} + +.crewDescription { + font-size: 1rem; + align-self: flex-start; + opacity: 0.8; + margin-bottom: 2em; + margin-top: 1em; +} + +.teamGrid { + display: grid; + grid-template-columns: repeat(5, 1fr); + margin: auto; + gap: 0.8em; + justify-content: center; +} + +.teamMember { + text-align: left; + background: #222; + padding: 20px; +} + +.teamMember img { + width: 100%; + height: auto; +} + +.teamMember h3 { + font-size: 1rem; + font-weight: 400; + margin-top: 10px; +} + +.teamMemberRole { + font-size: 0.8rem; + font-weight: 200; +} + +.memberDescription { + font-size: 0.8rem; + font-weight: 200; +} + +/* Partners Section */ +.partners { + background-color: black; + padding: 60px 40px; + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.partnersContainer { + max-width: 1200px; + height: 800px; + box-sizing: border-box; + padding: 40px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2em; +} + +.partners h2 { + font-size: 1.2rem; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 10px; + font-family: "Poppins", sans-serif; + align-self: flex-start; +} + +.partnerIntro { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 50px; + line-height: 1.6; + color: #fff; + opacity: 0.9; + font-family: "Poppins", sans-serif; +} + +.partnersGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px 60px; + justify-items: center; + align-items: center; + width: 100%; +} + +.partnerLogo { + display: flex; + align-items: center; + justify-content: center; +} + +.partnerLogo img { + max-width: 100%; + height: auto; +} + +@media (max-width: 768px) { + .valuesGrid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 1200px) { + .teamGrid { + grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */ + } +} + +@media (max-width: 900px) { + .teamGrid { + grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */ + } +} + +@media (max-width: 600px) { + .teamGrid { + grid-template-columns: 1fr; /* Stack in single column on mobile */ + } +} diff --git a/app/about_us/page.js b/app/about_us/page.js index 880ec427..1ee1fd81 100644 --- a/app/about_us/page.js +++ b/app/about_us/page.js @@ -1,62 +1,15 @@ -import styles from './page.module.css'; +"use client"; -// 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 +import Crew from "./Crew"; +import styles from "./about.module.css"; -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 +const About = () => { 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

- ); -} - - -export const Crew = () => { - return ( -
-
-

About us

-
-

Our Values

- -
-
-

The crew

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

About us

+
); -} +}; -export default Crew; +export default About; diff --git a/app/about_us/page.module.css b/app/about_us/page.module.css deleted file mode 100644 index 8cd08626..00000000 --- a/app/about_us/page.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.app { - background-color: black; - width: 100vw; - height: 100vh; -} diff --git a/app/destination/page.js b/app/destination/page.js index 006037be..2d94b487 100644 --- a/app/destination/page.js +++ b/app/destination/page.js @@ -1,40 +1,28 @@ "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 { useState } from "react"; +import styles from "@/components/destination/destination.module.css"; +import { AddWishlistItem } from "@/components/destination/AddWishlistItem"; +import planetData from "../../data/planet_data.json"; +import PlanetCard from "../../components/destination/PlanetCard"; +import PlanetWishlistItem from "../../components/destination/PlanetWishlistItem"; export const Destinations = () => { - const [selectedPlanets, onAddPlanet] = useState([]); - - let isPlanetSelected = false; - let numberOfPlanets = 0; + const [planets, setPlanets] = useState(planetData); + const selectedPlanets = planets.filter((planet) => planet.isSelected); + const numberOfPlanets = selectedPlanets.length; - 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 onAddOrRemovePlanet = (name) => { + setPlanets((prevPlanets) => + prevPlanets.map((planet) => + planet.name === name + ? { ...planet, isSelected: !planet.isSelected } + : planet + ) + ); + console.log(`You seleceted the following planet: ${name}`); + }; return (
@@ -42,13 +30,26 @@ 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

+ {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 */} {/* Import the AddWishlistItem react component */} @@ -72,43 +73,9 @@ 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...

-
- -
-
); -} +}; export default Destinations; diff --git a/app/globals.css b/app/globals.css index de0f6718..4243a796 100644 --- a/app/globals.css +++ b/app/globals.css @@ -87,7 +87,6 @@ body { overflow-x: hidden; } - body { color: rgb(var(--foreground-rgb)); background: linear-gradient( @@ -103,12 +102,19 @@ a { text-decoration: none; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-block-end: var(--spacing-08); color: var(--primary-text-color); } -p, b, i { +p, +b, +i { margin-block-end: var(--spacing-08); } @@ -118,8 +124,15 @@ button { padding: var(--spacing-08); border: none; background-color: white; - font-weight: 600; - letter-spacing: 2px; + color: rgb(77, 77, 77); + font-weight: 700; + letter-spacing: 1px; + border-radius: 5px; +} + +button:hover { + background-color: rgb(145, 99, 99); + color: white; } @media (prefers-color-scheme: dark) { @@ -135,7 +148,6 @@ button { color: #fff; } - .card { position: relative; padding: var(--spacing-12); @@ -181,6 +193,7 @@ button { line-height: 100px; cursor: pointer; background-color: white; + color: rgb(77, 77, 77); border-radius: 50%; font-size: 8px; font-weight: 800; @@ -188,8 +201,9 @@ button { } .fullBGpicture { - /* background: url('/destination/background-destination-desktop.jpg') no-repeat; */ - /* background-color: #000; */ + background: url("/destination/background-destination-desktop.jpg") no-repeat; + background-color: #000; + background-size: cover; top: 0; bottom: 0; left: 0; @@ -200,7 +214,7 @@ button { .fullBGpicture::before { content: ""; - background: url('/destination/background-destination-desktop.jpg') no-repeat; + background: url("/destination/background-destination-desktop.jpg") no-repeat; background-color: #000; top: 0; bottom: 0; @@ -214,4 +228,4 @@ button { .fullBGpicture > main { overflow: auto; -} \ No newline at end of file +} diff --git a/app/layout.js b/app/layout.js index 87ee54a8..aa65974c 100644 --- a/app/layout.js +++ b/app/layout.js @@ -17,12 +17,10 @@ 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 */} +