Add reuse Lab-LEX report

locales/en/homepage.json

@@ -36,6 +36,9 @@
   "reuses.tosdr.author": "ToS;DR",
   "reuses.tosdr.subtitle": "Lets users collaboratively rate how respectful terms of services are of their rights.",
   "reuses.tosdr.title": "Terms of Service; Didn’t Read",
+  "reuses.report-lab-lex.author": "Lab-LEX, Université de Brest",
+  "reuses.report-lab-lex.title": "Research on the impact on human rights",
+  "reuses.report-lab-lex.subtitle": "Research paper on the impact on human rights of the evolution of social media terms of use.",
   "seo.desc": "We track every change to terms of services to shift the power balance from big tech towards end users.",
   "seo.title": "Open Terms Archive",
   "what_it_is": "Open Terms Archive publicly records every version of the terms of digital services to enable democratic oversight.",

locales/fr/homepage.json

@@ -36,6 +36,9 @@
   "reuses.tosdr.author": "ToS;DR",
   "reuses.tosdr.subtitle": "Permet aux utilisateurs de donner collaborativement une note aux conditions d’utilisation selon le respect de leurs droits.",
   "reuses.tosdr.title": "Terms of Service; Didn’t Read",
+  "reuses.report-lab-lex.author": "Lab-LEX, Université de Brest",
+  "reuses.report-lab-lex.title": "Recherche sur l'impact sur les droits humains",
+  "reuses.report-lab-lex.subtitle": "Papier de recherche sur l'impact sur les droits de l’homme de l’évolution des conditions d’utilisation des réseaux sociaux.",
   "seo.desc": "Suivre les engagements contractuels des principaux fournisseurs de services en ligne",
   "seo.title": "Open Terms Archive",
   "what_it_is": "Open Terms Archive enregistre publiquement chaque version des conditions d'utilisation des services en ligne pour en permettre le contrôle démocratique.",

src/modules/Common/components/Card.module.css

@@ -63,6 +63,7 @@
       font-weight: 300;
       width: 100%;
       height: 16rem;
+      text-align: center;
     }
 
     display: flex;

src/modules/Common/components/Distinctions.tsx

@@ -15,7 +15,7 @@ const Distinctions: React.FC<DistinctionsProps> = ({ children, className, ...pro
     <div className={classNames(s.distinctions, className)} {...props}>
       {Object.entries(distinctionsData).map(([name, data]) => {
         return (
-          <a href={data.link} target="_blank" rel="noopener" className={s.distinction}>
+          <a href={data.link} target="_blank" rel="noopener" className={s.distinction} key={name}>
             <div className={s.distinction_img}>
               <img src={`/images/distinctions/${slugify(name, { lower: true })}.png`} alt="" />
             </div>

src/pages/homepage.tsx

@@ -146,15 +146,25 @@ const HomePage = () => {
       <Container gray={true} layout="wide" paddingX={false} paddingTop={false} id="reuses">
         <Container gridCols="12" gridGutters="11">
           <CardList title={t('homepage:reuses.title')} subtitle={t('homepage:reuses.subtitle')}>
+            <Card
+              image={`/images/reuses/report-lab-lex-${router?.locale}.png`}
+              title={t('homepage:reuses.report-lab-lex.title')}
+              subtitle={t('homepage:reuses.report-lab-lex.subtitle')}
+              author={t('homepage:reuses.report-lab-lex.author')}
+              link="https://grsomedia.wordpress.com/2023/10/10/publication-du-rapport-les-conditions-dutilisation-des-reseaux-sociaux-et-leur-impact-sur-les-droits-de-lhomme/"
+              center={true}
+              white={true}
+              key={t('homepage:reuses.report-lab-lex.title')}
+            />
             <Card
               image={`/images/reuses/memos-elections-${router?.locale}.png`}
-              className="text__center"
               title={t('homepage:reuses.memos-elections-fr.title')}
               subtitle={t('homepage:reuses.memos-elections-fr.subtitle')}
               author={t('homepage:reuses.memos-elections-fr.author')}
               link="https://www.reset.tech/resources/memos-on-platforms-behaviour-during-the-2022-french-elections/"
               center={true}
               white={true}
+              key={t('homepage:reuses.memos-elections-fr.title')}
             />
             <Card
               image="/images/reuses/tosdr.jpg"
@@ -164,6 +174,7 @@ const HomePage = () => {
               link="https://tosdr.org"
               center={true}
               white={true}
+              key={t('homepage:reuses.tosdr.title')}
             />
             <Card
               image="/images/reuses/readability.jpg"
@@ -173,6 +184,7 @@ const HomePage = () => {
               link="https://disinfo.quaidorsay.fr/en/open-terms-archive/experiments"
               center={true}
               white={true}
+              key={t('homepage:reuses.readability.title')}
             />
             <Card
               image="/images/reuses/scripta-manent.jpg"
@@ -182,6 +194,7 @@ const HomePage = () => {
               link="https://disinfo.quaidorsay.fr/fr/open-terms-archive/scripta-manent"
               center={true}
               white={true}
+              key={t('homepage:reuses.scripta_manent.title')}
             />
             <Card
               image="/images/reuses/tosback.jpg"
@@ -191,15 +204,16 @@ const HomePage = () => {
               link="https://tosback.org/"
               center={true}
               white={true}
+              key={t('homepage:reuses.tosback.title')}
             />
             <Card
               isPlaceholder={true}
-              className="text__center"
               title={t('homepage:reuses.new_reuse.title')}
               subtitle={t('homepage:reuses.new_reuse.subtitle')}
               link="mailto:[email protected]"
               center={true}
               white={true}
+              key={t('homepage:reuses.new_reuse.title')}
             />
           </CardList>
         </Container>