[front] chore: add Devoxx France on about page in section about partners and collaborations

amatissart · amatissart · commit cdad4c7aef3e · 2025-02-06T15:26:35.000+01:00
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -120,8 +120,8 @@
   },
   "submit": "submit",
   "comparisonCriteriaButtons": {
-    "nextQualityCriterion": "Next quality criterion",
-    "previousQualityCriterion": "Previous quality criterion"
+    "previousQualityCriterion": "Previous quality criterion",
+    "nextQualityCriterion": "Next quality criterion"
   },
   "comparisonSeries": {
     "skipTheSeries": "Skip the series"
@@ -555,9 +555,6 @@
         "topVideosLanguages": "Top videos languages",
         "keepEmptyToSelectAllLang": "Keep empty to select all languages."
       }
-    },
-    "recommendations": {
-      "defaultUploadDate": "Default value of the uploaded date filter"
     }
   },
   "generalUserSettingsForm": {
@@ -683,13 +680,14 @@
     "weThankOurContributors": "We are extremely thankful to many significant contributor who are or have been very impactful for the project.",
     "sergeiDescription": "Sergei was among the few people who decided to start building Tournesol. He took over most of the engineering effort and developed the back end, the algorithms and the front end of the first version of the platform.",
     "sigmikeDescription": "Michael is a volunteer open source contributor who contributes impactful features on our backend, frontend and extension.",
-    "weThankOurPartners": "We thank our partners",
+    "weThankOurPartners": "Partners & Collaborations",
     "partnershipWithEpfl": "Partnership with EPFL",
     "partenershipWithEpflDetail": "For a short period a research engineer at École Polytechnique Fédérale de Lausanne (EPFL) was dedicated to the development of the Tournesol platform. Many researchers from the Distributed Computing Laboratory have also designed and still contribute to the research about Tournesol algorithms.",
     "partnershipWithPolyconseil": "Partnership with Polyconseil",
     "partnershipWithPolyconseilDetail": "We are also supported by the technology and consulting company Polyconseil, in the context of their #Tech4Good program. Since August 2021, Polyconseil allocated a software engineering intern one day per week to the technical development of Tournesol and supported us on a monthly basis through organizational support and UX/UI designs. We are very grateful for their help.",
     "partnershipWithKleis": "Partnership with Kleis Technology",
     "partnershipWithKleisDetail": "We received support from the technology and consulting company Kleis to help us shape our organizational processes and adopt efficient development practices. Our partnership with Kleis is extremely structuring for the development of our vision for the product and to bring perspective for foundational technical choices.",
+    "collaborationWithDevoxx": "Devoxx France is a conference for developers held in Paris, committed to a more ethical digital world. The association was invited to present Tournesol during a keynote in 2022.",
     "openSourceContributions": "Open Source Contributions",
     "openSourceContributors": "As Tournesol is an open source project, we have been lucky to benefit from contributions by multiple volunteers. Find our wonderful contributors on <2>GitHub</2>",
     "donateHowTo": "How to make a donation?",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
@@ -124,8 +124,8 @@
   },
   "submit": "enregistrer",
   "comparisonCriteriaButtons": {
-    "nextQualityCriterion": "Critère de qualité suivant",
-    "previousQualityCriterion": "Critère de qualité précédent"
+    "previousQualityCriterion": "Critère de qualité précédent",
+    "nextQualityCriterion": "Critère de qualité suivant"
   },
   "comparisonSeries": {
     "skipTheSeries": "Passer la série"
@@ -564,9 +564,6 @@
         "topVideosLanguages": "Langues des Top vidéos",
         "keepEmptyToSelectAllLang": "Laisser vide pour tout sélectionner."
       }
