Events detail page

frontend/src/app/events/event-info/page.tsx

@@ -0,0 +1,15 @@
+import EventInfo from '@/ui/events/EventInfo';
+import UpcomingEvents from '@/ui/events/UpcomingEvents';
+
+export default function EventDetails() {
+    return (
+      <div>
+         <section id="Event-Details">
+        <EventInfo/>
+        </section>
+        <section id="UpcomingEvents">
+        <UpcomingEvents/>
+        </section>
+      </div>
+    );
+  }

frontend/src/ui/events/EventInfo.module.css

@@ -0,0 +1,85 @@
+.descriptionBorder{
+    border-radius:75px;
+    background-color: #5E4127;
+    max-width: 1260px;
+    min-width: 450px;
+    width: 100%;
+    min-height: 930px;
+    height: 100%;
+    padding: 50px;
+    margin: 50px auto;
+    font-size: 20px;
+    color: #FBF5F0;
+}
+
+.descriptionBorder button{
+    min-width: 400px;
+    max-width:1160px;
+    width:100%;
+    height:100px;
+    border-radius:15px;
+    background-color:#dd995b;
+    border-style:solid;
+    border-width:10px;
+    border-color: #FBF5F0;
+    color:#FBF5F0;
+    font-size: 50px;
+    padding-bottom:50px;
+    font-weight: bold;
+    align-self: center;
+    margin-top:50px;
+    margin-bottom:50px;
+    overflow-y: hidden;
+}
+
+.infoBorder{
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction:row;
+    border-radius:75px;
+    background-color: #AA6F29;
+    max-width: 1160px;
+    min-width: 570px;
+    width: 100%;
+    min-height: 480px;
+    height: 100%;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    padding-right:50px;
+    margin: 0 auto;
+}
+
+.info{
+    display: flex;
+    flex-direction:column;
+    align-items: space-evenly;
+}
+
+.info h1{
+    font-weight: bold;
+    text-decoration: underline 5px;
+    text-align: center;
+    line-height:110px;
+    letter-spacing: -1px;
+    max-width: 570px;
+    min-width: 300px;
+    width: 100%;
+    font-size: 90px;
+    color: #F4E5D7;
+    text-shadow: 8px 8px #5E4127;
+    text-underline-offset: 9px;
+}
+
+.info p{
+    font-size: 30px;
+    color: #FBF5F0;
+    margin: 15px 50px;
+}
+
+@media screen and (max-width: 1075px){
+    .infoBorder{
+        flex-direction:column;
+        align-items:center;
+        padding-left: 50px;
+    }
+}

frontend/src/ui/events/EventInfo.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import styles from './EventInfo.module.css';
+import Image from "next/image";
+
+function EventInfo(){
+  const handleSubmit = (event: React.ChangeEvent<any>) => {
+    alert(`This should lead to the sign up popups.`)
+}
+  return (
+    <div className={styles.descriptionBorder}>
+        <div className={styles.infoBorder}>
+          <div className={styles.info}>
+            <h1>Bring Your Pet to Pool Day</h1>
+            <p>Date: <span className='underline font-bold'>Sunday February 30th</span></p>
+            <p>Time: <span className='underline font-bold'>12:00pm-2.00pm</span></p>
+            <p>Entry Fee: <span className='underline font-bold'>$6.00</span></p>
+          </div>
+          <Image src='/Event Photo.svg' width={500} height={400} alt="Event Photo"/>
+        </div>
+        <button onClick={handleSubmit}>Sign Up Now!</button>
+        <p>Join us for a paw-some poolside adventure at ASPA's "Pet-Pool Palooza" event! Dive into fun with your furry friends as we transform the pool deck into a pet paradise. Whether it's a playful splash with your pooch or a relaxing float with your feline friend, our pet-friendly pool day promises wagging tails and happy purrs all around. With contests, prizes, and plenty of treats, it's a tail-wagging, water-loving extravaganza you won't want to miss!</p>
+    </div>
+    )
+}
+
+export default EventInfo

frontend/src/ui/events/UpcomingEventCard.module.css

@@ -0,0 +1,29 @@
+.card {
+    display: flex;
+    text-align: left;
+    flex-direction: column;
+    justify-content: center;
+    width: 395px;
+    height: 250px;
+  }
+
+  .card img {
+    width: 345px;
+    height: 200px;
+    object-fit: cover;
+    border-style: solid;
+    border-width: 20px; 
+    border-color: #DD995B;
+    border-radius: 45px;
+    align-self: center;
+  }
+
+  .card h2{
+    text-align: center;
+    font-weight: medium;
+    font-size: 30px;
+    color: #FFFFFF;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    overflow-y: hidden;
+  }

frontend/src/ui/events/UpcomingEventCard.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './UpcomingEventCard.module.css';
+
+interface Event {
+    eventName: string;
+    imgUrl: string;
+  }
+
+  export default function UpcomingEventCard({ event }: { event: Event }) {
+    return (
+      <div className={styles.card}>
+        <img src={event.imgUrl} alt={event.eventName} />
+        <h2>{event.eventName}</h2>
+      </div>
+    );
+  }

frontend/src/ui/events/UpcomingEvents.module.css

@@ -0,0 +1,42 @@
+.container {
+    padding: 0px 10px 20px 10px;
+    margin: 20px 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 90%;
+    margin-bottom: 10px;
+    justify-content: space-evenly;
+  }
+
+  .content h1{
+    text-align: center;
+    font-weight: medium;
+    font-size: 30px;
+    color: #FFFFFF;
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+
+  .container h1{
+    font-weight: bold;
+    text-decoration: underline 5px;
+    font-size: 90px;
+    color: #F4E5D7;
+    text-shadow: 8px 8px #5E4127;
+    text-underline-offset: 9px;
+    margin-bottom: 10px;
+  }
+
+  @media screen and (max-width: 1250px){
+    .content{
+        flex-direction:column;
+        align-items:center;
+    }
+}

frontend/src/ui/events/UpcomingEvents.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from "./UpcomingEvents.module.css";
+import UpcomingEventCard from "./UpcomingEventCard"
+
+export default function UpcomingEvents() {
+  const upcomingEvents = [
+    {eventName: "Event 1", imgUrl: "https://fastly.4sqi.net/img/general/200x200/32264433_4nGcfHNabq9lyah9S3b1PlpX_6p0qENU25inJ93SWZ4.jpg"},
+    {eventName: "Event 2", imgUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Backyardpool.jpg/1200px-Backyardpool.jpg"},
+    {eventName: "Event 3", imgUrl: "https://spothopper-static.s3.us-east-1.amazonaws.com/web/daviebilliardclub--com/custom/fb_image.jpg"}
+]
+  return (
+    <div className={styles.container}>
+      <h1>
+        More Upcoming Events!
+      </h1>
+      <div className={styles.content}>
+        {upcomingEvents.map((event) => (
+          <UpcomingEventCard key={event.eventName} event={event} />     
+        ))}
+      </div>
+    </div>
+
+  );
+}