From f2e76c74509db0e499c12365583e039a6ae6fe91 Mon Sep 17 00:00:00 2001
From: David Saah <dasorange.hope@gmail.com>
Date: Sat, 9 Sep 2023 23:31:54 +0000
Subject: [PATCH 1/7] rm unused component

---
 src/components/Home/CardItem.vue | 24 ------------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 src/components/Home/CardItem.vue

diff --git a/src/components/Home/CardItem.vue b/src/components/Home/CardItem.vue
deleted file mode 100644
index 885a43cb..00000000
--- a/src/components/Home/CardItem.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-defineProps({
-  title: String,
-  color: String,
-  icon: String[2],
-});
-</script>
-
-<template>
-  <div
-    class="inline-flex w-[200px] flex-col justify-between transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300"
-  >
-    <div
-      class="relative m-4 flex h-40 flex-col justify-between rounded-lg bg-gray-200 p-4 shadow"
-    >
-      <div class="z-10">
-        <h3 class="font-bold mb-2 text-lg">{{ title }}</h3>
-      </div>
-      <div class="absolute right-5 top-10 text-8xl backdrop-blur">
-      <font-awesome-icon :icon="icon" :class="color" />
-      </div>
-    </div>
-  </div>
-</template>

From 2fc974fda20b2e3da7384f65792a62f447d980e8 Mon Sep 17 00:00:00 2001
From: David Saah <dasorange.hope@gmail.com>
Date: Sat, 9 Sep 2023 23:32:32 +0000
Subject: [PATCH 2/7] add inter and caveat font definition

