From 50399fa64ae8ef94fbb6250b62b01d28c685fb86 Mon Sep 17 00:00:00 2001
From: johnDv <johndominicvillalino@outlook.com>
Date: Sat, 28 Oct 2023 16:13:16 +0800
Subject: [PATCH 1/2] add card design

---
 src/pages/events/index.tsx | 64 ++++++++++++++++++++++++++++++++------
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/pages/events/index.tsx b/src/pages/events/index.tsx
index 9051943..4130fa8 100644
--- a/src/pages/events/index.tsx
+++ b/src/pages/events/index.tsx
@@ -1,20 +1,66 @@
 import { Layout } from "../../components"
 import React from "react"
+import { eventsData } from "../../constant/Events"
+import styled from "styled-components"
+import Img from "gatsby-image"
+import { breakpoints } from "../../components/Shared"
+
+interface EventsPage {
+  title: string
+  imgUrl: string
+  description: string
+}
 
 const EventsPage = () => {
   return (
     <Layout>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <h2>Events page coming soon...</h2>
-      </div>
+      <EventContainer>
+        {eventsData.map((event: EventsPage) => {
+          return (
+            <EventCard>
+              <img src={event.imgUrl}></img>
+              <Description>{event.description}</Description>
+              <Title>{event.title}</Title>
+            </EventCard>
+          )
+        })}
+      </EventContainer>
     </Layout>
   )
 }
 
+const EventCard = styled.div`
+  border: 1px solid #e6e6e6;
+  border-radius: 10px;
+`
+
+const EventContainer = styled.div`
+  min-height: 50vh;
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-direction: column;
+  padding: 0 40px 0 40px;
+
+  img {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 10px 10px 0 0;
+  }
+
+  @media ${breakpoints.sm} {
+    flex-direction: row;
+  }
+`
+
+const Description = styled.div`
+  padding: 10px;
+  font-size: 14px;
+`
+
+const Title = styled.div`
+  padding: 10px;
+`
+
 export default EventsPage

From 04eef285a4a44f5196858531936888fcd5ffead7 Mon Sep 17 00:00:00 2001
From: johnDv <johndominicvillalino@outlook.com>
Date: Sat, 28 Oct 2023 16:33:40 +0800
Subject: [PATCH 2/2] add max width of card to wrap

---
 src/pages/events/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/events/index.tsx b/src/pages/events/index.tsx
index 4130fa8..5a13668 100644
--- a/src/pages/events/index.tsx
+++ b/src/pages/events/index.tsx
@@ -32,15 +32,18 @@ const EventsPage = () => {
 const EventCard = styled.div`
   border: 1px solid #e6e6e6;
   border-radius: 10px;
+  max-width: 300px;
 `
 
 const EventContainer = styled.div`
   min-height: 50vh;
   display: flex;
   justify-content: center;
+  align-items: center;
   gap: 20px;
   flex-direction: column;
   padding: 0 40px 0 40px;
+  flex-wrap: wrap;
 
   img {
     width: 100%;