SONAR-8749 Update landing page

12 files changed, 292 insertions, 173 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
index 542056a1329..21db6186dee 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
@@ -17,42 +17,55 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+// @flow
 import React from 'react';
 import { connect } from 'react-redux';
 import keyBy from 'lodash/keyBy';
+import { Link } from 'react-router';
 import AboutProjects from './AboutProjects';
 import EntryIssueTypes from './EntryIssueTypes';
+import AboutLanguages from './AboutLanguages';
 import AboutCleanCode from './AboutCleanCode';
-import AboutIssues from './AboutIssues';
+import AboutQualityModel from './AboutQualityModel';
 import AboutQualityGates from './AboutQualityGates';
 import AboutLeakPeriod from './AboutLeakPeriod';
 import AboutStandards from './AboutStandards';
 import AboutScanners from './AboutScanners';
-import { translate } from '../../../helpers/l10n';
 import { searchProjects } from '../../../api/components';
 import { getFacet } from '../../../api/issues';
-import { getSettingValue } from '../../../store/rootReducer';
 import * as settingsAPI from '../../../api/settings';
+import { getCurrentUser } from '../../../store/rootReducer';
 import '../styles.css';
+import { translate } from '../../../helpers/l10n';
+
+type State = {
+  loading: boolean,
+  projectsCount?: number,
+  issueTypes?: {
+    [key: string]: {
+      count: number
+    }
+  },
+  customText?: string
+};
 
 class AboutApp extends React.Component {
-  static propTypes = {
-    customLogoUrl: React.PropTypes.string,
-    customLogoWidth: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])
+  mounted: boolean;
+
+  props: {
+    currentUser: { isLoggedIn: boolean }
   };
 
