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/layout.js b/app/layout.js index 87ee54a8..4397ed02 100644 --- a/app/layout.js +++ b/app/layout.js @@ -20,9 +20,10 @@ export const RootLayout = ({ children }) => { {/* TASK - React 1 week 1 */} {/* Import and use the Footer component here */} {/* Footer found in the ui/Footer.js folder */} +