Skip to content

Commit

Permalink
Merge pull request #70 from PMReadyOfficial/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
samanthap88 authored Nov 11, 2024
2 parents fb55d2f + 217451c commit 5684e1e
Show file tree
Hide file tree
Showing 17 changed files with 253 additions and 35 deletions.
10 changes: 10 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Binary file added public/program/Learning1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/program/Learning1.png:Zone.Identifier
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/
Binary file added public/program/Learning2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/program/Learning2.png:Zone.Identifier
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/
Binary file added public/program/Learning3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/program/Learning3.png:Zone.Identifier
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/
Binary file added public/program/LearningHeader.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/program/LearningHeader.png:Zone.Identifier
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[ZoneTransfer]
ZoneId=3
HostUrl=https://www.figma.com/
4 changes: 2 additions & 2 deletions src/components/Hero.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ export default function Hero() {
<div className="ml-3 min-[400px]:ml-10 lg:ml-32 mt-10 lg:mt-20 font-lexend">
<h3 className="text-lg lg:text-2xl font-bold text-[#9C9AB7]">We are a one-stop shop for</h3>
<h1 className="text-5xl lg:text-7xl font-bold text-[#24223C] pb-3">
<span>Product</span> <br />
<span className="text-5xl lg:text-7xl">Product</span> <br />

<span className="block text-[#FA9D74] pt-2">Management</span>
<span className="text-5xl lg:text-7xl block text-[#FA9D74] pt-2">Management</span>
</h1>
<div className="CTA flex gap-3 mt-10 lg:text-2xl font-semibold">
<button className="px-10 py-3 bg-[#023849] border-4 text-[#FEFDFF] border-[#023849] rounded-[100px]">Join us on Discord</button>
Expand Down
14 changes: 14 additions & 0 deletions src/components/program/Apply.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { MoveRight } from "lucide-react"

export default function Apply() {
return (
<div className="flex flex-col bg-[#24223C] p-20">
<h4 className="text-white text-center">Ready to <span className="text-[#FA9D74] font-bold text-[2rem]">begin learning</span>?</h4>
<p className="text-white text-center my-8 text-base">Learn more about our programs and cohort dates.</p>
<div className="flex flex-row justify-center">
<button type="" className="bg-[#FA9D74] rounded-full m-2 px-4 py-2">Apply Now</button>
<button type="" className="flex flex-row border-2 border-white text-white rounded-full m-2 px-4 py-2">Learn More<MoveRight className="ml-2" /></button>
</div>
</div>
)
}
45 changes: 45 additions & 0 deletions src/components/program/Learning.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { MoveRight } from "lucide-react"

export default function Learning() {
return (
<div className="relative items-center justify-center py-10">
<img src="Graphic_Leaf.png" alt="" className="absolute bottom-[200px] -left-0 scale-50 -translate-x-14 lg:translate-x-0 lg:scale-100 -z-10" />
<img src="Graphic_Leaf.png" alt="" className="absolute top-[250px] scale-x-[-1] right-0 translate-x-14 lg:translate-x-0 -z-10" />
<div className="flex flex-col lg:flex-row gap-5 w-full items-center lg:justify-center">
<div className="max-w-md h-full bg-no-repeat bg-cover">
<img src="program/Learning1.png" alt="" className="w-full rounded-tl-lg rounded-tr-lg rounded-br-lg" />
</div>
<div className="text-start w-full max-w-lg sm:w-2/5 pt-10">
<h5 className="font-lexend text-[color:var(--color-teal-500,#023849)] text-[32px] sm:text-[24px] not-italic font-bold leading-9">Gain Real-World Experience</h5>
<p className="font-inter text-[color:var(--color-dark-600,#24223C)] text-lg not-italic font-normal leading-7 my-5">
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.
</p>
<button className="flex flex-row align-baseline px-8 py-2 border-2 text-[#FA9D74] border-[#FA9D74] rounded-full font-bold">Learn More<MoveRight className="ml-2" /></button>
</div>
</div>
<div className="flex flex-col lg:flex-row gap-5 w-full items-center lg:justify-center mt-[160px]">
<div className="text-start w-full max-w-lg sm:w-2/5 pt-10">
<h5 className="font-lexend text-[color:var(--color-teal-500,#023849)] text-[32px] sm:text-[24px] not-italic font-bold leading-9">Learn by doing, not by watching.</h5>
<p className="font-inter text-[color:var(--color-dark-600,#24223C)] text-lg not-italic font-normal leading-7 my-5">
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.
</p>
</div>
<div className="max-w-md h-full bg-no-repeat bg-cover">
<img src="program/Learning2.png" alt="" className="w-full rounded-[0_0_80px_0]" />
</div>
</div>
<div className="flex flex-col lg:flex-row gap-5 w-full items-center lg:justify-center mt-[160px]">
<div className="max-w-md h-full bg-no-repeat bg-cover">
<img src="program/Learning3.png" alt="" className="w-full rounded-tl-lg rounded-tr-lg rounded-br-lg" />
</div>
<div className="text-start w-full max-w-lg sm:w-2/5 pt-10">
<h5 className="font-lexend text-[color:var(--color-teal-500,#023849)] text-[32px] sm:text-[24px] not-italic font-bold leading-9">Gain Real-World Experience</h5>
<p className="font-inter text-[color:var(--color-dark-600,#24223C)] text-lg not-italic font-normal leading-7 my-5">
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.
</p>
<button className="flex flex-row px-8 py-2 border-2 text-[#FA9D74] border-[#FA9D74] rounded-full font-bold">Join Discord<MoveRight className="ml-2" /></button>
</div>
</div>
</div>
)
}
40 changes: 40 additions & 0 deletions src/components/program/alumni.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="flex flex-col justify-center bg-[#FFF9F6] p-20">
<h3 className="text-center">What our past Alumni have to say</h3>
<div className="flex flex-row flex-wrap justify-evenly mt-5">
{alumniWisdom.map((alumni) => (
<div className="max-w-sm bg-white rounded-lg shadow-lg p-12 text-center flex flex-col items-center space-y-4 m-4">
{/* Profile Image */}
<img
src="" /* Replace with actual image URL */
alt={""}
className="w-36 h-36 rounded-full object-cover bg-gray-300"
/>

{/* Name and Position */}
<div className="text-center">
<p className="text-lg font-semibold">{alumni.name}</p>
<p className="text-sm text-gray-400">{alumni.position}</p>
</div>

{/* Testimonial Text */}
<div className="relative text-gray-700 text-base italic">
<p className="absolute -left-2 -top-2 text-teal-500 text-2xl">&ldquo;</p>
<p> {alumni.insight}</p >
<p className="absolute -right-2 -top-2 text-teal-500 text-2xl">&rdquo;</p>
</div>
</div>
))}
</div>
</div>
)
}
27 changes: 27 additions & 0 deletions src/components/program/newProgramHero.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { MoveRight } from "lucide-react"

