Add FAQ page

opengento · Feb 2, 2025 · ff556be · ff556be
1 parent 92d9f80
commit ff556be
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 40 deletions.
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -3,6 +3,10 @@
   "youtubeUrl": "https://www.youtube.com/@MeetMagentoFrance",
   "ticketingUrl": "https://www.eventbrite.fr/e/billets-meet-magento-2025-france-1124570503649",
   "ticketingLabel": "Je prends mon billet",
+  "faqUrl": "/contact",
+  "faqLabel": "FAQ complète",
+  "contactUrl": "/contact",
+  "contactLabel": "formulaire de contact",
   "programUrl": "/#programs",
   "programLabel": "Je découvre la programmation",
   "pushSubtitle": "Rejoignez-nous à Meet Magento France 2025 !",

diff --git a/public/locales/fr/faq.json b/public/locales/fr/faq.json
@@ -0,0 +1,5 @@
+{
+  "title": "FAQ & Contact",
+  "faq": "FAQ",
+  "description": "Vous avez des questions sur l'événement ? Consultez notre FAQ pour obtenir des réponses rapides sur le lieu, la billetterie, les conférences et bien plus. Si vous avez besoin de plus d'informations, n'hésitez pas à nous contacter !"
+}
diff --git a/public/locales/fr/menu.json b/public/locales/fr/menu.json
@@ -4,6 +4,6 @@
     { "label": "Speakers", "href": "/speakers" },
     { "label": "Sponsors", "href": "/sponsors" },
     { "label": "Préparer ma venue", "href": "/#place" },
-    { "label": "FAQ & Contact", "href": "/#faq" }
+    { "label": "FAQ & Contact", "href": "/contact" }
   ]
 }
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -0,0 +1,47 @@
+'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 Push from "@/layouts/Push/Push";
+import Faq from "@/components/Faq/Faq";
+
+export default function Page() {
+  const { t } = useTranslation(['faq']);
+
+  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('faq:title')}
+        </Typography>
+        <Typography
+          color="dark"
+          className="mb-8"
+        >
+          {t('faq:description')}
+        </Typography>
+      </ContentMedia>
+      <div className="bg-white rounded-3xl p-8">
+        <Typography
+          variant="h2"
+          color="dark"
+          weight="semibold"
+          underlineColor="primary-100"
+          className="mb-6"
+        >
+          {t('faq:faq')}
+        </Typography>
+        <Faq display="grid" />
+      </div>
+      <Push />
+    </Container>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,8 +11,12 @@ import useDataProvider from "@/hooks/useDataProvider";
 import { SpeakersProps } from "@/components/Speakers/SpeakersProps";
 import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types";
 import { PlaceProps } from "@/components/Place/PlaceProps";
