Revamp Ambassador page

src/components/ambassador-grid.tsx

@@ -5,17 +5,67 @@ function buildRows(ambassador: Ambassador): InfoCardRow[] {
   return [
     {
       type: "label",
-      label: ambassador.label,
+      label: (
+        <>
+          {ambassador.label}
+          {ambassador.location ? (
+            <span
+              role="img"
+              aria-label={ambassador.location.name}
+              title={ambassador.location.name}
+              className="shrink-0 self-start text-xl"
+            >
+              {ambassador.location.flag}
+            </span>
+          ) : null}
+        </>
+      ),
     },
     {
       type: "image",
       imageUrl: ambassador.imageUrl,
       alt: ambassador.alt,
     },
-    {
-      type: "label",
-      label: ambassador.organization,
-    },
+    ...(ambassador.organizes
+      ? [
+          {
+            type: "label" as const,
+            hideInConciseMode: true,
+            className: "bg-pri-lightest text-pri-darker dark:text-pri-darker",
+            label: (
+              <div className="typography-body-sm flex flex-col whitespace-nowrap leading-relaxed">
+                {ambassador.organizes.map(event => (
+                  <a
+                    key={event.url}
+                    href={event.url}
+                    className="gql-focus-visible underline decoration-pri-dark underline-offset-4 hover:text-pri-base"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {event.name} organizer
+                  </a>
+                ))}
+              </div>
+            ),
+          },
+        ]
+      : []),
+    ...(ambassador.askMeAbout
+      ? [
+          {
+            type: "label" as const,
+            hideInConciseMode: true,
+            label: (
+              <div className="typography-body-md leading-relaxed">
+                <span className="mr-2 bg-sec-light px-1 text-neu-900 dark:bg-sec-darker">
+                  Ask me about
+                </span>
+                {ambassador.askMeAbout.join(", ")}
+              </div>
+            ),
+          },
+        ]
+      : []),
     {
       type: "label",
       hideInConciseMode: true,
@@ -48,7 +98,7 @@ export function AmbassadorGrid({
   concise?: boolean
 }) {
   return (
-    <div className="mx-auto mt-10 flex w-full max-w-6xl flex-wrap justify-center gap-8">
+    <div className="mx-auto mt-10 flex w-full max-w-6xl flex-wrap justify-center gap-6">
       {ambassadors.map((ambassador, index) => (
         <InfoCard
           key={`${ambassador.label}-${index}`}