-  state = {
+  state: State = {
     loading: true
   };
 
   componentDidMount () {
     this.mounted = true;
-    document.querySelector('html').classList.add('dashboard-page');
     this.loadData();
   }
 
   componentWillUnmount () {
-    document.querySelector('html').classList.remove('dashboard-page');
     this.mounted = false;
   }
 
@@ -94,47 +107,51 @@ class AboutApp extends React.Component {
 
     const { customText } = this.state;
 
-    const logoUrl = this.props.customLogoUrl || `${window.baseUrl}/images/logo.svg`;
-    const logoWidth = Number(this.props.customLogoWidth || 100);
-    const logoHeight = 30;
-    const logoTitle = this.props.customLogoUrl ? '' : translate('layout.sonar.slogan');
+    // $FlowFixMe
+    const bugs = this.state.issueTypes['BUG'].count;
+    // $FlowFixMe
+    const vulnerabilities = this.state.issueTypes['VULNERABILITY'].count;
+    // $FlowFixMe
+    const codeSmells = this.state.issueTypes['CODE_SMELL'].count;
 
     return (
         <div id="about-page" className="about-page">
-          <div className="about-page-entry">
-            <div className="about-page-container clearfix">
-              <div className="pull-left">
-                <div className="about-page-logo">
-                  <img src={logoUrl} width={2 * logoWidth} height={2 * logoHeight} alt={logoTitle}/>
-                </div>
-              </div>
-
-              <div className="about-page-entry-column">
-                <EntryIssueTypes
-                    bugs={this.state.issueTypes['BUG'].count}
-                    vulnerabilities={this.state.issueTypes['VULNERABILITY'].count}
-                    codeSmells={this.state.issueTypes['CODE_SMELL'].count}/>
+          <div className="about-page-container">
+            <div className="about-page-entry">
+              <div className="about-page-intro">
+                <h1 className="big-spacer-bottom">
+                  {translate('layout.sonar.slogan')}
+                </h1>
+                {!this.props.currentUser.isLoggedIn && (
+                    <Link to="/sessions/new" className="button button-active big-spacer-right">
+                      {translate('layout.login')}
+                    </Link>
+                )}
+                <a className="button" href="https://redirect.sonarsource.com/doc/home.html">
+                  {translate('about_page.read_documentation')}
+                </a>
               </div>
 
-              <div className="about-page-entry-column">
+              <div className="about-page-instance">
                 <AboutProjects count={this.state.projectsCount}/>
+                <EntryIssueTypes bugs={bugs} vulnerabilities={vulnerabilities} codeSmells={codeSmells}/>
               </div>
             </div>
-          </div>
-
-          <div className="about-page-container">
 
             {customText != null && customText.length > 0 && (
                 <div className="about-page-section" dangerouslySetInnerHTML={{ __html: customText }}/>
             )}
 
+            <AboutLanguages/>
+
+            <AboutQualityModel/>
+
             <div className="flex-columns">
-              <div className="flex-column flex-column-two-thirds about-page-group-boxes">
+              <div className="flex-column flex-column-half about-page-group-boxes">
                 <AboutCleanCode/>
-                <AboutLeakPeriod/>
               </div>
-              <div className="flex-column flex-column-third about-page-group-boxes">
-                <AboutIssues/>
+              <div className="flex-column flex-column-half about-page-group-boxes">
+                <AboutLeakPeriod/>
               </div>
             </div>
 
@@ -155,8 +172,7 @@ class AboutApp extends React.Component {
 }
 
 const mapStateToProps = state => ({
-  customLogoUrl: (getSettingValue(state, 'sonar.lf.logoUrl') || {}).value,
-  customLogoWidth: (getSettingValue(state, 'sonar.lf.logoWidthPx') || {}).value
+  currentUser: getCurrentUser(state)
 });
 
 export default connect(mapStateToProps)(AboutApp);
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js b/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js
index 9c3c57c5e0a..d5531859fc2 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutCleanCode.js
@@ -18,8 +18,11 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
+import ReadMore from './ReadMore';
 import { translate } from '../../../helpers/l10n';
 
+const link = 'https://redirect.sonarsource.com/doc/issues.html';
+
 export default class AboutCleanCode extends React.Component {
   render () {
     return (
@@ -27,6 +30,7 @@ export default class AboutCleanCode extends React.Component {
           <h2>{translate('about_page.clean_code')}</h2>
           <div className="boxed-group-inner">
             <p className="about-page-text">{translate('about_page.clean_code.text')}</p>
+            <ReadMore link={link}/>
           </div>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js b/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
deleted file mode 100644
index 8213bf6316c..00000000000
--- a/server/sonar-web/src/main/js/apps/about/components/AboutIssues.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2016 SonarSource SA
- * mailto:contact AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import React from 'react';
-import { translate } from '../../../helpers/l10n';
-import BugIcon from '../../../components/ui/BugIcon';
-import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
-import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
-
-export default class AboutIssues extends React.Component {
-  render () {
-    return (
-        <div className="boxed-group">
-          <h2>{translate('about_page.quality_model')}</h2>
-
-          <div className="boxed-group-inner clearfix">
-            <h3 className="spacer-bottom">
-              <span className="little-spacer-right"><BugIcon/></span>
-              {translate('issue.type.BUG.plural')}
-            </h3>
-            <p className="about-page-text">
-              {translate('about_page.quality_model.bugs')}
-            </p>
-
-            <h3 className="big-spacer-top spacer-bottom">
-              <span className="little-spacer-right"><VulnerabilityIcon/></span>
-              {translate('issue.type.VULNERABILITY.plural')}
-            </h3>
-            <p className="about-page-text">
-              {translate('about_page.quality_model.vulnerabilities')}
-            </p>
-
-            <h3 className="big-spacer-top spacer-bottom">
-              <span className="little-spacer-right"><CodeSmellIcon/></span>
-              {translate('issue.type.CODE_SMELL.plural')}
-            </h3>
-            <p className="about-page-text">
-              {translate('about_page.quality_model.code_smells')}
-            </p>
-          </div>
-        </div>
-    );
-  }
-}
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutLanguages.js b/server/sonar-web/src/main/js/apps/about/components/AboutLanguages.js
new file mode 100644
index 00000000000..824e10cb33d
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutLanguages.js
@@ -0,0 +1,70 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+// @flow
+import React from 'react';
+import { translate } from '../../../helpers/l10n';
+
+const languages = [
+  { name: 'Java', url: 'https://redirect.sonarsource.com/plugins/java.html' },
+  { name: 'C/C++', url: 'https://redirect.sonarsource.com/plugins/cpp.html' },
+  { name: 'C#', url: 'https://redirect.sonarsource.com/plugins/csharp.html' },
+  { name: 'COBOL', url: 'https://redirect.sonarsource.com/plugins/cobol.html' },
+  { name: 'ABAP', url: 'https://redirect.sonarsource.com/plugins/abap.html' },
+  { name: 'HTML', url: 'https://redirect.sonarsource.com/plugins/web.html' },
+  { name: 'RPG', url: 'https://redirect.sonarsource.com/plugins/rpg.html' },
+  { name: 'JavaScript', url: 'https://redirect.sonarsource.com/plugins/javascript.html' },
+  { name: 'Objective C', url: 'https://redirect.sonarsource.com/plugins/objectivec.html' },
+  { name: 'XML', url: 'https://redirect.sonarsource.com/plugins/xml.html' },
+  { name: 'VB.NET', url: 'https://redirect.sonarsource.com/plugins/vbnet.html' },
+  { name: 'PL/SQL', url: 'https://redirect.sonarsource.com/plugins/plsql.html' },
+  { name: 'Flex', url: 'https://redirect.sonarsource.com/plugins/flex.html' },
+  { name: 'Python', url: 'https://redirect.sonarsource.com/plugins/python.html' },
+  { name: 'Groovy', url: 'https://redirect.sonarsource.com/plugins/groovy.html' },
+  { name: 'PHP', url: 'https://redirect.sonarsource.com/plugins/php.html' },
+  { name: 'Swift', url: 'https://redirect.sonarsource.com/plugins/swift.html' },
+  { name: 'Visual Basic', url: 'https://redirect.sonarsource.com/plugins/vb.html' },
+  { name: 'PL/I', url: 'https://redirect.sonarsource.com/plugins/pli.html' }
+];
+
+const half = (languages.length + 1) / 2;
+
+export default class AboutLanguages extends React.Component {
+  render () {
+    return (
+        <div className="boxed-group">
+          <h2>{translate('about_page.languages')}</h2>
+          <div className="boxed-group-inner">
+            <p className="about-page-text">{translate('about_page.languages.text')}</p>
+            <ul className="about-page-languages">
+              {languages.slice(0, half).map((language, index) => (
+                  <li key={index}>
+                    <a href={languages[index].url}>{languages[index].name}</a>
+                    <br/>
+                    {index + half < languages.length && (
+                        <a href={languages[index + half].url}>{languages[index + half].name}</a>
+                    )}
+                  </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js b/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js
index 1755b96e69a..feb094aa5c9 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutLeakPeriod.js
@@ -27,9 +27,9 @@ export default class AboutLeakPeriod extends React.Component {
   render () {
     return (
         <div className="boxed-group">
-          <h2>{translate('about_page.leak_period')}</h2>
+          <h2>{translate('about_page.fix_the_leak')}</h2>
           <div className="boxed-group-inner">
-            <p className="about-page-text">{translate('about_page.leak_period.text')}</p>
+            <p className="about-page-text">{translate('about_page.fix_the_leak.text')}</p>
             <ReadMore link={link}/>
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
index 190f41f6704..ecaf724f924 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js
@@ -30,7 +30,7 @@ export default class AboutProjects extends React.Component {
   render () {
     return (
         <div className="about-page-projects">
-          <div className="big-spacer-bottom">
+          <div>
             <Link to="/projects" className="about-page-projects-link">
               {formatMeasure(this.props.count, 'INT')}
             </Link>
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutQualityModel.js b/server/sonar-web/src/main/js/apps/about/components/AboutQualityModel.js
new file mode 100644
index 00000000000..fc036f18c95
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutQualityModel.js
@@ -0,0 +1,65 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import React from 'react';
+import { translate } from '../../../helpers/l10n';
+import BugIcon from '../../../components/ui/BugIcon';
+import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon';
+import CodeSmellIcon from '../../../components/ui/CodeSmellIcon';
+
+export default class AboutQualityModel extends React.Component {
+  render () {
+    return (
+        <div className="boxed-group about-quality-model">
+          <h2>{translate('about_page.quality_model')}</h2>
+
+          <div className="boxed-group-inner clearfix">
+            <div className="flex-columns">
+              <div className="flex-column flex-column-third">
+                <div className="pull-left little-spacer-right"><BugIcon/></div>
+                <p className="about-page-text overflow-hidden">
+                  <strong>{translate('issue.type.BUG.plural')}</strong>
+                  {' '}
+                  {translate('about_page.quality_model.bugs')}
+                </p>
+              </div>
+
+              <div className="flex-column flex-column-third">
+                <div className="pull-left little-spacer-right"><VulnerabilityIcon/></div>
+                <p className="about-page-text overflow-hidden">
+                  <strong>{translate('issue.type.VULNERABILITY.plural')}</strong>
+                  {' '}
+                  {translate('about_page.quality_model.vulnerabilities')}
+                </p>
+              </div>
+
+              <div className="flex-column flex-column-third">
+                <div className="pull-left little-spacer-right"><CodeSmellIcon/></div>
+                <p className="about-page-text overflow-hidden">
+                  <strong>{translate('issue.type.CODE_SMELL.plural')}</strong>
+                  {' '}
+                  {translate('about_page.quality_model.code_smells')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+    );
+  }
+}
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js b/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js
index 627996d1945..42b0e5328a9 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutScanners.js
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import ReadMore from './ReadMore';
 import { translate } from '../../../helpers/l10n';
 
 const scanners = [
@@ -49,16 +48,13 @@ export default class AboutScanners extends React.Component {
         <div className="boxed-group">
           <h2>{translate('about_page.scanners')}</h2>
           <div className="boxed-group-inner">
+            <p className="about-page-text">{translate('about_page.scanners.text')}</p>
             <div className="about-page-analyzers">
               {scanners.map(scanner => (
-                  <div key={scanner.key} className="about-page-analyzer-box">
-                    <div className="big-spacer-bottom">
-                      <img src={`${window.baseUrl}/images/scanner-logos/${scanner.key}.svg`} height={80}
-                           alt={translate('about_page.scanners', scanner.key)}/>
-                    </div>
-                    <p className="about-page-text">{translate('about_page.scanners', scanner.key, 'text')}</p>
-                    <ReadMore link={scanner.link}/>
-                  </div>
+                  <a key={scanner.key} className="about-page-analyzer-box" href={scanner.link}>
+                    <img src={`${window.baseUrl}/images/scanner-logos/${scanner.key}.svg`} height={60}
+                         alt={translate('about_page.scanners', scanner.key)}/>
+                  </a>
               ))}
             </div>
           </div>
diff --git a/server/sonar-web/src/main/js/apps/about/components/ReadMore.js b/server/sonar-web/src/main/js/apps/about/components/ReadMore.js
index 2199979f1ca..8ba0ea98a22 100644
--- a/server/sonar-web/src/main/js/apps/about/components/ReadMore.js
+++ b/server/sonar-web/src/main/js/apps/about/components/ReadMore.js
@@ -30,7 +30,6 @@ export default class ReadMore extends React.Component {
         <div className="big-spacer-top">
           <a className="about-page-link-more" href={this.props.link} target="_blank">
             <span>{translate('about_page.read_more')}</span>
-            <i className="icon-detach spacer-left"/>
           </a>
         </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css
index 98840ab8fcd..d09ede5c5f7 100644
--- a/server/sonar-web/src/main/js/apps/about/styles.css
+++ b/server/sonar-web/src/main/js/apps/about/styles.css
@@ -1,10 +1,21 @@
 .about-page {
+  font-size: 14px;
+}
+
+.about-page .boxed-group {
+  border: none;
 }
 
 .about-page .boxed-group h2 {
   font-size: 18px;
-  font-weight: bold;
-  text-align: center;
+}
+
+.about-page .boxed-group > h2 {
+  padding-top: 25px;
+}
+
+.about-page .boxed-group-inner {
+  padding-bottom: 25px;
 }
 
 .about-page-container {
@@ -17,61 +28,63 @@
   box-sizing: border-box;
 }
 
-.about-page-center-container {
-  position: relative;
-  width: 640px;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.about-page-logo {
-  padding: 20px 0;
-}
-
 .about-page-entry {
-  margin-bottom: 50px;
-  padding: 40px 0 50px;
-  background-color: #363636;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 45px;
+  padding: 65px 0 65px;
+  border-bottom: 1px solid #e6e6e6;
 }
 
-.about-page-entry .about-page-header {
-  color: rgba(255, 255, 255, 0.9);
+.about-page-intro {
+  padding-right: 65px;
+  border-right: 1px solid #e6e6e6;
 }
 
-.about-page-entry-column {
-  float: right;
-  text-align: center;
-  box-sizing: border-box;
+.about-page-intro > h1 {
+  line-height: 40px;
+  font-size: 26px;
+  font-weight: 300;
 }
 
-.about-page-entry-column + .about-page-entry-column {
-  margin-right: 60px;
-  padding-right: 60px;
-  border-right: 1px solid rgba(75, 159, 213, 0.2);
+.about-page-intro > .button {
+  height: 32px;
+  line-height: 30px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 400;
 }
 
-.about-page-entry .alert {
-  font-size: 13px;
+.about-page-instance {
+  display: flex;
+  align-items: center;
 }
 
 .about-page-projects {
+  margin-left: 65px;
   line-height: 1.4;
-  color: rgba(255, 255, 255, 0.9);
   font-size: 16px;
   text-align: center;
 }
 
 .about-page-projects-link {
-  border-bottom-color: rgba(75, 159, 213, 0.2);
-  color: rgb(75, 159, 213);
-  font-size: 44px;
-  font-weight: bold;
+  display: inline-block;
+  line-height: 1;
+  margin-bottom: 12px;
+  font-size: 32px;
 }
 
 .about-page-issue-types {
   text-align: left;
 }
 
+.about-page-issue-types > li + li {
+  margin-top: 12px;
+}
+
 .about-page-issue-types svg {
   vertical-align: middle;
   transform: translateY(-1px);
@@ -85,9 +98,7 @@
 }
 
 .about-page-issue-type-link {
-  border-bottom-color: rgba(75, 159, 213, 0.2);
-  color: rgb(75, 159, 213);
-  font-size: 24px;
+  font-size: 16px;
   font-weight: bold;
 }
 
@@ -194,15 +205,34 @@
   text-transform: uppercase;
 }
 
+.about-page-languages {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.about-page-languages > li {
+  line-height: 2;
+}
+
+.about-quality-model .flex-column + .flex-column{
+  margin-left: 30px;
+  padding-left: 30px;
+  border-left: 1px solid #e6e6e6;
+}
+
+.about-quality-model svg {
+  transform: translateY(2px);
+}
+
 .about-page-analyzers {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
+  margin-top: 15px;
 }
 
 .about-page-analyzer-box {
-  width: 310px;
-  margin-top: 40px;
+  border: none;
 }
 
 .about-page-group-boxes {
diff --git a/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg b/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg
index f0650ba552f..ad6cebddc28 100644
--- a/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg
+++ b/server/sonar-web/src/main/webapp/images/scanner-logos/sonarqube.svg
@@ -1,7 +1,6 @@
-<svg viewBox="0 0 165 80" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
+<svg viewBox="0 0 169 60" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.41421">
   <g fill-rule="nonzero">
-    <path d="M159.602 51.9h-2.013c0-16.19-13.378-29.423-29.903-29.423V20.4c17.603 0 31.956 14.217 31.956 31.5h-.04z" fill="#4B9FD5"/>
-    <path d="M161 41.066c-2.424-10.167-10.658-18.708-21.053-21.653l.467-1.652c10.94 3.184 19.655 12.153 22.174 22.987l-1.587.32zM163.28 31.55c-2.505-5.474-6.703-10.18-11.954-13.35l.668-1.2c5.45 3.278 9.94 8.316 12.46 14.005l-1.174.546z" fill="#4B9FD5"/>
-    <path d="M0 51.14c1.2.654 3.064 1.2 5.144 1.2 4.49 0 6.782-2.186 6.782-5.145-.04-2.29-1.318-3.93-4.263-4.917-1.947-.666-2.52-1.09-2.52-1.865-.04-.76.653-1.2 1.854-1.2 1.304 0 2.744.44 3.398.868l.853-3.385c-.974-.44-2.6-.986-4.466-.986C2.905 35.71.44 38 .44 40.96c-.08 1.865 1.198 3.61 4.477 4.704 1.8.653 2.305.987 2.305 1.866-.012.878-.653 1.306-2.078 1.306-1.493 0-3.398-.654-4.265-1.2L0 51.14zM21.575 39.32c2.225 0 3.158 2.292 3.158 4.704-.026 2.853-1.213 4.704-3.172 4.704-2.09 0-3.184-1.972-3.184-4.704-.026-2.29.88-4.704 3.185-4.704m.174-3.61c-5.104 0-8.488 3.278-8.488 8.42.026 5.145 3.597 8.21 8.196 8.21 4.237 0 8.315-2.733 8.315-8.53.026-4.703-3.17-8.1-7.983-8.1h-.04M31.316 51.9h4.917v-9.075c0-.44-.014-.88.2-1.213.307-.865 1.092-1.85 2.518-1.85 1.733 0 2.413 1.425 2.413 3.383l.04 8.755h4.905v-9.3c0-4.706-2.426-6.784-5.61-6.784-2.693 0-4.266 1.533-4.918 2.52h-.108l-.226-2.188h-4.263c.065 1.428.105 3.066.105 5.04l.028 10.712zM57.154 46.21c0 .226-.04.546-.147.773-.28 1.093-1.318 1.853-2.517 1.853-1.08 0-1.973-.654-1.973-1.853.04-1.865 2.078-2.52 4.597-2.52l.04 1.746m4.744-3.61c0-3.72-1.612-6.89-6.864-6.89-2.93 0-5.143.88-6.235 1.425l.946 3.17c1.037-.65 2.77-1.198 4.41-1.198 2.386 0 2.85 1.2 2.85 2.08l-.01.213c-5.598 0-9.29 1.972-9.29 6.022.013 2.505 1.972 4.917 5.143 4.917 1.838 0 3.505-.76 4.477-1.973h.107l.293 1.533h4.438c-.2-.865-.24-2.293-.24-3.824l-.027-5.477zM64.31 51.9h4.903v-7.98c0-.335.042-.775.042-1.095.386-1.533 1.652-2.52 3.398-2.52.573 0 .986.108 1.304.108l.04-4.597c-.346 0-.585-.107-1.012-.107-1.573 0-3.505.985-4.277 3.278h-.133l-.2-2.84h-4.198c.093 1.307.16 2.84.16 5.144L64.31 51.9zM106.82 47.53c0 1.638.08 3.17.08 4.37h-2.534l-.16-2.625h-.064c-.762 1.318-2.494 3.064-5.345 3.064-2.45 0-5.464-1.426-5.464-6.996v-9.422h2.92v8.876c0 3.052.906 5.13 3.53 5.13 1.987 0 3.29-1.412 3.838-2.733.188-.44.32-.878.32-1.425l-.025-9.848h2.905V47.53zM111.95 45.664c0 .333.093.653.093.987.613 2.078 2.293 3.504 4.37 3.504 3.078 0 4.932-2.517 4.932-6.235-.04-3.173-1.64-5.918-4.824-5.918-1.958 0-3.825 1.318-4.37 3.61-.093.334-.214.666-.214 1.213l.014 2.84m-3 6.342c.067-1.093.135-2.624.135-4.038V28.592h2.865v10.075h.065c1.026-1.76 2.866-2.96 5.492-2.96 3.93 0 6.782 3.28 6.675 8.21.028 5.69-3.61 8.53-7.102 8.53-2.345 0-4.158-.868-5.37-3.065h-.12l-.133 2.624h-2.506zM137.096 42.386c.026-1.865-.76-4.705-4.052-4.705-2.917 0-4.263 2.733-4.478 4.706h8.53m-8.53 2.078c.068 3.944 2.627 5.585 5.464 5.585 2.106 0 3.398-.443 4.492-.882l.453 2.08c-1.026.44-2.76.986-5.265.986-4.983 0-7.888-3.172-7.888-7.995-.028-4.813 2.852-8.636 7.448-8.636 5.238 0 6.677 4.597 6.677 7.54-.053.548-.12.987-.12 1.32h-11.26zM86.577 48.836c-2.704 1.865-6.37 1.213-8.236-1.533-1.81-2.732-1.09-6.343 1.534-8.196 2.746-1.865 6.45-1.105 8.316 1.533 1.785 2.732 1.093 6.45-1.64 8.196m3.68-9.622c-2.613-3.837-7.836-4.81-11.78-2.185-3.8 2.624-4.81 7.875-2.186 11.698 2.318 3.398 6.676 4.597 10.393 3.066l3.225 5.25 2.598-1.746-3.265-5.37c2.826-2.733 3.345-7.21 1.054-10.714h-.04"/>
+    <path d="M5.6405 33.56208c0-.39166-.13802-.6925-.41525-.9013-.27605-.21-.7739-.43178-1.49235-.66418-.71962-.2324-1.28825-.46245-1.70823-.68778-1.14197-.617-1.71413-1.44988-1.71413-2.4951 0-.54386.15336-1.02872.4601-1.45578.3067-.42588.74675-.75856 1.3201-.99805.57334-.2395 1.21747-.35982 1.93238-.35982.71844 0 1.35903.12977 1.92176.3905.56155.2607.99804.6276 1.3095 1.10302.31143.47425.46716 1.01338.46716 1.6174H5.6476c0-.46127-.14512-.8199-.43533-1.07472-.2902-.256-.6984-.3846-1.22337-.3846-.50728 0-.9013.10736-1.18208.32207-.28195.2147-.42234.49666-.42234.84704 0 .32677.16517.60047.4943.82225.32915.2206.8152.42824 1.45578.62172 1.17972.3551 2.03856.79513 2.5777 1.3201.53912.52616.80928 1.17972.80928 1.96306 0 .8718-.33032 1.55487-.9886 2.05035-.65947.49548-1.54662.74322-2.66146.74322-.7739 0-1.47937-.14156-2.11523-.42587-.63587-.28314-1.12074-.67126-1.45578-1.1644-.33386-.4931-.5002-1.0641-.5002-1.71412h2.07985c0 1.11013.66418 1.66577 1.99136 1.66577.49313 0 .87772-.10027 1.15377-.30082.27723-.20056.41526-.48015.41526-.83997zM16.47152 31.39848c0 .99096-.17578 1.85924-.52497 2.606-.35038.74676-.85176 1.32247-1.50415 1.7283-.65238.4058-1.39915.60872-2.24265.60872-.83406 0-1.57846-.20055-2.2332-.60165-.65357-.4011-1.16085-.97327-1.52066-1.71767-.35983-.7444-.5415-1.60088-.54622-2.56826v-.49784c0-.99096.1793-1.86277.5356-2.61662.35744-.75266.86236-1.33072 1.51475-1.73418.6512-.40347 1.3968-.6052 2.23557-.6052.83878 0 1.58436.20173 2.23675.6052.6512.40346 1.15612.98152 1.51358 1.73418.35745.75385.5356 1.6233.5356 2.60954v.44948zm-2.10108-.45655c0-1.05467-.18994-1.85688-.56745-2.40545-.37752-.5474-.91665-.82227-1.6174-.82227-.69604 0-1.2328.27135-1.61032.81284-.3775.5415-.5698 1.33426-.57452 2.38067v.49078c0 1.02753.18993 1.82502.56744 2.39247.3775.56627.92136.8494 1.63155.8494.69604 0 1.23045-.27252 1.60324-.81873.37397-.5462.56272-1.34252.56744-2.38893v-.49077zM25.24274 36.2023H23.1688l-4.037-6.62177v6.62177h-2.07396V26.1381h2.07395l4.04407 6.63593V26.1381h2.06687v10.0642zM31.94 34.12953h-3.6359l-.6913 2.07277h-2.2049l3.7456-10.0642h1.92177l3.76803 10.0642h-2.2049l-.6984-2.07277zm-3.0767-1.67992h2.51634l-1.26466-3.76802-1.25168 3.76803zM38.5889 32.51803h-1.65278v3.68427h-2.07276V26.1381h3.73853c1.18915 0 2.10697.26544 2.75228.79514.64412.5297.96737 1.2788.96737 2.24618 0 .6866-.14865 1.25995-.44594 1.71768-.29728.4589-.74793.82462-1.35195 1.09596l2.17777 4.1125v.09674h-2.22614l-1.88637-3.68427zm-1.65278-1.67874h1.67285c.52143 0 .9249-.13332 1.2104-.39757.28548-.26544.42823-.63115.42823-1.09596 0-.47425-.1345-.84822-.40465-1.11956-.26897-.2725-.68305-.40817-1.24106-.40817H36.9361v3.02126zM51.2308 31.39848c0 .94023-.1522 1.7566-.45656 2.45028-.30437.69367-.72553 1.2505-1.26466 1.6693l1.67284 1.3142-1.3201 1.16793-2.14356-1.72122c-.2442.0413-.49784.06252-.75974.06252-.83406 0-1.57846-.20055-2.2332-.60165-.65475-.4011-1.16085-.97327-1.52066-1.71767-.35982-.7444-.5415-1.60088-.5462-2.56826v-.49784c0-.99096.1793-1.86277.53558-2.61662.35745-.75266.86237-1.33072 1.51476-1.73418.6512-.40347 1.3968-.6052 2.23557-.6052.83878 0 1.58436.20173 2.23675.6052.6512.40346 1.15612.98152 1.51358 1.73418.35627.75385.5356 1.6233.5356 2.60954v.44948zm-2.1011-.45655c0-1.05467-.18993-1.85688-.56744-2.40545-.3775-.5474-.91664-.82227-1.6174-.82227-.69603 0-1.2328.27135-1.6103.81284-.3787.5415-.5698 1.33426-.57453 2.38067v.49078c0 1.02753.18993 1.82502.56744 2.39247.3775.56627.92136.8494 1.63155.8494.69604 0 1.23045-.27252 1.60324-.81873.37398-.5462.56273-1.34252.56745-2.38893v-.49077zM59.44872 26.1381v6.62885c0 1.10186-.34448 1.9725-1.03343 2.61308-.68897.6406-1.6304.96147-2.82426.96147-1.175 0-2.10816-.31144-2.79948-.93315-.69132-.6229-1.04287-1.477-1.05703-2.5647V26.1381h2.07395v6.643c0 .65947.1569 1.13962.47307 1.44163.31616.302.75266.453 1.3095.453 1.16673 0 1.75895-.61344 1.77664-1.83917V26.1381h2.08102zM60.22852 36.2023V26.1381h3.52618c1.221 0 2.1471.2336 2.77824.70194.63115.46717.9473 1.1526.9473 2.05625 0 .4931-.1274.92725-.37986 1.30358-.25364.37515-.60637.65003-1.0582.8258.5167.1286.92254.3893 1.21983.78098.2973.39167.44594.87063.44594 1.43808 0 .96737-.3091 1.69998-.92608 2.19782-.617.49784-1.49706.75148-2.6402.75974H60.2285zm2.07394-4.38148v2.7157h1.77666c.4884 0 .86946-.1156 1.14433-.34918.2737-.2324.41054-.5533.41054-.96384 0-.92136-.4766-1.3897-1.431-1.40268h-1.90054zm0-1.4664h1.53482c1.0464-.0177 1.56903-.4353 1.56903-1.2505 0-.45655-.13212-.7845-.39756-.98506-.26426-.20056-.68306-.30083-1.25404-.30083h-1.45224v2.5364zM74.39813 31.84087h-3.98155v2.69566h4.67287v1.66577H68.3438V26.1381h6.73267v1.67993h-4.6599v2.39837h3.98156v1.62447z" fill="#4A9ACD"/>
+    <path d="M83.21064 33.56208c0-.39166-.1392-.6925-.41526-.9013-.27606-.21-.7739-.43178-1.49353-.66418-.71845-.2324-1.28707-.46245-1.70705-.68778-1.14315-.617-1.71413-1.44988-1.71413-2.4951 0-.54386.15336-1.02872.4601-1.45578.3067-.42588.74675-.75856 1.3201-.99805.57334-.2395 1.21746-.35982 1.93237-.35982.71845 0 1.35904.12977 1.9206.3905.56272.2607.9992.6276 1.31066 1.10302.31144.47425.466 1.01338.466 1.6174H83.2177c0-.46127-.1463-.8199-.4365-1.07472-.2902-.256-.6972-.3846-1.22337-.3846-.5061 0-.90012.10736-1.18208.32207-.28077.2147-.42116.49666-.42116.84704 0 .32677.16517.60047.49432.82225.32914.2206.814.42824 1.4546.62172 1.1797.3551 2.03973.79513 2.57886 1.3201.53913.52616.8081 1.17972.8081 1.96306 0 .8718-.32913 1.55487-.9886 2.05035-.65828.49548-1.54543.74322-2.66027.74322-.77506 0-1.47936-.14156-2.11522-.42587-.63587-.28314-1.12192-.67126-1.45578-1.1644-.33386-.4931-.50138-1.0641-.50138-1.71412h2.08103c0 1.11013.66418 1.66577 1.99136 1.66577.49314 0 .87772-.10027 1.15378-.30082.27605-.20056.41526-.48015.41526-.83997zM93.67476 32.8507c-.07786 1.083-.4778 1.93475-1.19978 2.55765-.7208.6217-1.67166.93315-2.85138.93315-1.28944 0-2.30517-.4353-3.04486-1.3036-.73968-.86826-1.10894-2.06096-1.10894-3.5769v-.6158c0-.96738.17106-1.82032.512-2.55764.34094-.73733.82817-1.3024 1.46168-1.69644.6335-.39403 1.36965-.59104 2.20843-.59104 1.16086 0 2.09637.31145 2.80657.93316.709.6217 1.11955 1.49588 1.23044 2.62016h-2.07393c-.05073-.65003-.23123-1.12074-.54268-1.4145-.31145-.29256-.78452-.43884-1.4204-.43884-.6913 0-1.2092.24774-1.5525.74322-.3433.49548-.51908 1.26466-.5285 2.30517v.76092c0 1.0877.16515 1.88283.4943 2.38422.32913.50255.8494.75383 1.5584.75383.6406 0 1.11955-.1463 1.43454-.43886.31616-.29257.49666-.74558.54267-1.35786h2.07396zM99.79868 34.12953h-3.6359l-.6913 2.07277h-2.2049l3.7456-10.0642h1.92177l3.76802 10.0642h-2.2049l-.6984-2.07277zm-3.0767-1.67992h2.51634l-1.26466-3.76802-1.2517 3.76803zM110.90575 36.2023h-2.07395l-4.037-6.62177v6.62177h-2.07277V26.1381h2.07277l4.04408 6.63593V26.1381h2.06687v10.0642zM119.98133 36.2023h-2.07394l-4.03702-6.62177v6.62177h-2.07394V26.1381h2.07394l4.04408 6.63593V26.1381h2.06687v10.0642zM126.92752 31.84087h-3.98155v2.69566h4.67287v1.66577h-6.74682V26.1381h6.73266v1.67993h-4.6587v2.39837h3.98154v1.62447zM131.6405 32.51803h-1.6516v3.68427h-2.07395V26.1381h3.7397c1.18917 0 2.1058.26544 2.75112.79514.6453.5297.96737 1.2788.96737 2.24618 0 .6866-.14864 1.25995-.44593 1.71768-.29728.4589-.74794.82462-1.35077 1.09596l2.17658 4.1125v.09674h-2.22494l-1.88755-3.68427zm-1.6516-1.67874h1.67284c.52026 0 .92372-.13332 1.2092-.39757.2855-.26544.42825-.63115.42825-1.09596 0-.47425-.1345-.84822-.40347-1.11956-.27016-.2725-.68424-.40817-1.24107-.40817h-1.66576v3.02126zM146.53565 32.8507c-.07904 1.083-.47897 1.93475-1.19977 2.55765-.7208.6217-1.67167.93315-2.8514.93315-1.2906 0-2.30516-.4353-3.04485-1.3036-.73968-.86826-1.10893-2.06096-1.10893-3.5769v-.6158c0-.96738.16988-1.82032.51082-2.55764.34094-.73733.82816-1.3024 1.46167-1.69644.63468-.39403 1.37082-.59104 2.20843-.59104 1.16202 0 2.09754.31145 2.80655.93316.7102.6217 1.12073 1.49588 1.23045 2.62016h-2.07277c-.05073-.65003-.2324-1.12074-.54267-1.4145-.31146-.29256-.78453-.43884-1.42157-.43884-.69014 0-1.20804.24774-1.55134.74322-.3433.49548-.51908 1.26466-.52852 2.30517v.76092c0 1.0877.16398 1.88283.4943 2.38422.32914.50255.84822.75383 1.5584.75383.6406 0 1.1184-.1463 1.43455-.43886.315-.29257.49666-.74558.54267-1.35786h2.07395zM149.0508 34.53653h4.40273v1.66577h-6.47666V26.1381h2.07394v8.39843zM153.85345 26.1381h2.07395v10.0642h-2.07395z" fill="#616161"/>
   </g>
 </svg>
diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 473cb702d36..317f5048d52 100644
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -460,7 +460,7 @@ layout.measures=Measures
 layout.settings=Administration
 layout.print=Print
 layout.permalink=Permalink
-layout.sonar.slogan=Continuous Code Quality Management
+layout.sonar.slogan=Continuous Code Quality
 layout.dashboards=Dashboards
 layout.configuration=Project Configuration
 layout.projects=Projects
@@ -2719,40 +2719,40 @@ component_measures.not_found=The requested measure was not found.
 # ABOUT PAGE
 #
 #------------------------------------------------------------------------------
+about_page.read_documentation.
 about_page.projects_analyzed=Projects Analyzed
 about_page.issues_found=Issues Found
 about_page.read_more=Read More
+about_page.read_documentation=Read documentation
 
-about_page.clean_code=Keep your code clean by fixing the leak
-about_page.clean_code.text=By fixing new issues as they appear in code, you create and maintain a clean code base. Even on legacy projects, focusing on keeping new code clean will eventually yield a code base you can be proud of.
+about_page.languages=Multi-Language
+about_page.languages.text=20+ programming languages are supported by SonarQube thanks to our in-house code analyzers, including:
+
+about_page.quality_model=Quality Model
+about_page.quality_model.bugs=track code that is demonstrably wrong or highly likely to yield unexpected behavior.
+about_page.quality_model.vulnerabilities=are raised on code that is potentially vulnerable to exploitation by hackers.
+about_page.quality_model.code_smells=will confuse maintainers or give them pause. They are measured primarily in terms of the time they will take to fix.
 
-about_page.leak_period=Understanding the Leak Period
-about_page.leak_period.text=The leak metaphor and the default Quality Gate are based on the leak period - the recent period against which you're tracking issues. For some previous_version makes the most sense, for others the last 30 days is a good option.
+about_page.clean_code=Write Clean Code
+about_page.clean_code.text=By fixing new issues as they appear in code, you create and maintain a clean code base. Even on legacy projects, focusing on keeping new code clean will eventually yield a code base you can be proud of.
 
-about_page.quality_model=SonarQube Quality Model
-about_page.quality_model.bugs=Bugs track code that is demonstrably wrong or highly likely to yield unexpected behavior.
-about_page.quality_model.vulnerabilities=Vulnerabilities are raised on code that is potentially vulnerable to exploitation by hackers.
-about_page.quality_model.code_smells=Code Smells will confuse maintainers or give them pause. They are measured primarily in terms of the time they will take to fix.
+about_page.fix_the_leak=Fix The Leak
+about_page.fix_the_leak.text=The water leak paradigm and the default Quality Gate are based on the leak period - the recent period against which you're tracking issues. For some previous_version makes the most sense, for others the last 30 days is a good option.
 
-about_page.quality_gates=Understanding Quality Gates
-about_page.quality_gates.text=Your project's quality gate is the set of conditions the project must meet before it can be released into production. The quality gate is designed to ensure that the next version's quality will be better than the last.
+about_page.quality_gates=Enforce Quality Gate
+about_page.quality_gates.text=Your project's Quality Gate is the set of conditions the project must meet before it can be released into production. The Quality Gate is designed to ensure that the next version's quality will be better than the last.
 
-about_page.standards=Conform to recognized standards
-about_page.standards.text=SonarAnalyzers offer rules that support industry standards. Configure your Quality Profile with standard-related rules to ensure adherence.
+about_page.standards=Follow Standards
+about_page.standards.text=Code analyzers offer rules that support industry standards. Configure your Quality Profile with standard-related rules to ensure adherence.
 
-about_page.scanners=Start analyzing your projects with a SonarQube Scanner
+about_page.scanners=Run Analysis With A SonarQube Scanner
+about_page.scanners.text=For a good user experience, choose the scanner that match best your environment. If you don't know which one suites you best, SonarQube Scanner CLI is the way to go.
 about_page.scanners.sonarqube=SonarQube Scanner
-about_page.scanners.sonarqube.text=The SonarQube Scanner is a Java-based command-line tool that can analyze any language SonarQube supports.
 about_page.scanners.msbuild=SonarQube Scanner for MSBuild
-about_page.scanners.msbuild.text=Built in collaboration with Microsoft, the SonarQube Scanner for MSBuild is the recommended way to launch a SonarQube analysis on MSBuild projects and solutions.
 about_page.scanners.maven=SonarQube Scanner for Maven
-about_page.scanners.maven.text=Using the SonarQube Scanner for Maven is as simple as running mvn sonar:sonar on your Maven project.
 about_page.scanners.gradle=SonarQube Scanner for Gradle
-about_page.scanners.gradle.text=The SonarQube Scanner for Gradle provides an easy way to start analysis of a Gradle project.
 about_page.scanners.jenkins=SonarQube Scanner for Jenkins
-about_page.scanners.jenkins.text=The SonarQube Scanner for Jenkins lets you integrate analysis seamlessly into a job or a pipeline.
-about_page.scanners.ant=SonarQube Scanner for Ant"
-about_page.scanners.ant.text=The SonarQube Scanner for Ant lets you start an analysis directly from an Apache Ant script.
+about_page.scanners.ant=SonarQube Scanner for Ant
 
 
 #------------------------------------------------------------------------------