From a24f7e60b9a7cd677f79e760e9df80f167ab64c7 Mon Sep 17 00:00:00 2001
From: Thomas KLEIN <tomak@dnd.fr>
Date: Sun, 2 Feb 2025 20:51:08 +0100
Subject: [PATCH] Add speakers page

---
 public/locales/fr/menu.json     |  2 +-
 public/locales/fr/speakers.json |  4 +-
 public/locales/fr/sponsors.json |  2 +-
 src/app/speakers/page.tsx       | 69 +++++++++++++++++++++++++++++++++
 src/app/sponsors/page.tsx       |  4 +-
 src/app/staff/page.tsx          |  2 +-
 6 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 src/app/speakers/page.tsx

diff --git a/public/locales/fr/menu.json b/public/locales/fr/menu.json
index f4265b3..840a669 100644
--- a/public/locales/fr/menu.json
+++ b/public/locales/fr/menu.json
@@ -1,7 +1,7 @@
 {
   "navigation": [
     { "label": "Programme", "href": "/#programs" },
-    { "label": "Speakers", "href": "/#speakers" },
+    { "label": "Speakers", "href": "/speakers" },
     { "label": "Sponsors", "href": "/sponsors" },
     { "label": "Préparer ma venue", "href": "/#place" },
     { "label": "FAQ & Contact", "href": "/#faq" }
diff --git a/public/locales/fr/speakers.json b/public/locales/fr/speakers.json
index ec23d07..1b7c95a 100644
--- a/public/locales/fr/speakers.json
+++ b/public/locales/fr/speakers.json
@@ -1,6 +1,8 @@
 {
+  "title": "Speakers",
+  "description": "Découvrez les speakers de Meet Magento France, des experts qui interviendront tout au long de la journée lors de conférences sur Magento et Adobe Commerce : stratégie business, E-Commerce, retours d’expérience et expertise technique. Une occasion unique d’enrichir vos connaissances et de découvrir les dernières tendances du secteur !",
   "actions": {
-    "seeAllUrl": null
+    "seeAllUrl": "/speakers"
   },
   "data": {
     "title": "Appel à speakers",
diff --git a/public/locales/fr/sponsors.json b/public/locales/fr/sponsors.json
index 1e11da2..4dd4964 100644
--- a/public/locales/fr/sponsors.json
+++ b/public/locales/fr/sponsors.json
@@ -1,6 +1,6 @@
 {
   "title": "Nos sponsors",
-  "subtitle": "Acteurs incontournables de l’écosystème Magento et Adobe Commerce, ils rendent cet événement possible et offriront aux participants l'opportunité d'échanger en face à face avec des experts lors de cette journée exceptionnelle.",
+  "description": "Acteurs incontournables de l’écosystème Magento et Adobe Commerce, ils rendent cet événement possible et offriront aux participants l'opportunité d'échanger en face à face avec des experts lors de cette journée exceptionnelle.",
   "buttonCompany": "Site officiel",
   "actions": {
     "submitUrl": null,
diff --git a/src/app/speakers/page.tsx b/src/app/speakers/page.tsx
new file mode 100644
index 0000000..14fa654
--- /dev/null
+++ b/src/app/speakers/page.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import Typography from "@/components/Typography/Typography";
+import ContentMedia from "@/components/ContentMedia/ContentMedia";
+import Container from "@/layouts/Container";
+import { useTranslation } from "react-i18next";
+import useDataProvider from "@/hooks/useDataProvider";
+import Push from "@/layouts/Push/Push";
+import Person from "@/components/Person/Person";
+import React from "react";
+import PersonPopIn from "@/components/Person/PersonPopIn";
+import { PersonProps } from "@/components/Person/PersonProps";
+
+export default function Page() {
+  const { t } = useTranslation(['speakers']);
+  const dataProvider = useDataProvider();
+  const speakers = dataProvider.useSpeakers()
+  const [selectedSpeaker, setSelectedSpeaker] = React.useState<PersonProps | null>(null);
+
+  const handleSpeakerClick = (speaker: PersonProps) => {
+    setSelectedSpeaker(speaker);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedSpeaker(null);
+  };
+
+  return (
+    <Container className="flex flex-col gap-8 my-8">
+      <ContentMedia>
+        <Typography
+          variant="h1"
+          color="dark"
+          weight="semibold"
+          underlineColor="primary-100"
+          className="mb-2"
+        >
+          {t('speakers:title')}
+        </Typography>
+        <Typography
+          color="dark"
+          className="mb-8"
+        >
+          {t('speakers:description')}
+        </Typography>
+      </ContentMedia>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-12 my-7">
+        {speakers.speakers
+          .map((speaker) => (
+            <div
+              key={speaker.id}
+              className="flex flex-row gap-6 group hover:cursor-pointer"
+              onClick={() => handleSpeakerClick(speaker)}
+            >
+              <Person person={speaker}/>
+            </div>
+          ))}
+      </div>
+      <Push/>
+      {selectedSpeaker && (
+        <PersonPopIn
+          isOpen={!!selectedSpeaker}
+          onClose={handleCloseModal}
+          selectedPerson={selectedSpeaker}
+        />
+      )}
+    </Container>
+  );
+}
diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx
index ee185a2..c83b28e 100644
--- a/src/app/sponsors/page.tsx
+++ b/src/app/sponsors/page.tsx
@@ -3,7 +3,7 @@
 import Typography from "@/components/Typography/Typography";
 import ContentMedia from "@/components/ContentMedia/ContentMedia";
 import Container from "@/layouts/Container";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";
 import useDataProvider from "@/hooks/useDataProvider";
 import Push from "@/layouts/Push/Push";
 import SponsorListByType from "@/components/SponsorList/SponsorListByType";
@@ -29,7 +29,7 @@ export default function Page() {
           color="dark"
           className="mb-8"
         >
-          {t('sponsors:subtitle')}
+          {t('sponsors:description')}
         </Typography>
       </ContentMedia>
       <SponsorListByType items={sponsors}/>
diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
index 9416fe1..fad679c 100644
--- a/src/app/staff/page.tsx
+++ b/src/app/staff/page.tsx
@@ -68,7 +68,7 @@ export default function Page() {
           {t('staff:description')}
         </Typography>
       </ContentMedia>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-12 my-7">
         {staffMembers
           .map((staff) => (
             <div