learning 1 & 2

src/components/ContactUs.jsx

@@ -3,33 +3,38 @@ export default function ContactUs() {
         <div className='bg-customgreen100 py-16 my-10'>
             <div className="lg:mx-40 ">
                 <div>
-                    <h1 className="text-center font-bold text-2xl lg:text-3xl font-lexend">Have additional <br className="lg:hidden"/><span className="text-orange-400">Questions?</span></h1>
+
+                    <h1 className="text-center font-bold text-2xl lg:text-3xl font-lexend">Have Additional <br className="lg:hidden"/><span className="text-orange-400">Questions?</span></h1>
                 </div>
 
-                <form action="https://formspree.io/f/meqyarwd" method="POST" className="mx-4 lg:mx-20 font-inter">
+                <form action="" className="mx-4 lg:mx-20 font-inter">
                     <div className="grid lg:grid-cols-2 my-9">
                         <div className="lg:pr-4">
                             <label htmlFor="name" className="text-sm text-gray-400">Name</label>
                             <br />
-                            <input type="text" id="name" name="name" className="w-full border border-gray-400 p-3 rounded-md placeholder:font-inter placeholder:text-lg" placeholder="Name" />
+
+                            <input type="text" id="name" className="w-full border border-gray-400 p-3 rounded-md placeholder:font-inter placeholder:text-lg" placeholder="Name" />
                         </div>
 
-                        <div className="my-4 lg:pl-4">
+                        <div className="lg:pl-4">
                             <label htmlFor="email" className="text-sm text-gray-400">Email</label>
                             <br />
-                            <input type="email" id="email" name="email" className="w-full border border-gray-400 p-3 rounded-md placeholder:font-inter placeholder:text-lg" placeholder="Email@email.com" />
+                            <input type="email" id="email" className="w-full border border-gray-400 p-3 rounded-md placeholder:font-inter placeholder:text-lg" placeholder="Email@email.com" />
+
                         </div>
 
                     </div>
 
                     <div className="font-inter">
                         <label htmlFor="message" className="text-sm text-gray-400">Message</label>
                         <br />
-                        <textarea id="message" name="message" className="w-full border border-gray-400 p-3 rounded-md h-40 placeholder:font-inter placeholder:text-lg" placeholder="Message" />
+
+                        <textarea id="message" className="w-full border border-gray-400 p-3 rounded-md h-40 placeholder:font-inter placeholder:text-lg" placeholder="Message" />
                     </div>
 
                     <div className="flex justify-end my-4">
-                        <button type="submit" className="w-full lg:w-52 py-3 px-7 rounded-full bg-customteal500">
+                        <button className="w-full lg:w-52 py-3 px-7 rounded-full bg-customteal500">
+
                             <span className="font-bold text-white text-lg font-lexend">Send Message</span>
                         </button>
                     </div>

src/components/Hero.jsx

@@ -1,5 +1,6 @@
 export default function Hero() {
     return (
+
         <div className="flex flex-col overflow-hidden">
             <div className="flex flex-col lg:flex-row justify-between">
                 <div className="flex items-start flex-col lg:flex-row lg:gap-10 mb-14">
@@ -9,6 +10,7 @@ export default function Hero() {
                         <h1 className="text-5xl lg:text-7xl font-bold text-[#24223C] pb-3">
                             Program <br />
                             <div className="absolute ml-[137px] lg:ml-[210px] mt-[12px] lg:mt-5 -z-40">
+
                                 <svg xmlns="http://www.w3.org/2000/svg" width="21" height="13" viewBox="0 0 21 13" fill="none">
                                     <path d="M0.132512 0.0223248C-0.33267 3.37063 0.418768 6.60782 2.51567 8.9709C4.61256 11.334 7.6613 12.3859 10.9247 12.1933C11.3899 8.84497 10.6385 5.60778 8.54157 3.2447C6.44468 0.881625 3.39594 -0.170277 0.132512 0.0223248Z" fill="#3BCABE" />
                                     <path d="M20.5435 0.0223248C21.0087 3.37063 20.2572 6.60782 18.1603 8.9709C16.0635 11.334 13.0147 12.3859 9.75129 12.1933C9.2861 8.84497 10.0375 5.60778 12.1344 3.2447C14.2313 0.881625 17.2801 -0.170277 20.5435 0.0223248Z" fill="#9ADB67" />
@@ -22,7 +24,9 @@ export default function Hero() {
                         </div>
                     </div>
                 </div>
+
                 <div className="mt-14 mr-3 hidden lg:block">
+
                     <svg className="-z-50" width="630" height="235" viewBox="0 0 630 235" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <circle cx="7.5" cy="7.5" r="7.5" fill="#D7F5F2" />
                         <circle cx="42.5" cy="7.5" r="7.5" fill="#D7F5F2" />
@@ -115,7 +119,9 @@ export default function Hero() {
                         <circle cx="567.5" cy="227.5" r="7.5" fill="#D7F5F2" />
                         <circle cx="602.5" cy="227.5" r="7.5" fill="#D7F5F2" />
                     </svg>
+
                     <div className="flex flex-row ml-10">
+
                         <div>
                             <div className="relative -z-40 rect-grad1 w-[6px] h-[229px] -mt-[84px] ml-10 ">
 
@@ -125,7 +131,9 @@ export default function Hero() {
                                 <path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
                             </svg>
                             <div className="relative -ml-[50px] -mt-72 bg-[#3BCABE] w-[194px] h-[194px] rounded-full flex">
+
                                 <img className="rounded-full justify-center items-center m-2" src="./images/h-1.png" alt=""></img>
+
                             </div>
 
                         </div>
@@ -139,7 +147,9 @@ export default function Hero() {
                                 <path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
                             </svg>
                             <div className="relative -ml-[50px] -mt-80 bg-[#FA9D74] w-[194px] h-[194px] rounded-full flex">
+
                                 <img className="rounded-full justify-center items-center m-4" src="./images/h-2.png" alt=""></img>
+
                             </div>
                         </div>
 
@@ -152,6 +162,7 @@ export default function Hero() {
                                 <path d="M73.9357 0.0804127C75.61 12.1409 72.9054 23.8011 65.3581 32.3127C57.8108 40.8244 46.8376 44.6133 35.0916 43.9196C33.4173 31.8591 36.1219 20.1989 43.6692 11.6873C51.2165 3.17557 62.1897 -0.61333 73.9357 0.0804127Z" fill="#9ADB67" />
                             </svg>
                             <div className="relative -ml-[20px] -mt-60 bg-[#F5D190] w-[125px] h-[125px] rounded-full flex">
+
                                 <img className="rounded-full justify-center items-center m-4" src="./images/h-3.png" alt=""></img>
                             </div>
                         </div>
@@ -270,6 +281,9 @@ export default function Hero() {
                         </div>
 
                     </div>
+
+
+
                 </div>
             </div>
             <div className="rect-grad w-full h-[12px] mb-4">

src/components/about/Hero.jsx

@@ -14,30 +14,36 @@ export default function Hero() {
 
                     <h1 className="my-[28px] lg:my-32  text-6xl lg:text-7xl font-bold leading-8 font-lexend text-[#24223C] pb-3">
                         <div className=" lg:absolute z-0 -mt-[10px] lg:ml-[400px] hidden lg:block">
+
                             <svg className="" xmlns="http://www.w3.org/2000/svg" width="46" height="37" viewBox="0 0 46 37" fill="none">
                                 <path d="M8.07944 3.51031C5.47109 8.96278 5.04818 14.8945 7.44499 20.0756C9.8418 25.2567 14.6049 28.7256 20.4105 30.1909C23.0189 24.7385 23.4418 18.8067 21.045 13.6257C18.6482 8.44459 13.8851 4.97564 8.07944 3.51031Z" fill="#3BCABE"/>
                                 <path d="M43.7443 14.7292C42.7616 20.693 39.7126 25.7987 34.7815 28.6747C29.8503 31.5508 23.959 31.6683 18.3599 29.5463C19.3426 23.5825 22.3916 18.4768 27.3228 15.6007C32.254 12.7247 38.1452 12.6071 43.7443 14.7292Z" fill="#9ADB67"/>
                             </svg>
                         </div>
+
                         <span className="text-[#FA9D74] text-[36px] lg:text-[72px] ">Empowering</span>  <br className="block lg:hidden "/>
                         <span className="text-[36px] lg:text-[72px] ">current </span> <br className="hidden lg:block"/>
                         <span className="text-[36px] lg:text-[72px] lg:pt-24 ">and </span> <br className="block lg:hidden"/>
                         <span className="text-[36px] lg:text-[72px]">future PMs</span>
+
                     </h1>
                 </div>
 
 
             </div>
+
             <div className="relative">
                 {/* leaf desktop */}
                 <div className="group-2422 absolute mx-5 ml-10 hidden lg:block">
+
                     <svg xmlns="http://www.w3.org/2000/svg" width="202" height="188" viewBox="0 0 202 188" fill="none">
                         <g opacity="0.25">
                             <path d="M11.4534 88.3909C19.4143 112.043 35.2414 130.817 57.2753 139.246C79.3091 147.674 103.435 144.217 124.885 131.827C116.925 108.175 101.097 89.401 79.0636 80.9727C57.0297 72.5444 32.9036 76.0009 11.4534 88.3909Z" fill="#3BCABE"/>
                             <path d="M149.636 18.8246C163.894 39.3064 169.548 63.2018 163.196 85.9212C156.843 108.641 139.697 125.962 116.969 135.814C102.711 115.332 97.0561 91.4363 103.409 68.7169C109.762 45.9976 126.907 28.6759 149.636 18.8246Z" fill="#9ADB67"/>
                         </g>
                     </svg>
                 </div>
+
                 {/* leaf mobile */}
                 <div className="group-2422 absolute -top-16 -left-10 block lg:hidden">
                     <svg className="w-[115px] h-[105px]" xmlns="http://www.w3.org/2000/svg" width="115" height="105" viewBox="0 0 202 188" fill="none">
@@ -52,6 +58,7 @@ export default function Hero() {
                     <div className="block lg:flex lg:flex-col gap-4 text-[#24223C]">
                         <h2 className="mt-[20px] text-4xl font-lexend font-bold">About Us</h2>
                         <p className="mt-[8px] text-lg font-inter xl:pr-40">PMReady is more than just a learning program; we're a network of like-minded individuals who share a common goal — to foster innovation and drive success in the world of technology and product development. So, who are we? We are your partners in your pursuit of excellence, your mentors in the art of Product Management, and your gateway to a world of possibilities.</p>
+
                     </div>
                 </div>
             </div>

src/components/about/VolunteerBanner.jsx

@@ -18,7 +18,9 @@ export default function VolunteerBanner() {
                         <p className="font-inter text-lg mt-2">Co-Founder</p>
                     </div>
                     <div className="inline-block justify-center text-center w-[211px]">
+
                         <img className="mx-auto block w-40 h-40 bg-[#D9D9D9] rounded-full" src="./images/catherine.jpg"></img>
+
                         <p className="font-lexend text-lg font-semibold mt-2" >Catherine Tai</p>
                         <p className="font-inter text-lg mt-2">Product Manager</p>
                     </div>
@@ -43,38 +45,50 @@ export default function VolunteerBanner() {
 
                 <div className="flex flex-row gap-2 block lg:hidden">
                     <div className="inline-block justify-center text-center w-[150px] min-[400px]:w-[211px]">
+
                         <img className="mx-auto block w-[107px] h-[107px] min-[400px]:w-40 min-[400px]:h-40 bg-[#D9D9D9] rounded-full" src="./images/macy.jpeg"></img>
+
                         <p className="font-lexend text-lg font-semibold mt-2" >Macy So</p>
                         <p className="font-inter text-base min-[400px]:text-lg mt-2">Co-Founder</p>
                     </div>
                     <div className="inline-block justify-center text-center w-[150px] min-[400px]:w-[211px]">
+
                         <img className="mx-auto block w-[107px] h-[107px] min-[400px]:w-40 min-[400px]:h-40 bg-[#D9D9D9] rounded-full" src="./images/johnny.jpeg"></img>
+
                         <p className="font-lexend text-lg font-semibold mt-2" >Johnny Huang</p>
                         <p className="font-inter text-base min-[400px]:text-lg mt-2">Co-Founder</p>
                     </div>
 
                 </div>
                 <div className="flex flex-row gap-2 block lg:hidden">
                     <div className="inline-block justify-center text-center w-[150px] min-[400px]:w-[211px]">
+
                         <img className="mx-auto block w-[107px] h-[107px] min-[400px]:w-40 min-[400px]:h-40 bg-[#D9D9D9] rounded-full" src="./images/catherine.jpg"></img>
+
                         <p className="font-lexend text-lg font-semibold mt-2" >Catherine Tai</p>
                         <p className="font-inter text-base min-[400px]:text-lg mt-2">Product Manager</p>
                     </div>
                     <div className="inline-block justify-center text-center w-[150px] min-[400px]:w-[211px]">
+
                         <img className="mx-auto block w-[107px] h-[107px] min-[400px]:w-40 min-[400px]:h-40 bg-[#D9D9D9] rounded-full" src="./images/lenin.jpeg"></img>
+
                         <p className="font-lexend text-lg font-semibold mt-2" >Lenin Kennedy</p>
                         <p className="font-inter text-base min-[400px]:text-lg mt-2">Lead Software Engineer</p>
                     </div>
 
                 </div>
                 <div className="flex flex-row gap-2 block lg:hidden">
                     <div className="inline-block justify-center text-center w-[150px] min-[400px]:w-[211px]">
+
                         <img className="mx-auto block w-[107px] h-[107px] min-[400px]:w-40 min-[400px]:h-40 bg-[#D9D9D9] rounded-full" src="./images/yasvi.jpeg"></img>
+
                         <p className="font-lexend text-lg font-semibold mt-2" >Yasvi Patel</p>
                         <p className="font-inter text-base min-[400px]:text-lg mt-2">Designer</p>
                     </div>
                     <div className="inline-block justify-center text-center w-[150px] min-[400px]:w-[211px]">
+
                         <img className="mx-auto block w-[107px] h-[107px] min-[400px]:w-40 min-[400px]:h-40 bg-[#D9D9D9] rounded-full" src="./images/jennifer.jpeg"></img>
+
                         <p className="font-lexend text-lg font-semibold mt-2" >Jennifer Im</p>
                         <p className="font-inter text-base min-[400px]:text-lg mt-2">Designer</p>
                     </div>

src/components/contact/Main.jsx

@@ -4,30 +4,38 @@ export default function Main() {
             <img src="dots.svg" alt="" className="absolute top-[140px] -left-[300px] scale-[2] min-[400px]:scale-100 min-[400px]:top-[70px] min-[400px]:-left-[330px] -z-10" />
             <img src="dots.svg" alt="" className="absolute bottom-[500px] -right-[320px] scale-[2] min-[400px]:scale-100 min-[400px]:bottom-[24px] min-[400px]:-right-[88px] -z-10 " />
             <div className="flex flex-col gap-32 min-[400px]:gap-12 lg:gap-0 min-[400px]:flex-row mb-32 items-center">
+
                 <form action="https://formspree.io/f/meqyarwd" method="POST" className="mx-4 min-[400px]:ml-16 lg:mx-20 font-inter p-8 bg-[#F9FCF4] flex-grow">
+
                     <div className="grid">
                         <div>
                             <label htmlFor="name" className="text-sm text-gray-400">Name</label>
                             <br />
+
                             <input type="text" id="name" name="name" className="w-full lg:w-[376px] border border-gray-400 p-3 rounded-md placeholder:font-inter placeholder:text-lg" placeholder="Name" />
+
                         </div>
 
                         <div className="mt-4">
                             <label htmlFor="email" className="text-sm text-gray-400">Email</label>
                             <br />
+
                             <input type="email" id="email" name="email" className="w-full lg:w-[376px] border border-gray-400 p-3 rounded-md placeholder:font-inter placeholder:text-lg" placeholder="Email@email.com" />
+
                         </div>
 
                     </div>
 
                     <div className="font-inter mt-5">
                         <label htmlFor="message" className="text-sm text-gray-400">Message</label>
                         <br />
+
                         <textarea id="message" name="message" className="w-full border border-gray-400 p-3 rounded-md h-40 placeholder:font-inter placeholder:text-lg" placeholder="Message" />
                     </div>
 
                     <div className="flex justify-end my-4">
                         <button type="submit" className="w-full lg:w-52 py-3 px-7 rounded-full bg-customteal500">
+
                             <span className="font-bold text-white text-lg font-lexend">Send Message</span>
                         </button>
                     </div>

src/components/resources/ResourcesDefault.jsx

@@ -1,6 +1,8 @@
 export default function ResourcesDefault({ resources, heading }) {
     return (
+
         <div className=" py-[20px] lg:py-10 px-[20px] lg:px-[60px] border-[1px] border-[#9ADB67] bg-[#F9FCF4] rounded-lg">
+
             <h1 className="header4">{heading}</h1>
             <ul className="pl-12 list-disc flex flex-col gap-4 mt-4 underline body1">
                 {resources.map((resource, index) => (

src/components/resources/ResourcesHero.jsx

@@ -12,13 +12,15 @@ function SearchBar() {
 
 function Hero() {
     return (
+
         <div className="flex mt-20 mx-[16px] lg:mx-32 content-center justify-center gap-5">
             <div className="  lg:w-[500px] text-center shrink flex flex-col gap-5">
                 <h1 className="text-left header1 text-[32px] lg:text-[48px] ">Explore <p className="text-[#FA9D74] inline ">Resources</p></h1>
                 <p className="text-left body1">See our curated list of job listings, interview tips, and more!</p>
                 <SearchBar className=" mb-[60px] max-w-[328px] lg:max-w-[600px]" />
             </div>
             <div className="hidden lg:block flex-none">
+
                 <img className="w-[510px] h-[299px] " src="Rectangle6377.png"></img>
             </div>
         </div>
@@ -54,7 +56,9 @@ export default function ResourcesHero() {
     return (
         <div>
             <Hero />
+
             <div className="my-16 mx-[16px] lg:mx-[120px] flex flex-col gap-10">
+
                 <ResourcesDefault resources={resources1} heading={heading1} />
                 <ResourcesVariant resources={resources2} heading={heading2} />
                 <ResourcesDefault resources={resources3} heading={heading3} />

src/components/resources/ResourcesVariant.jsx

@@ -1,6 +1,8 @@
 export default function ResourcesVariant({ resources, heading }) {
     return (
+
         <div className="py-[20px] lg:py-10 px-[20px] lg:px-[60px] border-[1px] border-[#3BCABE] bg-[#F6FFFE] rounded-lg">
+
             <h1 className="header4">{heading}</h1>
             <ul className="pl-12 list-disc flex flex-col gap-4 mt-4 underline body1">
                 {resources.map((resource, index) => (

src/pages/about.astro

@@ -9,7 +9,9 @@ import NewFooter from "../components/NewFooter";
 
 ---
 
-<Layout>
+
+<Layout title="PMReady">
+
     <!-- <main class="container max-w-[1800px] mx-auto"> -->
     <Header client:load />
     <Hero />

src/pages/community.astro

@@ -9,7 +9,9 @@ import Hero from "../components/community/Hero";
 
 ---
 
-<Layout>
+
+<Layout title="PMReady">
+
     <!-- <main class="container max-w-[1800px] mx-auto"> -->
     <Header client:load />
     <Hero />

src/pages/contact.astro

@@ -7,7 +7,9 @@ import Main from "../components/contact/Main";
 
 ---
 
-<Layout>
+
+<Layout title="PMReady">
+
     <Header client:load />
     <Hero />
     <Main />