a

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "window.zoomLevel": 6
+  "window.zoomLevel": 2
 }

components/event-detail/event-content.js

@@ -0,0 +1,11 @@
+import classes from './event-content.module.css';
+
+function EventContent(props) {
+  return (
+    <section className={classes.content}>
+      {props.children}
+    </section>
+  );
+}
+
+export default EventContent;

components/event-detail/event-content.module.css

@@ -0,0 +1,9 @@
+.content {
+  font-size: 1.5rem;
+  color: #3a3a3a;
+  width: 90%;
+  max-width: 40em;
+  margin: auto;
+  margin-top: 8rem;
+  text-align: center;
+}

components/event-detail/event-logistics.js

@@ -0,0 +1,33 @@
+import AddressIcon from '../icons/PinIcon';
+import DateIcon from '../icons/CalendarIcon';
+import LogisticsItem from './logistics-item';
+import classes from './event-logistics.module.css';
+
+function EventLogistics(props) {
+  const { date, address, image, imageAlt } = props;
+
+  const humanReadableDate = new Date(date).toLocaleDateString('en-US', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+  const addressText = address.replace(', ', '\n');
+
+  return (
+    <section className={classes.logistics}>
+      <div className={classes.image}>
+        <img src={`/${image}`} alt={imageAlt} />
+      </div>
+      <ul className={classes.list}>
+        <LogisticsItem icon={DateIcon}>
+          <time>{humanReadableDate}</time>
+        </LogisticsItem>
+        <LogisticsItem icon={AddressIcon}>
+          <address>{addressText}</address>
+        </LogisticsItem>
+      </ul>
+    </section>
+  );
+}
+
+export default EventLogistics;

components/event-detail/event-logistics.module.css

@@ -0,0 +1,66 @@
+.logistics {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  background-color: #2b2b2b;
+  padding: 2rem;
+  max-width: 50rem;
+  width: 80%;
+  margin: -3rem auto;
+  color: #d5eeeb;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image {
+  width: 10rem;
+  height: 10rem;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 5px solid white;
+}
+
+.image img {
+  width: 10rem;
+  height: 10rem;
+  object-fit: cover;
+}
+
+.list {
+  flex: 3;
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.logistics address {
+  white-space: pre;
+}
+
+@media (min-width: 768px) {
+  .logistics {
+    padding: 2rem;
+    margin: -5rem auto;
+    gap: 3rem;
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .image {
+    width: 20rem;
+    height: 20rem;
+  }
+
+  .image img {
+    width: 20rem;
+    height: 20rem;
+  }
+
+  .list {
+    align-items: flex-start;
+  }
+}

components/event-detail/event-summary.js

@@ -0,0 +1,13 @@
+import classes from './event-summary.module.css';
+
+function EventSummary(props) {
+  const { title } = props;
+
+  return (
+    <section className={classes.summary}>
+      <h1>{title}</h1>
+    </section>
+  );
+}
+
+export default EventSummary;

components/event-detail/event-summary.module.css

@@ -0,0 +1,20 @@
+.summary {
+  width: 100%;
+  height: 30vh;
+  background-image: linear-gradient(to bottom left,  #008b79, #1180a1);
+}
+
+.summary h1 {
+  margin: 0;
+  padding-top: 3rem;
+  font-size: 2rem;
+  text-align: center;
+  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
+  color: white;
+}
+
+@media (min-width: 768px) {
+  .summary h1 {
+    font-size: 5rem;
+  }
+}

components/event-detail/logistics-item.js

@@ -0,0 +1,16 @@
+import classes from './logistics-item.module.css';
+
+function LogisticsItem(props) {
+  const { icon: Icon } = props;
+
+  return (
+    <li className={classes.item}>
+      <span className={classes.icon}>
+        <Icon />
+      </span>
+      <span className={classes.content}>{props.children}</span>
+    </li>
+  );
+}
+
+export default LogisticsItem;

components/event-detail/logistics-item.module.css

@@ -0,0 +1,29 @@
+.item {
+  display: flex;
+  font-size: 1.5rem;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  color: #aefff8;
+}
+
+.item span {
+  display: block;
+}
+
+.icon {
+  margin-right: 1rem;
+  color: #18e0d0;
+}
+
+.icon svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+@media (min-width: 768px) {
+  .item {
+    align-items: flex-start;
+    text-align: left;
+  }
+}

components/events/event-item.js

@@ -0,0 +1,46 @@
+import PinIcon from '../icons/PinIcon';
+import CalendarIcon from '../icons/calendarIcon';
+import ArrowIcon from '../icons/ArrowIcon';
+import Button from '../ui/button';
+import classes from './event-item.module.css';
+import Image from 'next/image';
+
+function EventItem({ title, image, date, location, id }) {
+  const humanReadableDate = new Date(date).toLocaleDateString('en-US', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+
+  const formattedAddress = location.replace(', ', '\n');
+
+  const exploreLink = `/events/${id}`;
+
+  return (
+    <li className={classes.item}>
+      <Image src={`/${image}`} alt={title} width={360} height={360} />
+      <div className={classes.content}>
+        <div className={classes.summary}>
+          <h2>{title}</h2>
+          <div className={classes.date}>
+            <CalendarIcon />
+            <time>{humanReadableDate}</time>
+          </div>
+          <div className={classes.address}>
+            <PinIcon />
+            <address>{formattedAddress}</address>
+          </div>
+        </div>
+        <div className={classes.actions}>
+          <Button link={exploreLink}>
+            <span>Explore Event</span>
+            <span className={classes.icon}>
+              <ArrowIcon />
+            </span>
+          </Button>
+        </div>
+      </div>
+    </li>
+  );
+}
+export default EventItem;

components/events/event-item.module.css

@@ -0,0 +1,103 @@
+.item {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 12px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: white;
+  margin: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.item img {
+  width: 100%;
+  object-fit: cover;
+  height: 10rem;
+}
+
+.content {
+  width: 100%;
+  padding: 0 1rem;
+  text-align: center;
+}
+
+.content h2 {
+  margin: 0.5rem 0;
+}
+
+.date,
+.address {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.date svg,
+.address svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #666666;
+}
+
+.content time {
+  color: #666666;
+  font-weight: bold;
+}
+
+.content address {
+  margin: 0.5rem 0;
+  color: #666666;
+  white-space: pre;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.actions a {
+  display: block;
+}
+
+.actions a span {
+  vertical-align: middle;
+}
+
+.icon {
+  margin-left: 0.5rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .item {
+    flex-direction: row;
+  }
+
+  .item img {
+    width: 40%;
+    height: 14rem;
+  }
+
+  .content {
+    width: 60%;
+    padding: 0;
+    text-align: left;
+  }
+
+  .content h2 {
+    margin: 1rem 0;
+  }
+
+  .actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}

components/events/event-list.js

@@ -0,0 +1,20 @@
+import EventItem from './event-item';
+import classes from './event-list.module.css';
+
+function EventList({ items }) {
+  return (
+    <ul className={classes.list}>
+      {items.map((event) => (
+        <EventItem
+          key={event.id}
+          title={event.title}
+          image={event.image}
+          date={event.date}
+          location={event.location}
+          id={event.id}
+        />
+      ))}
+    </ul>
+  );
+}
+export default EventList;

components/events/event-list.module.css

@@ -0,0 +1,5 @@
+.list {
+  width: 90%;
+  max-width: 40rem;
+  margin: 5rem auto;
+}