✨ Add key dates

src/app/components/id-card.tsx

@@ -30,7 +30,7 @@ export default function IdCard({
           className={`rounded-2xl w-12 h-3 mt-1 ${organisation ? 'bg-primary' : 'bg-accent'}`}
         />
       </header>
-      <main
+      <div
         className={`flex-grow flex flex-col px-4 py-2 ${organisation ? 'mb-2' : 'text-black'}`}
       >
         {image && (
@@ -44,7 +44,7 @@ export default function IdCard({
         {description && (
           <span className="block text-sm leading-tight">{description}</span>
         )}
-      </main>
+      </div>
       {role && (
         <footer className="bg-secondary text-xl uppercase font-bold pt-1 pb-2 px-2 mt-auto">
           {role}

src/app/components/key-date.tsx

@@ -0,0 +1,42 @@
+export type KeyDateProps = {
+  name: string;
+  date: string;
+  dateTime: string;
+  description: string;
+};
+
+export default function KeyDate({
+  name,
+  date,
+  dateTime,
+  description,
+}: {
+  name: string;
+  date: string;
+  dateTime: string;
+  description: string;
+}) {
+  return (
+    <article className="relative group lg:even:mt-64 lg:odd:mb-64 flex flex-col">
+      <div className="hidden group-odd:hidden lg:block">
+        <div className="bg-secondary rounded-full w-6 h-6 -mb-3 mx-auto" />
+        <div className="bg-secondary w-2 h-40 -mb-28 mx-auto" />
+      </div>
+      <div className="relative bg-secondary h-full lg:h-auto md:w-72 p-4 mx-4 flex flex-col group-even:mt-auto">
+        <header>
+          <h3 className="uppercase font-bold text-2xl">{name}</h3>
+          <time className="text-accent font-bold text-lg" dateTime={dateTime}>
+            {date}
+          </time>
+        </header>
+        <div className="mt-auto">
+          <p className="text-sm">{description}</p>
+        </div>
+      </div>
+      <div className="hidden group-even:hidden lg:block mt-auto">
+        <div className="bg-secondary w-2 h-40 -mt-28 mx-auto" />
+        <div className="bg-secondary rounded-full w-6 h-6 -mt-3 mx-auto" />
+      </div>
+    </article>
+  );
+}

src/app/key-dates.tsx

@@ -1,7 +1,62 @@
+import KeyDate, { KeyDateProps } from '@/app/components/key-date';
+
+const keyDates: KeyDateProps[] = [
+  {
+    name: 'Submissions Open',
+    date: 'Mon 1st Apr',
+    dateTime: '2024-04-01',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua.',
+  },
+  {
+    name: 'Submissions Close',
+    date: 'Fri 26th Apr',
+    dateTime: '2024-04-26',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua.',
+  },
+  {
+    name: 'Submissions Confirmed',
+    date: 'Fri 3rd May',
+    dateTime: '2024-05-03',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua.',
+  },
+  {
+    name: 'Schedule Announced',
+    date: 'Fri 17th May',
+    dateTime: '2024-05-17',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua.',
+  },
+  {
+    name: 'WSAF',
+    date: 'Sat 8th - Mon 10th June',
+    dateTime: '2024-06-08',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua.',
+  },
+];
+
 export default function KeyDates() {
   return (
     <section className="mb-12">
-      <h2>Key Dates</h2>
+      <h2 className="mb-4">Key Dates</h2>
+
+      <div className="relative">
+        <hr className="hidden lg:block border-secondary border-b-8 absolute top-1/2 w-full" />
+        <div className="flex flex-col flex-wrap md:flex-row justify-center items-stretch gap-y-6 lg:-space-x-36 xl:-space-x-28">
+          {keyDates.map((date) => (
+            <KeyDate
+              key={date.name}
+              name={date.name}
+              date={date.date}
+              dateTime={date.dateTime}
+              description={date.description}
+            />
+          ))}
+        </div>
+      </div>
     </section>
   );
 }