add qp components

src/components/qp/About.astro

@@ -10,7 +10,7 @@ import { LiaDotCircle } from "react-icons/lia";
         </p>
     </div>
 
-    <p class="w-3/5 text-[1.2vw] font-light ">
+    <p class="w-[70%] text-[1.4vw] font-light ">
         Getting started on hardware development or want to make your own project? 
         Need something to put on your resume? IEEE's Quarterly Projects aims to provide
          students with project experience in a span of 10 weeks. During QP, students 

src/components/qp/Carousel.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<div>
+
+</div>

src/components/qp/Join.astro

@@ -0,0 +1,36 @@
+---
+import { Image } from "astro:assets"
+import Link from "next/link"
+import { LiaDotCircle } from "react-icons/lia";
+import mentorship from "../../../public/mentorship.png"
+import jonathan from "../../../public/about3.png"
+---
+
+<div class="flex justify-center mb-[10%]">
+    <div class="flex w-[70%] items-center">
+        <div class="w-1/2 flex justify-center h-full relative">
+            <Image src={mentorship} alt="blue background" class="mr-[20%]" />
+            <Image src={jonathan} alt="blue background" class=" absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] left-0" />
+        </div>
+        <div class="w-1/2 font-light text-[1.2vw]">
+            <div class="flex items-center text-[2.3vw] mb-[5%]">
+                <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
+                <p class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow">
+                    How to join
+                </p>
+            </div>
+            <p class="my-[10%] ">
+                We will create a QP Application every quarter and send it out 
+                to prospective participants via the IEEE discord or Instagram page. 
+            </p>
+            <p class="mb-[12%]">
+                URL to Drive Folder with every school year’s QP Application forms (3 per school year): 
+            </p>
+            <div class="w-full flex justify-center">
+                <Link href="/" target="_blank" className="py-[2%] px-[15%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"> 
+                    JOIN
+                </Link>
+            </div>
+        </div>
+    </div>
+</div>

src/components/qp/Mentorship.astro

@@ -1,14 +1,41 @@
 ---
 import { Image } from "astro:assets"
+import Link from "next/link"
+import { LiaDotCircle } from "react-icons/lia";
+import mentorship from "../../../public/joinbg.png"
+import jonathan from "../../../public/about3.png"
 ---
 
-<div>
+<div class="flex justify-center mt-[10%] mb-[3%]">
-    <div>
+    <div class="flex w-[70%] items-center">
-        <div>
+        <div class="w-1/2 font-light text-[1.2vw]">
-
+            <div class="flex items-center text-[2.3vw] mb-[5%]">
-        </div>
+                <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
-        <div>
+                <p class="text-[2.3vw] font-bold text-transparent bg-clip-text bg-gradient-to-l from-white to-ieee-yellow">
+                    Mentorship
+                </p>
+            </div>
+            <p class="my-[10%] ">
+                Mentors are a fundamental part of QP, providing teams
+                 with advice and guidance through the ideation and 
+                 execution of their project. Each team is paired with
+                  a mentor they can regularly consult for advice and insights.
+                 Mentors are matched with teams based on their expertise 
+                 and the team’s project focus, ensuring aligned support for each group.
+            </p>
+            <p class="mb-[12%]">
+                If you are interested in becoming a mentor, please follow this link to signup: 
+            </p>
+            <div class="w-full flex justify-center">
+                <Link href="/" target="_blank" className="p-[2%] text-[1.2vw] border-[0.1vw] border-white rounded-[0.5vw] hover:text-ieee-yellow hover:border-ieee-yellow duration-300 font-light"> 
+                    BECOME A MENTOR
+                </Link>
+            </div>
+        </div>
 
+        <div class="w-1/2 flex justify-center h-full items-center relative">
+            <Image src={mentorship} alt="blue background" />
+            <Image src={jonathan} alt="blue background" class=" absolute rounded-full object-cover aspect-[262/433] w-[54%] top-[5%] right-[10%]" />
         </div>
     </div>
 </div>

src/components/qp/PastProjects.astro

