From 71f3445226b00c68bb98e4b5bc00301b474b0189 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot powered by AIPR <pull-request@aipr.com>
Date: Sat, 30 Dec 2023 19:37:14 +0000
Subject: [PATCH 1/4] [create-pull-request] automated change

---
 frontend/src/components/welcome/welcome.js | 486 ++++++++++-----------
 1 file changed, 235 insertions(+), 251 deletions(-)

diff --git a/frontend/src/components/welcome/welcome.js b/frontend/src/components/welcome/welcome.js
index 87eeb5ac1..f46e7f8e3 100644
--- a/frontend/src/components/welcome/welcome.js
+++ b/frontend/src/components/welcome/welcome.js
@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import 'typeface-roboto'
+import React from "react";
+import PropTypes from "prop-types";
+import "typeface-roboto";
 import {
   withStyles,
   Grid,
@@ -10,276 +10,260 @@ import {
   ListItemText,
   ListItemIcon,
   Avatar,
-  Container
-} from '@material-ui/core'
-
-import {
-  AccountBalanceWallet,
-  Work,
-  Apps,
-  Assignment,
-  GroupWork
-} from '@material-ui/icons'
-
-import './mailchimp.css'
-
-import { injectIntl, FormattedMessage } from 'react-intl'
-
-import TopBarContainer from '../../containers/topbar'
-import Bottom from '../../components/bottom/bottom'
-import messages from './messages'
-import mainStyles from '../styles/style'
-
-const freelancerImage = require('../../images/collections/collection-flat-community.svg')
-const companiesImage = require('../../images/collections/collection-flat-companies.svg')
-const teamImage = require('../../images/welcome-teamwork.png')
+  Container,
+} from "@material-ui/core";
+import { AccountBalanceWallet, Work, Apps, Assignment, GroupWork } from "@material-ui/icons";
+import "./mailchimp.css";
+import { injectIntl, FormattedMessage } from "react-intl";
+import TopBarContainer from "../../containers/topbar";
+import Bottom from "../../components/bottom/bottom";
+import messages from "./messages";
+import mainStyles from "../styles/style";
+const freelancerImage = require('../../images/collections/collection-flat-community.svg');
+const companiesImage = require('../../images/collections/collection-flat-companies.svg');
+const teamImage = require('../../images/welcome-teamwork.png');
 
 import {
   MainTitle,
   MainList,
   ResponsiveImage,
   Section
-} from './components/CommonStyles'
+} from './components/CommonStyles';
 
-const styles = theme => mainStyles(theme)
+const styles = theme => mainStyles(theme);
 
-class Welcome extends Component {
-  constructor (props) {
-    super(props)
+const Welcome = () => {
+  const [value, setValue] = React.useState(0);
 
-    this.state = {
-      value: 0
-    }
-  }
+  React.useEffect(() => {
+    // componentDidMount() equivalent
+  }, []);
 
-  componentDidMount () {
+  React.useEffect(() => {
+    // componentWillUnmount() equivalent
+    return () => {
+      // Clean up code
+    };
+  }, []);
 
-  }
+  const { classes } = props;
 
-  componentWillUnmount () {
-
-  }
-
-  render () {
-    const { classes } = this.props
-
-    return (
-      <div className={ classes.root }>
-        <TopBarContainer ref='intro' hide />
-        <Container>
-          <Section ref='contrib'>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.headline.forfreelancers'
-                      defaultMessage='For contributors and freelancers'
+  return (
+    <div className={classes.root}>
+      <TopBarContainer ref="intro" hide />
+      <Container>
+        <Section ref="contrib">
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <MainTitle left>
+                <Typography variant="h5" gutterBottom>
+                  <FormattedMessage
+                    id="welcome.headline.forfreelancers"
+                    defaultMessage="For contributors and freelancers"
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Apps />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemOnePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemOneSecondary
+                      )}
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Apps />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
+                  </ListItem>
 
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Work />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Work />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemTwoPrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemTwoSecondary
+                      )}
+                    />
+                  </ListItem>
 
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeFreelancersItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='800' src={ freelancerImage } />
-              </Grid>
-            </Grid>
-          </Section>
-        </Container>
-        <Section ref='companies' alternative className={ classes.bgContrast }>
-          <Container>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.tagline.companies.main.headline'
-                      defaultMessage='For maintainers and organizations'
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <AccountBalanceWallet />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemThreePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeFreelancersItemThreeSecondary
+                      )}
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Assignment />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <GroupWork />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCompaniesItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='600' src={ companiesImage } />
-              </Grid>
+                  </ListItem>
+                </List>
+              </MainList>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ResponsiveImage width="800" src={freelancerImage} />
             </Grid>
