✨ feat(people): add people page

src/components/pages/PeoplePage/PeoplePage.test.tsx

@@ -0,0 +1,28 @@
+import { screen } from '@testing-library/react'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { useAnalytics } from 'use-analytics'
+
+import { renderWithRouter as render } from 'components/utils/tests/index.js'
+import ProjectsPage from '.'
+
+// Mock the analytics module
+vi.mock('use-analytics', () => ({
+  useAnalytics: () => ({ plugins: { enable: vi.fn(), disable: vi.fn() } }),
+}))
+
+vi.stubGlobal('open', vi.fn())
+describe('ProjectsPage component', () => {
+  test('renders without crashing and displays the correct project titles', () => {
+    render(<ProjectsPage />)
+
+    // check the section titles
+    expect(screen.getByText('Robotics')).toBeInTheDocument()
+    expect(screen.getByText('Engineering')).toBeInTheDocument()
+    expect(screen.getByText('Hobbies')).toBeInTheDocument()
+
+    // check some of the projects
+    expect(screen.getByText('LINFA: An Intuitive Block-Programming Interface for Reconfigurable Robots')).toBeInTheDocument()
+    expect(screen.getByText("Revamping HHCM's Modular: Swift Generation and Control of Modular Robot Models")).toBeInTheDocument()
+    expect(screen.getByText("Scuola d'arme")).toBeInTheDocument()
+  })
+})

src/components/pages/PeoplePage/index.tsx

@@ -0,0 +1,40 @@
+import { Box, Typography } from '@mui/material'
+
+import EmplyeeCard from 'components/molecules/EmplyeeCard/index.js'
+import { Page } from 'components/templates/index.js'
+import EmplyeeStack from '../../molecules/EmplyeeStack/index.js'
+
+const ProjectsPage = () => {
+  return (
+    <Page title="Personaggi">
+      <Typography pb={2}>
+        Tutti i Personaggi storici della Compagnia sono realmente vissuti ed esistono attendibili fonti bibliografiche. Il gruppo è suddiviso per
+        classi sociali: Uomini d'arme, Artigiani, Nobili Cavalieri, Nobildonne, uomini e donne del popolo; Ogni Personaggio, il suo ruolo e il suo
+        comportamento sono fondamentali alla ricostruzione di uno spaccato della vita di un campo d'arme del tardo XIV Secolo.
+      </Typography>
+      <Box display="flex" gap={1} flexWrap="wrap" justifyContent="center">
+        <EmplyeeStack
+          items={[
+            { name: 'Alberto V', image: 'images/people/albertoV.jpg', position: 'Marchese' },
+            { name: 'Bartolomeo Contrari', image: 'images/people/bartolomeo.jpg', position: 'Nobile' },
+            { name: 'Zan Biancolin', image: 'images/people/zanbiancolin.jpg', position: 'Popolano' },
+          ]}
+        />
+        <EmplyeeStack
+          items={[
+            { 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: 'Fante' },
+          ]}
+        />
+
+        <EmplyeeCard name="Galacino Galaci" image="images/people/galacino_galaci.jpg" position="Fante" />
+        <EmplyeeCard name="Zanino il Beccaio" image="images/people/zannino_il_beccaio.jpg" position="Fante" />
+        <EmplyeeCard name="Gamberino di Bergantino" image="images/people/gamberino_di_bergantino.jpg" position="Fante" />
+        <EmplyeeCard name="Albertino della Muzzina" image="images/people/albertino_della_muzzina.jpg" position="Fante" />
+        <EmplyeeCard name="Ghisola Casale da Castrocaro" image="images/people/ghisola_da_castrocaro.jpg" position="Popolano" />
+      </Box>
+    </Page>
+  )
+}
+
+export default ProjectsPage

src/components/pages/index.ts

@@ -1,5 +1,6 @@
 export { default as MainPage } from './MainPage'
 export { default as ContactPage } from './ContactPage'
+export { default as ProjectsPage } from './PeoplePage'
 export { default as BusinessCardPage } from './BusinessCardPage'
 
 export { default as ErrorPage } from './ErrorPage'