export default function newHero() {
return (
<div className="flex flex-col bg-[#FFF9F6] py-20">
<div className="flex flex-row justify-between pl-20">
<div className="relative w-1/2">
<h2>Learn product management while making a <span className="text-[#FA9D74] font-bold text-5xl">real difference</span></h2>
<p className="mt-[5%] text-xl w-3/4">A fully remote product fellowship program in the Fall where students in undergraduate programs can work with startups to gain real world experience.</p>
{/* some warning thing */}
<div className="absolute flex justify-between w-1/2 mb-4 bottom-0">
<button className="flex flex-row px-8 py-2 border-[1px] text-[#FA9D74] font-bold border-[#FA9D74] rounded-full">Learn More<MoveRight className="ml-2" /></button>
<button className="px-8 py-2 text-white font-bold bg-[#0D1B2A] rounded-full ">Apply Now</button>
</div>
</div>
<img src="program/LearningHeader.png" alt="" className="w-[45%] rounded-tl-lg rounded-bl-lg" />
</div>

<div className="flex flex-col w-full justify-center mt-5 ">
<h6 className="mr-[2rem] w-full text-center">Collaborate with product managers from</h6>
<div className="flex flex-row w-full justify-center mt-5">
<img src="microsoft.png" alt="" className="w-40" />
</div>
</div>
</div>
)
}
122 changes: 92 additions & 30 deletions src/layouts/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
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;
}
13 changes: 10 additions & 3 deletions src/pages/program.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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"
---


<Layout title="PMReady">

<Header client:load />
<ProgramHero/>
<!--<ProgramHero/>-->
<NewHero/>
<Learning/>
<Alumni/>
<Apply/>
<NewFooter />
</Layout>
</Layout>

0 comments on commit 5684e1e

Please sign in to comment.