✨ feat(people): add employee details

src/components/molecules/EmployeeDescription/index.tsx

@@ -0,0 +1,68 @@
+import { Dialog, DialogProps, DialogTitle, DialogContent, IconButton, Typography, Stack, Divider } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+export type EmployeeDescription = {
+  title: string
+  position?: string
+  image?: string
+  body?: string[]
+  captions?: string[]
+}
+
+export type EmployeeDescriptionDialogProps = DialogProps & {
+  description: EmployeeDescription
+}
+
+const EmployeeDescriptionDialog: React.FC<EmployeeDescriptionDialogProps> = ({ description, ...props }) => (
+  <Dialog fullWidth {...props}>
+    <DialogTitle>
+      <Typography variant="h4" component="div">
+        {description.title}
+      </Typography>
+      {description.position && (
+        <Typography variant="h6" color="text.secondary">
+          {description.position}
+        </Typography>
+      )}
+    </DialogTitle>
+    <IconButton
+      aria-label="close"
+      onClick={props.onClose as React.MouseEventHandler<HTMLButtonElement>}
+      sx={{
+        position: 'absolute',
+        right: 0,
+        top: 0,
+      }}>
+      <CloseIcon />
+    </IconButton>
+    <DialogContent sx={{ pt: 0 }}>
+      <img
+        srcSet={description.image}
+        src={description.image}
+        alt={description.title}
+        loading="lazy"
+        style={{ width: '100%', objectFit: 'contain' }}
+      />
+      {description.body &&
+        description.body.map((paragraph, idx) => (
+          <Typography key={idx} pb={1}>
+            {paragraph}
+          </Typography>
+        ))}
+      {description.captions && (
+        <>
+          <Divider sx={{ my: 2 }} />
+          <Stack color="text.secondary" mt={1} gap={1}>
+            {description.captions.map((caption, idx) => (
+              <Typography key={idx} variant="caption">
+                {caption}
+              </Typography>
+            ))}
+          </Stack>
+        </>
+      )}
+    </DialogContent>
+  </Dialog>
+)
+
+export default EmployeeDescriptionDialog

src/components/molecules/EmplyeeCard/index.tsx

@@ -1,16 +1,28 @@
-import { Card, CardContent, CardMedia, CardProps, Typography } from '@mui/material'
+import { FC, useMemo } from 'react'
-import { FC } from 'react'
+import { Card, CardActionArea, CardContent, CardMedia, CardProps, Typography } from '@mui/material'
 
-export interface EmplyeeCardProps extends CardProps {
+import { EmployeeDescription } from 'components/molecules/EmployeeDescription/index.js'
+
+export type EmployeeCardProps = Omit<CardProps, 'onClick'> & {
   name: string
   image: string
   position?: string
+  description?: Partial<EmployeeDescription>
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, description: EmployeeDescription) => void
 }
 