+import Typography from "@/components/Typography/Typography";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
 
 export default function Home() {
+  const { t } = useTranslation(['common']);
   const dataProvider = useDataProvider();
   const speakers: SpeakersProps = dataProvider.useSpeakers();
   const sponsors: SponsorProps[] = dataProvider.useSponsors();
@@ -37,7 +41,23 @@ export default function Home() {
               title="Besoin d'aide ?"
               titleUnderlineColor="purple-100"
             >
-              <Faq />
+              <Faq display="list" limit={7} />
+              <Typography
+                variant="small"
+                color="dark"
+                weight="normal"
+                className="mt-6"
+              >
+                Pour toute autre question, consultez notre{" "}
+                <Link href={t('common:faqUrl')} className="underline">
+                  {t('common:faqLabel')}
+                </Link>{" "}
+                ou écrivez-nous via le{" "}
+                <Link href={t('common:contactUrl')} className="underline">
+                  {t('common:contactLabel')}
+                </Link>
+                .
+              </Typography>
             </ContentMedia>
           </div>
           <div id="place">

diff --git a/src/components/Faq/Faq.tsx b/src/components/Faq/Faq.tsx
@@ -1,10 +1,25 @@
 'use client';
-import React, {useState} from "react";
-import {FaCompass, FaHeart, FaLanguage, FaShoppingBag, FaStar, FaTicketAlt, FaUser,} from "react-icons/fa";
-import Typography from "../Typography/Typography";
-/*import Link from "next/link";*/
+import React, { useState } from "react";
+import {
+  FaBus,
+  FaCompass,
+  FaHeart,
+  FaLanguage,
+  FaShoppingBag,
+  FaStar,
+  FaTicketAlt,
+  FaUser,
+} from "react-icons/fa"
+import Typography from "@/components/Typography/Typography";
+import {FaShirt} from "react-icons/fa6";
 
-const Faq = () => {
+const Faq = ({
+  display = 'list',
+  limit
+}: {
+  display: 'list' | 'grid',
+  limit?: number,
+}) => {
   const [openIndex, setOpenIndex] = useState<number | null>(null);
 
   const faqList: {
@@ -15,52 +30,58 @@ const Faq = () => {
     {
       question: "Quelle est la date et le lieu de Meet Magento France 2025 ?",
       icon: <FaCompass color="#FF7DD1" size={16}/>,
-      answer:
-        "Meet Magento France 2025 se déroulera le 25 mars 2025, à L’Étoile Business Center à Paris.",
+      answer: "Meet Magento France 2025 se déroulera le 25 mars 2025, à L’Étoile Business Center à Paris.",
     },
     {
-      question:
-        "Quels types de conférences seront proposés lors de l'événement ?",
+      question: "Quels types de conférences seront proposés lors de l'événement ?",
       icon: <FaUser color="#FF7DD1" size={16}/>,
-      answer:
-        "Des conférences business et techniques animées par des experts du digital, E-Commerçants, éditeurs et agences sont attendues au programme de Meet Magento France 2025 ! Découvrez dès à présent l’agenda des conférences et la liste des intervenants.",
+      answer: "Des conférences business et techniques animées par des experts du digital, E-Commerçants, éditeurs et agences sont attendues au programme de Meet Magento France 2025 ! Découvrez dès à présent l’agenda des conférences et la liste des intervenants.",
     },
     {
       question: "Qui peut participer à Meet Magento France 2025 ?",
       icon: <FaHeart color="#FF7DD1" size={16}/>,
-      answer:
-        "Meet Magento France 2025 accueillera les acteurs de l’écosystème Magento et Adobe Commerce. E-commerçants, éditeurs, agences digitales se rencontreront lors de cet événement communautaire et tous avec les mêmes objectifs : l’échange et le partage.",
+      answer: "Meet Magento France 2025 accueillera les acteurs de l’écosystème Magento et Adobe Commerce. E-commerçants, éditeurs, agences digitales se rencontreront lors de cet événement communautaire et tous avec les mêmes objectifs : l’échange et le partage.",
     },
     {
       question: "Comment puis-je acheter des billets pour l'événement ?",
       icon: <FaTicketAlt color="#FF7DD1" size={16}/>,
-      answer:
-        "Les billets pour Meet Magento France 2025 sont disponibles ! Rendez-vous sur la billeterie à partir du menu.",
+      answer: "Les billets pour Meet Magento France 2025 sont disponibles ! Rendez-vous sur la billeterie à partir du menu.",
     },
     {
-      question:
-        "Puis-je proposer un sujet de conférence pour Meet Magento France 2025 ?",
+      question: "Puis-je proposer un sujet de conférence pour Meet Magento France 2025 ?",
       icon: <FaStar color="#FF7DD1" size={16}/>,
-      answer:
-        "L’appel à speaker pour Meet Magento France 2025 est ouvert jusqu’au 31 janvier ! Soumettez votre candidature dès maintenant et rejoignez le panel d’experts qui prendra la parole à cette occasion !",
+      answer: "L’appel à speaker pour Meet Magento France 2025 est ouvert jusqu’au 31 janvier ! Soumettez votre candidature dès maintenant et rejoignez le panel d’experts qui prendra la parole à cette occasion !",
     },
     {
       question: "Que contient un billet pour Meet Magento France 2025 ?",
       icon: <FaShoppingBag color="#FF7DD1" size={16}/>,
-      answer:
-        "Lorsque vous achetez un billet pour Meet Magento France 2025 vous accédez à la totalité des conférences de l’événement, du petit-déjeuner d’accueil à cocktail dinatoire de clôture, en passant par le déjeuner networking.",
+      answer: "Lorsque vous achetez un billet pour Meet Magento France 2025 vous accédez à la totalité des conférences de l’événement, du petit-déjeuner d’accueil à cocktail dinatoire de clôture, en passant par le déjeuner networking.",
     },
     {
       question: "What if I don't speak French?",
       icon: <FaLanguage color="#FF7DD1" size={16}/>,
-      answer:
-        "You are still welcomed! Although the main track will be Business and in French, we will have a secondary track for English Speakers and Tech talks.",
+      answer: "You are still welcomed! Although the main track will be Business and in French, we will have a secondary track for English Speakers and Tech talks.",
+    },
+    {
+      question: "Quels sont les transports à proximité de l'Étoile Business Center ?",
+      icon: <FaBus color="#FF7DD1" size={16}/>,
+      answer: "Oui.",
+    },
+    {
+      question: "Y aura-t-il un vestiaire sur place ?",
+      icon: <FaShirt color="#FF7DD1" size={16}/>,
+      answer: "Oui."
     },
   ];
 
+  const displayClass = display === 'grid'
+    ? 'grid grid-cols-2 gap-6'
+    : 'flex flex-col gap-4';
+  limit ??= faqList.length;
+
   return (
-    <div className="flex flex-col gap-4">
-      {faqList.map((faq, index) => (
+    <div className={displayClass}>
+      {faqList.slice(0, limit).map((faq, index) => (
         <div
           key={index}
           className="bg-purple-100 p-4 cursor-pointer rounded-3xl"
@@ -98,18 +119,6 @@ const Faq = () => {
           )}
         </div>
       ))}
-      {/*
-      <Typography variant="small" color="dark" weight="normal">
-        Pour toute autre question, consultez notre{" "}
-        <Link href="#" className="underline">
-          FAQ complète
-        </Link>{" "}
-        ou écrivez-nous via le{" "}
-        <Link href="#" className="underline">
-          formulaire de contact
-        </Link>
-      </Typography>
-      */}
     </div>
   );
 };

diff --git a/src/layouts/Footer/Footer.tsx b/src/layouts/Footer/Footer.tsx
@@ -25,7 +25,7 @@ const Footer = () => {
     {
       content: {
         type: 'link',
-        href: '/#faq',
+        href: '/contact',
         text: 'FAQ & Contact'
       },
       className: footerMenuItemLinkStyles