-          </Container>
+          </Grid>
         </Section>
+      </Container>
+      <Section ref="companies" alternative className={classes.bgContrast}>
         <Container>
-          <Section ref='collab'>
-            <Grid container spacing={ 3 }>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <MainTitle left>
-                  <Typography variant='h5' gutterBottom>
-                    <FormattedMessage
-                      id='welcome.headline.collab'
-                      defaultMessage='Working in development communities'
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <MainTitle left>
+                <Typography variant="h5" gutterBottom>
+                  <FormattedMessage
+                    id="welcome.tagline.companies.main.headline"
+                    defaultMessage="For maintainers and organizations"
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Assignment />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemOnePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemOneSecondary
+                      )}
+                    />
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <GroupWork />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemTwoPrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemTwoSecondary
+                      )}
                     />
-                  </Typography>
-                </MainTitle>
-                <MainList>
-                  <List>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Apps />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemOnePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemOneSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <Work />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemTwoPrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemTwoSecondary
-                        ) }
-                      />
-                    </ListItem>
-                    <ListItem className={ classes.listIconTop }>
-                      <ListItemIcon>
-                        <Avatar className={ classes.iconFill }>
-                          <AccountBalanceWallet />
-                        </Avatar>
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemThreePrimary
-                        ) }
-                        secondary={ this.props.intl.formatMessage(
-                          messages.welcomeCollabItemThreeSecondary
-                        ) }
-                      />
-                    </ListItem>
-                  </List>
-                </MainList>
-              </Grid>
-              <Grid item xs={ 12 } sm={ 6 }>
-                <ResponsiveImage width='600' src={ teamImage } />
-              </Grid>
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <AccountBalanceWallet />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemThreePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCompaniesItemThreeSecondary
+                      )}
+                    />
+                  </ListItem>
+                </List>
+              </MainList>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ResponsiveImage width="600" src={companiesImage} />
             </Grid>
-          </Section>
+          </Grid>
         </Container>
-        <Bottom />
-      </div>
-    )
-  }
-}
+      </Section>
+      <Container>
+        <Section ref="collab">
+          <Grid container spacing={3}>
+            <Grid item xs={12} sm={6}>
+              <MainTitle left>
+                <Typography variant="h5" gutterBottom>
+                  <FormattedMessage
+                    id="welcome.headline.collab"
+                    defaultMessage="Working in development communities"
+                  />
+                </Typography>
+              </MainTitle>
+              <MainList>
+                <List>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Apps />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCollabItemOnePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCollabItemOneSecondary
+                      )}
+                    />
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <Work />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCollabItemTwoPrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCollabItemTwoSecondary
+                      )}
+                    />
+                  </ListItem>
+                  <ListItem className={classes.listIconTop}>
+                    <ListItemIcon>
+                      <Avatar className={classes.iconFill}>
+                        <AccountBalanceWallet />
+                      </Avatar>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={props.intl.formatMessage(
+                        messages.welcomeCollabItemThreePrimary
+                      )}
+                      secondary={props.intl.formatMessage(
+                        messages.welcomeCollabItemThreeSecondary
+                      )}
+                    />
+                  </ListItem>
+                </List>
+              </MainList>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <ResponsiveImage width="600" src={teamImage} />
+            </Grid>
+          </Grid>
+        </Section>
+      </Container>
+      <Bottom />
+    </div>
+  );
+};
 
 Welcome.propTypes = {
-  classes: PropTypes.object.isRequired
-}
+  classes: PropTypes.object.isRequired,
+};
 
