Added the trans tag with the required i18nKey

client/src/components/pages/About.jsx

@@ -1,26 +1,41 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable global-require */
 
-import React from 'react';
-import { Card, CardContent, CardMedia, Grid, Typography, Container, Link } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { CodivId, AdvisoryBoard, GlobalHack, Decrypt, HackQuarantine } from '../../utils/imgUrl';
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardMedia,
+  Grid,
+  Typography,
+  Container,
+  Link,
+} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  CodivId,
+  AdvisoryBoard,
+  GlobalHack,
+  Decrypt,
+  HackQuarantine,
+} from "../../utils/imgUrl";
+import { Trans } from "react-i18next";
 
 // TODO add once we get it :)
 function Copyright() {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
-      {'Copyright © '}
+      {"Copyright © "}
       <Link color="inherit" href="https://material-ui.com/">
         Your Website
-      </Link>{' '}
+      </Link>{" "}
       {new Date().getFullYear()}
-      {'.'}
+      {"."}
     </Typography>
   );
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     paddingBottom: theme.spacing(12),
   },
@@ -35,12 +50,12 @@ const useStyles = makeStyles(theme => ({
     paddingBottom: theme.spacing(8),
   },
   card: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
   },
   cardMedia: {
-    paddingTop: '56.25%', // 16:9
+    paddingTop: "56.25%", // 16:9
   },
   cardContent: {
     flexGrow: 1,
@@ -49,48 +64,66 @@ const useStyles = makeStyles(theme => ({
     padding: theme.spacing(2),
   },
   link: {
-    color: 'black',
-    textDecoration: 'none',
-    fontSize: '2em',
+    color: "black",
+    textDecoration: "none",
+    fontSize: "2em",
   },
 }));
 
 export const cards = [
   {
     id: 1,
-    title: 'Winner: CodeVsCOVID-19',
-    about: `CoronaTracker placed in the Top 20 out of over 300 teams in HackZurich's CodeVSCOVID-19`,
+    title: (
+      <Trans i18nKey="aboutSection.text.titleCodeVsCovidCard.winnerCodevscovid19" />
+    ),
+    about: (
+      <Trans i18nKey="aboutSection.text.descriptionCodeVsCovidCard.coronatrackerPlacedInTheTop20OutOfOver300TeamsInHackzurichSCodevscovid19" />
+    ),
     img: CodivId,
-    link: 'https://codevscovid19.devpost.com/',
+    link: "https://codevscovid19.devpost.com/",
   },
   {
     id: 2,
-    title: 'Advisory board',
-    about:
-      'Our advisory board consists of a health-tech CFO, epidemiologist, pulmonary critical care specialist, systems architect, neuropsychologist and emergency room doctor',
+    title: (
+      <Trans i18nKey="aboutSection.text.titleAdvisoryBoardCard.advisoryBoard" />
+    ),
+    about: (
+      <Trans i18nKey="aboutSection.text.descriptionAdvisoryBoardCard.ourAdvisoryBoardConsistsOfAHealthTechCfoEpidemiologistPulmonaryCriticalCareSpecialistSystemsArchitectNeuropsychologistAndEmergencyRoomDoctor" />
+    ),
     img: AdvisoryBoard,
-    link: 'https://coronatracker.me/leadership',
+    link: "https://coronatracker.me/leadership",
   },
   {
     id: 3,
-    title: 'Winner: Global Hack',
-    about: `CoronaTracker placed in the Top 89 Winners out of over 1500 teams in Facebook's Global Hack 1.0`,
+    title: (
+      <Trans i18nKey="aboutSection.text.titleGlobalHackCard.winnerGlobalHack" />
+    ),
+    about: (
+      <Trans i18nKey="aboutSection.text.descriptionGlobalHackCard.coronatrackerPlacedInTheTop89WinnersOutOfOver1500TeamsInFacebookSGlobalHack10" />
+    ),
     img: GlobalHack,
-    link: 'https://covid-global-hackathon.devpost.com/',
+    link: "https://covid-global-hackathon.devpost.com/",
   },
   {
     id: 4,
-    title: 'Decrypt',
-    about: `CoronaTracker was featured in an exclusive article on Decrypt, a leading blockchain news publication`,
+    title: <Trans i18nKey="aboutSection.text.titleDecryptCard.decrypt" />,
+    about: (
+      <Trans i18nKey="aboutSection.text.descriptionDecryptCard.coronatrackerWasFeaturedInAnExclusiveArticleOnDecryptALeadingBlockchainNewsPublication" />
+    ),
     img: Decrypt,
-    link: 'https://decrypt.co/25951/new-blockchain-app-tracks-covid-19-symptoms-reduce-hospital-overload',
+    link:
+      "https://decrypt.co/25951/new-blockchain-app-tracks-covid-19-symptoms-reduce-hospital-overload",
   },
   {
     id: 5,
-    title: 'Winner: Hack Quarantine',
-    about: `CoronaTracker won "Best Use of Blockstack" in Hack Quarantine`,
+    title: (
+      <Trans i18nKey="aboutSection.text.titleHackQuarantineCard.winnerHackQuarantine" />
+    ),
+    about: (
+      <Trans i18nKey="aboutSection.text.descriptionHackQuarantineCard.coronatrackerWonBestUseOfBlockstackInHackQuarantine" />
+    ),
     img: HackQuarantine,
-    link: 'https://hackquarantine.devpost.com/',
+    link: "https://hackquarantine.devpost.com/",
   },
 ];
 
@@ -103,28 +136,50 @@ const About = () => {
         <main>
           <div className={classes.heroContent}>
             <Container maxWidth="sm">
-              <Typography component="h1" variant="h3" align="center" color="textPrimary" gutterBottom>
-                For the community, by the community
+              <Typography
+                component="h1"
+                variant="h3"
+                align="center"
+                color="textPrimary"
+                gutterBottom
+              >
+                <Trans i18nKey="aboutSection.text.title.forTheCommunityByTheCommunity" />
               </Typography>
-              <Typography variant="body1" align="center" color="textSecondary" paragraph>
-                CoronaTracker is an easy-to-use, private-by-design, open-source application for monitoring your health
-                and staying informed during the COVID-19 crisis. Here&apos;s what we&apos;ve accomplished so far
+              <Typography
+                variant="body1"
+                align="center"
+                color="textSecondary"
+                paragraph
+              >
+                <Trans i18nKey="aboutSection.text.description.coronatrackerIsAnEasyToUsePrivateByDesignOpenSourceApplicationForMonitoringYourHealthAndStayingInformedDuringTheCovid19CrisisHereSWhatWeVeAccomplishedSoFar" />
               </Typography>
             </Container>
           </div>
-          <Link className={classes.color} href="https://forms.gle/PrD1QY2z3a7htB5W9" color="inherit">
-            Take our Beta Survey!
+          <Link
+            className={classes.color}
+            href="https://forms.gle/PrD1QY2z3a7htB5W9"
+            color="inherit"
+          >
+            <Trans i18nKey="aboutSection.text.betaSurvey.takeOurBetaSurvey" />
           </Link>
           <Container className={classes.cardGrid} maxWidth="md">
             {/* End hero unit */}
             <Grid container spacing={4}>
-              {cards.map(card => (
+              {cards.map((card) => (
                 <Grid item key={card.id} xs={12} sm={6} md={4}>
                   <Link href={card.link}>
                     <Card className={classes.card}>
-                      <CardMedia className={classes.cardMedia} image={card.img} title="Image title" />
+                      <CardMedia
+                        className={classes.cardMedia}
+                        image={card.img}
+                        title="Image title"
+                      />
                       <CardContent className={classes.cardContent}>
-                        <Typography gutterBottom variant="subtitle1" component="h2">
+                        <Typography
+                          gutterBottom
+                          variant="subtitle1"
+                          component="h2"
+                        >
                           {card.title}
                         </Typography>
                         <Typography variant="body2">{card.about}</Typography>
@@ -138,14 +193,15 @@ const About = () => {
         </main>
         <footer className={classes.footer}>
           <Typography variant="h6" align="center" gutterBottom>
-            Support Us!
+            <Trans i18nKey="aboutSection.text.footerSupportUs.supportUs" />
           </Typography>
-          <Typography variant="body1" align="center" color="textSecondary" component="p">
-            Star our GitHub, fill out our user survey, anything counts! CoronaTracker is made with{' '}
-            <span role="img" aria-label="heart">
-              ❤️
-            </span>{' '}
-            in NYC and across the globe
+          <Typography
+            variant="body1"
+            align="center"
+            color="textSecondary"
+            component="p"
+          >
+            <Trans i18nKey="aboutSection.text.footerMadeWith.starOurGithubFillOutOurUserSurveyAnythingCountsCoronatrackerIsMadeWith\u2764\ufe0fInNycAndAcrossTheGlobe" />
           </Typography>
           {/* <Copyright /> */}
         </footer>

client/src/components/pages/Education.jsx

@@ -1,43 +1,57 @@
-import React, { useState } from 'react';
-import { Button, ButtonGroup, Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import FlashCards from '../cards/FlashCards';
-import { cardData, quizData } from '../../utils/fakeCardData';
-import buttonsCss from '../../styles/buttons';
+import React, { useState } from "react";
+import { Button, ButtonGroup, Grid, Typography } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import FlashCards from "../cards/FlashCards";
+import { cardData, quizData } from "../../utils/fakeCardData";
+import buttonsCss from "../../styles/buttons";
+import { Trans } from "react-i18next";
 
 const useStyles = makeStyles({
   buttonGroup: {
     ...buttonsCss.buttons,
 
-    margin: '20px 8px 10px 8px',
-    width: '160px',
+    margin: "20px 8px 10px 8px",
+    width: "160px",
   },
 });
 
 const FactQuizContainer = () => {
-  const [factsOrQuiz, setFactsQuiz] = useState('facts');
-  const setQuiz = () => setFactsQuiz('quiz');
-  const setFacts = () => setFactsQuiz('facts');
+  const [factsOrQuiz, setFactsQuiz] = useState("facts");
+  const setQuiz = () => setFactsQuiz("quiz");
+  const setFacts = () => setFactsQuiz("facts");
   const classes = useStyles();
 
   return (
     <Grid>
       <Grid>
         <ButtonGroup>
-          <Button className={classes.buttonGroup} onClick={setFacts} variant={factsOrQuiz === 'facts' && 'contained'}>
+          <Button
+            className={classes.buttonGroup}
+            onClick={setFacts}
+            variant={factsOrQuiz === "facts" && "contained"}
+          >
             Facts
           </Button>
-          <Button className={classes.buttonGroup} onClick={setQuiz} variant={factsOrQuiz === 'quiz' && 'contained'}>
+          <Button
+            className={classes.buttonGroup}
+            onClick={setQuiz}
+            variant={factsOrQuiz === "quiz" && "contained"}
+          >
             Quiz
           </Button>
         </ButtonGroup>
         <Typography variant="body1" color="textSecondary">
-          {factsOrQuiz === 'facts' && `Swipe to the right or left to learn more about COVID-19`}
-          {factsOrQuiz === 'quiz' && `QUIZ TIME! Swipe right if true and left if false`}
+          {factsOrQuiz === "facts" && (
+            <Trans i18nKey="educationSection.text.swipe.swipeToTheRightOrLeftToLearnMoreAboutCovid19" />
+          )}
+          {factsOrQuiz === "quiz" &&
+            `QUIZ TIME! Swipe right if true and left if false`}
         </Typography>
       </Grid>
-      {factsOrQuiz === 'facts' && <FlashCards mode="facts" cardData={cardData} />}
-      {factsOrQuiz === 'quiz' && <FlashCards mode="quiz" cardData={quizData} />}
+      {factsOrQuiz === "facts" && (
+        <FlashCards mode="facts" cardData={cardData} />
+      )}
+      {factsOrQuiz === "quiz" && <FlashCards mode="quiz" cardData={quizData} />}
     </Grid>
   );
 };