Feature/program detail (#156)

* create structure and [...slug]

* add all links and create the slug page

* change file location

src/components/Header.jsx

@@ -9,8 +9,8 @@ export function Header() {
           <div className="order-first -mx-4 flex flex-auto basis-full overflow-x-auto whitespace-nowrap border-b border-blue-600/10 py-4 font-mono text-sotm-blue sm:-mx-6 lg:order-none lg:mx-0 lg:basis-auto lg:border-0 lg:py-0">
             <div className="mx-auto flex items-center gap-4 px-4">
               <p>
-                <time datetime="2023-11-10">10</time>-
-                <time datetime="2023-11-12">12 of November, 2023</time>
+                <time dateTime="2023-11-10">10</time>-
+                <time dateTime="2023-11-12">12 of November, 2023</time>
               </p>
               <DiamondIcon className="h-1.5 w-1.5 overflow-visible fill-current stroke-current text-sotm-yellow" />
               <p>Antwerp, Belgium</p>

src/components/PageNotFound.jsx

@@ -0,0 +1,19 @@
+import { Container } from '@/components/Container'
+
+export function PageNotFound({ id }) {
+  return (
+    <section id={id} aria-label="Page not found" className="py-20 sm:py-32">
+      <Container>
+        <h2 className="mx-auto max-w-2xl text-center font-dunbar text-5xl font-extrabold tracking-tighter text-sotm-blue">
+          Page not found
+        </h2>
+        <div className="mt-6 space-y-6 text-center font-poppins text-2xl tracking-tight text-sotm-blue">
+          <p>
+            The page you are looking for does not exist. Please check the URL
+            and try again.
+          </p>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/components/ProgramDetail.jsx

@@ -0,0 +1,48 @@
+import { Container } from './Container'
+
+export function ProgramDetail({ id, name, title, details, date, time, place }) {
+  const formattedDate = new Date(date).toLocaleString('en-GB', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+
+  return (
+    <Container>
+      <section
+        id={id}
+        aria-label={id}
+        className="flex flex-row-reverse flex-wrap gap-6"
+      >
+        <div className="flex-grow basis-3/4">
+          <h2 className="my-6 font-dunbar text-2xl font-extrabold text-sotm-blue">
+            {title}
+          </h2>
+          <h3 className="mt-6 font-dunbar text-xl font-bold tracking-tight">
+            {name}
+          </h3>
+          <div className="mt-6 space-y-6 text-xl">
+            {details.map(({ description, authors }, index) => (
+              <div key={index}>
+                <p className="font-poppins text-sotm-blue">{description}</p>
+                <p>{authors}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="w-52 flex-grow">
+          <h3 className="my-6 bg-sotm-blue p-6 text-center font-dunbar text-xl font-bold tracking-tight text-sotm-yellow">
+            {place}
+          </h3>
+          <div className="text-center font-dunbar font-bold">
+            <time dateTime={date}>{formattedDate}</time>
+          </div>
+          <div className="my-3 bg-sotm-yellow-200 p-3 text-center font-poppins font-bold text-sotm-blue">
+            <time time={time}>{time}</time>
+          </div>
+        </div>
+      </section>
+    </Container>
+  )
+}

src/components/ProgramTable.jsx

@@ -1,10 +1,12 @@
 import Image from 'next/image'
+import Link from 'next/link'
 import Logo from '@/images/logos/SOTM_Blue_full_logo_black.png'
 import Fountain from '../images/fountain.jpg'
 
 export const YellowCell = ({
   title,
   text,
+  link,
   suptitle,
   rowSpan = 1,
   colSpan = 1,
@@ -14,9 +16,19 @@ export const YellowCell = ({
     rowSpan={rowSpan}
     className="border border-sotm-yellow bg-sotm-yellow-200 p-2 text-center font-poppins text-sotm-blue"
   >
-    <div className="text-xs font-bold">{suptitle}</div>
-    <div className="font-bold">{title}</div>
-    <div dangerouslySetInnerHTML={{ __html: text }}></div>
+    {link ? (
+      <Link href={link}>
+        <div className="text-xs font-bold">{suptitle}</div>
+        <div className="font-bold">{title}</div>
+        <div dangerouslySetInnerHTML={{ __html: text }}></div>
+      </Link>
+    ) : (
+      <>
+        <div className="text-xs font-bold">{suptitle}</div>
+        <div className="font-bold">{title}</div>
+        <div dangerouslySetInnerHTML={{ __html: text }}></div>
+      </>
+    )}
   </td>
 )
 
@@ -61,7 +73,7 @@ export const TableHeader = ({ day, date, hasScientificTrack = false }) => (
           <div className="grow">
             <Image src={Logo} height={80} alt="State of the Map EU 2023" />
           </div>
-          <div class="text-right">
+          <div className="text-right">
             <h3 className="font-dunbar text-3xl font-bold text-sotm-blue sm:text-4xl">
               Program Day{day}
             </h3>