Added Upcoming Events Section

src/components/AboutSection.astro

@@ -65,7 +65,7 @@ import Section from "./Section.astro";
     }
 
     .about-title-highlight {
-      color: $text-secondary;
+      color: $accent-color;
     }
 
     .about-description {

src/components/EventCard.astro

@@ -0,0 +1,190 @@
+---
+import type { IEvent } from "../utils/events";
+import { getFormattedDate } from "../utils/events";
+import Icon from "./Icon.astro";
+
+interface Props extends IEvent {}
+
+const { title, description, date, time, poster_img, location, link } = Astro.props as Props;
+---
+
+<a class="card" href={link}>
+  <div class="card-img-wrapper">
+    <img class="card-img" src={poster_img} alt="Workshop Poster" />
+  </div>
+  <div class="card-content">
+    <div class="card-header">
+      <h3 class="card-title">{title}</h3>
+      <p class="card-desc">{description}</p>
+    </div>
+    <div class="card-footer">
+      <div class="row">
+        <Icon icon="calendar" />
+        {getFormattedDate(date)}
+      </div>
+      <div class="row">
+        <Icon icon="clock" />
+        {time}
+      </div>
+      <div class="row">
+        <Icon icon="location" />
+        {location}
+      </div>
+    </div>
+  </div>
+
+  <div class="reveal-on-hover">
+    <p>Click to learn more &gt;&gt;</p>
+  </div>
+</a>
+
+<style lang="scss">
+  @import "../styles/index.scss";
+
+  .card {
+    color: $text-primary;
+
+    position: relative;
+    flex-direction: column;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    border-radius: 12px;
+
+    @include raised;
+
+    width: 28%;
+    transition: all 300ms;
+
+    min-height: fit-content;
+    max-height: 100%;
+
+    @media screen and (max-device-width: $screen-md-max) {
+      width: 100%;
+    }
+  }
+
+  .reveal-on-hover {
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+
+    transition: all 300ms;
+
+    @media screen and (max-device-width: $screen-md-max) {
+      display: none;
+    }
+  }
+
+  .card-img {
+    max-height: 100%;
+    width: 100%;
+    border-radius: 12px;
+
+    margin-bottom: 1rem;
+
+    transition: all 300ms;
+  }
+
+  @media screen and (min-device-width: $screen-md-max) {
+    .card:hover {
+      transform: scale(1.05);
+      cursor: pointer;
+
+      .card-img {
+        opacity: 0.5;
+      }
+
+      .reveal-on-hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .card-img-wrapper::after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: linear-gradient(180deg, rgba($background-secondary, 0.4) 0%, rgba($background-secondary, 1) 85%);
+  }
+
+  .card-content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 0.5rem;
+
+    text-align: center;
+
+    top: 75%;
+    bottom: 0;
+    padding: 0.5rem 1rem;
+
+    width: 100%;
+
+    @media screen and (max-device-width: $screen-md-max) {
+      bottom: 0;
+      top: auto;
+
+      font-size: min(1rem, 2.8cqi);
+    }
+
+    .card-desc {
+      color: $text-secondary;
+      font-size: min(1rem, 1cqi);
+
+      @media screen and (max-device-width: $screen-md-max) {
+        font-size: min(1rem, 2.8cqi);
+      }
+    }
+
+    .card-title {
+      font-size: max(1.4cqi, 1rem);
+
+      @media (max-width: #{$screen-md-max}) {
+        font-size: min(1.3rem, 3.8cqi);
+      }
+    }
+
+    .card-footer {
+      padding-top: 1rem;
+      padding-bottom: 0.5rem;
+
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+      justify-content: space-between;
+
+      fill: $accent-color;
+      color: $text-primary;
+
+      border-top: 1px solid $accent-color;
+
+      font-size: min(1rem, 1cqi);
+
+      @media screen and (max-device-width: $screen-md-max) {
+        width: 100%;
+
+        font-size: min(1rem, 2.8cqi);
+      }
+
+      .row {
+        display: flex;
+        gap: 5px;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        min-width: fit-content;
+      }
+    }
+  }
+</style>

src/components/Navbar.astro

@@ -65,21 +65,9 @@ const currentPath = Astro.url.pathname;
     max-width: 90%;
     width: 45rem;
     z-index: 100;
-    background-color: $background-secondary;
     border-radius: 12px;
 
-    background: linear-gradient($background-secondary, $background-secondary) padding-box,
-      linear-gradient(
-          180deg,
-          rgba($border-color, 0.1) 0%,
-          rgba($border-color, 0) 83.85%,
-          rgba(white, 0.05) 100%,
-          rgba($border-color, 0.05) 100%
-        )
-        border-box;
-    border: 2px solid transparent;
-
-    box-shadow: 0px 7px 9px 2px rgba(black, 0.2);
+    @include raised;
 
     @media (max-width: #{$screen-xl-max}) {
       width: 45rem;

src/components/UpcomingEvents.astro

@@ -0,0 +1,77 @@
+---
+import EventCard from "./EventCard.astro";
+import Section from "./Section.astro";
+
+import EVENTS from "../data/events.json";
+
+import { getUpcomingEvents } from '../utils/events';
+
+const UPCOMING_EVENTS = getUpcomingEvents(EVENTS);
+---
+
+<Section id="upcoming-events">
+  <div class="title">
+    <h1>Upcoming Events</h1>
+  </div>
+
+  <div class="events">
+    {
+      UPCOMING_EVENTS.length > 0
+        ? UPCOMING_EVENTS.map((event) => (
+            <EventCard
+              title={event.title}
+              description={event.description}
+              date={event.date}
+              time={event.time}
+              location={event.location}
+              poster_img={event.poster_img}
+              link={event.link}
+            />
+          ))
+        : "Stay Tuned."
+    }
+  </div>
+</Section>
+
+<style is:global lang="scss">
+  @import "../styles/index.scss";
+
+  #upcoming-events .section-wrapper {
+    flex-direction: column;
+  }
+</style>
+
+<style lang="scss">
+  @import "../styles/index.scss";
+
+  .title {
+    font-size: max(2cqi, 1.1rem);
+    color: $text-primary;
+
+    margin-bottom: 2rem;
+
+    display: flex;
+    justify-items: center;
+    gap: 1rem;
+
+    width: 100%;
+    text-align: center;
+
+    h1 {
+      width: 100%;
+    }
+  }
+
+  .events {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+
+    gap: 2rem;
+    width: 100%;
+
+    @media screen and (max-device-width: $screen-md-max) {
+      flex-direction: column;
+    }
+  }
+</style>

src/data/events.json

@@ -0,0 +1,41 @@
+[
+	{
+		"title": "Ubuntu Install Fest",
+		"description": "Learn how to install Linux on your PC.",
+		"date": {
+			"day": 10,
+			"month": 9,
+			"year": 2023
+		},
+		"time": "2 PM",
+		"location": "NR222",
+		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/ubuntu-install/ubuntu-install-19.svg",
+		"link": "/events/install-fest"
+	},
+	{
+		"title": "Git and Github Workshop",
+		"description": "Introduction to Git and GitHub.",
+		"date": {
+			"day": 11,
+			"month": 8,
+			"year": 2023
+		},
+		"time": "3 PM",
+		"location": "V2",
+		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/git-github/git-github-20.png",
+		"link": "/events/git-and-github"
+	},
+	{
+		"title": "Python Workshop",
+		"description": "Introduction to the Python programming language.",
+		"date": {
+			"day": 20,
+			"month": 9,
+			"year": 2023
+		},
+		"time": "3 PM",
+		"location": "NR123",
+		"poster_img": "https://raw.githubusercontent.com/kossiitkgp/design/master/posters/Events/python/python-23.png",
+		"link": "/events/python-workshop"
+	}
+]

src/pages/index.astro

@@ -1,10 +1,12 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import AboutSection from "../components/AboutSection.astro";
+import UpcomingEvents from "../components/UpcomingEvents.astro";
 import Hero from "../components/Hero.astro";
 ---
 
 <Layout title="Welcome to Kharagpur Open Source Society.">
   <Hero />
   <AboutSection />
+  <UpcomingEvents />
 </Layout>

src/styles/index.scss

@@ -1 +1,2 @@
 @import "./variables.scss";
+@import "./mixins.scss";

src/styles/mixins.scss

@@ -0,0 +1,14 @@
+@mixin raised {
+  box-shadow: 0px 7px 9px 2px rgba(black, 0.2);
+  border: 2px solid transparent;
+  background-color: $background-secondary;
+  background: linear-gradient($background-secondary, $background-secondary) padding-box,
+    linear-gradient(
+        180deg,
+        rgba($border-color, 0.1) 0%,
+        rgba($border-color, 0) 83.85%,
+        rgba(white, 0.05) 100%,
+        rgba($border-color, 0.05) 100%
+      )
+      border-box;
+}