feat(organizers): add organizer social links

Author: piotrgredowski

src/data/organizers.ts

@@ -1,28 +1,57 @@
+export type OrganizerLink = {
+  url: string;
+  icon: string;
+  label: string;
+};
+
 export type Organizer = {
   name: string;
   image: string;
   index: number;
+  links?: OrganizerLink[];
 };
 
 export const ORGANIZERS: Organizer[] = [
   {
     name: "Piotr Grędowski",
     image: "/organizers/piotr-gredowski.jpeg",
     index: 1,
+    links: [
+      {
+        url: "https://pl.linkedin.com/in/piotrgredowski",
+        icon: "/socials/linkedin.png",
+        label: "LinkedIn",
+      },
+    ],
   },
   {
     name: "Dorota Ostrowska",
     image: "/organizers/dorota-ostrowska.jpeg",
     index: 2,
+    links: [
+      {
+        url: "https://www.linkedin.com/in/ostrowska-dorota/",
+        icon: "/socials/linkedin.png",
+        label: "LinkedIn",
+      },
+    ],
   },
   {
     name: "Natalia Traczewska",
     image: "/organizers/natalia-traczewska.jpg",
     index: 3,
+    links: [
+      {
+        url: "https://pl.linkedin.com/in/natalia-traczewska",
+        icon: "/socials/linkedin.png",
+        label: "LinkedIn",
+      },
+    ],
   },
   {
     name: "Data Science Club PJATK",
     image: "/organizers/dsc-pjatk.png",
     index: 4,
+    links: [],
   },
 ];

src/sections/cfp.tsx

@@ -6,7 +6,7 @@ import { ContentButton } from "~/components/header";
 export const CFP = () => (
   <Container id="cfp" variant="smallContainer">
     <AnchorHeading anchor="cfp">
-      Call For Proposals is open until April 12 2026, 23:59 CET
+      Call For Proposals is open until the end of Tuesday, April 14 2026
     </AnchorHeading>
     <Paragraph>
       <a

src/sections/organizer.tsx

@@ -1,6 +1,12 @@
+/** @jsxImportSource theme-ui */
 import React from "react";
+import { Image, Link } from "theme-ui";
 
-const Organizer = ({ name, image }) => {
+import type { Organizer as OrganizerType } from "~/data/organizers";
+
+type OrganizerProps = Pick<OrganizerType, "name" | "image" | "links">;
+
+const Organizer = ({ name, image, links = [] }: OrganizerProps) => {
   return (
     <div>
       <img
@@ -13,7 +19,53 @@ const Organizer = ({ name, image }) => {
           objectFit: "cover",
         }}
       />
-      <h3>{name}</h3>
+
+      <div
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <h3
+          style={{ margin: 0 }}
+          sx={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "0.4rem",
+            flexWrap: "wrap",
+          }}
+        >
+          <span>{name}</span>
+          {links.map((link) => (
+            <Link
+              as="a"
+              key={`${name}-${link.url}`}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={link.label}
+              title={link.label}
+              sx={{
+                display: "inline-flex",
+                alignItems: "center",
+                lineHeight: 0,
+              }}
+            >
+              <Image
+                src={link.icon}
+                alt={link.label}
+                sx={{
+                  width: "16px",
+                  height: "16px",
+                  display: "block",
+                  filter: "brightness(0)",
+                }}
+              />
+            </Link>
+          ))}
+        </h3>
+      </div>
     </div>
   );
 };

src/sections/organizers.tsx

@@ -27,7 +27,12 @@ export const OrganizerSection = () => {
       >
         <Grid columns={[2, 2, 2, 3]} gap="primary">
           {ORGANIZERS.map((org) => (
-            <Organizer key={org.index} name={org.name} image={org.image} />
+            <Organizer
+              key={org.index}
+              name={org.name}
+              image={org.image}
+              links={org.links}
+            />
           ))}
         </Grid>
       </div>