diff --git a/app/about_us/ourCrew.js b/app/about_us/ourCrew.js new file mode 100644 index 00000000..2ce8140b --- /dev/null +++ b/app/about_us/ourCrew.js @@ -0,0 +1,68 @@ +import styles from "./ourCrew.module.css"; // Adjust the path as necessary + +const OurCrew = () => { + return ( +
+

+ Meet the dedicated team behind our success. Each member brings unique + skills and passion to our mission. +

+
+
+ Crew Member 1 +

Sarah Vega

+

Captain

+

+ A former NASA astronaut with over 15 years of experience, Captain + Vega leads our missions with unparalleled expertise and a passion + for space exploration. +

+
+
+ Crew Member 2 +

Dr. Leo Redding

+

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

+
+
+ Crew Member 3 +

Hana Lee

+

Chief Engineer

+

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

+
+
+ Crew Member 4 +

Alex Santos

+

Mission Specialist

+

+ As a mission specialist, Alex’s job is to ensure that every aspect + of the journey runs smoothly. With a background in both science and + adventure tourism, Alex is the perfect guide for our space + travelers. +

+
+
+ Crew Member 5 +

Maya Patel

+

Crew Member

+

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

+
+ {/* Add more crew members as needed */} +
+
+ ); +}; + +export default OurCrew; diff --git a/app/about_us/ourCrew.module.css b/app/about_us/ourCrew.module.css new file mode 100644 index 00000000..979ff9dd --- /dev/null +++ b/app/about_us/ourCrew.module.css @@ -0,0 +1,62 @@ +.crewSection { + padding: 3rem 1.5rem; + background-color: #0d0d0d; + color: #767878; + text-align: center; +} + +.crewSection p { + max-width: 600px; + margin: 0 auto 2rem; + font-size: 1.1rem; + color: #ccc; +} + +.crewMembers { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 2rem; +} + +.crewMember { + background-color: #1a1a1a; + border-radius: 12px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); + max-width: 300px; + padding: 1.5rem; + text-align: left; + transition: transform 0.3s ease; +} + +.crewMember:hover { + transform: translateY(-5px); +} + +.crewMember img { + width: 120px; + height: 120px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 1rem; + display: block; + margin-left: auto; + margin-right: auto; +} +.crewMember h3 { + font-size: 1.2rem; + margin: 0.5rem 0 0.2rem; + color: #fff; +} + +.crewMember p { + font-size: 0.95rem; + color: #ddd; + margin: 0.3rem 0; +} + +.crewMember p:first-of-type { + font-weight: bold; + text-transform: uppercase; + color: #00bcd4; +} diff --git a/app/about_us/ourPartner.js b/app/about_us/ourPartner.js new file mode 100644 index 00000000..2dd648c3 --- /dev/null +++ b/app/about_us/ourPartner.js @@ -0,0 +1,36 @@ +import styles from "./ourPartner.module.css"; + +const OurPartners = () => { + const partners = [ + { name: "Alphabet", logo: "/business_partners/alphabet-logo.png" }, + { name: "Amazon", logo: "/business_partners/amazon_logo.png" }, + { name: "CBS", logo: "/business_partners/CBC_Logo_White.png" }, + { name: "Microsoft", logo: "/business_partners/Microsoft-Logo-white.png" }, + { name: "Nyu", logo: "/business_partners/nyu-logo.png" }, + { name: "Queens", logo: "/business_partners/QueensLogo_white.png" }, + { name: "Samsung", logo: "/business_partners/samsung-logo.png" }, + { name: "Sodexo", logo: "/business_partners/sodexo-logo.png" }, + ]; + + return ( +
+

+ We collaborate with some of the most respected names in the space and + technology industries. +

+
+ {partners.map((partner) => ( +
+ {partner.name} +
+ ))} +
+
+ ); +}; + +export default OurPartners; diff --git a/app/about_us/ourPartner.module.css b/app/about_us/ourPartner.module.css new file mode 100644 index 00000000..e9bf0dcd --- /dev/null +++ b/app/about_us/ourPartner.module.css @@ -0,0 +1,40 @@ +/* ourPartner.module.css */ + +.container { + padding: 4rem 2rem; + background-color: #0b0d17; + text-align: center; + color: white; +} + +.intro { + font-size: 1.25rem; + max-width: 600px; + margin: 0 auto 2rem; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 2rem; + align-items: center; + justify-items: center; +} + +.logoCard { + background-color: rgba(255, 255, 255, 0.05); + padding: 1rem; + border-radius: 12px; + transition: transform 0.3s ease; +} + +.logoCard:hover { + transform: scale(1.05); +} + +.logo { + max-width: 100px; + max-height: 60px; + object-fit: contain; + filter: brightness(0) invert(1); /* For white logos */ +} diff --git a/app/about_us/ourValues.js b/app/about_us/ourValues.js new file mode 100644 index 00000000..c73337fe --- /dev/null +++ b/app/about_us/ourValues.js @@ -0,0 +1,36 @@ +import styles from "./ourValues.module.css"; + +const OurValues = () => { + return ( +
+

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

+

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

+ +

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

+ +

+ 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; diff --git a/app/about_us/ourValues.module.css b/app/about_us/ourValues.module.css new file mode 100644 index 00000000..979ff9dd --- /dev/null +++ b/app/about_us/ourValues.module.css @@ -0,0 +1,62 @@ +.crewSection { + padding: 3rem 1.5rem; + background-color: #0d0d0d; + color: #767878; + text-align: center; +} + +.crewSection p { + max-width: 600px; + margin: 0 auto 2rem; + font-size: 1.1rem; + color: #ccc; +} + +.crewMembers { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 2rem; +} + +.crewMember { + background-color: #1a1a1a; + border-radius: 12px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); + max-width: 300px; + padding: 1.5rem; + text-align: left; + transition: transform 0.3s ease; +} + +.crewMember:hover { + transform: translateY(-5px); +} + +.crewMember img { + width: 120px; + height: 120px; + border-radius: 50%; + object-fit: cover; + margin-bottom: 1rem; + display: block; + margin-left: auto; + margin-right: auto; +} +.crewMember h3 { + font-size: 1.2rem; + margin: 0.5rem 0 0.2rem; + color: #fff; +} + +.crewMember p { + font-size: 0.95rem; + color: #ddd; + margin: 0.3rem 0; +} + +.crewMember p:first-of-type { + font-weight: bold; + text-transform: uppercase; + color: #00bcd4; +} diff --git a/app/about_us/page.js b/app/about_us/page.js index 880ec427..30754d93 100644 --- a/app/about_us/page.js +++ b/app/about_us/page.js @@ -1,11 +1,14 @@ -import styles from './page.module.css'; +import styles from "./page.module.css"; +import OurValues from "./ourValues"; +import OurCrew from "./ourCrew"; +import OurPartners from "./ourPartner"; // 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 = () => { +/*const OurValues = () => { // TASK - React 1 week 1 // Create the "Our Values" section // Use the descriptions provided in /app/about_us/README.md @@ -13,30 +16,25 @@ const OurValues = () => { return (

ADD OUR VALUES HERE

); -}; +};*/ -const OurCrew = () => { +/*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

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

- ); -} - + return

ADD OUR Partners HERE

; +};*/ export const Crew = () => { return ( @@ -45,18 +43,22 @@ export const Crew = () => {

About us

Our Values

- +

The crew

- + +
+
+

The Partners

+
- {/* TASK - React 1 week 1 */} - {/* Add in the "OurPartners" component here */} + {/* TASK - React 1 week 1 */} + {/* Add in the "OurPartners" component here */} ); -} +}; export default Crew; 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 */} +