-    },
-    "recommendations": {
-      "defaultUploadDate": "Valeur par défaut du filtre date de mise en ligne"
     }
   },
   "generalUserSettingsForm": {
@@ -692,13 +689,14 @@
     "weThankOurContributors": "Nous sommes extrêmement reconnaissant envers les contributrices et contributeurs qui ont eu un très grand impact sur le projet.",
     "sergeiDescription": "Sergei était une des quelques personnes qui ont décidé de développer le projet Tournesol. Il a au début assumé la majorité des efforts de developpement pour le back end, les algorithmes et le front end de la première vesion de la plateforme.",
     "sigmikeDescription": "Michael contribue volontairement au développement open source de beaucoup d'aspects du project comme le site web et l'extension navigateur.",
-    "weThankOurPartners": "Nous remercions nos partenaires",
+    "weThankOurPartners": "Partenariats & Collaborations",
     "partnershipWithEpfl": "Partenariat avec l'EPFL",
     "partenershipWithEpflDetail": "Pendant une courte période, un ingénieur de recherche à l'École Polytechnique Fédérale de Lausanne (EPFL) s'est consacré au développement de la plateforme Tournesol. Plusieurs chercheurs et chercheuses du laboratoire d'informatique distributée (DCL) ont également participé à la conception et poursuivent la recherche sur les algorithmes de Tournesol.",
     "partnershipWithPolyconseil": "Partenariat avec Polyconseil",
-    "partnershipWithPolyconseilDetail": "Nous sommes également accompagné par l'entreprise Polyconseil, dans le cadre de leur programme #Tech4Good. Depuis août 2021, Polyconseil met à disposition un jour par semaine un ingénieur logiciel en stage pour travailler sur le développement de la plateforme Tournesol et nous apporte chaque mois des conseils d'organisation, et de design UX/UI. Merci beaucoup !",
+    "partnershipWithPolyconseilDetail": "Nous avons été accompagné par l'entreprise Polyconseil, dans le cadre de leur programme #Tech4Good. Polyconseil a mis à disposition un jour par semaine un ingénieur logiciel en stage pour travailler sur le développement de la plateforme Tournesol et nous a apporté des conseils d'organisation, et de design UX/UI. Merci beaucoup !",
     "partnershipWithKleis": "Partenariat avec Kleis Technology",
     "partnershipWithKleisDetail": "Nous avons pu bénéficier de l'accompagnement de l'entreprise Kleis Technology pour définir nos processus organisationnels, et adopter des pratiques de développement efficaces. Notre partenariat avec Kleis est extrêmement structurant pour le développement de la vision de notre produit et nous apporte des solutions pour réaliser des choix techniques essentiels. Merci beaucoup !",
+    "collaborationWithDevoxx": "Devoxx France est une conférence pour les développeurs et les développeuses organisée à Paris, et qui s'engage pour un numérique plus éthique. L'association a été invitée à y présenter Tournesol lors d'une keynote en 2022. Merci !",
     "openSourceContributions": "Contributions Bénévoles",
     "openSourceContributors": "Tournesol étant un projet de développement ouvert, nous avons la chance de pouvoir bénéficier des contributions de nombreux volontaires. Consultez la liste de nos merveilleux contributeurs sur <2>leur page Github</2>.",
     "donateHowTo": "Comment faire un don ?",
diff --git a/frontend/public/logos/devoxx_france_logo.png b/frontend/public/logos/devoxx_france_logo.png
diff --git a/frontend/src/pages/about/About.tsx b/frontend/src/pages/about/About.tsx
@@ -19,9 +19,6 @@ const useStyles = makeStyles(() => ({
     padding: '32px 0px 32px 0px',
     justifyContent: 'center',
   },
-  noMaxWidth: {
-    maxWidth: '100%',
-  },
   container: {
     display: 'flex',
     justifyContent: 'center',
@@ -32,7 +29,7 @@ const useStyles = makeStyles(() => ({
     boxShadow:
       '0px 0px 8px rgba(0, 0, 0, 0.02), 0px 2px 4px rgba(0, 0, 0, 0.05)',
     borderRadius: 4,
-    padding: 8,
+    padding: '16px',
     width: '100%',
     background: '#FFFFFF',
   },
@@ -94,6 +91,7 @@ const ContributorCard = ({
       underline="none"
       color="inherit"
       variant="inherit"
+      display="flex"
     >
       <Card className={classes.card}>
         <Grid container spacing={2}>
@@ -121,16 +119,18 @@ const ContributorCard = ({
 const ContentBox = ({
   children,
   className,
+  maxWidth = '640px',
 }: {
   children?: React.ReactNode;
   className?: string;
+  maxWidth?: string;
 }) => {
   return (
     <Box
       className={className}
       display="flex"
       flexDirection="column"
-      maxWidth="640px"
+      maxWidth={maxWidth}
       alignItems="flex-start"
     >
       {children}
@@ -261,7 +261,14 @@ const AboutPage = () => {
           </ContentBox>
         </Grid>
 
-        <Grid container item xs={12} md={9} className={classes.container}>
+        <Grid
+          container
+          item
+          xs={12}
+          md={8}
+          xl={6}
+          className={classes.container}
+        >
           <Grid item xs={12} sm={4} className={classes.container}>
             <CoreTeamCard
               name="Lê Nguyên Hoang"
@@ -352,11 +359,7 @@ const AboutPage = () => {
         </Grid>
       </Grid>
 
-      <Grid
-        container
-        className={classes.root}
-        // sx={{ bgcolor: 'background.menu' }}
-      >
+      <Grid container className={classes.root}>
         <Grid item xs={12} className={classes.container}>
           <ContentBox>
             <Typography variant="h3">
@@ -388,11 +391,7 @@ const AboutPage = () => {
         </Grid>
       </Grid>
 
-      <Grid
-        container
-        className={classes.root}
-        sx={{ bgcolor: 'background.menu' }}
-      >
+      <Grid container className={classes.root} maxWidth="1000px" margin="auto">
         <Grid item xs={12} className={classes.container}>
           <ContentBox>
             <Typography variant="h1">
@@ -402,7 +401,7 @@ const AboutPage = () => {
         </Grid>
 
         <Grid item xs={12} className={classes.container}>
-          <ContentBox className={classes.card}>
+          <ContentBox className={classes.card} maxWidth="100%">
             <img height="84px" src="/logos/EPFL_Logo.png" />
             <Typography variant="h4">
               {t('about.partnershipWithEpfl')}
@@ -413,13 +412,14 @@ const AboutPage = () => {
           </ContentBox>
         </Grid>
 
-        <Grid item xs={12} md={4} className={classes.container}>
+        <Grid item xs={12} md={6} className={classes.container}>
           <Link
             href="https://www.polyconseil.fr/"
             rel="noopener"
             underline="none"
             color="inherit"
             variant="inherit"
+            display="flex"
           >
             <ContentBox className={classes.card}>
               <img
@@ -437,13 +437,14 @@ const AboutPage = () => {
           </Link>
         </Grid>
 
-        <Grid item xs={12} md={4} className={classes.container}>
+        <Grid item xs={12} md={6} className={classes.container}>
           <Link
             href="https://kleis.ch/"
             rel="noopener"
             underline="none"
             color="inherit"
             variant="inherit"
+            display="flex"
           >
             <ContentBox className={classes.card}>
               <img height="64px" src="/logos/Kleis_Logo.svg" />
@@ -456,13 +457,26 @@ const AboutPage = () => {
             </ContentBox>
           </Link>
         </Grid>
+
+        <Grid item xs={12} className={classes.container}>
+          <Link
+            href="https://www.devoxx.fr/"
+            rel="noopener"
+            underline="none"
+            color="inherit"
+            variant="inherit"
+          >
+            <ContentBox className={classes.card} maxWidth="100%">
+              <img height="64px" src="/logos/devoxx_france_logo.png" />
+              <Typography paragraph>
+                {t('about.collaborationWithDevoxx')}
+              </Typography>
+            </ContentBox>
+          </Link>
+        </Grid>
       </Grid>
 
-      <Grid
-        container
-        className={classes.root}
-        sx={{ bgcolor: 'background.menu' }}
-      >
+      <Grid container className={classes.root}>
         <Grid item xs={12} md={6} className={classes.container}>
           <ContentBox>
             <img height="64px" src="/logos/Foss_Logo.png" />
@@ -491,18 +505,16 @@ const AboutPage = () => {
           xs={12}
           sm={12}
           md={10}
-          lg={8}
-          xl={8}
+          lg={6}
+          xl={6}
           className={classes.container}
         >
-          <ContentBox className={classes.noMaxWidth}>
-            <Paper
-              sx={{ bgcolor: 'background.emphatic', color: 'white', p: 2 }}
-              square
-            >
-              <PublicDownloadSection />
-            </Paper>
-          </ContentBox>
+          <Paper
+            sx={{ bgcolor: 'background.emphatic', color: 'white', p: 2 }}
+            square
+          >
+            <PublicDownloadSection />
+          </Paper>
         </Grid>
       </Grid>
     </>
