From d1617ea76e10792b2979a07a88a6ef1c8fbca417 Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Wed, 21 Dec 2022 19:32:14 +0100
Subject: [PATCH] =?UTF-8?q?fi:x=20modifications=20from=20Chlo=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Experience.tsx            |  16 +-
 components/Logo.tsx                  |  12 +-
 components/Share.tsx                 |  56 ++--
 components/WaitingBallot.tsx         |  42 +--
 components/admin/CandidatesField.tsx |  82 +++---
 components/admin/Title.tsx           |   8 +-
 components/layouts/Footer.tsx        |  19 +-
 package.json                         | 122 ++++-----
 pages/faq.tsx                        | 393 +++++++++++----------------
 public/locales/en/resource.json      | 345 ++++++++++++-----------
 public/locales/fr/resource.json      | 347 ++++++++++++-----------
 services/constants.ts                |  20 +-
 services/routes.ts                   |   1 +
 13 files changed, 744 insertions(+), 719 deletions(-)

diff --git a/components/Experience.tsx b/components/Experience.tsx
index fea2de3..7fc083e 100644
--- a/components/Experience.tsx
+++ b/components/Experience.tsx
@@ -1,13 +1,14 @@
-import { useTranslation } from 'next-i18next';
+import {MAJORITY_JUDGMENT_LINK} from '@services/constants';
+import {useTranslation} from 'next-i18next';
 import Image from 'next/image';
