Create the upcoming events component

astro/src/components/web/UpcomingEvents.astro

@@ -0,0 +1,41 @@
+---
+import CalendarIcon from '@/icons/CalendarIcon.astro';
+import { Image } from 'astro:assets';
+
+interface Props {
+    upcomingEvents: UpcomingEventsComponent;
+}
+
+const upcomingEvents = Astro.props.upcomingEvents;
+---
+
+<div id={`upcomingevents-${upcomingEvents.id}`} class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18">
+    <h1 class="text-5xl font-bold">Upcoming Events</h1>
+    
+    <div class="flex flex-col items-start gap-7 w-full">
+        { upcomingEvents.events.map((event) => (
+            <div id={event.id} class="flex flex-row items-center justify-center gap-y-8 gap-x-18">
+                <div class="lg:w-[40%] w-full">
+                    <Image
+                        src={event.thumbnail.url}
+                        width={event.thumbnail.width}
+                        height={event.thumbnail.height}
+                        class={`aspect-15/9 rounded-2xl shadow-sm object-cover`}
+                        alt=""
+                    />
+                </div>
+                <div class="flex flex-col gap-1.5 lg:w-[40%] w-full">
+                    <h3 class="text-3xl font-semibold">{event.title}</h3>
+                    <div class="flex flex-row items-center gap-1.5 text-neutral-900">
+                        <CalendarIcon width={24} height={24} />
+                        { event.endDate !== null ? (
+                        <p>{event.startDate} - {event.endDate}</p>
+                        ) : (
+                            <p>{event.startDate}</p>
+                        ) }
+                    </div>
+                </div>
+            </div>
+        )) }
+    </div>
+</div>

astro/src/components/webpage/Webpage.astro

@@ -1,6 +1,7 @@
 ---
 import Hero from '../web/Hero.astro';
 import TextWithImage from '../web/TextWithImage.astro';
+import UpcomingEvents from '../web/UpcomingEvents.astro';
 import WallOfText from '../web/WallOfText.astro';
 
 interface Props {
@@ -18,6 +19,7 @@ console.log(Astro.props.webpage);
             { component.component === "Hero" && <Hero hero={component} /> }
             { component.component === "TextWithImage" && <TextWithImage textWithImage={component} /> }
             { component.component === "WallOfText" && <WallOfText wallOfText={component} /> }
+            { component.component === "UpcomingEvents" && <UpcomingEvents upcomingEvents={component} /> }
         </Fragment>
     )) }
 </div>