Added media for embryo pick and plate, including pcbs, made tweaks to pcb astro component for title and description, new H4 component, enabled zebrafish pnp and mars rover software team pages

src/components/H4.astro

@@ -0,0 +1,5 @@
+---
+
+---
+
+<h4 class="md:text-md text-xs sm:text-sm"><slot /></h4>

src/components/PrintedCircuitBoard.astro

@@ -2,6 +2,9 @@
 import Carousel from "@components/Media/CustomCarousel/CustomCarousel.astro";
 import Ul from "@components/Ul.astro";
 
+import H3 from "@components/H3.astro";
+import H4 from "@components/H4.astro";
+import PageGroup from "@components/PageGroup.astro";
 import type {
   printedCircuitBoard,
   printedCircuitBoardRevision,
@@ -19,33 +22,37 @@ const semanticPcbRevisionSort = (
   -((a.major - b.major) * 100 + (a.minor - b.minor) * 10 + (a.patch - b.patch));
 ---
 
-<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-  {
-    pcb.revisions?.sort(semanticPcbRevisionSort).map((revision) => (
-      <div class="border-caperren-green block space-y-2 rounded-lg border bg-black py-2">
-        <div class="border-caperren-green flex flex-wrap items-center justify-between rounded-none border-b px-4 pb-2">
-          <div>
-            <span class="font-black">Revision:</span>
-            <span>
-              {revision.major}.{revision.minor}.{revision.patch}
-            </span>
+<PageGroup>
+  <Fragment slot="header"
+    ><H3>{pcb.name}</H3><H4>{pcb.description}</H4></Fragment
+  >
+  <div class="mt-1 grid grid-cols-1 gap-4 md:grid-cols-2">
+    {
+      pcb.revisions?.sort(semanticPcbRevisionSort).map((revision) => (
+        <div class="border-caperren-green block space-y-2 rounded-lg border bg-black py-2">
+          <div class="border-caperren-green flex flex-wrap items-center justify-between rounded-none border-b px-4 pb-2">
+            <div>
+              <span class="font-black">Revision:</span>
+              <span>
+                {revision.major}.{revision.minor}.{revision.patch}
+              </span>
+            </div>
+            <div class="text-sm italic">{revision.date.toISODate()}</div>
           </div>
-          <div class="text-sm italic">{revision.date.toISODate()}</div>
+          <div class="px-4">
+            <Carousel
+              class=""
+              carouselGroup={{ images: revision.images }}
+              showBorder={false}
+            />
+          </div>
+          {revision.notes && revision.notes.length > 0 && (
+            <div class="border-caperren-green border-t p-4 text-sm">
+              <Ul lineItems={revision.notes} />
+            </div>
+          )}
         </div>
-        <div class="px-4">
-          <Carousel
-            class=""
-            carouselGroup={{ images: revision.images }}
-            showBorder={false}
-          />
-        </div>
-        {revision.notes && revision.notes.length > 0 && (
-          <Ul
-            class="border-caperren-green border-t p-4 text-sm"
-            lineItems={revision.notes}
-          />
-        )}
-      </div>
-    ))
-  }
-</div>
+      ))
+    }
+  </div>
+</PageGroup>