feat(static-pages) : add mailto

public/locale/i18n/de/resource.json

@@ -5,6 +5,7 @@
   "Privacy policy": "Datenschutzerklärung",
   "Legal notices": "Rechtliche Hinweise",
   "FAQ": "FAQ",
+  "Need help?": "Brauchen Sie Hilfe?",
   "BetterVote": " BetterVote",
   "Voting platform": "Wahlplattform",
   "Majority Judgment": " Mehrheitswahl ",

public/locale/i18n/en/resource.json

@@ -5,6 +5,7 @@
   "Privacy policy": "Privacy policy",
   "Legal notices": "Legal notices",
   "FAQ": "FAQ",
+  "Need help?": "Need help?",
   "BetterVote": "BetterVote",
   "Voting platform": "Voting platform",
   "Majority Judgment": "Majority Judgment",

public/locale/i18n/es/resource.json

@@ -5,6 +5,7 @@
   "Privacy policy": "Política de privacidad",
   "Legal notices": "Avisos legales",
   "FAQ": "FAQ",
+  "Need help?": "¿Necesitas ayuda?",
   "BetterVote": "VotarMejor",
   "Voting platform": "Plataforma de votación",
   "Majority Judgment": "Juicio Mayoritario",

public/locale/i18n/fr/resource.json

@@ -5,6 +5,7 @@
   "Privacy policy": "Politique de confidentialité",
   "Legal notices": "Mentions légales",
   "FAQ": "FAQ",
+  "Need help?": "Besoin d'aide ?",
   "BetterVote": "MieuxVoter",
   "Voting platform": "Plateforme de vote",
   "Majority Judgment": "Jugement Majoritaire",

public/locale/i18n/ru/resource.json

@@ -5,6 +5,7 @@
   "Privacy policy": "Политика конфиденциальности",
   "Legal notices": "Официальные уведомления",
   "FAQ": "ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ",
+  "Need help?": "Нужна помощь?",
   "BetterVote": "BetterVote",
   "Voting platform": "Платформа голосования",
   "Majority Judgment": "Решение Большинства",

src/components/layouts/Footer.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import { withTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import Paypal from "../banner/Paypal";
-import {useBbox} from "./useBbox";
+import { useBbox } from "./useBbox";
 import "./footer.css";
 
 const Footer = props => {
@@ -16,52 +16,76 @@ const Footer = props => {
   const [bboxLink4, link4] = useBbox();
   const [bboxLink5, link5] = useBbox();
   const [bboxLink6, link6] = useBbox();
+  const [bboxLink7, link7] = useBbox();
 
   return (
     <footer className="text-center">
       <div>
         <ul className="tacky">
-          <li ref={link1} className={(bboxLink1.top===bboxLink2.top)?"":"no-tack"}>
-            <Link to="/" style={linkStyle} >
+          <li
+            ref={link1}
+            className={bboxLink1.top === bboxLink2.top ? "" : "no-tack"}
+          >
+            <Link to="/" style={linkStyle}>
               {t("Homepage")}
             </Link>
           </li>
-          <li ref={link2} className={(bboxLink2.top===bboxLink3.top)?"":"no-tack"}>
-            {" "}
+          <li
+            ref={link2}
+            className={bboxLink2.top === bboxLink3.top ? "" : "no-tack"}
+          >
+            <Link to="/faq" style={linkStyle}>
+              {t("FAQ")}
+            </Link>
+          </li>
+          <li
+            ref={link3}
+            className={bboxLink3.top === bboxLink4.top ? "" : "no-tack"}
+          >
+            <a href="mailto:contact@mieuxvoter.fr" style={linkStyle}>
+              {t("Need help?")}
+            </a>
+          </li>
+          <li
+            ref={link4}
+            className={bboxLink4.top === bboxLink5.top ? "" : "no-tack"}
+          >
             <a
-              href="https://github.com/MieuxVoter"
+              href="https://mieuxvoter.fr/"
               target="_blank"
               rel="noopener noreferrer"
               style={linkStyle}
             >
-              {t("Source code")}
+              {t("Who are we?")}
             </a>
           </li>
-          <li ref={link3} className={(bboxLink3.top===bboxLink4.top)?"":"no-tack"}>
+          <li
+            ref={link5}
+            className={bboxLink5.top === bboxLink6.top ? "" : "no-tack"}
+          >
+            <Link to="/privacy-policy" style={linkStyle}>
+              {t("Privacy policy")}
+            </Link>
+          </li>
+          <li
+            ref={link6}
+            className={bboxLink6.top === bboxLink7.top ? "" : "no-tack"}
+          >
+            <Link to="/legal-notices" style={linkStyle}>
+              {t("Legal notices")}
+            </Link>
+          </li>
+          <li ref={link7}>
+            {" "}
             <a
-              href="https://mieuxvoter.fr/"
+              href="https://github.com/MieuxVoter"
               target="_blank"
               rel="noopener noreferrer"
               style={linkStyle}
             >
-              {t("Who are we?")}
+              {t("Source code")}
             </a>
           </li>
-            <li ref={link4} className={(bboxLink4.top===bboxLink5.top)?"":"no-tack"}>
-                <Link to="/privacy-policy" style={linkStyle}>
-                    {t("Privacy policy")}
-                </Link>
-            </li>
-            <li ref={link5} className={(bboxLink5.top===bboxLink6.top)?"":"no-tack"}>
-                <Link to="/legal-notices" style={linkStyle}>
-                    {t("Legal notices")}
-                </Link>
-            </li>
-            <li ref={link6}>
-                <Link to="/faq" style={linkStyle}>
-                    {t("FAQ")}
-                </Link>
-            </li>
         </ul>
       </div>
       <div className="mt-3">