-import { Row, Col, Button, Container } from 'reactstrap';
+import {Row, Col, Button, Container} from 'reactstrap';
 import arrowRight from '../public/arrow-white.svg';
 import vote from '../public/vote.svg';
 
 const Experiencediv = () => {
-  const { t } = useTranslation('resource');
+  const {t} = useTranslation('resource');
   return (
-    <div className="sectionTwodivTwo">
+    <div className="sectionTwodivTwo mt-4">
       <div className="w-100 justify-content-center d-flex">
         <Image
           className="d-block d-md-none"
@@ -17,8 +18,8 @@ const Experiencediv = () => {
       </div>
 
       <div className="d-md-block d-none vote_background"></div>
-      <h3 className="mb-5">{t('home.experience-name')}</h3>
-      <Container>
+      <h3>{t('home.experience-name')}</h3>
+      <Container className="my-5">
         <Row className="sectionTwodivTwodiv mb-5">
           <Col className="sectionTwodivTwodivText col-12 col-md-4">
             <h5 className="">{t('home.experience-1-name')}</h5>
@@ -32,6 +33,7 @@ const Experiencediv = () => {
         </Row>
       </Container>
       <div className="d-flex w-100 justify-content-center mt-5">
+      <a href={MAJORITY_JUDGMENT_LINK} target="_blank" rel="noreferrer noopener">
         <Button color="primary" className="p-4 fs-5">
           {t('home.experience-call-to-action')}
           <Image
@@ -40,7 +42,7 @@ const Experiencediv = () => {
             height={22}
             alt="icon arrow right"
           />
-        </Button>
+        </Button></a>
       </div>
     </div>
   );
diff --git a/components/Logo.tsx b/components/Logo.tsx
index 61d0eda..0e085e0 100644
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -1,17 +1,21 @@
 import Image from 'next/image';
+import {useTranslation} from 'next-i18next';
+import {HOME} from '@services/routes';
 import logoWithText from '../public/logos/logo.svg';
 import logo from '../public/logos/logo-footer.svg';
-import { useTranslation } from 'next-i18next';
+
 
 interface LogoProps {
   title?: boolean;
   [props: string]: any;
 }
 
-const Logo = ({ title = true, ...props }: LogoProps) => {
-  const { t } = useTranslation();
+const Logo = ({title = true, ...props}: LogoProps) => {
+  const {t} = useTranslation();
   const src = title ? logoWithText : logo;
-  return <Image src={src} alt={t('logo.alt')} className="d-block" {...props} />;
+  return <a href={HOME} >
+    <Image src={src} alt={t('logo.alt')} className="d-block" {...props} />
+  </a>;
 };
 
 export default Logo;
diff --git a/components/Share.tsx b/components/Share.tsx
index 36735ab..dae686a 100644
--- a/components/Share.tsx
+++ b/components/Share.tsx
@@ -1,38 +1,38 @@
 import Image from 'next/image';
-import { useTranslation } from 'next-i18next';
-import { Row, Col } from 'reactstrap';
+import {useTranslation} from 'next-i18next';
+import {Row, Col} from 'reactstrap';
 import twitter from '../public/twitter.svg';
 import facebook from '../public/facebook.svg';
 
 interface ShareInterface {
-  title?: string;
+	title?: string;
 }
 
-const ShareRow = ({ title }: ShareInterface) => {
-  const { t } = useTranslation('resource');
-  return (
-    <Row className="sharing justify-content-md-center">
-      <Col className="col-md-auto col-12">{title || t('common.share')}</Col>
-      <Col className="col-auto">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://www.facebook.com/mieuxvoter.fr/"
-        >
-          <Image height={22} width={22} src={facebook} alt="icon facebook" />
-        </a>
-      </Col>
-      <Col className="col-auto">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href="https://twitter.com/mieux_voter"
-        >
-          <Image height={22} width={22} src={twitter} alt="icon twitter" />
-        </a>
-      </Col>
-    </Row>
-  );
+const ShareRow = ({title}: ShareInterface) => {
+	const {t} = useTranslation('resource');
+	return (
+		<Row className="sharing justify-content-md-center">
+			<Col className="col-md-auto mb-md-0 mb-3 col-12">{title || t('common.share')}</Col>
+			<Col className="col-auto">
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					href="https://www.facebook.com/mieuxvoter.fr/"
+				>
+					<Image height={22} width={22} src={facebook} alt="icon facebook" />
+				</a>
+			</Col>
+			<Col className="col-auto">
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					href="https://twitter.com/mieux_voter"
+				>
+					<Image height={22} width={22} src={twitter} alt="icon twitter" />
+				</a>
+			</Col>
+		</Row>
+	);
 };
 
 export default ShareRow;
diff --git a/components/WaitingBallot.tsx b/components/WaitingBallot.tsx
index 2b41e70..cd2c3aa 100644
--- a/components/WaitingBallot.tsx
+++ b/components/WaitingBallot.tsx
@@ -1,20 +1,20 @@
 import Image from 'next/image';
-import { useTranslation } from 'next-i18next';
-import { CSSProperties, useEffect, useState } from 'react';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Col, Container, Row } from 'reactstrap';
+import {useTranslation} from 'next-i18next';
+import {CSSProperties, useEffect, useState} from 'react';
+import {faArrowRight} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {Col, Container, Row} from 'reactstrap';
 import Button from '@components/Button';
 import ButtonCopy from '@components/ButtonCopy';
 import Share from '@components/Share';
 import ErrorMessage from '@components/Error';
 import AdminModalEmail from '@components/admin/AdminModalEmail';
-import { BallotPayload, ErrorPayload } from '@services/api';
-import { AppTypes, useAppContext } from '@services/context';
-import { displayRef, isEnded } from '@services/utils';
-import { RESULTS } from '@services/routes';
+import {BallotPayload, ErrorPayload} from '@services/api';
+import {AppTypes, useAppContext} from '@services/context';
+import {displayRef, isEnded} from '@services/utils';
+import {RESULTS} from '@services/routes';
 import Logo from './Logo';
-import { FORM_FEEDBACK } from '@services/constants';
+import {FORM_FEEDBACK, MAJORITY_JUDGMENT_LINK} from '@services/constants';
 import urne from '../public/urne.svg';
 import star from '../public/star.svg';
 import logo from '../public/logo-red-blue.svg';
@@ -25,8 +25,8 @@ export interface WaitingBallotInterface {
   error?: ErrorPayload;
 }
 
-const ButtonResults = ({ election }) => {
-  const { t } = useTranslation();
+const ButtonResults = ({election}) => {
+  const {t} = useTranslation();
 
   if (!election.hideResults || isEnded(election.date_end)) {
     return (
@@ -42,14 +42,14 @@ const ButtonResults = ({ election }) => {
 };
 
 const DiscoverMajorityJudgment = () => {
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   return (
     <Col className="d-flex flex-column justify-content-between  bg-secondary p-4 text-white">
       <div>
         <h5>{t('vote.discover-mj')}</h5>
         <p>{t('vote.discover-mj-desc')}</p>
       </div>
-      <a href="https://mieuxvoter.fr/le-jugement-majoritaire">
+      <a href={MAJORITY_JUDGMENT_LINK} target="_blank" rel="noopener noreferrer">
         <div className="d-flex align-items-center">
           <div className="me-2">{t('common.about')}</div>
           <FontAwesomeIcon icon={faArrowRight} />
@@ -60,7 +60,7 @@ const DiscoverMajorityJudgment = () => {
 };
 
 const SupportBetterVote = () => {
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   return (
     <Col className="d-flex flex-column justify-content-between  text-secondary p-4 bg-white">
       <div>
@@ -81,7 +81,7 @@ const SupportBetterVote = () => {
 };
 
 const Thanks = () => {
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   return (
     <>
       <h5>{t('vote.thanks')}</h5>
@@ -99,8 +99,8 @@ interface InfoInterface extends WaitingBallotInterface {
   display: string;
 }
 
-const Info = ({ ballot, error, display }: InfoInterface) => {
-  const { t } = useTranslation();
+const Info = ({ballot, error, display}: InfoInterface) => {
+  const {t} = useTranslation();
 
   if (!ballot) return null;
 
@@ -132,7 +132,7 @@ const Info = ({ ballot, error, display }: InfoInterface) => {
   );
 };
 
-export default ({ ballot, error }: WaitingBallotInterface) => {
+export default ({ballot, error}: WaitingBallotInterface) => {
   const [_, dispatch] = useAppContext();
 
   const [urneProperties, setUrne] = useState<CSSProperties>({
@@ -154,7 +154,7 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
   });
 
   useEffect(() => {
-    dispatch({ type: AppTypes.FULLPAGE, value: true });
+    dispatch({type: AppTypes.FULLPAGE, value: true});
 
     setUrne((urne) => ({
       ...urne,
@@ -193,7 +193,7 @@ export default ({ ballot, error }: WaitingBallotInterface) => {
     }, 3000);
 
     const timer3 = setTimeout(() => {
-      setBallot({ display: 'grid' });
+      setBallot({display: 'grid'});
     }, 4500);
 
     return () => {
diff --git a/components/admin/CandidatesField.tsx b/components/admin/CandidatesField.tsx
index 52f8852..4659e31 100644
--- a/components/admin/CandidatesField.tsx
+++ b/components/admin/CandidatesField.tsx
@@ -5,34 +5,42 @@ import {
   KeyboardEvent,
   MouseEventHandler,
 } from 'react';
-import { useTranslation } from 'next-i18next';
-import { Container } from 'reactstrap';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
-import { DndContext } from '@dnd-kit/core';
-import { arrayMove, SortableContext } from '@dnd-kit/sortable';
-import { MAX_NUM_CANDIDATES } from '@services/constants';
+import {useTranslation} from 'next-i18next';
+import {Container} from 'reactstrap';
+import {DndContext} from '@dnd-kit/core';
+import {arrayMove, SortableContext} from '@dnd-kit/sortable';
+import {faArrowRight, faPen} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import TitleModal from './TitleModal';
+import {MAX_NUM_CANDIDATES} from '@services/constants';
 import Alert from '@components/Alert';
 import Button from '@components/Button';
-import { ElectionTypes, useElection } from '@services/ElectionContext';
+import {ElectionTypes, useElection} from '@services/ElectionContext';
 import CandidateField from './CandidateField';
-import { AppTypes, useAppContext } from '@services/context';
+import {AppTypes, useAppContext} from '@services/context';
 
-const CandidatesField = ({ onSubmit }) => {
-  const { t } = useTranslation();
+
+const CandidatesField = ({onSubmit}) => {
+  const {t} = useTranslation();
   const submitReference = useRef(null);
 
   const [_, dispatchApp] = useAppContext();
 
   const [election, dispatch] = useElection();
   const candidates = election.candidates;
+
+  const [modalTitle, setModalTitle] = useState(false);
+  const toggleModalTitle = () => setModalTitle((m) => !m);
+
   const [error, setError] = useState(null);
+
   const disabled = candidates.filter((c) => c.name !== '').length < 2;
 
   // What to do when we change the candidates
   useEffect(() => {
     // Initialize the list with at least two candidates
     if (candidates.length < 2) {
-      dispatch({ type: ElectionTypes.CANDIDATE_PUSH, value: 'default' });
+      dispatch({type: ElectionTypes.CANDIDATE_PUSH, value: 'default'});
     }
     if (candidates.length > MAX_NUM_CANDIDATES) {
       setError('error.too-many-candidates');
@@ -67,7 +75,7 @@ const CandidatesField = ({ onSubmit }) => {
     /**
      * Update the list of grades after dragging an item
      */
-    const { active, over } = event;
+    const {active, over} = event;
 
     if (over && over.id && active.id && active.id !== over.id) {
       const newCandidates = arrayMove(candidates, active.id - 1, over.id - 1);
@@ -83,26 +91,34 @@ const CandidatesField = ({ onSubmit }) => {
   const sortIds = election.candidates.map((_, i) => i + 1);
 
   return (
-    <DndContext onDragEnd={handleDragEnd}>
-      <SortableContext items={sortIds}>
-        <Container className="candidate flex-grow-1 my-5 flex-column d-flex justify-content-between">
-          <div className="d-flex flex-column">
-            <h4 className="mb-4">{t('admin.add-candidates')}</h4>
-            <Alert msg={error} />
-            <div className="d-flex flex-column mx-2 mx-md-0">
-              {candidates.map((_, index) => {
-                return (
-                  <CandidateField
-                    key={index}
-                    position={index}
-                    className="px-4 my-3"
-                  />
-                );
-              })}
+    <>
+      <Container onClick={toggleModalTitle} className="candidate">
+        <h4 className="mb-4">{t('admin.confirm-question')}</h4>
+        <div className="d-flex justify-content-between border border-dashed border-2 border-light border-opacity-25 px-4 py-3">
+          <h5 className="m-0 text-white">{election.name}</h5>
+          <FontAwesomeIcon icon={faPen} />
+        </div>
+        <TitleModal isOpen={modalTitle} toggle={toggleModalTitle} />
+      </Container>
+      <DndContext onDragEnd={handleDragEnd}>
+        <SortableContext items={sortIds}>
+          <Container className="candidate flex-grow-1 my-5 flex-column d-flex justify-content-between">
+            <div className="d-flex flex-column">
+              <h4 className="mb-4">{t('admin.add-candidates')}</h4>
+              <Alert msg={error} />
+              <div className="d-flex flex-column mx-2 mx-md-0">
+                {candidates.map((_, index) => {
+                  return (
+                    <CandidateField
+                      key={index}
+                      position={index}
+                      className="px-4 my-3"
+                    />
+                  );
+                })}
+              </div>
             </div>
-          </div>
 
-          <Container className="my-5 d-md-flex d-grid justify-content-md-center">
             <div onClick={handleSubmit}>
               <Button
                 outline={true}
@@ -116,9 +132,9 @@ const CandidatesField = ({ onSubmit }) => {
               </Button>
             </div>
           </Container>
-        </Container>
-      </SortableContext>
-    </DndContext>
+        </SortableContext>
+      </DndContext>
+    </>
   );
 };
 
diff --git a/components/admin/Title.tsx b/components/admin/Title.tsx
index 4039f5e..a15d775 100644
--- a/components/admin/Title.tsx
+++ b/components/admin/Title.tsx
@@ -1,13 +1,13 @@
 /**
  * This component manages the title of the election
  */
-import {faPen} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {useElection} from '@services/ElectionContext';
 import {useTranslation} from 'next-i18next';
 import {useState} from 'react';
-import {Col, Container, Row} from 'reactstrap';
+import {Container} from 'reactstrap';
+import {faPen} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import TitleModal from './TitleModal';
+import {useElection} from '@services/ElectionContext';
 
 const TitleField = () => {
   const {t} = useTranslation();
diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx
index c1226f3..8ed8250 100644
--- a/components/layouts/Footer.tsx
+++ b/components/layouts/Footer.tsx
@@ -4,6 +4,7 @@ import {Button, Row, Col} from 'reactstrap';
 import Logo from '@components/Logo';
 import LanguageSelector from '@components/layouts/LanguageSelector';
 import {useAppContext} from '@services/context';
+import {BETTER_VOTE_LINK, MAJORITY_JUDGMENT_LINK, NEWS_LINK, PAYPAL, WHO_WE_ARE_LINK} from '@services/constants';
 
 const Footer = () => {
   const {t} = useTranslation();
@@ -16,24 +17,30 @@ const Footer = () => {
       component: <Logo title={false} />,
     },
     {
-      component: <Link href="/">{t('menu.majority-judgment')}</Link>,
+      component:
+        <a
+          href={MAJORITY_JUDGMENT_LINK}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {t('menu.majority-judgment')}</a>,
     },
     {
       component: (
-        <Link
-          href="https://mieuxvoter.fr/"
+        <a
+          href={WHO_WE_ARE_LINK}
           target="_blank"
           rel="noopener noreferrer"
         >
           {t('menu.whoarewe')}
-        </Link>
+        </a>
       ),
     },
     {
       component: <Link href="/faq">{t('menu.faq')}</Link>,
     },
     {
-      component: <Link href="/">{t('menu.news')}</Link>,
+      component: <Link href={NEWS_LINK}>{t('menu.news')}</Link>,
     },
     {
       component: (
@@ -61,7 +68,7 @@ const Footer = () => {
         </Col>
         <Col className="col-auto">
           <Button outline={false} color="info" className="noshadow">
-            <a href="/">{t('common.support-us')}</a>
+            <a href={PAYPAL}>{t('common.support-us')}</a>
           </Button>
         </Col>
       </Row>
diff --git a/package.json b/package.json
index ab3033a..2ddfc07 100644
--- a/package.json
+++ b/package.json
@@ -1,63 +1,63 @@
 {
-  "name": "mieuxvoter-app",
-  "version": "2.0.0a",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "export": "next export"
-  },
-  "dependencies": {
-    "@babel/eslint-parser": "^7.19.1",
-    "@dnd-kit/core": "^6.0.5",
-    "@dnd-kit/sortable": "^7.0.1",
-    "@fortawesome/fontawesome-free": "^6.2.0",
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-brands-svg-icons": "^6.2.0",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@netlify/functions": "^1.3.0",
-    "@types/react": "^18.0.24",
-    "bootstrap": "^5.2.2",
-    "bootstrap-scss": "^5.2.2",
-    "clipboard": "^2.0.10",
-    "dotenv": "^8.6.0",
-    "embla-carousel-react": "^7.0.4",
-    "eslint-config-next": "^13.0.0",
-    "framer-motion": "^7.6.4",
-    "i18next": "^22.0.6",
-    "next": "^13.0.5",
-    "next-i18next": "^12.1.0",
-    "react": "^18.2.0",
-    "react-csv": "^2.2.2",
-    "react-datepicker": "^4.8.0",
-    "react-dom": "^18.2.0",
-    "react-flags-select": "^2.2.3",
-    "react-i18next": "^12.0.0",
-    "reactstrap": "^9.1.4",
-    "sass": "^1.32.13",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
-  },
-  "devDependencies": {
-    "@sendgrid/mail": "^7.7.0",
-    "@types/node": "18.11.9",
-    "cheerio": "^1.0.0-rc.12",
-    "eslint": "^8.11.0",
-    "eslint-plugin-react": "^7.29.3",
-    "form-data": "^4.0.0",
-    "handlebars": "^4.7.7",
-    "mailgun.js": "^8.0.6",
-    "postmark": "^3.0.14"
-  },
-  "prettier": {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": true,
-    "printWidth": 80,
-    "singleQuote": true
-  }
+	"name": "mieuxvoter-app",
+	"version": "2.0.0c",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint",
+		"export": "next export"
+	},
+	"dependencies": {
+		"@babel/eslint-parser": "^7.19.1",
+		"@dnd-kit/core": "^6.0.5",
+		"@dnd-kit/sortable": "^7.0.1",
+		"@fortawesome/fontawesome-free": "^6.2.0",
+		"@fortawesome/fontawesome-svg-core": "^6.2.0",
+		"@fortawesome/free-brands-svg-icons": "^6.2.0",
+		"@fortawesome/free-regular-svg-icons": "^6.2.0",
+		"@fortawesome/free-solid-svg-icons": "^6.2.0",
+		"@fortawesome/react-fontawesome": "^0.2.0",
+		"@netlify/functions": "^1.3.0",
+		"@types/react": "^18.0.24",
+		"bootstrap": "^5.2.2",
+		"bootstrap-scss": "^5.2.2",
+		"clipboard": "^2.0.10",
+		"dotenv": "^8.6.0",
+		"embla-carousel-react": "^7.0.4",
+		"eslint-config-next": "^13.0.0",
+		"framer-motion": "^7.6.4",
+		"i18next": "^22.0.6",
+		"next": "^13.0.5",
+		"next-i18next": "^12.1.0",
+		"react": "^18.2.0",
+		"react-csv": "^2.2.2",
+		"react-datepicker": "^4.8.0",
+		"react-dom": "^18.2.0",
+		"react-flags-select": "^2.2.3",
+		"react-i18next": "^12.0.0",
+		"reactstrap": "^9.1.4",
+		"sass": "^1.32.13",
+		"ts-node": "^10.9.1",
+		"typescript": "^4.8.4"
+	},
+	"devDependencies": {
+		"@sendgrid/mail": "^7.7.0",
+		"@types/node": "18.11.9",
+		"cheerio": "^1.0.0-rc.12",
+		"eslint": "^8.11.0",
+		"eslint-plugin-react": "^7.29.3",
+		"form-data": "^4.0.0",
+		"handlebars": "^4.7.7",
+		"mailgun.js": "^8.0.6",
+		"postmark": "^3.0.14"
+	},
+	"prettier": {
+		"trailingComma": "es5",
+		"tabWidth": 2,
+		"semi": true,
+		"printWidth": 80,
+		"singleQuote": true
+	}
 }
diff --git a/pages/faq.tsx b/pages/faq.tsx
index 90cf814..484fa0d 100644
--- a/pages/faq.tsx
+++ b/pages/faq.tsx
@@ -3,6 +3,7 @@ import {Container, Row, Col} from 'reactstrap';
 import {useTranslation} from 'next-i18next';
 import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
 import {GetStaticProps} from 'next';
+import Logo from '@components/Logo';
 
 export const getStaticProps: GetStaticProps = async ({locale}) => ({
   props: {
@@ -10,250 +11,160 @@ export const getStaticProps: GetStaticProps = async ({locale}) => ({
   },
 });
 
+
 const FAQ = () => {
   const {t} = useTranslation();
   return (
-    <Container>
-      <Row>
-        <Link href="/" className="d-block mb-4">
-          <img src="/logos/logo-line-white.svg" alt="logo" height="128" />
-        </Link>
-      </Row>
-      <Row className="mt-4">
-        <Col className="text-center">
-          <h1>{t('FAQ')}</h1>
-        </Col>
-      </Row>
-      <Row className="mt-4">
-        <Col>
-          <h4 className="bold mt-5">Qu’est-ce que le Jugement Majoritaire ?</h4>
-          <p>
-            Un principe simple et intuitif, qui change tout : l’électeur vote en
-            donnant son avis sur toutes les candidatures présentées, leur
-            attribuant la mention de son choix (par exemple. Très bien, Bien,
-            Assez bien, Passable, Insuffisant, À Rejeter). La candidature
-            retenue est celle jugée la plus méritante par la majorité de
-            l’électorat (celui qui obtient la meilleure mention « majoritaire
-            »).
-          </p>
-          <div style={{maxWidth: '445px'}}>
-            <video width="100%" height="250" controls={true}>
-              <source
-                src="/video/Le_Jugement_Majoritaire_en_1_minute.mp4"
-                type="video/mp4"
-              />
-              <source
-                src="/video/Le_Jugement_Majoritaire_en_1_minute.webm"
-                type="video/webm"
-              />
-              <source
-                src="/video/Le_Jugement_Majoritaire_en_1_minute.3gpp"
-                type="video/3gpp"
-              />
-            </video>
-          </div>
-
-          <h4 className="bold mt-5">D’où vient le Jugement Majoritaire ?</h4>
-          <p>
-            Le jugement majoritaire est un mode de scrutin inventé par deux
-            chercheurs Français du Centre National de la Recherche Scientifique
-            (CNRS) en 2011, <u>Michel Balinski</u> et <u>Rida Laraki</u>.
-          </p>
-
-          <h4 className="bold mt-5">
-            Quels sont les avantages du Jugement Majoritaire ?
-          </h4>
-          <p>
-            Une mesure précise de l’opinion des participants au vote, à même
-            d’éclairer la décision collective. En demandant aux électeurs leur
-            opinion sur chaque option soumise au vote, on bénéficie de beaucoup
-            plus d’informations que dans le cadre du scrutin uninominal qui,
-            résumant l’opinion des électeurs à un choix, ignore l’essentiel de
-            l’information quant à ce qu’ils pensent. En agrégeant un grand
-            nombre d’informations, le Jugement Majoritaire ne produit pas «
-            juste » un gagnant qui obtiendrait la majorité des voix. Il mesure
-            précisément le crédit porté à chacune des options et permet
-            d’affiner autant que de pacifier la prise de décision.
-          </p>
-
-          <h4 className="bold mt-5">
-            Quand et comment utiliser le Jugement Majoritaire ?
-          </h4>
-          <p>
-            Le Jugement majoritaire s’applique à tout type de votation
-            collective, qu’il s’agisse d’élire un candidat, de retenir une ou
-            plusieurs idées lors d’un atelier collaboratif, de choisir entre
-            plusieurs projets, de classer les vins, etc. Il peut être utilisé à
-            toutes les échelles (locale, nationale, internationale) et dans tous
-            les milieux (écoles, entreprises, associations, coopératives,
-            collectivités publiques…).
-          </p>
-
-          <h4 className="bold mt-5">Qui peut utiliser cette application ?</h4>
-          <p>
-            Cette application de Jugement Majoritaire est ouverte à toute
-            personne désireuse de prendre une décision collective, entre amis,
-            entre collègues, entre membres d’un groupe. Elle est libre d’accès
-            et gratuite. Notre ambition est de vous proposer la meilleure
-            expérience de prise de décision collective et démocratique.
-          </p>
-
-          <h4 className="bold mt-5">
-            Comment organiser une élection avec plusieurs milliers de votants ?
-          </h4>
-          <p>
-            Cette application ne convient pas pour les votes à plus de 1000
-            votants. Si c’est votre cas, nous vous invitons à nous contacter par
-            email à l’adresse{' '}
-            <a href="mailto:contact@mieuxvoter.fr" className="text-light">
-              contact@mieuxvoter.fr
-            </a>
-            . Dans le cas d’un vote sur invitation nous vous suggérons de ne pas
-            dépasser 200 participants (le temps de création du vote peut prendre
-            quelques minutes).
-          </p>
-
-          <h4 className="bold mt-5">
-            Je rencontre un problème, comment obtenir de l’aide ?
-          </h4>
-          <p>
-            Si vous rencontrez un problème en utilisant notre application,
-            prenez contact avec nous par email à l’adresse «
-            <a
-              href="mailto:app@mieuxvoter.fr?subject=[HELP]"
-              className="text-light"
-            >
-              app@mieuxvoter.fr
-            </a>
-            », et prenez soin de bien décrire le problème rencontré dans votre
-            message. Ajoutez éventuellement dans votre description le lien de
-            votre vote.
-          </p>
-
-          <h4 className="bold mt-5">
-            Y-a t’il une limite de votants appliquée pour les votes sur
-            invitation ?
-          </h4>
-          <p>
-            Le nombre maximum de votants pour un vote sur invitation est de 1000
-            personnes. Si toutefois votre besoin est supérieur à cette limite,
-            nous vous invitons à nous envoyer un email à l’adresse «
-            <a href="mailto:contact@mieuxvoter.fr" className="text-light">
-              contact@mieuxvoter.fr
-            </a>
-            ».
-          </p>
-
-          <h4 className="bold mt-5">
-            Combien de temps le lien vers la page de résultat reste-t-il actif ?
-          </h4>
-          <p>
-            Les liens fournis lors de la création de votre vote n’ont pas de
-            date d’expiration. Conservez-les précieusement afin de pouvoir
-            consulter les résultat dans le futur.
-          </p>
-
-          <h4 className="bold mt-5">
-            Comment puis-je m’assurer qu’une même personne ne vote pas deux
-            fois?
-          </h4>
-          <p>
-            Dans le cas d’un vote sur invitation, seules les personnes dont le
-            courriel a été ajouté à la création du vote reçoivent une invitation
-            et peuvent donc voter. Chacune des invitations dispose d’un lien
-            unique auquel est associé un jeton à usage unique. Ce jeton est
-            détruit aussitôt que la participation au vote de l’invité est
-            enregistrée. Il garantit donc à l’organisateur que chaque
-            participant n’a pu voter qu’une seule fois.
-          </p>
-
-          <p>
-            Dans le cas d’un vote public, toute personne peut participer à
-            l’élection s’il dispose du lien de l’élection. Il n’y a dans ce cas
-            aucune limite de soumission d’un vote. Une même personne peut donc
-            voter plusieurs fois.
-          </p>
-
-          <h4 className="bold mt-5">
-            Lorsque j’organise une élection, puis-je connaître le nombre et
-            l’identité des votants?
-          </h4>
-          <p>
-            Le nombre de votants est indiqué sur la page de résultats de votre
-            élection. L’identité des votants est quant à elle effacée, afin de
-            respecter les conditions d’un vote démocratique où l’anonymat
-            garantit la sincérité des électeurs.
-          </p>
-
-          <h4 className="bold mt-5">Puis-je modifier mon vote ?</h4>
-          <p>
-            Une fois votre vote enregistré, vous ne pouvez plus le modifier. En
-            effet, votre vote étant anonymisé, ce qui nous empêche de faire le
-            lien entre vous et votre vote.
-          </p>
-
-          <h4 className="bold mt-5">
-            Comment puis-je récupérer un lien si je l’ai perdu ?
-          </h4>
-          <p>
-            Vous ne pouvez pas récupérer un lien pour voter après qu’il vous
-            soit communiquer. Gardez le précieusement. Cependant si vous avez le
-            lien pour voter, nous pouvons vous transmettre le lien des
-            résultats.
-          </p>
-
-          <h4 className="bold mt-5">
-            Comment interpréter les résultats d’un vote au Jugement Majoritaire
-            ?
-          </h4>
-          <p>
-            Les candidats ou propositions sont triées de la mention majoritaire
-            la plus favorable à la plus défavorable. En cas d’égalité, on
-            calcule alors pour chaque candidat à départager: le pourcentage
-            d’électeurs attribuant strictement plus que la mention majoritaire
-            commune et le pourcentage d’électeurs attribuant strictement moins
-            que la mention majoritaire commune. La plus grande des 4 valeurs
-            détermine le résultat.
-          </p>
-
-          <h4 className="bold mt-5">Quelle sécurité pour mes données ?</h4>
-          <p>
-            Afin de garantir la sécurité de vos données, leur transmission est
-            chiffrée et vos votes sont anonymisés.
-          </p>
-
-          <h4 className="bold mt-5">
-            Que faites-vous des données collectées ?
-          </h4>
-          <p>
-            L’application app.mieuxvoter.fr a pour seul et unique but de faire
-            découvrir le vote au Jugement Majoritaire. Elle n’a pas de but
-            politique, ni commercial. Mieux Voter attache la plus grande
-            importance au strict respect de la vie privée, et utilise ces
-            données uniquement de manière responsable et confidentielle, dans
-            une finalité précise.
-          </p>
-
-          <h4 className="bold mt-5">Qui est Mieux Voter ?</h4>
-          <p>
-            « Mieux Voter » est une association loi 1901 qui promeut
-            l’utilisation du Jugement Majoritaire, nouvelle théorie du choix
-            social, comme un outil pour améliorer les décisions collectives et
-            les exercices de démocratie participative à l’usage de tous.
-          </p>
-
-          <h4 className="bold mt-5">
-            Comment nous aider à faire connaître le Jugement Majoritaire ?
-          </h4>
-          <p>
-            Vous avez apprécié votre expérience de vote démocratique au Jugement
-            Majoritaire ? <br />
-            Nous en sommes ravis ! Vous pouvez nous aider en faisant un don à
-            l’association ici :
-          </p>
-        </Col>
-      </Row>
-    </Container>
+    <div className="min-vw-100 min-vh-100 bg-secondary py-4">
+      <Container className="">
+        <Logo />
+        <div className="mt-4 text-center">
+          <h1>{t('faq.title')}</h1>
+        </div>
+        <div className="d-flex w-100 justify-content-center">
+          <video width="100%" height="250" controls={true}>
+            <source
+              src="/video/Le_Jugement_Majoritaire_en_1_minute.mp4"
+              type="video/mp4"
+            />
+            <source
+              src="/video/Le_Jugement_Majoritaire_en_1_minute.webm"
+              type="video/webm"
+            />
+            <source
+              src="/video/Le_Jugement_Majoritaire_en_1_minute.3gpp"
+              type="video/3gpp"
+            />
+          </video>
+        </div>
+        {[...Array(19)].map((i) => (<>
+          <h4 className="bold mt-5">{t(`faq.sec-${i}-title`)}</h4>
+          <p>{t(`faq.sec-${i}-desc`)}</p>
+        </>))}
+
+        <h4 className="bold mt-5">
+          Y-a t’il une limite de votants appliquée pour les votes sur
+          invitation ?
+        </h4>
+        <p>
+          Le nombre maximum de votants pour un vote sur invitation est de 1000
+          personnes. Si toutefois votre besoin est supérieur à cette limite,
+          nous vous invitons à nous envoyer un email à l’adresse «
+          <a href="mailto:contact@mieuxvoter.fr" className="text-light">
+            contact@mieuxvoter.fr
+          </a>
+          ».
+        </p>
+
+        <h4 className="bold mt-5">
+          Combien de temps le lien vers la page de résultat reste-t-il actif ?
+        </h4>
+        <p>
+          Les liens fournis lors de la création de votre vote n’ont pas de
+          date d’expiration. Conservez-les précieusement afin de pouvoir
+          consulter les résultat dans le futur.
+        </p>
+
+        <h4 className="bold mt-5">
+          Comment puis-je m’assurer qu’une même personne ne vote pas deux
+          fois?
+        </h4>
+        <p>
+          Dans le cas d’un vote sur invitation, seules les personnes dont le
+          courriel a été ajouté à la création du vote reçoivent une invitation
+          et peuvent donc voter. Chacune des invitations dispose d’un lien
+          unique auquel est associé un jeton à usage unique. Ce jeton est
+          détruit aussitôt que la participation au vote de l’invité est
+          enregistrée. Il garantit donc à l’organisateur que chaque
+          participant n’a pu voter qu’une seule fois.
+        </p>
+
+        <p>
+          Dans le cas d’un vote public, toute personne peut participer à
+          l’élection s’il dispose du lien de l’élection. Il n’y a dans ce cas
+          aucune limite de soumission d’un vote. Une même personne peut donc
+          voter plusieurs fois.
+        </p>
+
+        <h4 className="bold mt-5">
+          Lorsque j’organise une élection, puis-je connaître le nombre et
+          l’identité des votants?
+        </h4>
+        <p>
+          Le nombre de votants est indiqué sur la page de résultats de votre
+          élection. L’identité des votants est quant à elle effacée, afin de
+          respecter les conditions d’un vote démocratique où l’anonymat
+          garantit la sincérité des électeurs.
+        </p>
+
+        <h4 className="bold mt-5">Puis-je modifier mon vote ?</h4>
+        <p>
+          Une fois votre vote enregistré, vous ne pouvez plus le modifier. En
+          effet, votre vote étant anonymisé, ce qui nous empêche de faire le
+          lien entre vous et votre vote.
+        </p>
+
+        <h4 className="bold mt-5">
+          Comment puis-je récupérer un lien si je l’ai perdu ?
+        </h4>
+        <p>
+          Vous ne pouvez pas récupérer un lien pour voter après qu’il vous
+          soit communiquer. Gardez le précieusement. Cependant si vous avez le
+          lien pour voter, nous pouvons vous transmettre le lien des
+          résultats.
+        </p>
+
+        <h4 className="bold mt-5">
+          Comment interpréter les résultats d’un vote au jugement majoritaire
+          ?
+        </h4>
+        <p>
+          Les candidats ou propositions sont triées de la mention majoritaire
+          la plus favorable à la plus défavorable. En cas d’égalité, on
+          calcule alors pour chaque candidat à départager: le pourcentage
+          d’électeurs attribuant strictement plus que la mention majoritaire
+          commune et le pourcentage d’électeurs attribuant strictement moins
+          que la mention majoritaire commune. La plus grande des 4 valeurs
+          détermine le résultat.
+        </p>
+
+        <h4 className="bold mt-5">Quelle sécurité pour mes données ?</h4>
+        <p>
+          Afin de garantir la sécurité de vos données, leur transmission est
+          chiffrée et vos votes sont anonymisés.
+        </p>
+
+        <h4 className="bold mt-5">
+          Que faites-vous des données collectées ?
+        </h4>
+        <p>
+          L’application app.mieuxvoter.fr a pour seul et unique but de faire
+          découvrir le vote au jugement majoritaire. Elle n’a pas de but
+          politique, ni commercial. Mieux Voter attache la plus grande
+          importance au strict respect de la vie privée, et utilise ces
+          données uniquement de manière responsable et confidentielle, dans
+          une finalité précise.
+        </p>
+
+        <h4 className="bold mt-5">Qui est Mieux Voter ?</h4>
+        <p>
+          « Mieux Voter » est une association loi 1901 qui promeut
+          l’utilisation du jugement majoritaire, nouvelle théorie du choix
+          social, comme un outil pour améliorer les décisions collectives et
+          les exercices de démocratie participative à l’usage de tous.
+        </p>
+
+        <h4 className="bold mt-5">
+          Comment nous aider à faire connaître le jugement majoritaire ?
+        </h4>
+        <p>
+          Vous avez apprécié votre expérience de vote démocratique au Jugement
+          Majoritaire ? <br />
+          Nous en sommes ravis ! Vous pouvez nous aider en faisant un don à
+          l’association ici :
+        </p>
+      </Container >
+    </div >
   );
 };
 
diff --git a/public/locales/en/resource.json b/public/locales/en/resource.json
index 5304678..cc96753 100644
--- a/public/locales/en/resource.json
+++ b/public/locales/en/resource.json
@@ -1,155 +1,194 @@
 {
-  "home.motto": "Simple and free",
-  "home.slogan": "Organize a vote with majority judgment",
-  "logo.alt": "Logo of Better Vote",
-  "home.writeQuestion": "Write here your question or describe your vote.",
-  "home.start": "Start a vote",
-  "home.noAds": "No advertising or ad cookies",
-  "home.advantage-1-name": "Simple",
-  "home.advantage-1-desc": "Create a vote in less than 1 minute!",
-  "home.advantage-2-name": "Free",
-  "home.advantage-2-desc": "Send invites without any limitations!",
-  "home.advantage-3-name": "Respecting your privacy",
-  "home.advantage-3-desc": "No personal data is recorded",
-  "home.experience-name": "A democratic and intuitive voting experience",
-  "home.experience-1-name": "Express your full opinion.",
-  "home.experience-1-desc": "With majority judgment, each candidate is evaluated on a grid of mentions. Strategic voting has no use anymore.",
-  "home.experience-2-name": "Get the best possible consensus.",
-  "home.experience-2-desc": "The merit profile provides an accurate picture of the voters' opinions. The winner of the vote is the one with the best majority rating.",
-  "home.experience-call-to-action": "Find out about the majority judgment",
-  "home.alt-icon-ballot-box": "icon of a ballot box",
-  "home.alt-icon-envelop": "icon of an envelop",
-  "home.alt-icon-respect": "icon of hands holding each other",
-  "home.alt-icon-ballot": "icon of a ballot",
-  "menu.majority-judgment": "Majority judgment",
-  "menu.whoarewe": "Who are we?",
-  "menu.faq": "FAQ",
-  "menu.news": "News",
-  "menu.contact-us": "Contact us",
-  "common.about": "Read more",
-  "common.about-mj": "Read more about Better Vote",
-  "common.donation": "Make a donation",
-  "common.error": "Oh no... An error has occured...",
-  "common.better-vote": "Better Vote",
-  "common.share": "Share the application Better Vote",
-  "common.share-short": "Share the application",
-  "common.save": "Save",
-  "common.back-homepage": "Return to home page",
-  "common.support-us": "Support us",
-  "common.thumbnail": "Thumbnail",
-  "common.name": "Name",
-  "common.participants": "participants",
-  "common.participant": "participant",
-  "common.description": "Description",
-  "common.cancel": "Cancel",
-  "common.grades": "Grades",
-  "common.invites": "invites",
-  "common.days": "days",
-  "common.send": "Send",
-  "common.vote": "Vote",
-  "common.the-vote": "The vote",
-  "common.the-params": "The parameters",
-  "common.welcome": "Welcome!",
-  "error.at-least-2-candidates": "At least two candidates are required.",
-  "error.cant-set-ongoing": "You can not set this parameter for an ongoing election",
-  "error.ended-election": "The election has ended",
-  "error.catch22": "Unknown error...",
-  "error.help": "Ask for our help",
-  "error.no-title": "Please add a title to your election.",
-  "error.twice-same-names": "Two items have the same name.",
-  "error.empty-name": "The name is empty",
-  "error.date-past": "The date is in the past",
-  "error.cant-be-finished": "The election will never be closed. Add invites, access to results, or a ending date.",
-  "error.not-enough-grades": "Not enough grades",
-  "error.not-enough-candidates": "Not enough candidates",
-  "error.uncorrect-name": "The title is incorrect",
-  "grades.very-good": "Very good",
-  "grades.good": "Good",
-  "grades.passable": "Passable",
-  "grades.inadequate": "Inadequate",
-  "grades.mediocre": "Mediocre",
-  "admin.admin-title": "Voting management panel",
-  "admin.close-election": "Close the election",
-  "admin.date-limit": "Set a deadline for voting",
-  "admin.set-title": "Set the question of the vote",
-  "admin.step-candidate": "Candidates",
-  "admin.step-params": "Parameters",
-  "admin.step-confirm": "Confirm",
-  "admin.add-candidates": "Add the candidates.",
-  "admin.add-candidate": "Add a candidate",
-  "admin.add-candidate-desc": "Add a picture, a name, and a description of the candidate.",
-  "admin.add-grade": "Add a grade",
-  "admin.add-grade-desc": "The name of the grade must be unique.",
-  "admin.grade-name-placeholder": "Add the name of the grade",
-  "admin.candidate-confirm-del": "You want to remove a candidate",
-  "admin.candidate-confirm-back": "No, I keep it",
-  "admin.candidate-confirm-ok": "Delete",
-  "admin.candidate-name-placeholder": "Add the name or the title of the candidate.",
-  "admin.candidate-desc-placeholder": "Add the description of the candidate.",
-  "admin.candidates-submit": "Validate the candidates",
-  "admin.candidates-back-step": "Back to candidates",
-  "admin.modal-title": "Managing an election",
-  "admin.modal-desc": "This link allows you to modify your election. Keep it carefully, as it will not be provided to you again.",
-  "admin.modal-email": "To receive a copy of this link by email, fill out this form.",
-  "admin.modal-disclaimer": "We do not store any mail. Thus, we will not send you any advertising content.",
-  "admin.modal-email-placeholder": "Your mail address",
-  "admin.order-title": "Candidates in a random order",
-  "admin.order-desc": "To avoid any cognitive bias, we recommend that candidates appear in random order on the ballot.",
-  "admin.params-submit": "Validate the parameters",
-  "admin.params-title": "Your parameters",
-  "admin.access-results": "Immediate access to the results",
-  "admin.access-results-desc": "No one can access to the results as long as the vote is not closed.",
-  "admin.limit-duration": "Limit the duration of the vote",
-  "admin.limit-duration-desc": "",
-  "admin.photo": "Picture",
-  "admin.optional": "optional",
-  "admin.photo-import": "Import a picture",
-  "admin.photo-type": "Supported type:",
-  "admin.grades-desc": "You can choose to customize the name and the number of mentions. If in doubt, leave the grades as is.",
-  "admin.ending-in": "In",
-  "admin.until": "Until",
-  "admin.private-title": "Private vote",
-  "admin.private-desc": "Only participants who received an invite by email will be able to vote",
-  "admin.private-tip": "You can copy-paste a list of emails from a spreadsheet.",
-  "admin.private-placeholder": "Add here the emails of the participants.",
-  "admin.confirm-question": "Question of your vote",
-  "admin.confirm-candidates": "Candidates",
-  "admin.confirm-submit": "Start the vote",
-  "admin.confirm-title": "Confirmer votre vote",
-  "admin.confirm-edit": "Save your modifications",
-  "admin.success-election": "The vote has successfully been created!",
-  "admin.success-emails": "The voting link has been sent by emails to the participants.",
-  "admin.success-copy-vote": "Copy the voting link",
-  "admin.success-copy-result": "Copy the result link",
-  "admin.success-copy-admin": "Copy the admin link",
-  "admin.go-to-admin": "Manage the vote",
-  "admin.go-to-vote": "Access to the vote",
-  "admin.go-to-result": "View results",
-  "result.download": "Download results",
-  "result.go-to-admin": "Manage the election",
-  "result.merit-profile": "Merit profile of the candidate",
-  "result.has-closed": "Closed since",
-  "result.opened": "The election is opened",
-  "result.closed": "The election is closed",
-  "result.result": "Results of the election",
-  "result.details": "Details of the results",
-  "result.how-to-interpret": "How to understand the results",
-  "result.will-close": "Will close in",
-  "result.share": "Share results",
-  "success.election-closed": "The vote has been created with success!",
-  "success.election-updated": "The vote has been updated with success!",
-  "vote.discover-mj": "Discover majority judgment",
-  "vote.discover-mj-desc": "Developed by French researchers, majority judgment is a voting system that improves voter expressiveness and provides the best consensus.",
-  "vote.form": "Your opinion is important to us",
-  "vote.form-desc": "Help us to improve the application by clicking below",
-  "vote.go-to-results": "Show results",
-  "vote.home-desc": "Participate in the vote and discover majority judgment",
-  "vote.home-start": "I participate",
-  "vote.open-until": "Vote open until",
-  "vote.more-details": "More details...",
-  "vote.submit": "Cast my ballot",
-  "vote.success-ballot": "Your vote has successfully been taken into account!",
-  "vote.support-better-vote": "Support Better Vote",
-  "vote.support-desc": "Better Vote is a transparent and non-profit association. By joining the association, you contribute to finance its functioning and activities.",
-  "vote.thanks": "Thanks for your participation!"
+	"home.motto": "Simple and free",
+	"home.slogan": "Organize a vote with majority judgment",
+	"logo.alt": "Logo of Better Vote",
+	"home.writeQuestion": "Write here your question or describe your vote.",
+	"home.start": "Start a vote",
+	"home.noAds": "No advertising or ad cookies",
+	"home.advantage-1-name": "Simple",
+	"home.advantage-1-desc": "Create a vote in less than 1 minute!",
+	"home.advantage-2-name": "Free",
+	"home.advantage-2-desc": "Send invites without any limitations!",
+	"home.advantage-3-name": "Respecting your privacy",
+	"home.advantage-3-desc": "No personal data is recorded",
+	"home.experience-name": "A democratic and intuitive voting experience",
+	"home.experience-1-name": "Express yourself to the fullest.",
+	"home.experience-1-desc": "With majority judgment, you evaluate each candidate based on a grid of grades. You can express yourself on everything, with nuance, in support or rejection. Strategic voting is no longer reauired and you are no longer locked into supporting a single candidate.",
+	"home.experience-2-name": "Get the best possible consensus.",
+	"home.experience-2-desc": "Majority judgment is a fine measure of voter opinion and provides the most accurate picture possible. The candidate with the highest majority rating wins the election.",
+	"home.experience-call-to-action": "Find out about the majority judgment",
+	"home.alt-icon-ballot-box": "icon of a ballot box",
+	"home.alt-icon-envelop": "icon of an envelop",
+	"home.alt-icon-respect": "icon of hands holding each other",
+	"home.alt-icon-ballot": "icon of a ballot",
+	"menu.majority-judgment": "Majority judgment",
+	"menu.whoarewe": "Who are we?",
+	"menu.faq": "FAQ",
+	"menu.news": "News",
+	"menu.contact-us": "Contact us",
+	"common.about": "Read more",
+	"common.about-mj": "Read more about Better Vote",
+	"common.donation": "Make a donation",
+	"common.error": "Oh no... An error has occured...",
+	"common.better-vote": "Better Vote",
+	"common.share": "Share the application Better Vote",
+	"common.share-short": "Share the application",
+	"common.save": "Save",
+	"common.back-homepage": "Return to home page",
+	"common.support-us": "Support us",
+	"common.thumbnail": "Thumbnail",
+	"common.name": "Name",
+	"common.participants": "participants",
+	"common.participant": "participant",
+	"common.description": "Description",
+	"common.cancel": "Cancel",
+	"common.grades": "Grades",
+	"common.invites": "invites",
+	"common.days": "days",
+	"common.send": "Send",
+	"common.vote": "Vote",
+	"common.the-vote": "The vote",
+	"common.the-params": "The parameters",
+	"common.welcome": "Welcome!",
+	"error.at-least-2-candidates": "At least two candidates are required.",
+	"error.cant-set-ongoing": "You can not set this parameter for an ongoing election",
+	"error.ended-election": "The election has ended",
+	"error.catch22": "Unknown error...",
+	"error.help": "Ask for our help",
+	"error.no-title": "Please add a title to your election.",
+	"error.twice-same-names": "Two items have the same name.",
+	"error.empty-name": "The name is empty",
+	"error.date-past": "The date is in the past",
+	"error.cant-be-finished": "The election will never be closed. Add invites, access to results, or a ending date.",
+	"error.not-enough-grades": "Not enough grades",
+	"error.not-enough-candidates": "Not enough candidates",
+	"error.uncorrect-name": "The title is incorrect",
+	"faq.title": "Frequently asked questions",
+	"faq.sec-1-title": "What is majority judgment?",
+	"faq.sec-1-desc": "A simple and intuitive principle, which changes everything: the voter votes by giving his/her opinion on all the candidates, by attributing to each one a mention on a scale of values (e.g. Very good, Good, Fair, Insufficient, To be rejected). The candidate with the highest majority rating wins the election (the one with \"the highest majority\" rating).",
+	"faq.sec-2-title": "Where does the majority judgment come from?",
+	"faq.sec-2-desc": "Majority judgment is a voting method invented by two French researchers at the Centre National de la Recherche Scientifique (CNRS) in 2011, Michel Balinski and Rida Laraki.",
+	"faq.sec-3-title": "What are the advantages of majority judgment?",
+	"faq.sec-3-desc": "With majority judgment, the voter can fully express his opinion. He no longer has to vote \"useful\" or \"strategic\", and if he likes several candidates, he can evaluate them all positively. The voter can also reject candidates. Majority judgment allows for a much more accurate measure of voter opinion and thus a more democratic outcome. By asking voters for their opinion on each option on the ballot, majority judgment aggregates much more information than single-member plurality voting, which, by summarizing voters' opinions into a choice, ignores most of the information about what they think. Majority voting does not \"just\" produce a winner with a majority of votes. It accurately measures the credence given to each of the options and helps to refine as well as pacify decision making.",
+	"faq.sec-4-title": "When and how to use majority judgment?",
+	"faq.sec-4-desc": "Majority judgment applies to any type of collective vote, whether it is to elect a candidate, to retain one or several ideas during a collaborative workshop, to choose between several projects, to rank wines, etc. It can be used at all scales (local, national, international) and in all environments (schools, companies, associations, cooperatives, public communities...).",
+	"faq.sec-5-title": "Who can use this application?",
+	"faq.sec-5-desc": "This majority judgment application is open to anyone who wants to make a collective decision, between friends, between colleagues, between members of a group. It is free to use and free of charge. Our ambition is to offer you the best experience of collective and democratic decision making",
+	"faq.sec-6-title": "How to organize an election with several thousand voters?",
+	"faq.sec-6-desc": "This application is not suitable for votes with more than 1000 voters. If this is your case, we invite you to contact us by email at contact@mieuxvoter.fr. If you are organizing a closed vote with an email invitation, we suggest that you do not exceed 200 participants (the time to create the vote may then take a few minutes).",
+	"faq.sec-7-title": "I have a problem, how can I get help?",
+	"faq.sec-7-desc": "If you encounter a problem while using our application, please write us by mail at the following address: app@mieuxvoter.fr. Be sure to describe the problem in your message. Add in your description the link of your vote",
+	"faq.sec-8-title": "Is there a limit of voters applied for \"closed\" votes, on invitation?",
+	"faq.sec-8-desc": "The maximum number of voters for an invitation vote is 1000 people. However, if your need is greater than this limit, we invite you to send us an email at: contact@mieuxvoter.fr.",
+	"faq.sec-9-title": "How long does the link to the administration page remain active?",
+	"faq.sec-9-desc": "The links provided when you created your vote do not have an expiration date. Please keep them safe so that you can view the results of your vote.",
+	"faq.sec-10-title": "How can I ensure that the same person does not vote twice?",
+	"faq.sec-10-desc": "In the case of email invitation voting, only people whose email was added at the time the vote was created receive an invitation and can vote. Each invitation has a unique link with a one-time use electronic token. This token is destroyed as soon as the guest's voting participation is recorded. It therefore guarantees that each participant can only vote once. In the case of a public vote, any person can participate in the election if he or she has the link to the election.",
+	"faq.sec-11-title": "When I hold an election, can I know the number and identity of voters?",
+	"faq.sec-11-desc": "The number of voters is shown on your election results page. The identity of voters is secret, in order to respect the conditions of a democratic vote where anonymity protects the voter and guarantees the sincerity of the vote.",
+	"faq.sec-12-title": "Can I change my vote?",
+	"faq.sec-12-desc": "Once you have registered your vote, you cannot change it.",
+	"faq.sec-13-title": "How can I retrieve a link to the vote or the vote results if I lost it?",
+	"faq.sec-13-desc": "You cannot retrieve a link to vote or view results after it has been communicated to you. Please keep it safe. However, if you have the voting link, we can send you the link to the results.",
+	"faq.sec-14-title": "How can I retrieve a link to the admin panel if I lost it?",
+	"faq.sec-14-desc": "We cannot send you this link for obvious security reasons. So you have to re-create an election.",
+	"faq.sec-15-title": "How do we interpret the results of a majority-rule vote?",
+	"faq.sec-15-desc": "Candidates or proposals are ranked according to their majority mention, from best to worst. In the event of a tie in majority rating, the following is calculated for each candidate: the percentage of voters awarding strictly more than the common majority rating and the percentage of voters awarding strictly less than the common majority rating. The largest of the 4 values determines the result",
+	"faq.sec-16-title": "What do you do with the collected data?",
+	"faq.sec-16-desc": "We do not collect personal data. The sole purpose of the app.mieuxvoter.fr application is to allow everyone to organize majority judgment votes and to improve scientific research on voting methods. It has no political or commercial purpose. Better Vote attaches the utmost importance to the strict respect of privacy.",
+	"faq.sec-17-title": "Who is Better Vote?",
+	"faq.sec-17-desc": "\"Better Vote\" is an association under the French law of 1901 created in January 2018, which wants to improve the election and collective decision-making by promoting more democratic voting methods, such as majority judgment.",
+	"faq.sec-18-title": "How can we help spread the word about majority judgment?",
+	"faq.sec-18-desc": "Did you enjoy your democratic majority-judgment voting experience?  We're thrilled! You can help us return elections to voters by donating to our association here: https://www.paypal.com/donate/?hosted_button_id=QD6U4D323WV4S.",
+	"faq.sec-19-title": "How secure is my data?",
+	"faq.sec-19-desc": "In order to guarantee the security of your data, their transmission is encrypted and your votes are anonymized.",
+	"grades.very-good": "Very good",
+	"grades.good": "Good",
+	"grades.passable": "Passable",
+	"grades.inadequate": "Inadequate",
+	"grades.mediocre": "Mediocre",
+	"admin.admin-title": "Voting management panel",
+	"admin.close-election": "Close the election",
+	"admin.date-limit": "Set a deadline for voting",
+	"admin.set-title": "Set the question of the vote",
+	"admin.step-candidate": "Candidates",
+	"admin.step-params": "Parameters",
+	"admin.step-confirm": "Confirm",
+	"admin.add-candidates": "Add the candidates",
+	"admin.add-candidate": "Add a candidate",
+	"admin.add-candidate-desc": "Add a picture, a name, and a description of the candidate.",
+	"admin.add-grade": "Add a grade",
+	"admin.add-grade-desc": "The name of the endorsement must be unique. Together, the statements should form a graduated scale of values. After clicking on \"Save\", drag the statement to where you want to place it on the value scale",
+	"admin.grade-name-placeholder": "Add the name of the grade",
+	"admin.candidate-confirm-del": "You want to remove a candidate",
+	"admin.candidate-confirm-back": "No, I keep it",
+	"admin.candidate-confirm-ok": "Delete",
+	"admin.candidate-name-placeholder": "Add the name or the title of the candidate.",
+	"admin.candidate-desc-placeholder": "Add the description of the candidate.",
+	"admin.candidates-submit": "Validate the candidates",
+	"admin.candidates-back-step": "Back to candidates",
+	"admin.modal-title": "Managing an election",
+	"admin.modal-desc": "This link allows you to modify your election. Keep it carefully, as it will not be provided to you again.",
+	"admin.modal-email": "To receive a copy of this link by email, fill out this form.",
+	"admin.modal-disclaimer": "We do not store any mail. Thus, we will not send you any advertising content.",
+	"admin.modal-email-placeholder": "Your mail address",
+	"admin.order-title": "Candidates in a random order",
+	"admin.order-desc": "To avoid any cognitive bias, we recommend that candidates appear in random order on the ballot.",
+	"admin.params-submit": "Validate the parameters",
+	"admin.params-title": "Your parameters",
+	"admin.access-results": "Immediate access to the results",
+	"admin.access-results-desc": "No one can access to the results as long as the vote is not closed.",
+	"admin.limit-duration": "Limit the duration of the vote",
+	"admin.limit-duration-desc": "",
+	"admin.photo": "Picture",
+	"admin.optional": "optional",
+	"admin.photo-import": "Import a picture",
+	"admin.photo-type": "Supported type:",
+	"admin.grades-desc": "You can choose to customize the name and the number of mentions. If in doubt, leave the grades as is.",
+	"admin.ending-in": "In",
+	"admin.until": "Until",
+	"admin.private-title": "Private vote",
+	"admin.private-desc": "Only participants who received an invite by email will be able to vote",
+	"admin.private-tip": "You can copy-paste a list of emails from a spreadsheet.",
+	"admin.private-placeholder": "Add here the emails of the participants.",
+	"admin.confirm-question": "Question of your vote",
+	"admin.confirm-candidates": "Candidates",
+	"admin.confirm-submit": "Start the vote",
+	"admin.confirm-title": "Confirmer votre vote",
+	"admin.confirm-edit": "Save your modifications",
+	"admin.success-election": "The vote has successfully been created!",
+	"admin.success-emails": "The voting link has been sent by emails to the participants.",
+	"admin.success-copy-vote": "Copy the voting link",
+	"admin.success-copy-result": "Copy the result link",
+	"admin.success-copy-admin": "Copy the admin link",
+	"admin.go-to-admin": "Manage the vote",
+	"admin.go-to-vote": "Access to the vote",
+	"admin.go-to-result": "View results",
+	"result.download": "Download results",
+	"result.go-to-admin": "Manage the election",
+	"result.merit-profile": "Merit profile of the candidate",
+	"result.has-closed": "Closed since",
+	"result.opened": "The election is opened",
+	"result.closed": "The election is closed",
+	"result.result": "Results of the election",
+	"result.details": "Details of the results",
+	"result.how-to-interpret": "How to understand the results",
+	"result.will-close": "Will close in",
+	"result.share": "Share results",
+	"success.election-closed": "The vote has been created with success!",
+	"success.election-updated": "The vote has been updated with success!",
+	"vote.discover-mj": "Discover majority judgment",
+	"vote.discover-mj-desc": "Developed by French researchers, majority judgment is a voting system that improves voter expressiveness and provides the best consensus.",
+	"vote.form": "Your opinion is important to us",
+	"vote.form-desc": "Help us to improve the application by clicking below",
+	"vote.go-to-results": "Show results",
+	"vote.home-desc": "Participate in the vote and discover majority judgment",
+	"vote.home-start": "I participate",
+	"vote.open-until": "Vote open until",
+	"vote.more-details": "More details...",
+	"vote.submit": "Cast my ballot",
+	"vote.success-ballot": "Your vote has successfully been taken into account!",
+	"vote.support-better-vote": "Support Better Vote",
+	"vote.support-desc": "Better Vote is a transparent and non-profit association. By joining the association, you contribute to finance its functioning and activities.",
+	"vote.thanks": "Thanks for your participation!"
 }
diff --git a/public/locales/fr/resource.json b/public/locales/fr/resource.json
index 271a10f..b447e0c 100644
--- a/public/locales/fr/resource.json
+++ b/public/locales/fr/resource.json
@@ -1,156 +1,195 @@
 {
-  "home.motto": "Simple et gratuit",
-  "home.slogan": "Organisez un vote avec le jugement majoritaire",
-  "logo.alt": "Logo de Mieux Voter",
-  "home.writeQuestion": "Posez la question de votre vote ici.",
-  "home.start": "C'est parti",
-  "home.noAds": "Pas de publicités, ni de cookies publicitaires",
-  "home.advantage-1-name": "Simple",
-  "home.advantage-1-desc": "Créez un vote en moins d’une minute.",
-  "home.advantage-2-name": "Gratuit",
-  "home.advantage-2-desc": "Envoyez des invitations par courriel sans limite d'envoi.",
-  "home.advantage-3-name": "Respect de votre vie privée",
-  "home.advantage-3-desc": "Aucune donnée personnelle n'est enregistrée",
-  "home.experience-name": "Une expérience de vote démocratique et intuitive",
-  "home.experience-1-name": "Exprimez toute votre opinion.",
-  "home.experience-1-desc": "Au jugement majoritaire, chaque candidat est évalué sur une grille de mention. Vous n'aurez plus besoin de faire un vote stratégique.",
-  "home.experience-2-name": "Obtenez le meilleur consensus.",
-  "home.experience-2-desc": "Le profil des mérites dresse un panorama précis de l’opinion des électeurs. Le gagnant du vote est celui qui est la meilleure mention majoritaire.",
-  "home.experience-call-to-action": "Découvrez le jugement majoritaire",
-  "home.alt-icon-ballot-box": "icone d'urne",
-  "home.alt-icon-envelop": "icone d'enveloppe",
-  "home.alt-icon-respect": "icone de mains qui se serrent",
-  "home.alt-icon-ballot": "icone d'un bulletin de vote",
-  "menu.majority-judgment": "Jugement majoritaire",
-  "menu.whoarewe": "Qui sommes-nous ?",
-  "menu.faq": "FAQ",
-  "menu.news": "Actualités",
-  "menu.contact-us": "Nous contacter",
-  "common.about": "En savoir plus...",
-  "common.about-mj": "En savoir plus sur Mieux voter",
-  "common.donation": "Faire une donation",
-  "common.error": "Oh non ! Une erreur s'est produite...",
-  "common.better-vote": "Mieux Voter",
-  "common.share": "Partagez l'application Mieux voter",
-  "common.share-short": "Partagez l'application",
-  "common.back-homepage": "Revenir sur la page d'accueil",
-  "common.support-us": "Soutenez nous",
-  "common.save": "Sauvegarder",
-  "common.thumbnail": "Image miniature",
-  "common.name": "Nom",
-  "common.participants": "participants",
-  "common.participant": "participant",
-  "common.description": "Description",
-  "common.cancel": "Annuler",
-  "common.grades": "Mentions",
-  "common.days": "jours",
-  "common.invites": "invitations",
-  "common.send": "Envoyer",
-  "common.the-vote": "Le vote",
-  "common.the-params": "Les paramètres",
-  "common.vote": "Voter",
-  "common.welcome": "Bienvenue !",
-  "error.help": "Besoin d'aide ?",
-  "error.cant-set-ongoing": "Vous ne pouvez pas modifier ce paramètre pour une élection déjà démarrée.",
-  "error.at-least-2-candidates": "Ajoutez au moins deux candidats.",
-  "error.no-title": "Ajoutez un titre à l'élection.",
-  "error.ended-election": "L'élection est terminée",
-  "error.twice-same-names": "Deux éléments ont le même nom",
-  "error.empty-name": "Le nom est vite",
-  "error.wrong-name": "Le titre de l'élection est incorrecte",
-  "error.cant-be-finished": "L'élection ne se terminera jamais. Ajoutez une date limite, un accès aux résultats, ou des invitations.",
-  "error.catch22": "Erreur inconnue...",
-  "error.date-past": "La date est dans le passé",
-  "error.uncorrect-name": "The title is incorrect",
-  "error.not-enough-grades": "Il manque des mentions",
-  "error.not-enough-candidates": "Il manque des candidats",
-  "grades.very-good": "Très bien",
-  "grades.good": "Bien",
-  "grades.passable": "Passable",
-  "grades.inadequate": "Insuffisant",
-  "grades.mediocre": "Médiocre",
-  "admin.admin-title": "Administration du vote",
-  "admin.close-election": "Clôturer l'élection",
-  "admin.date-limit": "Fixer une date limite pour le vote",
-  "admin.set-title": "Changer la question de l'élection",
-  "admin.step-candidate": "Les candidats",
-  "admin.step-params": "Paramètres du vote",
-  "admin.step-confirm": "Confirmation",
-  "admin.add-candidates": "Ajouter les candidats.",
-  "admin.add-candidate": "Ajouter un candidat",
-  "admin.candidate-name-placeholder": "Ajouter le nom ou le titre du candidat.",
-  "admin.candidate-desc-placeholder": "Ajouter la description du candidat.",
-  "admin.add-candidate-desc": "Ajouter une photo, le nom et une description au candidat.",
-  "admin.add-grade": "Ajouter une mention",
-  "admin.add-grade-desc": "Le nom de la mention doit être unique.",
-  "admin.grade-name-placeholder": "Ajoutez le nom de la mention.",
-  "admin.candidate-confirm-del": "Vous souhaitez supprimer un candidat",
-  "admin.candidate-confirm-back": "Non, je le garde",
-  "admin.candidate-confirm-ok": "Supprimer",
-  "admin.candidates-submit": "Valider les candidats",
-  "admin.candidates-back-step": "Retour aux candidats",
-  "admin.params-submit": "Valider les paramètres",
-  "admin.params-title": "Vos paramètres",
-  "admin.access-results": "Accès immédiat aux résultats",
-  "admin.access-results-desc": "Personne ne pourra accéder aux résultats tant que le vote n'est pas clôturé.",
-  "admin.limit-duration": "Limiter la durée du vote",
-  "admin.limit-duration-desc": "",
-  "admin.modal-title": "Administration du vote",
-  "admin.modal-desc": "Ce lien vous permet de modifier votre vote. Conservez le précieusement, ca il ne vous sera pas transmis une seconde fois.",
-  "admin.modal-email": "Pour recevoir une copie par courriel, indiquez nous votre adresse courrielle",
-  "admin.modal-disclaimer": "Nous ne stockons aucune adresse courrielle. Nous ne vous enverrons donc aucun contenu publicitaire.",
-  "admin.modal-email-placeholder": "Votre adresse email",
-  "admin.photo": "Photo",
-  "admin.optional": "facultatif",
-  "admin.photo-import": "Importer une photo",
-  "admin.photo-type": "Format supporté :",
-  "admin.grades-desc": "Vous pouvez choisir de personaliser le nom et le nombre de mentions. En cas de doute, gardez les mentions par défaut.",
-  "admin.ending-in": "Dans",
-  "admin.until": "Jusqu'au",
-  "admin.order-title": "Les candidats sont dans un ordre aléatoire",
-  "admin.order-desc": "Pour éviter un biais cognitif, nous recommendons que les candidats apparaissent dans un ordre aléatoire sur le bulletin de vote.",
-  "admin.private-title": "Vote privé",
-  "admin.private-desc": "Uniquement les personnes invités par mail pourront participé au vote",
-  "admin.private-tip": "Vous pouvez copier-coller une liste d'emails depuis un tableur.",
-  "admin.private-placeholder": "Ajoutez ici les emails des participants.",
-  "admin.confirm-question": "Question de votre vote",
-  "admin.confirm-candidates": "Candidats",
-  "admin.confirm-submit": "Démarrer le vote",
-  "admin.confirm-edit": "Sauvegarder les changements",
-  "admin.confirm-title": "Confirmer votre vote",
-  "admin.success-election": "Le vote a été créé avec succès",
-  "admin.success-emails": "Le lien du vote a été envoyé par courriel aux participants.",
-  "admin.success-copy-vote": "Copier le lien du vote",
-  "admin.success-copy-result": "Copier le lien des résultats",
-  "admin.success-copy-admin": "Copier le lien d'administration",
-  "admin.go-to-admin": "Administrez le vote",
-  "admin.go-to-vote": "Accéder au vote",
-  "admin.go-to-result": "Voir les résultats",
-  "result.download": "Télécharger les résultats",
-  "result.go-to-admin": "Administrer le vote",
-  "result.has-closed": "Terminée depuis",
-  "result.closed": "L'élection est terminée",
-  "result.opened": "L'élection est en cours",
-  "result.result": "Résultat du vote",
-  "result.details": "Détails des résultats",
-  "result.merit-profile": "Profil de mérite du candidat",
-  "result.share": "Partager les résultats",
-  "result.will-close": "Se termine dans",
-  "result.how-to-interpret": "Comment interpréter les résultats",
-  "success.election-closed": "L'élection est désormais clôturée.",
-  "success.election-updated": "L'élection a été mise à jour.",
-  "vote.discover-mj": "Découvrez le jugement majoritaire",
-  "vote.discover-mj-desc": "Créé par des chercheurs français, le jugement majoritaire est un mode de scrutin qui améliore l'expressivité des électeurs  et fournit le meilleur consensus.",
-  "vote.go-to-results": "Voir les résultats",
-  "vote.form": "Votre avis nous intéresse",
-  "vote.form-desc": "Aidez nous à améliorer l’application en cliquant ci-dessous",
-  "vote.home-desc": "Participez au vote et découvrez le jugement majoritaire.",
-  "vote.home-start": "Je participe",
-  "vote.open-until": "Vote ouvert jusqu'au",
-  "vote.more-details": "Cliquez ici pour en savoir plus",
-  "vote.submit": "Déposer mon bulletin de vote",
-  "vote.success-ballot": "Votre vote a bien été pris en compte !",
-  "vote.support-better-vote": "Soutenez Mieux Voter",
-  "vote.support-desc": "Mieux Voter est une association transpartisane et sans but lucratif. En adhérant à l’association, vous contribuez à financer son fonctionnement et ses activités.",
-  "vote.thanks": "Merci de votre participation !"
+	"home.motto": "Simple et gratuit",
+	"home.slogan": "Organisez un vote avec le jugement majoritaire",
+	"logo.alt": "Logo de Mieux Voter",
+	"home.writeQuestion": "Posez la question de votre vote ici.",
+	"home.start": "C'est parti",
+	"home.noAds": "Pas de publicités, ni de cookies publicitaires",
+	"home.advantage-1-name": "Simple",
+	"home.advantage-1-desc": "Créez un vote en moins d’une minute.",
+	"home.advantage-2-name": "Gratuit",
+	"home.advantage-2-desc": "Envoyez des invitations par courriel sans limite d'envoi.",
+	"home.advantage-3-name": "Respect de votre vie privée",
+	"home.advantage-3-desc": "Aucune donnée personnelle n'est enregistrée",
+	"home.experience-name": "Une expérience de vote démocratique et intuitive",
+	"home.experience-1-name": "Exprimez vous pleinement.",
+	"home.experience-1-desc": "Au jugement majoritaire, vous évaluez chaque candidat à partir d’une grille de mentions. Vous pouvez vous exprimer sur tout, avec nuance, dans l’adhésion comme dans le rejet. Vous n’avez plus besoin de voter utile et vous n’êtes plus enfermés dans le soutien à une seule candidature.",
+	"home.experience-2-name": "Obtenez le meilleur consensus.",
+	"home.experience-2-desc": "Le jugement majoritaire mesure finement l’opinion des électeurs et en dresse un panorama le plus précis possible. Le candidat le mieux évalué par une majorité remporte l’élection.",
+	"home.experience-call-to-action": "Découvrez le jugement majoritaire",
+	"home.alt-icon-ballot-box": "icone d'urne",
+	"home.alt-icon-envelop": "icone d'enveloppe",
+	"home.alt-icon-respect": "icone de mains qui se serrent",
+	"home.alt-icon-ballot": "icone d'un bulletin de vote",
+	"menu.majority-judgment": "Jugement majoritaire",
+	"menu.whoarewe": "Qui sommes-nous ?",
+	"menu.faq": "FAQ",
+	"menu.news": "Actualités",
+	"menu.contact-us": "Nous contacter",
+	"common.about": "En savoir plus...",
+	"common.about-mj": "En savoir plus sur Mieux voter",
+	"common.donation": "Faire une donation",
+	"common.error": "Oh non ! Une erreur s'est produite...",
+	"common.better-vote": "Mieux Voter",
+	"common.share": "Partagez l'application Mieux voter",
+	"common.share-short": "Partagez l'application",
+	"common.back-homepage": "Revenir sur la page d'accueil",
+	"common.support-us": "Soutenez nous",
+	"common.save": "Sauvegarder",
+	"common.thumbnail": "Image miniature",
+	"common.name": "Nom",
+	"common.participants": "participants",
+	"common.participant": "participant",
+	"common.description": "Description",
+	"common.cancel": "Annuler",
+	"common.grades": "Mentions",
+	"common.days": "jours",
+	"common.invites": "invitations",
+	"common.send": "Envoyer",
+	"common.the-vote": "Le vote",
+	"common.the-params": "Les paramètres",
+	"common.vote": "Voter",
+	"common.welcome": "Bienvenue !",
+	"error.help": "Besoin d'aide ?",
+	"error.cant-set-ongoing": "Vous ne pouvez pas modifier ce paramètre pour une élection déjà démarrée.",
+	"error.at-least-2-candidates": "Ajoutez au moins deux candidats.",
+	"error.no-title": "Ajoutez un titre à l'élection.",
+	"error.ended-election": "L'élection est terminée",
+	"error.twice-same-names": "Deux éléments ont le même nom",
+	"error.empty-name": "Le nom est vite",
+	"error.wrong-name": "Le titre de l'élection est incorrecte",
+	"error.cant-be-finished": "L'élection ne se terminera jamais. Ajoutez une date limite, un accès aux résultats, ou des invitations.",
+	"error.catch22": "Erreur inconnue...",
+	"error.date-past": "La date est dans le passé",
+	"error.uncorrect-name": "The title is incorrect",
+	"error.not-enough-grades": "Il manque des mentions",
+	"error.not-enough-candidates": "Il manque des candidats",
+	"faq.title": "Foire aux questions",
+	"faq.sec-1-title": "Qu'est-ce que le jugement majoritaire ?",
+	"faq.sec-1-desc": "Un principe simple et intuitif, qui change tout : l’électeur vote en donnant son avis sur tous les candidats, en leur attribuant à chacun une mention sur une échelle de valeurs (par exemple. Très bien, Bien, Assez bien, Passable, Insuffisant, À Rejeter). Le candidat le mieux évalué par une majorité remporte l’élection (celui qui obtient la meilleure mention « majoritaire »).",
+	"faq.sec-2-title": "D’où vient le jugement majoritaire ?",
+	"faq.sec-2-desc": "Le jugement majoritaire est un mode de scrutin inventé par deux chercheurs Français du Centre National de la Recherche Scientifique (CNRS) en 2011, Michel Balinski et Rida Laraki.",
+	"faq.sec-3-title": "Quels sont les avantages du jugement majoritaire ?",
+	"faq.sec-3-desc": "Avec le jugement majoritaire, l’électeur peut exprimer pleinement son opinion. Il n’a plus à voter “utile” ou “stratégique”, et s’il apprécie plusieurs candidats, il peut tous les évaluer positivement. L’électeur peut aussi rejeter des candidats. Le jugement majoritaire permet une mesure beaucoup plus précise de l’opinion des électeurs et donc, un résultat plus démocratique. En demandant aux électeurs leur opinion sur chaque option soumise au vote, le jugement majoritaire agrège beaucoup plus d’informations que le scrutin uninominal majoritaire qui, en résumant l’opinion des électeurs à un choix, ignore l’essentiel de l’information quant à ce qu’ils pensent. Le jugement majoritaire ne produit pas « juste » un gagnant qui obtiendrait la majorité des voix. Il mesure précisément le crédit porté à chacune des options et permet d’affiner autant que de pacifier la prise de décision.",
+	"faq.sec-4-title": "Quand et comment utiliser le jugement majoritaire ?",
+	"faq.sec-4-desc": "Le jugement majoritaire s’applique à tout type de votation collective, qu’il s’agisse d’élire un candidat, de retenir une ou plusieurs idées lors d’un atelier collaboratif, de choisir entre plusieurs projets, de classer les vins, etc. Il peut être utilisé à toutes les échelles (locale, nationale, internationale) et dans tous les milieux (écoles, entreprises, associations, coopératives, collectivités publiques…).",
+	"faq.sec-5-title": "Qui peut utiliser cette application ?",
+	"faq.sec-5-desc": "Cette application de jugement majoritaire est ouverte à toute personne désireuse de prendre une décision collective, entre amis, entre collègues, entre membres d’un groupe. Elle est libre d’accès et gratuite. Notre ambition est de vous proposer la meilleure expérience de prise de décision collective et démocratique.",
+	"faq.sec-6-title": "Comment organiser une élection avec plusieurs milliers de votants ?",
+	"faq.sec-6-desc": "Cette application ne convient pas pour les votes à plus de 1000 votants. Si c’est votre cas, nous vous invitons à nous contacter par email à l’adresse contact@mieuxvoter.fr. Si vous organisez un vote fermé avec invitation par mail, nous vous suggérons de ne pas dépasser 200 participants (le temps de création du vote peut alors prendre quelques minutes).",
+	"faq.sec-7-title": "Je rencontre un problème, comment obtenir de l’aide ?",
+	"faq.sec-7-desc": "Si vous rencontrez un problème en utilisant notre application, écrivez-nous par mail à l’adresse suivante: app@mieuxvoter.fr. Prenez soin de bien décrire le problème rencontré dans votre message. Ajoutez éventuellement dans votre description le lien de votre vote.",
+	"faq.sec-8-title": "Y-a t’il une limite de votants appliquée pour les votes “fermés”, sur invitation ?",
+	"faq.sec-8-desc": "Le nombre maximum de votants pour un vote sur invitation est de 1000 personnes. Si toutefois votre besoin est supérieur à cette limite, nous vous invitons à nous envoyer un email à l’adresse : contact@mieuxvoter.fr.",
+	"faq.sec-9-title": "Combien de temps le lien vers la page d'administration reste-t-il actif ?",
+	"faq.sec-9-desc": "Les liens fournis lors de la création de votre vote n’ont pas de date d’expiration. Conservez-les précieusement afin de pouvoir consulter les résultats de votre vote.",
+	"faq.sec-10-title": "Comment puis-je m’assurer qu’une même personne ne vote pas deux fois ?",
+	"faq.sec-10-desc": "Dans le cas d’un vote sur invitation par email, seules les personnes dont le courriel a été ajouté à la création du vote reçoivent une invitation et peuvent voter. Chacune des invitations dispose d’un lien unique auquel est associé un jeton électronique à usage unique. Ce jeton est détruit aussitôt que la participation au vote de l’invité est enregistrée. Il garantit donc que chaque participant ne puisse voter qu’une seule fois. Dans le cas d’un vote public, toute personne peut participer à l’élection s’il dispose du lien de l’élection.",
+	"faq.sec-11-title": "Lorsque j’organise une élection, puis-je connaître le nombre et l’identité des votants ?",
+	"faq.sec-11-desc": "Le nombre de votants est indiqué sur la page de résultats de votre élection. L’identité des votants est secrète, afin de respecter les conditions d’un vote démocratique où l’anonymat protège l’électeur et garantit la sincérité du vote.",
+	"faq.sec-12-title": "Puis-je modifier mon vote ?",
+	"faq.sec-12-desc": "Une fois votre vote enregistré, vous ne pouvez plus le modifier.",
+	"faq.sec-13-title": "Comment puis-je récupérer un lien vers le vote ou les résultats du vote si je l’ai perdu ?",
+	"faq.sec-13-desc": "Vous ne pouvez pas récupérer un lien pour voter ou consulter les résultats après qu’il vous ait été communiqué. Gardez le précieusement. Cependant, si vous disposez du lien du vote, nous pouvons vous transmettre le lien vers les résultats.",
+	"faq.sec-14-title": "Comment puis-je récupérer un lien vers le panneau d'administration si je l’ai perdu ?",
+	"faq.sec-14-desc": "Nous ne pouvons pas vous transmettre ce lien pour des raisons évidentes de sécurité. Vous devez donc ré-créer une élection.",
+	"faq.sec-15-title": "Comment interpréter les résultats d’un vote au jugement majoritaire ?",
+	"faq.sec-15-desc": "Les candidats ou propositions sont classés en fonction de leur mention majoritaire, de la meilleure à la moins bonne. En cas d’égalité de mention majoritaire, on calcule alors pour chaque candidat à départager: le pourcentage d’électeurs attribuant strictement plus que la mention majoritaire commune et le pourcentage d’électeurs attribuant strictement moins que la mention majoritaire commune. La plus grande des 4 valeurs détermine le résultat.",
+	"faq.sec-16-title": "Que faites-vous des données collectées ?",
+	"faq.sec-16-desc": "Nous ne collectons pas de données personnelles. L’application app.mieuxvoter.fr a pour seul et unique but de permettre à tous d’organiser des votes au jugement majoritaire et d’améliorer la recherche scientifique sur les modes de scrutin. Elle n’a pas de but politique, ni commercial. Mieux Voter attache la plus grande importance au strict respect de la vie privée.",
+	"faq.sec-17-title": "Qui est Mieux Voter ?",
+	"faq.sec-17-desc": "« Mieux Voter » est une association loi 1901 créée en janvier 2018, qui veut améliorer l’élection et la prise de décision collective en promouvant des modes de scrutin plus démocratiques, comme le jugement majoritaire.",
+	"faq.sec-18-title": "Comment nous aider à faire connaître le jugement majoritaire ?",
+	"faq.sec-18-desc": "Vous avez apprécié votre expérience de vote démocratique au jugement majoritaire ?  Nous en sommes ravis ! Vous pouvez nous aider à rendre les élections aux électeurs en faisant un don à notre association ici : https://www.paypal.com/donate/?hosted_button_id=QD6U4D323WV4S",
+	"faq.sec-19-title": "Quelle sécurité pour mes données ?",
+	"faq.sec-19-desc": "Afin de garantir la sécurité de vos données, leur transmission est chiffrée et vos votes sont anonymisés.",
+	"grades.very-good": "Très bien",
+	"grades.good": "Bien",
+	"grades.passable": "Passable",
+	"grades.inadequate": "Insuffisant",
+	"grades.mediocre": "À rejeter",
+	"admin.admin-title": "Administration du vote",
+	"admin.close-election": "Clôturer l'élection",
+	"admin.date-limit": "Fixer une date limite pour le vote",
+	"admin.set-title": "Changer la question de l'élection",
+	"admin.step-candidate": "Les candidats",
+	"admin.step-params": "Paramètres du vote",
+	"admin.step-confirm": "Confirmation",
+	"admin.add-candidates": "Ajouter les candidats",
+	"admin.add-candidate": "Ajouter un candidat",
+	"admin.candidate-name-placeholder": "Ajouter le nom ou le titre du candidat.",
+	"admin.candidate-desc-placeholder": "Ajouter la description du candidat.",
+	"admin.add-candidate-desc": "Ajouter une photo, le nom et une description au candidat.",
+	"admin.add-grade": "Ajouter une mention",
+	"admin.add-grade-desc": "Le nom de la mention doit être unique. Prises ensemble, les mentions doivent constituer une échelle graduée de valeurs. Après avoir cliqué sur “Sauvegarder”, faites glisser la mention où vous voulez la placer sur l’échelle de valeurs.",
+	"admin.grade-name-placeholder": "Ajoutez le nom de la mention.",
+	"admin.candidate-confirm-del": "Vous souhaitez supprimer un candidat",
+	"admin.candidate-confirm-back": "Non, je le garde",
+	"admin.candidate-confirm-ok": "Supprimer",
+	"admin.candidates-submit": "Valider les candidats",
+	"admin.candidates-back-step": "Retour aux candidats",
+	"admin.params-submit": "Valider les paramètres",
+	"admin.params-title": "Vos paramètres",
+	"admin.access-results": "Accès immédiat aux résultats",
+	"admin.access-results-desc": "Personne ne pourra accéder aux résultats tant que le vote n'est pas clôturé.",
+	"admin.limit-duration": "Limiter la durée du vote",
+	"admin.limit-duration-desc": "",
+	"admin.modal-title": "Administration du vote",
+	"admin.modal-desc": "Ce lien vous permet de modifier votre vote. Conservez le précieusement, ca il ne vous sera pas transmis une seconde fois.",
+	"admin.modal-email": "Pour recevoir une copie par courriel, indiquez nous votre adresse courriel",
+	"admin.modal-disclaimer": "Nous ne stockons aucune adresse courriel. Nous ne vous enverrons donc aucun contenu publicitaire.",
+	"admin.modal-email-placeholder": "Votre adresse email",
+	"admin.photo": "Photo",
+	"admin.optional": "facultatif",
+	"admin.photo-import": "Importer une photo",
+	"admin.photo-type": "Format supporté :",
+	"admin.grades-desc": "Vous pouvez choisir de personnaliser le nom et le nombre de mentions. En cas de doute, gardez les mentions par défaut.",
+	"admin.ending-in": "Dans",
+	"admin.until": "Jusqu'au",
+	"admin.order-title": "Les candidats sont dans un ordre aléatoire",
+	"admin.order-desc": "Pour éviter un biais cognitif, nous recommendons que les candidats apparaissent dans un ordre aléatoire sur le bulletin de vote.",
+	"admin.private-title": "Vote privé",
+	"admin.private-desc": "Uniquement les personnes invités par mail pourront participé au vote",
+	"admin.private-tip": "Vous pouvez copier-coller une liste d'emails depuis un tableur.",
+	"admin.private-placeholder": "Ajoutez ici les emails des participants.",
+	"admin.confirm-question": "Question de votre vote",
+	"admin.confirm-candidates": "Candidats",
+	"admin.confirm-submit": "Démarrer le vote",
+	"admin.confirm-edit": "Sauvegarder les changements",
+	"admin.confirm-title": "Confirmer votre vote",
+	"admin.success-election": "Le vote a été créé avec succès",
+	"admin.success-emails": "Le lien du vote a été envoyé par courriel aux participants.",
+	"admin.success-copy-vote": "Copier le lien du vote",
+	"admin.success-copy-result": "Copier le lien des résultats",
+	"admin.success-copy-admin": "Copier le lien d'administration",
+	"admin.go-to-admin": "Administrez le vote",
+	"admin.go-to-vote": "Accéder au vote",
+	"admin.go-to-result": "Voir les résultats",
+	"result.download": "Télécharger les résultats",
+	"result.go-to-admin": "Administrer le vote",
+	"result.has-closed": "Terminée depuis",
+	"result.closed": "L'élection est terminée",
+	"result.opened": "L'élection est en cours",
+	"result.result": "Résultat du vote",
+	"result.details": "Détails des résultats",
+	"result.merit-profile": "Profil de mérite du candidat",
+	"result.share": "Partager les résultats",
+	"result.will-close": "Se termine dans",
+	"result.how-to-interpret": "Comment interpréter les résultats",
+	"success.election-closed": "L'élection est désormais clôturée.",
+	"success.election-updated": "L'élection a été mise à jour.",
+	"vote.discover-mj": "Découvrez le jugement majoritaire",
+	"vote.discover-mj-desc": "Créé par des chercheurs français, le jugement majoritaire est un mode de scrutin qui améliore l'expressivité des électeurs  et fournit le meilleur consensus.",
+	"vote.go-to-results": "Voir les résultats",
+	"vote.form": "Votre avis nous intéresse",
+	"vote.form-desc": "Aidez nous à améliorer l’application en cliquant ci-dessous",
+	"vote.home-desc": "Participez au vote et découvrez le jugement majoritaire.",
+	"vote.home-start": "Je participe",
+	"vote.open-until": "Vote ouvert jusqu'au",
+	"vote.more-details": "Cliquez ici pour en savoir plus",
+	"vote.submit": "Déposer mon bulletin de vote",
+	"vote.success-ballot": "Votre vote a bien été pris en compte !",
+	"vote.support-better-vote": "Soutenez Mieux Voter",
+	"vote.support-desc": "Mieux Voter est une association transpartisane et sans but lucratif. En adhérant à l’association, vous contribuez à financer son fonctionnement et ses activités.",
+	"vote.thanks": "Merci de votre participation !"
 }
diff --git a/services/constants.ts b/services/constants.ts
index 0e0f0c5..971c437 100644
--- a/services/constants.ts
+++ b/services/constants.ts
@@ -2,10 +2,10 @@
  * This file provides useful constants for the project
  */
 
-export const MAX_NUM_CANDIDATES = process.env.MAX_NUM_CANDIDATES || 1000;
-export const CONTACT_MAIL = process.env.CONTACT_MAIL || 'app@mieuxvoter.fr';
-export const DEFAULT_GRADES = process.env.DEFAULT_GRADES
-  ? process.env.DEFAULT_GRADES.split(',')
+export const MAX_NUM_CANDIDATES = process.env.NEXT_PUBLIC_MAX_NUM_CANDIDATES || 1000;
+export const CONTACT_MAIL = process.env.NEXT_PUBLIC_CONTACT_MAIL || 'app@mieuxvoter.fr';
+export const DEFAULT_GRADES = process.env.NEXT_PUBLIC_DEFAULT_GRADES
+  ? process.env.NEXT_PUBLIC_DEFAULT_GRADES.split(',')
   : [
     'grades.very-good',
     'grades.good',
@@ -14,7 +14,7 @@ export const DEFAULT_GRADES = process.env.DEFAULT_GRADES
     'grades.mediocre',
   ];
 export const IMGPUSH_URL =
-  process.env.IMGPUSH_URL || 'https://imgpush.mieuxvoter.fr';
+  process.env.NEXT_PUBLIC_IMGPUSH_URL || 'https://imgpush.mieuxvoter.fr';
 export const GRADE_COLORS = [
   '#3A9918',
   '#A0CF1C',
@@ -25,6 +25,12 @@ export const GRADE_COLORS = [
   '#F2F0FF',
 ];
 
-export const FORM_FEEDBACK = process.env.FORM_FEEDBACK || "https://forms.gle/JZ1Mtbz8gt3Fpwnx5";
+export const FORM_FEEDBACK = process.env.NEXT_PUBLIC_FORM_FEEDBACK || "https://forms.gle/JZ1Mtbz8gt3Fpwnx5";
 
-export const PAYPAL = process.env.FORM_FEEDBACK || "https://www.paypal.com/donate/?hosted_button_id=QD6U4D323WV4S";
+export const PAYPAL = process.env.NEXT_PUBLIC_PAYPAL || "https://www.paypal.com/donate/?hosted_button_id=QD6U4D323WV4S";
+
+export const BETTER_VOTE_LINK = process.env.NEXT_PUBLIC_BETTER_VOTE || "https://mieuxvoter.fr";
+
+export const MAJORITY_JUDGMENT_LINK = process.env.NEXT_PUBLIC_MAJORITY_JUDGMENT || "https://mieuxvoter.fr/le-jugement-majoritaire";
+export const WHO_WE_ARE_LINK = process.env.NEXT_PUBLIC_WHO_WE_ARE || "https://mieuxvoter.fr/qui-sommes-nous";
+export const NEWS_LINK = process.env.NEXT_PUBLIC_NEWS || "https://mieuxvoter.fr/presse";
diff --git a/services/routes.ts b/services/routes.ts
index 7ceed7d..35253e0 100644
--- a/services/routes.ts
+++ b/services/routes.ts
@@ -4,6 +4,7 @@
 import {getWindowUrl, displayRef} from './utils';
 
 
+export const HOME = '/';
 export const CREATE_ELECTION = '/admin/new';
 export const BALLOT = '/ballot';
 export const ENDED_VOTE = '/end';