-export default injectIntl(withStyles(styles)(Welcome))
+export default injectIntl(withStyles(styles)(Welcome));

From d0574d46e083557809dd510bcf63931ef560c91c Mon Sep 17 00:00:00 2001
From: Alexandre Magno <alexanmtz@gmail.com>
Date: Sat, 30 Dec 2023 21:00:34 +0100
Subject: [PATCH 2/4] Update welcome.js

---
 frontend/src/components/welcome/welcome.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/welcome/welcome.js b/frontend/src/components/welcome/welcome.js
index f46e7f8e3..7dec37ca9 100644
--- a/frontend/src/components/welcome/welcome.js
+++ b/frontend/src/components/welcome/welcome.js
@@ -32,7 +32,7 @@ import {
 
 const styles = theme => mainStyles(theme);
 
-const Welcome = () => {
+const Welcome = (props) => {
   const [value, setValue] = React.useState(0);
 
   React.useEffect(() => {

From 435f6fee46e21989f74148c62e841d47b299e731 Mon Sep 17 00:00:00 2001
From: Alexandre Magno <alexanmtz@gmail.com>
Date: Tue, 2 Jan 2024 17:24:23 +0100
Subject: [PATCH 3/4] fixing wrong ref issue

---
 frontend/src/components/welcome/welcome.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/welcome/welcome.js b/frontend/src/components/welcome/welcome.js
index 7dec37ca9..015110d8f 100644
--- a/frontend/src/components/welcome/welcome.js
+++ b/frontend/src/components/welcome/welcome.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import "typeface-roboto";
 import {
@@ -33,6 +33,7 @@ import {
 const styles = theme => mainStyles(theme);
 
 const Welcome = (props) => {
+  const ref = useRef(null);
   const [value, setValue] = React.useState(0);
 
   React.useEffect(() => {
@@ -50,9 +51,9 @@ const Welcome = (props) => {
 
   return (
     <div className={classes.root}>
-      <TopBarContainer ref="intro" hide />
+      <TopBarContainer hide />
       <Container>
-        <Section ref="contrib">
+        <Section name="contrib" ref={ref}>
           <Grid container spacing={3}>
             <Grid item xs={12} sm={6}>
               <MainTitle left>
@@ -121,7 +122,7 @@ const Welcome = (props) => {
           </Grid>
         </Section>
       </Container>
-      <Section ref="companies" alternative className={classes.bgContrast}>
+      <Section name="companies" ref={ref} alternative className={classes.bgContrast}>
         <Container>
           <Grid container spacing={3}>
             <Grid item xs={12} sm={6}>
@@ -190,7 +191,7 @@ const Welcome = (props) => {
         </Container>
       </Section>
       <Container>
-        <Section ref="collab">
+        <Section name="collab" ref={ref}>
           <Grid container spacing={3}>
             <Grid item xs={12} sm={6}>
               <MainTitle left>

From 48f8cecd3dce9ba57278baff4104bf138ec5501c Mon Sep 17 00:00:00 2001
From: Alexandre Magno <alexanmtz@gmail.com>
Date: Tue, 2 Jan 2024 17:25:20 +0100
Subject: [PATCH 4/4] lint fixes

---
 frontend/src/components/welcome/welcome.js | 210 ++++++++++-----------
 1 file changed, 105 insertions(+), 105 deletions(-)

diff --git a/frontend/src/components/welcome/welcome.js b/frontend/src/components/welcome/welcome.js
index 015110d8f..a444d33e6 100644
--- a/frontend/src/components/welcome/welcome.js
+++ b/frontend/src/components/welcome/welcome.js
@@ -1,6 +1,6 @@
-import React, { useRef } from "react";
-import PropTypes from "prop-types";
-import "typeface-roboto";
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+import 'typeface-roboto'
 import {
   withStyles,
   Grid,
@@ -11,260 +11,260 @@ import {
   ListItemIcon,
   Avatar,
   Container,
-} from "@material-ui/core";
-import { AccountBalanceWallet, Work, Apps, Assignment, GroupWork } from "@material-ui/icons";
-import "./mailchimp.css";
-import { injectIntl, FormattedMessage } from "react-intl";
-import TopBarContainer from "../../containers/topbar";
-import Bottom from "../../components/bottom/bottom";
-import messages from "./messages";
-import mainStyles from "../styles/style";
-const freelancerImage = require('../../images/collections/collection-flat-community.svg');
-const companiesImage = require('../../images/collections/collection-flat-companies.svg');
-const teamImage = require('../../images/welcome-teamwork.png');
+} from '@material-ui/core'
+import { AccountBalanceWallet, Work, Apps, Assignment, GroupWork } from '@material-ui/icons'
+import './mailchimp.css'
+import { injectIntl, FormattedMessage } from 'react-intl'
+import TopBarContainer from '../../containers/topbar'
+import Bottom from '../../components/bottom/bottom'
+import messages from './messages'
+import mainStyles from '../styles/style'
+const freelancerImage = require('../../images/collections/collection-flat-community.svg')
+const companiesImage = require('../../images/collections/collection-flat-companies.svg')
+const teamImage = require('../../images/welcome-teamwork.png')
 
 import {
   MainTitle,
   MainList,
   ResponsiveImage,
   Section
-} from './components/CommonStyles';
+} from './components/CommonStyles'
 
-const styles = theme => mainStyles(theme);
+const styles = theme => mainStyles(theme)
 
 const Welcome = (props) => {
-  const ref = useRef(null);
-  const [value, setValue] = React.useState(0);
+  const ref = useRef(null)
+  const [value, setValue] = React.useState(0)
 
   React.useEffect(() => {
     // componentDidMount() equivalent
-  }, []);
+  }, [])
 
   React.useEffect(() => {
     // componentWillUnmount() equivalent
     return () => {
       // Clean up code
-    };
-  }, []);
+    }
+  }, [])
 
-  const { classes } = props;
+  const { classes } = props
 
   return (
-    <div className={classes.root}>
+    <div className={ classes.root }>
       <TopBarContainer hide />
       <Container>
-        <Section name="contrib" ref={ref}>
-          <Grid container spacing={3}>
-            <Grid item xs={12} sm={6}>
+        <Section name='contrib' ref={ ref }>
+          <Grid container spacing={ 3 }>
+            <Grid item xs={ 12 } sm={ 6 }>
               <MainTitle left>
-                <Typography variant="h5" gutterBottom>
+                <Typography variant='h5' gutterBottom>
                   <FormattedMessage
-                    id="welcome.headline.forfreelancers"
-                    defaultMessage="For contributors and freelancers"
+                    id='welcome.headline.forfreelancers'
+                    defaultMessage='For contributors and freelancers'
                   />
                 </Typography>
               </MainTitle>
               <MainList>
                 <List>
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <Apps />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeFreelancersItemOnePrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeFreelancersItemOneSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
 
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <Work />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeFreelancersItemTwoPrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeFreelancersItemTwoSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
 
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <AccountBalanceWallet />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeFreelancersItemThreePrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeFreelancersItemThreeSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
                 </List>
               </MainList>
             </Grid>
-            <Grid item xs={12} sm={6}>
-              <ResponsiveImage width="800" src={freelancerImage} />
+            <Grid item xs={ 12 } sm={ 6 }>
+              <ResponsiveImage width='800' src={ freelancerImage } />
             </Grid>
           </Grid>
         </Section>
       </Container>
-      <Section name="companies" ref={ref} alternative className={classes.bgContrast}>
+      <Section name='companies' ref={ ref } alternative className={ classes.bgContrast }>
         <Container>
-          <Grid container spacing={3}>
-            <Grid item xs={12} sm={6}>
+          <Grid container spacing={ 3 }>
+            <Grid item xs={ 12 } sm={ 6 }>
               <MainTitle left>
-                <Typography variant="h5" gutterBottom>
+                <Typography variant='h5' gutterBottom>
                   <FormattedMessage
-                    id="welcome.tagline.companies.main.headline"
-                    defaultMessage="For maintainers and organizations"
+                    id='welcome.tagline.companies.main.headline'
+                    defaultMessage='For maintainers and organizations'
                   />
                 </Typography>
               </MainTitle>
               <MainList>
                 <List>
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <Assignment />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeCompaniesItemOnePrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeCompaniesItemOneSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <GroupWork />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeCompaniesItemTwoPrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeCompaniesItemTwoSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <AccountBalanceWallet />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeCompaniesItemThreePrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeCompaniesItemThreeSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
                 </List>
               </MainList>
             </Grid>
-            <Grid item xs={12} sm={6}>
-              <ResponsiveImage width="600" src={companiesImage} />
+            <Grid item xs={ 12 } sm={ 6 }>
+              <ResponsiveImage width='600' src={ companiesImage } />
             </Grid>
           </Grid>
         </Container>
       </Section>
       <Container>
-        <Section name="collab" ref={ref}>
-          <Grid container spacing={3}>
-            <Grid item xs={12} sm={6}>
+        <Section name='collab' ref={ ref }>
+          <Grid container spacing={ 3 }>
+            <Grid item xs={ 12 } sm={ 6 }>
               <MainTitle left>
-                <Typography variant="h5" gutterBottom>
+                <Typography variant='h5' gutterBottom>
                   <FormattedMessage
-                    id="welcome.headline.collab"
-                    defaultMessage="Working in development communities"
+                    id='welcome.headline.collab'
+                    defaultMessage='Working in development communities'
                   />
                 </Typography>
               </MainTitle>
               <MainList>
                 <List>
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <Apps />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeCollabItemOnePrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeCollabItemOneSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <Work />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeCollabItemTwoPrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeCollabItemTwoSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
-                  <ListItem className={classes.listIconTop}>
+                  <ListItem className={ classes.listIconTop }>
                     <ListItemIcon>
-                      <Avatar className={classes.iconFill}>
+                      <Avatar className={ classes.iconFill }>
                         <AccountBalanceWallet />
                       </Avatar>
                     </ListItemIcon>
                     <ListItemText
-                      primary={props.intl.formatMessage(
+                      primary={ props.intl.formatMessage(
                         messages.welcomeCollabItemThreePrimary
-                      )}
-                      secondary={props.intl.formatMessage(
+                      ) }
+                      secondary={ props.intl.formatMessage(
                         messages.welcomeCollabItemThreeSecondary
-                      )}
+                      ) }
                     />
                   </ListItem>
                 </List>
               </MainList>
             </Grid>
-            <Grid item xs={12} sm={6}>
-              <ResponsiveImage width="600" src={teamImage} />
+            <Grid item xs={ 12 } sm={ 6 }>
+              <ResponsiveImage width='600' src={ teamImage } />
             </Grid>
           </Grid>
         </Section>
       </Container>
       <Bottom />
     </div>
-  );
-};
+  )
+}
 
 Welcome.propTypes = {
   classes: PropTypes.object.isRequired,
-};
+}
 
-export default injectIntl(withStyles(styles)(Welcome));
+export default injectIntl(withStyles(styles)(Welcome))