add people list to about page

app/about/page.tsx

@@ -0,0 +1,22 @@
+import AboutPeople from "../ui/about/people";
+
+
+export default function About() {
+  return (
+    <div className="md:col-span-10 sm:row-span-1 gap-4">
+      <div className="grid grid-rows-1 mb-20">
+        <p className="header-1">Goals</p>
+        <p className="text-justify">
+          Currently, TS4NFDI is in the initialization phase with the following goals:
+          to create a comprehensive overview of all consortia and the terminologies and
+          related services in use – as well as their requirements and relevant use cases.
+          Based on the development of a detailed architecture, a first pilot should at least
+          integrate three different terminology service platforms into an aligned terminology
+          service backend.
+        </p>
+      </div>
+      <AboutPeople />
+
+    </div>
+  );
+}

app/globals.css

@@ -28,9 +28,29 @@ body {
 }
 
 .site-content{
-  @apply container grid md:grid-cols-10 sm:grid-rows-1 gap-4 h-screen pt-20 mx-auto;
+  @apply container grid md:grid-cols-10 sm:grid-rows-1 gap-4 min-h-screen pt-20 mx-auto;
 }
 
 .header-1{
   @apply text-5xl;
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+
+.header-2{
+  @apply text-3xl;
+  margin-bottom: 40px;
+  margin-top: 80px;
+}
+
+.card{
+  @apply border-black bg-gray-100 rounded-lg shadow-sm text-center text-sm md:max-w-xs content-center pb-2;
+}
+
+p{
+  @apply px-5 md:px-0
+}
+
+.orcid-id-btn{
+  @apply bg-[#A5CD39] text-white rounded-xl text-base p-1;
 }

app/ui/about/people.tsx

@@ -0,0 +1,83 @@
+import Image from "next/image";
+
+
+
+export default function AboutPeople() {
+  const [imgW, imgH] = [150, 150];
+
+  return (
+    <>
+      <p className="header-2"><b>Principal Investigators</b></p>
+      <div className="grid grid-rows-1">
+        <div className="grid md:grid-cols-3 sm:grid-rows-1">
+          <div className="card">
+            <Image src="/rb.jpg" width={imgW} height={imgH} alt="Baum, Roman" className="mx-auto"></Image>
+            <div className="pt-2">
+              <p className="text-lg"><b>Baum, Roman</b></p>
+              <p className="mb-2">ZB MED - Information Centre for Life Sciences, Cologne </p>
+              <a href="https://orcid.org/0000-0001-5246-9351" className="orcid-id-btn" target="_blank">ID</a>
+            </div>
+          </div>
+          <div className="card">
+            <Image src="/nk.png" width={imgW} height={imgH} alt="Karam, Naouel" className="mx-auto"></Image>
+            <div className="pt-2">
+              <p className="text-lg"><b>Karam, Naouel</b></p>
+              <p className="mb-2">Institute for Applied Informatics (InfAI), Leipzig</p>
+              <a href="https://orcid.org/0000-0002-6762-6417" className="orcid-id-btn" target="_blank">ID</a>
+            </div>
+          </div>
+          <div className="card">
+            <Image src="/ok.png" width={imgW} height={imgH} alt="Koepler, Oliver" className="mx-auto"></Image>
+            <div className="pt-2">
+              <p className="text-lg"><b>Koepler, Oliver</b></p>
+              <p className="mb-2">TIB - Leibniz Information Centre for Science and Technology, Hannover</p>
+              <a href="https://orcid.org/0000-0003-3385-4232" className="orcid-id-btn" target="_blank">ID</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p className="header-2"><b>Project Team Members</b></p>
+      <div className="grid grid-rows-1">
+        <div className="grid grid-cols-3">
+          <div className="card">
+            <Image src="/blank.jpg" width={imgW} height={imgH} alt="Sasse, Julia" className="mx-auto"></Image>
+            <div className="pt-2">
+              <p className="text-lg"><b>Sasse, Julia</b></p>
+              <p className="mb-2">ZB MED - Information Centre for Life Sciences, Cologne </p>
+              <a href="https://orcid.org/0000-0002-0660-7597" className="orcid-id-btn" target="_blank">ID</a>
+            </div>
+          </div>
+          <div className="card">
+            <Image src="/blank.jpg" width={imgW} height={imgH} alt="Bouazzouni, Syphax" className="mx-auto"></Image>
+            <div className="pt-2">
+              <p className="text-lg"><b>Bouazzouni, Syphax</b></p>
+              <p className="mb-2">Institute for Applied Informatics (InfAI), Leipzig</p>
+              <a href="https://orcid.org/0000-0002-2069-8739" className="orcid-id-btn" target="_blank">ID</a>
+            </div>
+          </div>
+          <div className="card">
+            <Image src="/blank.jpg" width={imgW} height={imgH} alt="Oladazimi, Pooya" className="mx-auto"></Image>
+            <div className="pt-2">
+              <p className="text-lg"><b>Oladazimi, Pooya</b></p>
+              <p className="mb-2">TIB - Leibniz Information Centre for Science and Technology, Hannover</p>
+              <a href="https://orcid.org/0000-0002-5117-070X" className="orcid-id-btn" target="_blank">ID</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p className="header-2"><b>Project Team Members</b></p>
+      <div className="grid grid-rows-1">
+        <div className="grid grid-cols-3">
+          <div className="card">
+            <Image src="/blank.jpg" width={imgW} height={imgH} alt="Fillies, Jan" className="mx-auto"></Image>
+            <div className="pt-2">
+              <p className="text-lg"><b>Fillies, Jan</b></p>
+              <p className="mb-2">Institute for Applied Informatics (InfAI), Leipzig</p>
+              <a href="https://orcid.org/0000-0002-2997-4656" className="orcid-id-btn" target="_blank">ID</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}