add past project and title for qp page

src/components/core/Subtitle.astro

@@ -0,0 +1,11 @@
+---
+const {title} = Astro.props;
+import { LiaDotCircle } from "react-icons/lia";
+---
+
+<div class="flex items-center text-[2.5vw] mb-[5%]">
+    <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
+    <p>
+        {title}
+    </p>
+</div>

src/components/qp/About.astro

@@ -0,0 +1,22 @@
+---
+import { LiaDotCircle } from "react-icons/lia";
+---
+
+<div class="flex flex-col items-center text-white my-[10%]">
+    <div class="flex items-center text-[2.5vw] mb-[3%]">
+        <LiaDotCircle className=" mr-[1vw] pt-[0.5%]"/>
+        <p class="text-transparent bg-clip-text bg-gradient-to-b from-white via-white to-ieee-black">
+            What is Quarterly Project?
+        </p>
+    </div>
+
+    <p class="w-3/5 text-[1.2vw] 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 
+         will acquire skills used in the industry such as C++ and the prototyping process
+        with the assistance of our mentors. At the end of the quarter, students will 
+        demonstrate their projects at QP Showcase in front of other students, professors, 
+        and industry professionals!
+    </p>
+</div>

src/components/qp/Mentorship.astro

@@ -0,0 +1,14 @@
+---
+import { Image } from "astro:assets"
+---
+
+<div>
+    <div>
+        <div>
+
+        </div>
+        <div>
+
+        </div>
+    </div>
+</div>

src/components/qp/PastProject.astro

@@ -0,0 +1,18 @@
+---
+const {title, link, image, col} = Astro.props;
+import { GoArrowDownRight } from "react-icons/go";
+import Link from "next/link";
+---
+
+<Link href={link} target="_blank" className={`ease-in-out group relative col-span-${col} text-white`}>
+    <img src={image} alt="past projects image" class="h-[30vh] object-cover w-full rounded-[1.5vw] opacity-80 group-hover:opacity-40 duration-300" />
+
+    <div class="absolute bottom-0 px-[3%] w-full bg-gradient-to-t from-black via-black to-transparent rounded-b-[1.5vw] pb-[1vw] pt-[5%]">
+        <div class="text-[1.1vw] flex w-full px-[2%] justify-between items-end">
+            <p class="py-[0.3vw] px-[1vw] border-[0.1vw] text-nowrap border-white rounded-full group-hover:text-ieee-yellow group-hover:border-ieee-yellow duration-300 font-light">
+                {title}
+            </p>
+            <GoArrowDownRight className="text-[3vw] leading-none group-hover:text-ieee-yellow duration-300 "/>
+        </div>
+    </div>
+</Link>

src/components/qp/PastProjects.astro

@@ -0,0 +1,19 @@
+---
+import PastProject from "./PastProject.astro";
+import projects from "../../data/pastProjects.json"
+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]">
+        {projects.map((project)=>(
+            <PastProject
+             title = {project.title}
+             image = {project.image}
+             link = {project.link}
+             col = {project.col}
+            /> 
+         ))}
+    </div>
+</div>

src/components/qp/Step.astro

@@ -0,0 +1,10 @@
+---
+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]`}>
+    <p class={`${position} text-[4vw] opacity-10 font-bold absolute leading-tight`}>
+        {number}
+    </p>
+    {text}
+</div>

src/components/qp/Steps.astro

@@ -0,0 +1,18 @@
+---
+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%]">
+    <Subtitle title="How it works:" />
+    <div class="grid grid-cols-5 w-3/5 gap-[1.5vw]">
+        {steps.map((step)=>(
+            <Step
+             text = {step.text}
+             number = {step.number}
+             col = {step.col}
+             position = {step.position}
+            /> 
+         ))}
+    </div>
+</div>

src/data/pastProjects.json

@@ -0,0 +1,44 @@
+[
+    {
+        "title": "Retro Gaming Console",
+        "image": "/neko.png",
+        "link": "/",
+        "col": "2"
+    },
+    {
+        "title": "Retro Gaming Console",
+        "image": "/neko.png",
+        "link": "/",
+        "col": "4"
+    },
+    {
+        "title": "Retro Gaming Console",
+        "image": "/neko.png",
+        "link": "/",
+        "col": "3"
+    },
+    {
+        "title": "Retro Gaming Console",
+        "image": "/neko.png",
+        "link": "/",
+        "col": "3"
+    },
+    {
+        "title": "Retro Gaming Console",
+        "image": "/neko.png",
+        "link": "/",
+        "col": "2"
+    },
+    {
+        "title": "Retro Gaming Console",
+        "image": "/neko.png",
+        "link": "/",
+        "col": "2"
+    },
+    {
+        "title": "Retro Gaming Console",
+        "image": "/neko.png",
+        "link": "/",
+        "col": "2"
+    }
+]

src/data/steps.json

@@ -0,0 +1,32 @@
+[
+    {
+        "text": "Prospective participants who are interested in joining Quaterly Project will fill out QP interest form, which can be founded on the bottom of this page.",
+        "number": "01",
+        "col": "2",
+        "position": "bottom-0 right-[2%] "
+    },
+    {
+        "text": "Participants will be put into teams of 5 based on their experience and interests",
+        "number": "02",
+        "col": "2",
+        "position": " top-0 left-[2%] "
+    },
+    {
+        "text": "Each team will be assigned a mentor.",
+        "number": "03",
+        "col": "1",
+        "position": "bottom-0"
+    },
+    {
+        "text": "At the end of the quarter, teams will showcase their project to judges including professors, industry experts, IEEE officers, and fellow participants",
+        "number": "04",
+        "col": "3",
+        "position": "bottom-0 right-[2%] "
+    },
+    {
+        "text": "Winning teams will walk away with prizes!",
+        "number": "05",
+        "col": "2",
+        "position": "top-0 right-[5%]"
+    }
+]

src/layouts/Layout.astro

@@ -13,7 +13,7 @@ import Footer from "../components/core/Footer.astro";
         <title>Astro Basics</title>
     </head>
 
-    <body class="bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip">
+    <body class="text-white bg-ieee-black relative flex flex-col items-center min-h-screen justify-between overflow-x-clip">
         <Navbar />
         <main class="w-[95%]">
             <slot />

src/pages/quarterly.astro

@@ -1,8 +1,19 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Title from "../components/core/Title.astro";
+import About from "../components/qp/About.astro";
+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"
 ---
 
 <Layout>
     <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]"/>
+    </div>
+    <About />
+    <Steps />
+    <PastProjects />
 </Layout>