Add links and key figures to project pages

src/pages/projects/[...slug].astro

@@ -2,6 +2,9 @@
 import ImageCarousel from "@components/ImageCarousel.astro";
 import MainLayout from "@layouts/MainLayout.astro";
 
+import TextLink from "@components/TextLink.astro";
+
+import { Icon } from "astro-icon/components";
 import { getCollection, render } from "astro:content";
 
 import {
@@ -9,7 +12,7 @@ import {
   getFullExternalURLOfImage,
   getProjectHero,
   slugify
-} from "@/lib/utils";
+} from "@lib/utils";
 
 export async function getStaticPaths() {
   const projects = await getCollection("projects", ({ body }) => {
@@ -71,15 +74,56 @@ import P from "@components/MDX/P.astro";
           ><div
             class="absolute inset-0 flex h-full w-full items-center justify-center px-8 text-center"
           >
-            <div class="block">
+            <div class="block space-y-4">
-              <h1 class="font-header text-5xl uppercase text-shadow-lg/75">
+              <h1
+                class="font-header text-4xl uppercase text-shadow-lg/75 md:text-6xl"
+              >
                 {project.data.title}
               </h1>
-              <div class="pt-2 text-lg font-bold">
+              <div class="text-lg font-bold md:text-xl">
                 <span>{project.data.role}</span> | <span
                   >{project.data.type}</span
                 >
               </div>
+              {
+                project.data.keyFigure && project.data.keyFigure.length > 0 && (
+                  <div class="text-md mt-8">
+                    {project.data.keyFigure.map((figure) => {
+                      return (
+                        <div>
+                          <span class="font-bold">{figure.title}:</span>
+                          <span>
+                            {figure.href && (
+                              <TextLink href={figure.href}>
+                                {figure.name}
+                              </TextLink>
+                            )}
+                            {!figure.href && figure.name}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )
+              }
+              {
+                project.data.externalLinks !== undefined && (
+                  <span class="relative order-3 mx-auto flex w-full items-center justify-center space-x-4 text-4xl">
+                    {project.data.externalLinks.map((link) => (
+                      <TextLink
+                        href={link.href}
+                        includeExternalLinkIcon={false}
+                        aria-label={link.name}
+                      >
+                        <Icon
+                          name={link.icon}
+                          class="text-white transition hover:text-gray-300"
+                        />
+                      </TextLink>
+                    ))}
+                  </span>
+                )
+              }
             </div>
           </div></ImageCarousel
         >