Chore/event page

app/events/page.tsx

@@ -0,0 +1,32 @@
+import { Button, EventsPartial, Section } from "@/components";
+import { loadEvents } from "@/lib/mdxParser/mdxParser";
+
+export default function Events({}: {}) {
+  return (
+    <div className="mt-28 prose-h2:mt-0 md:mt-0 md:prose-h2:text-2xl md:prose-h3:text-xl">
+      <Section>
+        <h1 className="py-6 text-xl font-bold md:text-4xl">Events</h1>
+        <p>
+          Join us for various events focused on open source in the AECO
+          industry. From community calls to workshops and conferences, we bring
+          together practitioners and enthusiasts to share knowledge and drive
+          innovation.
+        </p>
+        <div className="pt-4">
+          <Button
+            target="/#contact-us"
+            label="Want to organize an event?"
+            type="primary"
+          />
+        </div>
+      </Section>
+
+      <Section color="primary-500">
+        <EventsPartial showPast={false} />
+      </Section>
+      <Section color="slate-300">
+        <EventsPartial showPast={true} />
+      </Section>
+    </div>
+  );
+}

app/globals.css

@@ -14,3 +14,13 @@ svg:not(:root) {
   overflow-clip-margin: content-box;
   overflow: hidden;
 }
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.section-transition {
+  transition: background-color 500ms ease-in-out;
+}

app/layout.tsx

@@ -33,7 +33,7 @@ export const metadata: Metadata = {
 
 const navItems = [
   { name: "Projects", target: "/projects" },
-  { name: "Events", target: "/#events" },
+  { name: "Events", target: "/events" },
   { name: "Trainings", target: "/trainings" },
   { name: "About us", target: "/#who-is-behind-the-initiative" },
 ];

app/page.tsx

@@ -11,6 +11,7 @@ import Image from "next/image";
 import team from "../content/team.json";
 import ContactCard from "@/components/src/contactCard";
 import { PartnersPartial } from "@/components/src/partials/partners";
+import { EventsIndexPartial } from "@/components/src/partials/events";
 
 export default function Home() {
   const discordLink = process.env.DISCORD_LINK || "";
@@ -75,11 +76,11 @@ export default function Home() {
             exchange – find them here + further events that we attend as well.
           </p>
         </div>
-        <EventsPartial />
-      </Section>
-      <Section title="Past Events" color="slate-300">
-        <EventsPartial showPast={true} />
+        <EventsIndexPartial />
       </Section>
+      {/* <Section title="Past Events" color="slate-300">
+        <EventsPartial showPast={true} maxEventCount={4} />
+      </Section> */}
       <Section>
         <Image
           src="/images/partials/AEC-Hackathon-091.jpg"

components/src/partials/events.tsx

@@ -1,3 +1,4 @@
+import { Button } from "../button";
 import { Card } from "../card";
 import { loadEvents } from "@/lib/mdxParser/mdxParser";
 
@@ -12,19 +13,104 @@ export function EventsPartial({ showPast = false }: { showPast?: boolean }) {
     );
 
   return (
-    <div className="grid gap-12 py-10 md:mt-16 lg:grid-cols-2 lg:gap-32">
-      {!es.length
-        ? "No pending events"
-        : es.map((e) => (
-            <Card
-              key={e.metadata.start.toLocaleDateString("en-GB")}
-              title={e.title || ""}
-              type="event"
-              color={"white"}
-              subtitle={e.metadata.start.toLocaleDateString("en-GB")}
-              slug={e.slug}
-            />
-          ))}
+    <div className="mt-10 ">
+      <h2 className="text-gray-600 mb-12 text-2xl font-semibold">
+        {showPast ? "Past Events" : "Upcoming Events"}
+      </h2>
+      <div className="grid gap-12  md:mt-16 lg:grid-cols-2 lg:gap-32">
+        {!es.length
+          ? "No pending events"
+          : es.map((e) => (
+              <Card
+                key={e.metadata.start.toLocaleDateString("en-GB")}
+                title={e.title || ""}
+                type="event"
+                color={"white"}
+                subtitle={e.metadata.start.toLocaleDateString("en-GB")}
+                slug={e.slug}
+              />
+            ))}
+      </div>
+    </div>
+  );
+}
+
+export function EventsIndexPartial() {
+  let eventsParsed = loadEvents();
+
+  const pastEvents = eventsParsed
+    .filter((e) => e.metadata.isPast)
+    .sort((a, b) => (a.metadata.start < b.metadata.start ? 1 : -1))
+    .slice(0, 3);
+
+  const futureEvents = eventsParsed
+    .filter((e) => !e.metadata.isPast)
+    .sort((a, b) => (a.metadata.start < b.metadata.start ? 1 : -1));
+
+  return (
+    <div className="flex flex-col gap-24">
+      {/* Upcoming Events Section */}
+      <section className="mt-10">
+        <h2 className="text-gray-600 mb-12 text-2xl font-semibold">
+          Upcoming Events
+        </h2>
+        <div className="grid gap-12  lg:grid-cols-2 lg:gap-32">
+          {futureEvents.length === 0 ? (
+            <p className="text-gray-600 text-lg">No upcoming events</p>
+          ) : (
+            futureEvents.map((e) => (
+              <Card
+                key={e.metadata.start.toLocaleDateString("en-GB")}
+                title={e.title || ""}
+                type="event"
+                color="white"
+                subtitle={e.metadata.start.toLocaleDateString("en-GB")}
+                slug={e.slug}
+              />
+            ))
+          )}
+        </div>
+      </section>
+
+      {/* Past Events Section */}
+      {pastEvents.length > 0 && (
+        <section className="border-gray-100 border-t border-opacity-60 pt-8">
+          <h2 className="text-gray-600 mb-12 text-2xl font-semibold">
+            Past Events
+          </h2>
+          <div className="grid gap-12  lg:grid-cols-2 lg:gap-32">
+            {pastEvents.map((e) => (
+              <div
+                key={e.metadata.start.toLocaleDateString("en-GB")}
+                className="opacity-80 hover:opacity-100"
+              >
+                <Card
+                  title={e.title || ""}
+                  type="event"
+                  color="slate-300"
+                  subtitle={e.metadata.start.toLocaleDateString("en-GB")}
+                  slug={e.slug}
+                />
+              </div>
+            ))}
+            <div className="flex h-full flex-col  bg-white p-4 shadow-sm">
+              <h4 className="mb-2 mt-0 text-xl font-bold md:text-2xl">
+                Discover More
+              </h4>
+              <p className="text-gray-600 mb-8">
+                View our complete archive of past and upcoming events
+              </p>
+              <div className="mt-auto">
+                <Button
+                  type="primary"
+                  label="See all events"
+                  target="/events"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
     </div>
   );
 }

lib/mdxParser/mdxMappers.ts

@@ -152,7 +152,6 @@ const metadataTransforms: MetadataTransformer = {
 
     const isPast = eventEnd.getTime() < Date.now();
 
-
     return {
       ...defaultContent.metadata,
       start: eventStart,

vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+
+export default defineConfig({
+  test: {
+    // Other test configuration...
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './'),
+      '@lib': resolve(__dirname, './lib')
+    }
+  }
+});