complete events page

src/components/board/Officers.astro

@@ -6,7 +6,7 @@ import { LiaDotCircle } from "react-icons/lia";
 import Officer from "../board/Officer.astro"
 import officers from "../../data/officers.json"
 ---
-<div class = "text-white flex flex-col items-center my-[10vh]">
+<div class = "text-white flex flex-col items-center mt-[15vh] mb-[10vh]">
 
     <div class="relative w-[21vw]">
         <Image src={about} alt="About background image"/>

src/components/events/EventTitle.astro

@@ -4,7 +4,7 @@ import eventbg from "../../../public/eventbg.png"
 import { LiaDotCircle } from "react-icons/lia";
 ---
 
-<div class="w-full pt-[18vh] flex justify-center relative">
+<div class="w-full pt-[25vh] flex justify-center relative">
     <Image src={eventbg} alt="Event Page Background" class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover" />
     <div class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]">
         <LiaDotCircle className=" mr-[2vw] pt-[0.5%]"/>

src/components/events/UpcomingEvent.astro

@@ -0,0 +1,20 @@
+---
+const {name, location, date, time, description} = Astro.props;
+---
+
+<div class="text-white w-[40vw] pl-[8%] border-l-[0.3vw] border-white/70 pb-[5%] relative">
+    <p class=" py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]">
+        {name}
+    </p>
+    <div class="flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]">
+        <p>Location: {location}</p>
+        <div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
+        <p>{date}</p>
+        <div class="bg-white h-[0.5vw] w-[0.5vw] rounded-full" />
+        <p>{time}</p>
+    </div>
+    <p class="text-[1vw] text-white/60">
+        {description}
+    </p>
+    <div class="bg-ieee-yellow h-[1.2vw] w-[1.2vw] rounded-full absolute -top-[1.5%] -left-[2%]" />
+</div>

src/components/events/UpcomingEvents.astro

@@ -0,0 +1,42 @@
+---
+import UpcomingEvent from "./UpcomingEvent.astro";
+import { LiaDotCircle } from "react-icons/lia";
+---
+    <div class="flex ml-[15%] my-[10%]">
+        <div class="w-1/4 text-white pr-[5%] mr-[10%]">
+            <div class="w-[6vw] h-[0.3vw] bg-ieee-yellow rounded-full"/>
+            <div class="flex items-center text-[2vw] font-bold my-[10%]">
+                <LiaDotCircle className=" mr-[1vw] text-[2.5vw]"/>
+                <p>
+                    Upcoming <br/> Events
+                </p>
+            </div>
+            <p class="text-[1.3vw] font-light">
+                SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE!
+            </p>
+        </div>
+        <div>
+            <UpcomingEvent 
+                name="Beach Social" 
+                location="La Jolla Cove" 
+                date="Tue 9 Jun 2024" 
+                time="2 pm" 
+                description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
+            />
+            <UpcomingEvent 
+                name="Beach Social" 
+                location="La Jolla Cove" 
+                date="Tue 9 Jun 2024" 
+                time="2 pm" 
+                description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
+            />
+            <UpcomingEvent 
+                name="Beach Social" 
+                location="La Jolla Cove" 
+                date="Tue 9 Jun 2024" 
+                time="2 pm" 
+                description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
+            />
+        </div>
+    </div>
+

src/pages/board.astro

@@ -1,8 +1,12 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Officers from "../components/board/Officers.astro";
+import { Image } from "astro:assets";
+import board from "../../public/board.png";
 ---
 
 <Layout>
+    <Image src={board} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[15vh]" />
+    <Image src={board} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[15vh]" />
     <Officers/>
 </Layout>

src/pages/events.astro

@@ -1,8 +1,18 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import EventTitle from "../components/events/EventTitle.astro";
+import { Image } from "astro:assets";
+import join from "../../public/join.png";
+import calendar from "../../public/calendar2.png";
+import UpcomingEvents from "../components/events/UpcomingEvents.astro";
 ---
 
 <Layout>
+    <Image src={join} alt="JOIN US" class="absolute left-[1vw] w-[4vw] top-[60vh]" />
+    <Image src={join} alt="JOIN US" class="absolute right-[1vw] w-[4vw] top-[60vh]" />
     <EventTitle />
+    <UpcomingEvents />
+    <div class="flex justify-center pb-[10%]">
+        <Image src={calendar} alt="calendar" class="w-[70%]" />
+    </div>
 </Layout>