-export const EmplyeeCard: FC<EmplyeeCardProps> = ({ name, position, image, sx, ...props }) => {
+export const EmplyeeCard: FC<EmployeeCardProps> = ({ name, position, image, description = {}, sx, onClick, ...props }) => {
-  return (
+  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    <Card sx={{ flexShrink: 0, width: 270, height: 360, ...sx }} {...props}>
+    onClick(event, {
-      <CardMedia component="img" sx={{ minHeight: '140' }} image={image} alt={`${name} image`} />
+      title: name,
+      image: image,
+      position: position,
+      ...description,
+    })
+  }
+  const content = useMemo(
+    () => [
+      <CardMedia component="img" sx={{ minHeight: '140' }} image={image} alt={`${name} image`} />,
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">
           {name}
@@ -20,7 +32,13 @@ export const EmplyeeCard: FC<EmplyeeCardProps> = ({ name, position, image, sx, .
             {position}
           </Typography>
         )}
-      </CardContent>
+      </CardContent>,
+    ],
+    [name, position, image]
+  )
+  return (
+    <Card sx={{ flexShrink: 0, width: 270, height: 360, ...sx }} {...props} onClick={handleClick}>
+      <CardActionArea>{content}</CardActionArea>
     </Card>
   )
 }

src/components/molecules/EmplyeeStack/index.tsx

@@ -1,10 +1,13 @@
 import { FC, useEffect, useState } from 'react'
 import { Box, IconButton } from '@mui/material'
-import { EmplyeeCard, EmplyeeCardProps } from 'components/molecules/EmplyeeCard/index.js'
 import ShuffleIcon from '@mui/icons-material/NextPlan'
 
+import { EmplyeeCard, EmployeeCardProps } from 'components/molecules/EmplyeeCard/index.js'
+import { EmployeeDescription } from 'components/molecules/EmployeeDescription/index.js'
+
 interface Props {
-  items: EmplyeeCardProps[]
+  items: EmployeeCardProps[]
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, description: EmployeeDescription) => void
 
   // Visual offsets
   offsetStep?: number // px shift per card
@@ -15,6 +18,7 @@ const EmplyeeStack: FC<Props> = ({
   offsetStep = 10, // px shift per card
   maxVisible = 6, // how many cards we actually render (performance)
   items: initialItems,
+  onClick,
 }) => {
   const [items, setItems] = useState(initialItems)
 
@@ -29,7 +33,7 @@ const EmplyeeStack: FC<Props> = ({
   }
 
   if (items.length === 0) return null
-  if (items.length === 1) return <EmplyeeCard {...items[0]} />
+  if (items.length === 1) return <EmplyeeCard {...items[0]} onClick={onClick} />
 
   return (
     <Box
@@ -41,6 +45,7 @@ const EmplyeeStack: FC<Props> = ({
       {items.slice(0, maxVisible).map((props, idx) => (
         <EmplyeeCard
           {...props}
+          onClick={onClick}
           key={idx}
           sx={{
             position: 'absolute',

src/components/pages/PeoplePage/index.tsx

@@ -1,29 +1,159 @@
 import { Box, Typography } from '@mui/material'
 
 import { Page } from 'components/templates/index.js'
-import { EmplyeeCardProps } from 'components/molecules/EmplyeeCard/index.js'
+import { EmployeeCardProps } from 'components/molecules/EmplyeeCard/index.js'
 import EmplyeeStack from 'components/molecules/EmplyeeStack/index.js'
+import EmployeeDescriptionDialog, { EmployeeDescription } from 'components/molecules/EmployeeDescription/index.js'
+import { useState } from 'react'
 
-const people: EmplyeeCardProps[][] = [
+const people: EmployeeCardProps[][] = [
+  // Bartolomeo Contrari e Zan Biancolin
   [
-    // { name: "Alberto V d'Este", image: 'images/people/albertoV.jpg', position: 'Marchese' },
+    // { name: "Alberto V d'Este", image: 'images/people/albertoV/avatar.jpg', position: 'Marchese' },
-    { name: 'Bartolomeo Contrari', image: 'images/people/bartolomeo_contrari.jpg', position: 'Nobile' },
+    { name: 'Bartolomeo Contrari', image: 'images/people/bartolomeo_contrari/avatar.jpg', position: 'Nobile' },
-    { name: 'Zan Biancolin', image: 'images/people/zanbiancolin.jpg', position: 'Cuoco' },
+    { name: 'Zan Biancolin', image: 'images/people/zan_biancolin/avatar.jpg', position: 'Cuoco' },
   ],
+  // Niccolò degli Obizzi e Ferantino di Zampalocha
   [
-    { name: 'Niccolò degli Obizzi', image: 'images/people/niccolo_degli_obizzi.jpg', position: 'Nobile' },
+    {
-    { name: 'Ferantino di Zampalocha', image: 'images/people/ferantino_di_zampalocha.jpg', position: 'Serragente' },
+      name: 'Niccolò degli Obizzi',
+      image: 'images/people/niccolo_degli_obizzi/avatar.jpg',
+      position: 'Nobile',
+    },
+    { name: 'Ferantino di Zampalocha', image: 'images/people/ferantino_di_zampalocha/avatar.jpg', position: 'Serragente' },
+  ],
+  // Galacino Galaci
+  [
+    {
+      name: 'Galacino Galaci',
+      image: 'images/people/galacino_galaci/avatar.jpg',
+      position: 'Fante',
+      description: {
+        body: [
+          "Le tracce documentarie relative a Galacino Galaci emergono all'inizio di gennaio 1394, in occasione dell'esecuzione del testamento di Lasia, figlia del fu Giovanni Beccaria, redatto dal notaio Agostino Caffarelli. I commissari testamentari ricordano che tra i legati figuravano cento lire da destinare secondo il loro giudizio. Avendo riconosciuto Isabetta, figlia di Galacino de Galaciis, iuvenis aetatis legitimae, e constatando che il padre, divitiis pauper, non disponeva dei mezzi necessari per maritarla, i commissari ritennero tale intervento iustam et bonam elemosinam e consegnarono a Galacino quarantatré lire marchesane pro dote et aliis necessitatibus pro maritando.",
+          "La somma, insolitamente elevata per un'elemosina dotale, potrebbe spiegarsi con un possibile legame di parentela tra i Galaci e la testatrice: lo stesso giorno, infatti, una Lasia del fu ser Francesco ricevette dodici lire da Antonio de Galaciis, qualificato come erede della defunta. La documentazione suggerisce inoltre che Galacino fosse Latius civis e privo di ricchezze in città; né lui né la figlia sono tuttavia esplicitamente definiti pauperes, elemento che contribuisce a spiegare l'entità del legato loro assegnato.",
+        ],
+        captions: [
+          'SUPERBI, Silvia. In dotem pro dote et dotis nomine. Il sistema dotale tra norma e prassi nella Ferrara del XIV secolo. 2012.',
+          'ASFe, ANA, matr. 17, not. Agostino Caffarelli, atto del 13 gennaio 1394 e successivo.',
+        ],
+      },
+    },
+  ],
+  // Zanino il Beccaio
+  [
+    {
+      name: 'Zanino il Beccaio',
+      image: 'images/people/zannino_il_beccaio/avatar.jpg',
+      position: 'Fante',
+      description: {
+        image: 'images/people/zannino_il_beccaio/2025_04_12.jpg',
+        body: [
+          "Zanino compare come uno dei rappresentanti di Semiramide, vedova del notaio Giovanni de Richo ed erede del suo patrimonio. Il 5 novembre 1365, Zanino consegna 10 lire al frate domenicano Gregorio. L'atto specifica che si tratta de propriis denariis ipsius domine Simiramixie, pervenutile per eredità.",
+          'Zanino è uno dei vari intermediari di cui la donna si serve per adempiere, gradualmente e in modo formale, agli obblighi lasciati dal defunto.',
+        ],
+        captions: [
+          'SUPERBI, Silvia. In dotem pro dote et dotis nomine. Il sistema dotale tra norma e prassi nella Ferrara del XIV secolo. 2012.',
+          'BCAFe, Coll. Antonelli 868, not. Pietro Pialbene, b. 2, atto del 5 novembre 1365.',
+        ],
+      },
+    },
+  ],
+  // Gamberino di Bergantino
+  [
+    {
+      name: 'Gamberino di Bergantino',
+      image: 'images/people/gamberino_di_bergantino/avatar.jpg',
+      position: 'Fante',
+      description: {
+        body: [
+          'Le tracce relative a Gamberino di Bergantino emergono indirettamente dal testamento di Benvenuto Azzi, castaldo del marchese a Bergantino.Tra i legati figura la donazione a Martina di sex bonas pecudes, lascito di entità modesta che acquista tuttavia rilievo alla luce di alcuni elementi contestuali.Martina è infatti indicata come olim sua serva, e si può supporre che avesse già ricevuto quanto dovuto per i servizi prestati.',
+          "Circa due mesi prima della redazione del testamento, Benvenuto aveva consegnato a Zilio, padre del futuro marito di Martina, Gamberino anch'egli di Bergantino, beni mobili per un valore complessivo di novantotto lire.Le sei pecore menzionate nel testamento appaiono dunque come un'aggiunta rispetto a quanto già corrisposto, interpretabile come un dono ulteriore.È inoltre significativo che, nel dettare le proprie volontà corpore languens, Benvenuto si riferisca inizialmente a Martina come “figlia”, correggendo poi il termine in famula: una correzione formale che non annulla il valore simbolico dell'espressione originaria.",
+        ],
+        captions: [
+          'SUPERBI, Silvia. In dotem pro dote et dotis nomine. Il sistema dotale tra norma e prassi nella Ferrara del XIV secolo. 2012.',
+          "ASFe, ANA, Ivi, matr. 19, not. Giovanni Lucchi, atto dell'11 giugno 1383.",
+          'ASFe, ANA, Ivi, matr. 19, not. Giovanni Lucchi, atto del 19 agosto 1383.',
+        ],
+      },
+    },
+  ],
+  // Albertino della Muzzina
+  [
+    {
+      name: 'Albertino della Muzzina',
+      image: 'images/people/albertino_della_muzzina/avatar.jpg',
+      position: 'Fante',
+      description: {
+        position: 'Falegname',
+        image: 'images/people/albertino_della_muzzina/2021_10_28.jpg',
+
+        body: [
+          "Le tracce del falegname Albertino, della contrada Muzzina, arrivano dal testamento che ha redatto il 21 febbraio 1379 davanti al notaio Pietro Pincerna, all'inteno del quale laconicamente instituit ellegit et esse voluit la moglie Isabetta quale erede di tutte le sue sostanze.",
+        ],
+
+        captions: [
+          'SUPERBI, Silvia. In dotem pro dote et dotis nomine. Il sistema dotale tra norma e prassi nella Ferrara del XIV secolo. 2012.',
+          'ASFe, ANA, matr. 7, not. Pietro Pincerna, atto del 21 febbraio 1379.',
+        ],
+      },
+    },
+  ],
+  // Benato Guerzi da Baura
+  [
+    {
+      name: 'Benato Guerzi da Baura',
+      image: 'images/people/benato_guerzi_da_baura/avatar.jpg',
+      position: 'Fante',
+      description: {
+        image: 'images/people/benato_guerzi_da_baura/2025_04_12.jpg',
+        body: [
+          "Le tracce documentarie relative a Benato Guerzi emergono in relazione al testamento di Lanzone, figlio del fu Giovanni de Gloriis, redatto l'8 agosto 1378 davanti al notaio Natale Sovertari. Tra le disposizioni testamentarie figura un legato di venti lire bolognesi destinato a pauperibus domicelabus maritandis. La consegna del legato, annotata dallo stesso notaio tre anni più tardi pro anima, consente di identificare le beneficiarie.",
+          "L'esecuzione del testamento fu affidata al commissario Pietro Volpone, che, congiuntamente alla vedova Mina, provvide alla distribuzione delle somme, selezionando le nubili ritenute povere. Il 23 dicembre 1381, Agnese, figlia di Scrilinino Paganelli, proveniente da Baura e futura moglie di Benato Guerzi della stessa villa, ricevette quaranta soldi di aquilini.",
+        ],
+        captions: [
+          'SUPERBI, Silvia. In dotem pro dote et dotis nomine. Il sistema dotale tra norma e prassi nella Ferrara del XIV secolo. 2012.',
+          "ASFe, ANA, matr. 11, not. Natale Sovertari, atto dell'8 agosto 1378.",
+          'ASFe, ANA, matr. 11, not. Natale Sovertari, atto del 23 dicembre 1381.',
+        ],
+      },
+    },
+  ],
+  // Ghisola Casale da Castrocaro
+  [{ name: 'Ghisola Casale da Castrocaro', image: 'images/people/ghisola_da_castrocaro/avatar.jpg', position: 'Cuoca' }],
+  // Perina
+  [
+    {
+      name: 'Perina',
+      image: 'images/people/perina/avatar.jpg',
+      position: 'Moglie di Ferantino',
+      description: {
+        body: [
+          'Perina compare in un documento notarile che mette in risalto la presenza di capitali femminili del tutto esterni al controllo dei mariti.',
+          "Nell'agosto del 1371 la vedova di Francolino speziale, Beatrice, si trova in evidente difficoltà a soddisfare i creditori del defunto marito; a nome di due dei tre figli, nominati eredi universali, decide di alienare parte delle proprietà per ottenere la liquidità necessaria. Ne consegna una prima tranche a Ferantino di Ostellato, che le corrisponde il prezzo di 603 lire e 8 soldi di bolognini, e con un atto distinto, rogato dal notaio quello stesso giorno, vende un secondo gruppo di terre a Perina, moglie di Ferantino, la quale paga 75 lire bolognesi de propriis denariis dicte domine Perine.",
+          "In un regime di separazione dei beni, è importante che il notaio distingua le sostanze di Ferantino da quelle della moglie Perina e in questo caso si tratta evidentemente di denaro che la donna non ha portato all'interno del matrimonio con la propria dote (per la quale il marito avrebbe potuto agire in autonomia), ma che ha mantenuto un regime giuridico diverso, riservandosene tutti i diritti.",
+        ],
+        captions: [
+          'SUPERBI, Silvia. In dotem pro dote et dotis nomine. Il sistema dotale tra norma e prassi nella Ferrara del XIV secolo. 2012.',
+          'ASFe, A.N.A., matr. 13, not. Nicolò Sansilvestri, atti del 9 agosto 1371.',
+        ],
+      },
+    },
   ],
-  [{ name: 'Galacino Galaci', image: 'images/people/galacino_galaci.jpg', position: 'Fante' }],
-  [{ name: 'Zanino il Beccaio', image: 'images/people/zannino_il_beccaio.jpg', position: 'Fante' }],
-  [{ name: 'Gamberino di Bergantino', image: 'images/people/gamberino_di_bergantino.jpg', position: 'Fante' }],
-  [{ name: 'Albertino della Muzzina', image: 'images/people/albertino_della_muzzina.jpg', position: 'Fante' }],
-  [{ name: 'Benato Guerzi da Baura', image: 'images/people/benato_guerzi_da_baura.jpg', position: 'Fante' }],
-  [{ name: 'Ghisola Casale da Castrocaro', image: 'images/people/ghisola_da_castrocaro.jpg', position: 'Cuoca' }],
-  [{ name: 'Perina', image: 'images/people/perina.jpg', position: 'Moglie di Ferantino' }],
 ]
 
+const emptyDialog: EmployeeDescription = { title: '' }
+
 const ProjectsPage = () => {
+  const [description, setDescription] = useState<EmployeeDescription | null>(null)
+
+  const handleCardClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, description: EmployeeDescription) => {
+    e.stopPropagation()
+    setDescription(description)
+  }
+  const handleClose = () => {
+    setDescription(null)
+  }
   return (
     <Page title="Personaggi">
       <Typography pb={2}>
@@ -33,9 +163,10 @@ const ProjectsPage = () => {
       </Typography>
       <Box display="flex" gap={1} flexWrap="wrap" justifyContent="center">
         {people.map((props, idx) => (
-          <EmplyeeStack key={idx} items={props} />
+          <EmplyeeStack key={idx} items={props} onClick={handleCardClick} />
         ))}
       </Box>
+      <EmployeeDescriptionDialog open={!!description} description={description ?? emptyDialog} onClose={handleClose} />
     </Page>
   )
 }