diff --git a/package-lock.json b/package-lock.json index 86cfe0d..902b810 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "astro": "^2.7.4", + "lucide-react": "^0.454.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-type-animation": "^3.2.0", @@ -2923,6 +2924,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.454.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz", + "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/magic-string": { "version": "0.27.0", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz", diff --git a/package.json b/package.json index aee1d26..31f25cc 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "astro": "^2.7.4", + "lucide-react": "^0.454.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-type-animation": "^3.2.0", diff --git a/public/program/Learning1.png b/public/program/Learning1.png new file mode 100644 index 0000000..3723fbd Binary files /dev/null and b/public/program/Learning1.png differ diff --git a/public/program/Learning1.png:Zone.Identifier b/public/program/Learning1.png:Zone.Identifier new file mode 100644 index 0000000..bbbaf19 --- /dev/null +++ b/public/program/Learning1.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/public/program/Learning2.png b/public/program/Learning2.png new file mode 100644 index 0000000..c977637 Binary files /dev/null and b/public/program/Learning2.png differ diff --git a/public/program/Learning2.png:Zone.Identifier b/public/program/Learning2.png:Zone.Identifier new file mode 100644 index 0000000..bbbaf19 --- /dev/null +++ b/public/program/Learning2.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/public/program/Learning3.png b/public/program/Learning3.png new file mode 100644 index 0000000..e8931f9 Binary files /dev/null and b/public/program/Learning3.png differ diff --git a/public/program/Learning3.png:Zone.Identifier b/public/program/Learning3.png:Zone.Identifier new file mode 100644 index 0000000..bbbaf19 --- /dev/null +++ b/public/program/Learning3.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/public/program/LearningHeader.png b/public/program/LearningHeader.png new file mode 100644 index 0000000..5156764 Binary files /dev/null and b/public/program/LearningHeader.png differ diff --git a/public/program/LearningHeader.png:Zone.Identifier b/public/program/LearningHeader.png:Zone.Identifier new file mode 100644 index 0000000..bbbaf19 --- /dev/null +++ b/public/program/LearningHeader.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index be1c588..31d7161 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -28,9 +28,9 @@ export default function Hero() {

We are a one-stop shop for

- Product
+ Product
- Management + Management

diff --git a/src/components/program/Apply.jsx b/src/components/program/Apply.jsx new file mode 100644 index 0000000..a517d0c --- /dev/null +++ b/src/components/program/Apply.jsx @@ -0,0 +1,14 @@ +import { MoveRight } from "lucide-react" + +export default function Apply() { + return ( +
+

Ready to begin learning?

+

Learn more about our programs and cohort dates.

+
+ + +
+
+ ) +} diff --git a/src/components/program/Learning.jsx b/src/components/program/Learning.jsx new file mode 100644 index 0000000..60b7247 --- /dev/null +++ b/src/components/program/Learning.jsx @@ -0,0 +1,45 @@ +import { MoveRight } from "lucide-react" + +export default function Learning() { + return ( +
+ + +
+
+ +
+
+
Gain Real-World Experience
+

+ The program is free, and will be made of virtual meetings, case studies, guest lectures, and even a small desing-your-own product pitch at the end of it all. +

+ +
+
+
+
+
Learn by doing, not by watching.
+

+ The program is free, and will be made of virtual meetings, case studies, guest lectures, and even a small desing-your-own product pitch at the end of it all. +

+
+
+ +
+
+
+
+ +
+
+
Gain Real-World Experience
+

+ The program is free, and will be made of virtual meetings, case studies, guest lectures, and even a small desing-your-own product pitch at the end of it all. +

+ +
+
+
+ ) +} diff --git a/src/components/program/alumni.jsx b/src/components/program/alumni.jsx new file mode 100644 index 0000000..f1cec73 --- /dev/null +++ b/src/components/program/alumni.jsx @@ -0,0 +1,40 @@ +export default function Alumni() { + const alumniWisdom = [ + { profileImg: "", name: "Christine L.", position: "Product Manager at Microsoft", insight: "During my journey in Product101, I’ve learned so many valuable lessons, and never have I ever felt as supported." }, + { profileImg: "", name: "Christine L.", position: "Product Manager at Microsoft", insight: "During my journey in Product101, I’ve learned so many valuable lessons, and never have I ever felt as supported." }, + { profileImg: "", name: "Christine L.", position: "Product Manager at Microsoft", insight: "During my journey in Product101, I’ve learned so many valuable lessons, and never have I ever felt as supported." }, + { profileImg: "", name: "Christine L.", position: "Product Manager at Microsoft", insight: "During my journey in Product101, I’ve learned so many valuable lessons, and never have I ever felt as supported." }, + { profileImg: "", name: "Christine L.", position: "Product Manager at Microsoft", insight: "During my journey in Product101, I’ve learned so many valuable lessons, and never have I ever felt as supported." }, + { profileImg: "", name: "Christine L.", position: "Product Manager at Microsoft", insight: "During my journey in Product101, I’ve learned so many valuable lessons, and never have I ever felt as supported." }, + ] + return ( +
+

What our past Alumni have to say

+
+ {alumniWisdom.map((alumni) => ( +
+ {/* Profile Image */} + {""} + + {/* Name and Position */} +
+

{alumni.name}

+

{alumni.position}

+
+ + {/* Testimonial Text */} +
+

“

+

{alumni.insight}

+

”

+
+
+ ))} +
+
+ ) +} diff --git a/src/components/program/newProgramHero.jsx b/src/components/program/newProgramHero.jsx new file mode 100644 index 0000000..783b76b --- /dev/null +++ b/src/components/program/newProgramHero.jsx @@ -0,0 +1,27 @@ +import { MoveRight } from "lucide-react" + +export default function newHero() { + return ( +
+
+
+

Learn product management while making a real difference

+

A fully remote product fellowship program in the Fall where students in undergraduate programs can work with startups to gain real world experience.

+ {/* some warning thing */} +
+ + +
+
+ +
+ +
+
Collaborate with product managers from
+
+ +
+
+
+ ) +} diff --git a/src/layouts/base.css b/src/layouts/base.css index c4179d3..291d066 100644 --- a/src/layouts/base.css +++ b/src/layouts/base.css @@ -3,62 +3,124 @@ @tailwind utilities; @layer components { - .header1 { - @apply text-5xl font-lexend font-bold; - line-height: 54px !important; - } - .header4 { - @apply text-2xl font-lexend font-bold; - } - .body1 { - @apply text-lg font-inter font-normal; - } + + + .header4 { + @apply text-2xl font-lexend font-bold; + } + + .body1 { + @apply text-lg font-inter font-normal; + } +} + +*, +html, +body { + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 16px } .border-gradient { - background: linear-gradient(92.49deg, rgba(6, 183, 167, 0.6) 1.09%, rgba(140, 198, 63, 0.6) 25.34%, rgba(243, 198, 116, 0.6) 73.34%, rgba(252, 193, 168, 0.6) 99.41%); + background: linear-gradient(92.49deg, rgba(6, 183, 167, 0.6) 1.09%, rgba(140, 198, 63, 0.6) 25.34%, rgba(243, 198, 116, 0.6) 73.34%, rgba(252, 193, 168, 0.6) 99.41%); } .box-gradient { - /* opacity: 0.15; */ - background: linear-gradient(92deg, rgba(6, 183, 167, 0.09) 1.09%, rgba(140, 198, 63, 0.09) 25.34%, rgba(243, 198, 116, 0.09) 73.34%, rgba(252, 193, 168, 0.09) 99.41%); + /* opacity: 0.15; */ + background: linear-gradient(92deg, rgba(6, 183, 167, 0.09) 1.09%, rgba(140, 198, 63, 0.09) 25.34%, rgba(243, 198, 116, 0.09) 73.34%, rgba(252, 193, 168, 0.09) 99.41%); } .group-2422 { - width: 180.107px; - height: 163.549px; - transform: rotate(8.149deg); - flex-shrink: 0; + width: 180.107px; + height: 163.549px; + transform: rotate(8.149deg); + flex-shrink: 0; } .rect-grad { - background: var(--Gradient, linear-gradient(272deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%)); + background: var(--Gradient, linear-gradient(272deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%)); } .rect-grad1 { - background: var(--Gradient, linear-gradient(2deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%)); + background: var(--Gradient, linear-gradient(2deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%)); } .swiper-pagination { - position: static !important; - margin-top: 20px; - margin-bottom: 50px; + position: static !important; + margin-top: 20px; + margin-bottom: 50px; } .comm-hero-grad { - opacity: 0.15; - background: linear-gradient(92deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%); + opacity: 0.15; + background: linear-gradient(92deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%); } .contact-hero-grad { - opacity: 0.15; - background: linear-gradient(92deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%); + opacity: 0.15; + background: linear-gradient(92deg, rgba(6, 183, 167, 0.60) 1.09%, rgba(140, 198, 63, 0.60) 25.34%, rgba(243, 198, 116, 0.60) 73.34%, rgba(252, 193, 168, 0.60) 99.41%); } .disabled { - pointer-events: none; - cursor: default; + pointer-events: none; + cursor: default; } + .op-one { - opacity: 1 !important; -} \ No newline at end of file + opacity: 1 !important; +} + +/* Typography Scale for HTML Headers */ + + + +h2 { + font-size: 3rem; + /* 48px */ + line-height: 3.375rem; + /* 54px */ + font-weight: bold; +} + +h3 { + font-size: 2.25rem; + /* 36px */ + line-height: 2.75rem; + /* 44px */ + font-weight: bold; +} + +h4 { + font-size: 2rem; + /* 32px */ + line-height: 2.25rem; + /* 36px */ + font-weight: bold; +} + +h5 { + font-size: 1.5rem; + /* 24px */ + line-height: 2rem; + /* 32px */ + font-weight: bold; +} + +h6 { + font-size: 1.125rem; + /* 18px */ + line-height: 1.5rem; + /* 24px */ + font-weight: 600; + /* Semibold */ +} + +.button-label { + font-size: 0.875rem; + /* 14px */ + line-height: 1.25rem; + /* 20px */ + font-weight: normal; +} diff --git a/src/pages/program.astro b/src/pages/program.astro index 836af2c..c62ae7e 100644 --- a/src/pages/program.astro +++ b/src/pages/program.astro @@ -4,13 +4,20 @@ import Header from "../components/Header"; import ResourcesHero from "../components/resources/ResourcesHero"; import NewFooter from "../components/NewFooter"; import ProgramHero from "../components/program/ProgramHero"; - +import NewHero from "../components/program/newProgramHero.jsx" +import Learning from "../components/program/Learning.jsx" +import Alumni from "../components/program/alumni.jsx" +import Apply from "../components/program/Apply.jsx" ---
- + + + + + - \ No newline at end of file +