@@ -6,7 +6,7 @@ import Subtitle from "../core/Subtitle.astro";
 <div class="flex flex-col items-center">
     <Subtitle title="Past Projects" />
 
-    <div class="w-2/3 grid grid-cols-6 gap-[1.5vw]">
+    <div class="w-[70%] grid grid-cols-6 gap-[1.5vw]">
         {projects.map((project)=>(
             <PastProject
              title = {project.title}

src/components/qp/Step.astro

@@ -2,7 +2,7 @@
 const {text, number, col, position} = Astro.props;
 ---
 
-<div class={`relative col-span-${col} border-[0.1vw] border-white/30 h-[23vh] text-[1.1vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw]`}>
+<div class={`relative col-span-${col} border-[0.1vw] border-white/30 h-[23vh] text-[1.2vw] bg-gradient-to-b from-white/10 to-ieee-blue-300/10 px-[1vw] py-[2vw] rounded-[1vw]`}>
     <p class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight`}>
         {number}
     </p>

src/components/qp/Steps.astro

@@ -3,9 +3,9 @@ import Step from "./Step.astro"
 import steps from "../../data/steps.json"
 import Subtitle from "../core/Subtitle.astro"
 ---
-<div class="flex flex-col items-center my-[7%]">
+<div class="flex flex-col items-center mt-[7%] mb-[10%]">
     <Subtitle title="How it works:" />
-    <div class="grid grid-cols-5 w-3/5 gap-[1.5vw]">
+    <div class="grid grid-cols-5 w-[70%] gap-[1.5vw]">
         {steps.map((step)=>(
             <Step
              text = {step.text}

src/data/officers.json

@@ -2,7 +2,7 @@
     {
         "name": "Mustahsin Zarif",
         "position": "Chair",
-        "picture": "/../public/neko.png",
+        "picture": "/neko.png",
         "email": "mmzarif@ucsd.edu",
         "type": ["Executives"]
     },
@@ -93,14 +93,14 @@
     {
         "name": "Sin Yin Yang",
         "position": "Events Coordinator",
-        "picture": "/../public/neko.png",
+        "picture": "/neko.png",
         "email": "siy015@ucsd.edu",
         "type": ["Executives", "Events"]
     },
     {
         "name": "Rana Singh",
         "position": "Vice Chair External",
-        "picture": "/../public/neko.png",
+        "picture": "/neko.png",
         "email": "ras010@ucsd.edu",
         "type": ["Executives"]
     },
@@ -135,7 +135,7 @@
     {
         "name": "Ritoban Roy-Chowdhury",
         "position": "Supercomputing Chair",
-        "picture": "/../public/neko.png",
+        "picture": "/neko.png",
         "email": "rroychowdhury@ucsd.edu",
         "type": ["Projects"]
     },
@@ -170,7 +170,7 @@
     {
         "name": "Fahad Alkhazam",
         "position": "Technical Chair",
-        "picture": "/../public/neko.png",
+        "picture": "/neko.png",
         "email": "falkhazam@ucsd.edu",
         "type": ["Events"]
     },

src/pages/quarterly.astro

@@ -6,9 +6,14 @@ import Steps from "../components/qp/Steps.astro";
 import PastProjects from "../components/qp/PastProjects.astro";
 import { Image } from "astro:assets";
 import qp from "../../public/qp.png"
+import Mentorship from "../components/qp/Mentorship.astro";
+import qpborder from "../../public/qpborder.png";
+import Join from "../components/qp/Join.astro";
 ---
 
 <Layout>
+    <Image src={qpborder} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[70vh]" />
+    <Image src={qpborder} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[70vh]" />
     <Title title="Quarterly Project" />
     <div class="w-full flex justify-center my-[3%]">
         <Image src={qp} alt="board group photos" class=" w-2/3 rounded-full object-cover aspect-[2.5/1]"/>
@@ -16,4 +21,6 @@ import qp from "../../public/qp.png"
     <About />
     <Steps />
     <PastProjects />
+    <Mentorship />
+    <Join />
 </Layout>