---
 tailwind.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index 33454fd6..5dfc691f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,8 @@ export default {
     extend: {
       fontFamily: {
         sans: [...defaultTheme.fontFamily.sans],
+        inter: ['Inter', 'sans-serif'],
+        caveat: ['Caveat', 'cursive'],
       },
     },
     container: {

From 76cc3665825a8763ec89bca0ae5be695f4a3c869 Mon Sep 17 00:00:00 2001
From: David Saah <dasorange.hope@gmail.com>
Date: Sat, 9 Sep 2023 23:33:30 +0000
Subject: [PATCH 3/7] add Timeline route

---
 src/router/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 0fcc4d54..c8f21f62 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,11 +12,13 @@ const router = createRouter({
     {
       path: "/about",
       name: "About",
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: "/timeline",
+      name: "Timeline",
+      component: () => import("../views/Timeline/Timeline.vue"),
+    },
     {
       path: "/:catchAll(.*)*",
       name: "PageNotFound",

From 1838851791308b4de9ee5d180d99bba30bb0293f Mon Sep 17 00:00:00 2001
From: David Saah <dasorange.hope@gmail.com>
Date: Sat, 9 Sep 2023 23:33:48 +0000
Subject: [PATCH 4/7] add Timeline link to navbar

---
 src/components/NavBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 76c690db..6edb06c3 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -5,6 +5,7 @@ import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 
 const navItems = ref([
   { name: "Home", href: "/", current: true },
+  { name: "Timeline", href: "/timeline", current: false },
   { name: "About Us", href: "/about", current: false },
 ]);
 

From 21035b018f5cc63ee294043c463c5125e9044d5c Mon Sep 17 00:00:00 2001
From: David Saah <dasorange.hope@gmail.com>
Date: Sat, 9 Sep 2023 23:34:37 +0000
Subject: [PATCH 5/7] Add session info card and message

---
 src/views/Home/SessionInfo.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/views/Home/SessionInfo.vue b/src/views/Home/SessionInfo.vue
index 424c959c..5c7ba1ea 100644
--- a/src/views/Home/SessionInfo.vue
+++ b/src/views/Home/SessionInfo.vue
@@ -1,7 +1,29 @@
-<script setup></script>
+<script setup>
+/*
+import EventCard from './EventCard.vue';
+
+const events = [
+{
+  title: "Git Workshop",
+  info: "Touched on the history of git and its relevance. Had hands-on session for students to practice basic git commands such as add, push, pull and commit.",
+  month: "Sept",
+  day: "09",
+  time: "2 pm",
+  img: "url(https://www.si.com/.image/t_share/MTY4MTkyMjczODM4OTc0ODQ5/cfp-trophy-deitschjpg.jpg)"
+}
+]
+*/
+</script>
+
 <template>
   <div class="text-center">
     <div class="text-3xl my-6">Upcoming Workshops</div>
-    <div class="text-gray-600">No scheduled workshops yet...</div>
+    <div class="text-gray-600 pb-6">No scheduled workshops yet...</div>
+
+    <!-- div v-for="event in events">
+      <EventCard :title="event.title" :month="event.month" :day="event.day" :img="event.img" :info="event.info"
+        :time="event.time" />
+    </div-->
+
   </div>
 </template>

From ada523fee39e5b0a76f6e5590e6b5342ab90a341 Mon Sep 17 00:00:00 2001
From: David Saah <dasorange.hope@gmail.com>
Date: Sat, 9 Sep 2023 23:35:44 +0000
Subject: [PATCH 6/7] add event card for home workshop info

---
 src/views/Home/EventCard.vue | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/views/Home/EventCard.vue

diff --git a/src/views/Home/EventCard.vue b/src/views/Home/EventCard.vue
new file mode 100644
index 00000000..36dc1367
--- /dev/null
+++ b/src/views/Home/EventCard.vue
@@ -0,0 +1,39 @@
+<script setup>
+defineProps({
+  title: String,
+  info: String,
+  img: String,
+  time: String,
+  month: String,
+  day: String,
+})
+</script>
+
+<template>
+  <div class="py-4">
+    <div class="mx-auto h-fit flex items-center justify-center px-8">
+      <div class="flex flex-col w-full bg-white rounded shadow-lg sm:w-3/4 md:w-1/2 lg:w-3/5">
+        <div class="w-full h-64 bg-top bg-cover rounded-t add-img">
+        </div>
+        <div class="flex flex-col w-full md:flex-row">
+          <div
+            class="flex flex-row justify-around p-4 font-bold leading-none text-gray-800 uppercase bg-gray-400 rounded md:flex-col md:items-center md:justify-center md:w-1/4">
+            <div class="md:text-3xl">{{ month }}</div>
+            <div class="md:text-6xl">{{ day }}</div>
+            <div class="md:text-xl">{{ time }}</div>
+          </div>
+          <div class="p-4 font-normal text-gray-800 md:w-3/4">
+            <h1 class="mb-4 text-4xl font-bold leading-none tracking-tight text-gray-800">{{ title }}</h1>
+            <p class="leading-normal">{{ info }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.add-img {
+  background-image: v-bind(img);
+}
+</style>

From a1c4ee0cdb6252c7c4cefcba124f68d97fcf7a02 Mon Sep 17 00:00:00 2001
From: David Saah <dasorange.hope@gmail.com>
Date: Sat, 9 Sep 2023 23:35:58 +0000
Subject: [PATCH 7/7] add timeline page

---
 src/views/Timeline/Timeline.vue     | 34 ++++++++++++++++++++++++++
 src/views/Timeline/TimelineItem.vue | 37 +++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 src/views/Timeline/Timeline.vue
 create mode 100644 src/views/Timeline/TimelineItem.vue

diff --git a/src/views/Timeline/Timeline.vue b/src/views/Timeline/Timeline.vue
new file mode 100644
index 00000000..3b259e46
--- /dev/null
+++ b/src/views/Timeline/Timeline.vue
@@ -0,0 +1,34 @@
+<script setup>
+/*
+import TimelineItem from './TimelineItem.vue';
+
+const sessions = [
+{
+  org: "Google Developers' Student Club",
+  title: "Git Workshop",
+  date: "Sept 9, 2023",
+  desc: "Touched on the history of git and its relevance. Had hands-on session for students to practice basic git commands such as add, push, pull and commit."
+},
+]
+*/
+</script>
+
+<template>
+  <div class="relative font-inter antialiased mt-6">
+    <div class="text-center text-4xl">Workshop Sessions Timeline</div>
+    <div class="text-center py-3 text-slate-500">Data not available yet...</div>
+    <!-- main class="relative min-h-fit flex flex-col justify-center overflow-hidden">
+      <div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
+        <div class="flex flex-col justify-center divide-y divide-slate-200 [&>*]:py-16">
+          <div class="w-full max-w-3xl mx-auto">
+            <div class="-my-24">
+              <div class="relative pl-8 sm:pl-32 py-6 group" v-for="session in sessions">
+                <TimelineItem :org="session.org" :title="session.title" :date="session.date" :desc="session.desc" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main -->
+  </div>
+</template>
diff --git a/src/views/Timeline/TimelineItem.vue b/src/views/Timeline/TimelineItem.vue
new file mode 100644
index 00000000..a4758666
--- /dev/null
+++ b/src/views/Timeline/TimelineItem.vue
@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  org: String, // organisation
+  title: String, // workshop title
+  date: String, // date workshop took place
+  desc: String, // description
+});
+</script>
+
+<template>
+  <!-- Organisation label :: purple -->
+  <div class="font-caveat font-medium text-2xl text-indigo-500 mb-1 sm:mb-0">
+    {{ org }}
+  </div>
+
+  <!-- Vertical line (::before) ~ Date ~ Title ~ Circle marker (::after) -->
+  <div class="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden 
+      before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px 
+      before:bg-slate-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 
+      before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 
+      after:bg-indigo-600 after:border-4 after:box-content after:border-slate-50 after:rounded-full 
+      sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
+    <time class="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center 
+        text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-emerald-600 bg-emerald-100 
+        rounded-full">
+      {{ date }}
+    </time>
+    <div class="text-xl font-bold text-slate-900">
+      {{ title }}
+    </div>
+  </div>
+
+  <!-- Content -->
+  <div class="text-slate-500">
+    {{ desc }}
+  </div>
+</template>