51 events section (#56)

## Describe your changes
Implemented the "Events" section of the landing page. 

This includes:
1. The "What is SFU Surge?" section
2. The Surge event cards section
3. The statistics section.

## Issue ticket number and link
#51

## Testing Steps
1. checkout to `51-events-section`
2. run `pnpm install` to update dependencies
3. run the development server.

src/app/globals.css

@@ -98,14 +98,14 @@
   }
 
   .surge-radial-gradient{
-    @apply w-screen h-[200vh] bg-[radial-gradient(circle,_rgba(54,79,184,0.3)_0%,_rgba(24,35,82,0)_70%)] fixed top-[-100%] left-0 z-[-100rem] pointer-events-none 
+    @apply w-screen h-[200vh] bg-[radial-gradient(circle,_rgba(54,79,184,0.3)_0%,_rgba(24,35,82,0)_70%)] fixed top-[-100%] left-0 z-[-100rem] pointer-events-none
   }
 
   .content-wrapper{
-    @apply mx-auto px-6 sm:px-8 max-w-[80rem] mt-[8.5rem]  
+    @apply mx-auto px-6 sm:px-8 max-w-[80rem] mt-[8.5rem]
   }
 
   :focus {
     @apply outline-2 outline-brand-primary outline-offset-4;
   }
-}
+}

src/app/page.tsx

@@ -1,8 +1,8 @@
-
+import Events from "@/components/Events";
 export default function Home() {
   return (
     <main>
-
+      <Events />
     </main>
   );
 }

src/components/Events.jsx

@@ -0,0 +1,142 @@
+import StormHacksImage from "/public/placeholder.jpg";
+import JourneyHacksImage from "/public/placeholder.jpg";
+import WorkshopsImage from "/public/placeholder.jpg";
+import Image from "next/image";
+
+const TitleSection = () => {
+    return (
+        <>
+            <section
+                className="flex flex-col gap-4">
+                <h6
+                    className="font-GeistMono text-brand-primary text-center
+                    text-s font-semibold">
+                    {/* eslint-disable-next-line react/no-unescaped-entities */}
+                    WHAT'S SFU SURGE?
+                </h6>
+                <h2
+                    className="text-center title-1 emphasized">
+                    We do cool events or something idk
+                </h2>
+            </section>
+        </>
+    );
+};
+
+const EventSection = () => {
+    return (
+        <>
+            <section
+                className="flex mt-10 mb-24
+                min-[1230px]:flex-row max-[1230px]:flex-col
+                items-center justify-center
+                min-[1230px]:gap-10 max-[1230px]:gap-5"
+            >
+                <SurgeEvent
+                heading={'StormHacks'}
+                subheading={'Our beginner-friendly hackathon'}
+                image={StormHacksImage}
+                description={"StormHacks"}
+                />
+                <SurgeEvent
+                    heading={'JourneyHacks'}
+                    subheading={'Our beginner-friendly hackathon'}
+                    image={JourneyHacksImage}
+                    description={"JourneyHacks"}
+                />
+                <SurgeEvent
+                    heading={'Workshops'}
+                    subheading={'Learn new skills'}
+                    image={WorkshopsImage}
+                    description={"Workshops"}
+                />
+            </section>
+        </>
+    );
+};
+
+const SurgeEvent = ({heading, subheading, image, description}) => {
+    return (
+        <>
+            <border
+                className="bg-surface flex flex-col
+                flex-[1_0_0]
+                pt-10 pb-0 pl-10 pr-11 gap-8
+                rounded-custom-radius"
+            >
+                <section
+                    className="gap-custom-gap">
+                    <h2
+                        className="text-left title-1 emphasized leading-10 tracking-tight">
+                        {heading}
+                    </h2>
+                    <h2
+                        className="text-base leading-10">
+                        {subheading}
+                    </h2>
+                </section>
+                <Image
+                    alt={description}
+                    src={image}
+                    style={{ width: "100%", height: "auto" }}
+                />
+            </border>
+        </>
+    )
+}
+
+const InfoSection = () => {
+    return (
+        <section className="flex my-24 px-20
+        min-[1230px]:gap-5 max-[1230px]:gap-16
+        min-[1230px]:flex-row max-[1230px]:flex-col
+        items-center justify-center"
+        >
+            <InfoItem
+                stat={'2,543'}
+                description={'total hackers'}
+            />
+            <InfoItem
+                stat={'134'}
+                description={'projects submitted'}
+            />
+            <InfoItem
+                stat={'$12,000'}
+                description={'awarded in prizes'}
+            />
+            <InfoItem
+                stat={'300'}
+                description={'participants'}
+            />
+        </section>
+    );
+};
+
+const InfoItem = ({stat, description}) => {
+    return (
+        <section className="flex flex-col items-center justify-center
+        flex-[1_0_0]
+        gap-custom-gap
+        text-white font-GeistSans not-italic font-medium"
+        >
+            <h1 className="large-title emphasized leading-10 tracking-tight">
+                {stat}
+            </h1>
+            <h4 className="title-3 emphasized leading-8 tracking-tight text-center">
+                {description}
+            </h4>
+        </section>
+    );
+};
+
+const Events = () => {
+    return (
+        <>
+                <TitleSection />
+                <EventSection />
+                <InfoSection />
+        </>
+    );
+};
+
+export default Events;

tailwind.config.ts

@@ -21,7 +21,15 @@ const config: Config = {
           "rgb(var(--brand-primary-pressed) / <alpha-value>)",
         "border-tertiary": "var(--border-tertiary)",
       },
-
+      backgroundColor: {
+        "surface": "rgb(var(--surface) / <alpha-value>)"
+      },
+      borderRadius: {
+        'custom-radius': 'var(--Spacing-8, 32px)',
+      },
+      gap: {
+        'custom-gap': 'var(--Radius-lg, 8px)',
+      },
       fontSize: {
         xs: [
           "0.75rem",