WWWSC-82 Re-implement SEO titles and meta description

11 files changed, 77 insertions, 13 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/AsAService.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/AsAService.tsx
index ed1cef669bd..c113f0f46e0 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/AsAService.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/AsAService.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import Helmet from 'react-helmet';
 import SQPageContainer from './components/SQPageContainer';
 import SQStartUsing from './components/SQStartUsing';
 import SQTopNav from './components/SQTopNav';
@@ -30,6 +31,12 @@ export default function AsAService() {
     <SQPageContainer>
       {({ currentUser }) => (
         <div className="page page-limited sc-page">
+          <Helmet title="Get started with SonarQube as a Service | SonarCloud">
+            <meta
+              content="Analyze your code with just a few clicks. Immediate access to the latest features and functionality. You use the service and we take care of the rest."
+              name="description"
+            />
+          </Helmet>
           <SQTopNav />
 
           <div className="sc-child-header">
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx
index 44675703456..783eba0868d 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/AzureDevOps.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import Helmet from 'react-helmet';
 import { Link } from 'react-router';
 import SQPageContainer from './components/SQPageContainer';
 import { isLoggedIn } from '../../../app/types';
@@ -29,6 +30,12 @@ export default function AzureDevOps() {
     <SQPageContainer>
       {({ currentUser }) => (
         <div className="page page-limited sc-page">
+          <Helmet title="Continuous Code Quality in Azure Devops | SonarCloud">
+            <meta
+              content="Enhance Azure DevOps with continuous code quality and automatically analyze branches and decorate pull requests."
+              name="description"
+            />
+          </Helmet>
           <ul className="sc-top-nav">
             <li className="sc-top-nav-item">
               <Link className="sc-top-nav-link" to="/about/sq">
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/BranchAnalysis.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/BranchAnalysis.tsx
index 77067360585..54e8e2214cf 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/BranchAnalysis.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/BranchAnalysis.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import Helmet from 'react-helmet';
 import SQPageContainer from './components/SQPageContainer';
 import SQStartUsing from './components/SQStartUsing';
 import SQTopNav from './components/SQTopNav';
@@ -30,6 +31,12 @@ export default function BranchAnalysis() {
     <SQPageContainer>
       {({ currentUser }) => (
         <div className="page page-limited sc-page">
+          <Helmet title="Pull requests analysis in Github, BitBucket and Azure DevOps | SonarCloud">
+            <meta
+              content="SonarCloud automatically analyzes branches and decorates pull requests with Github, BitBucket and Azure DevOps."
+              name="description"
+            />
+          </Helmet>
           <SQTopNav />
 
           <div className="sc-child-header">
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx
index 59d084dfe9d..65c70964eb8 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/Contact.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router';
 import { Location } from 'history';
 import SQPageContainer from './components/SQPageContainer';
@@ -83,6 +84,12 @@ export default class Contact extends React.PureComponent<Props, State> {
       <SQPageContainer>
         {({ currentUser, userOrganizations }) => (
           <div className="page page-limited sc-page sc-contact-page">
+            <Helmet title="Contact Us | SonarCloud">
+              <meta
+                content="If you are looking for help with SonarCloud, our Support forum is the best place to get help."
+                name="description"
+              />
+            </Helmet>
             <h1 className="sc-page-title">Contact us</h1>
             <Alert display="inline" variant="warning">
               If you are looking for help with SonarCloud, our{' '}
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx
index 85995640969..76fb85d2770 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/Pricing.tsx
@@ -59,7 +59,7 @@ export default class Pricing extends React.PureComponent {
       <div className="global-container">
         <div className="page-wrapper">
           <div className="page-container sc-page">
-            <Helmet title="SonarCloud | Plans and Pricing">
+            <Helmet title="Plans and Pricing | SonarCloud">
               <meta
                 content="Get all the SonarCloud features and functionality for free on your open-source projects. If you need privacy for your code, we have a pricing plan to fit your needs."
                 name="description"
@@ -176,7 +176,7 @@ function PricingFAQ({ getReference }: PricingFAQProps) {
               code to be analyzed in your organization.
               <br />
               <br />
-              Find you max LOC below to see what it will cost you per month:
+              Find your max LOC below to see what it will cost you per month:
             </p>
             <table className="loc-price sc-big-spacer-bottom">
               <thead>
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
index 6ae93655a54..3f085d60410 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/SQHome.tsx
@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import { Link } from 'react-router';
+import Helmet from 'react-helmet';
 import LoginButtons from './components/LoginButtons';
 import Pricing from './components/Pricing';
 import SQPageContainer from './components/SQPageContainer';
@@ -32,6 +33,12 @@ export default function SQHome() {
     <SQPageContainer>
       {({ currentUser }) => (
         <div className="page sc-page sc-sq-page">
+          <Helmet title="Use SonarQube as a Service, sign up for SonarCloud | SonarCloud">
+            <meta
+              content="Enhance your workflow with continuous code quality, SonarCloud automatically analyzes and decorates pull requests on GitHub, Bitbucket and Azure DevOps on major languages."
+              name="description"
+            />
+          </Helmet>
           <Jumbotron />
 
           <h2 className="sc-sq-header2">You use the service, we take care of the rest</h2>
@@ -103,7 +110,7 @@ function Features() {
             height="34"
             src={`${getBaseUrl()}/images/sonarcloud/branch-analysis.svg`}
           />
-          <h3 className="sc-feature-title">Branch & pull request analysis</h3>
+          <h3 className="sc-feature-title">Branch &amp; pull request analysis</h3>
           <p className="sc-feature-description">
             SonarCloud comes with a built-in feature to automatically analyze project branches and
             pull requests as soon as they get created.
@@ -138,7 +145,7 @@ function Features() {
 function Languages() {
   return (
     <div className="sc-languages">
-      <h3 className="sc-feature-title">On 17 programming languages</h3>
+      <h3 className="sc-feature-title">On 21 programming languages</h3>
       <ul className="sc-languages-list">
         <li>
           <img
@@ -168,7 +175,7 @@ function Languages() {
           <img
             alt="C#"
             height="60"
-            src={`${getBaseUrl()}/images/languages/black/csharp.svg`}
+            src={`${getBaseUrl()}/images/languages/black/c-sharp.svg`}
             width="60"
           />
         </li>
@@ -176,7 +183,7 @@ function Languages() {
           <img
             alt="C++"
             height="60"
-            src={`${getBaseUrl()}/images/languages/black/c-c-plus-plus.svg`}
+            src={`${getBaseUrl()}/images/languages/black/c-plus.svg`}
             width="60"
           />
         </li>
@@ -216,9 +223,17 @@ function Languages() {
         </li>
         <li>
           <img
+            alt="Kotlin"
+            height="60"
+            src={`${getBaseUrl()}/images/languages/black/kotlin.svg`}
+            width="60"
+          />
+        </li>
+        <li>
+          <img
             alt="Flex"
             height="60"
-            src={`${getBaseUrl()}/images/languages/black/flex@2x.png`}
+            src={`${getBaseUrl()}/images/languages/black/flex.png`}
             width="85"
           />
         </li>
@@ -240,20 +255,30 @@ function Languages() {
         </li>
         <li>
           <img
-            alt="Scala"
+            alt="Ruby"
             height="60"
-            src={`${getBaseUrl()}/images/languages/black/scala.svg`}
+            src={`${getBaseUrl()}/images/languages/black/ruby.svg`}
             width="60"
           />
         </li>
         <li>
           <img
+            alt="Scala"
+            height="57"
+            src={`${getBaseUrl()}/images/languages/black/scala.svg`}
+            width="57"
+          />
+        </li>
+        <li>
+          <img
             alt="Swift"
             height="60"
             src={`${getBaseUrl()}/images/languages/black/swift.svg`}
             width="60"
           />
         </li>
+      </ul>
+      <ul className="sc-languages-list">
         <li>
           <img
             alt="Objective-C"
@@ -266,7 +291,7 @@ function Languages() {
           <img
             alt="T-SQL"
             height="60"
-            src={`${getBaseUrl()}/images/languages/black/t-sql.svg`}
+            src={`${getBaseUrl()}/images/languages/black/tsql.svg`}
             width="60"
           />
         </li>
@@ -274,7 +299,7 @@ function Languages() {
           <img
             alt="PL/SQL"
             height="60"
-            src={`${getBaseUrl()}/images/languages/black/pl-sql.svg`}
+            src={`${getBaseUrl()}/images/languages/black/plsql.svg`}
             width="60"
           />
         </li>
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/SonarLintIntegration.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/SonarLintIntegration.tsx
index d3c6eba303a..98510d622fa 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/SonarLintIntegration.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/SonarLintIntegration.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import Helmet from 'react-helmet';
 import SQPageContainer from './components/SQPageContainer';
 import SQStartUsing from './components/SQStartUsing';
 import SQTopNav from './components/SQTopNav';
@@ -30,6 +31,12 @@ export default function SonarLintIntegration() {
     <SQPageContainer>
       {({ currentUser }) => (
         <div className="page page-limited sc-page">
+          <Helmet title="Enhance SonarCloud experience with SonarLint | SonarCloud">
+            <meta
+              content="SonarLint connected teams are efficient, consistent and get more value. Connect SonarCloud with SonarLint and share consistent rulesets and analysis settings in everyone’s IDE."
+              name="description"
+            />
+          </Helmet>
           <SQTopNav />
 
           <div className="sc-child-header">
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap
index a8130a62361..896408062be 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/__tests__/__snapshots__/Home-test.tsx.snap
@@ -638,7 +638,7 @@ exports[`should render 8`] = `
       Come join the fun, it’s entirely free for open-source projects!
     </h6>
     <div
-      className="sc-big-spacer-bottom"
+      className="sc-spacer-bottom"
     >
       <LoginButtons />
     </div>
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx
index e5715c35fe7..cc61f60f161 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/Languages.tsx
@@ -41,7 +41,7 @@ const LANGUAGES = [
   { name: 'HTML', file: 'html5.svg', width: 40 },
   { name: 'Objective-C', file: 'obj-c.svg', width: 60 },
   { name: 'PHP', file: 'php.svg', width: 57 },
-  { name: 'Scala', file: 'scala.svg', width: 30 },
+  { name: 'Scala', file: 'scala.svg', width: 29 },
   { name: 'Swift', file: 'swift.svg', width: 40 },
   { name: 'T-SQL', file: 't-sql.svg', width: 53 },
   { name: 'PL/SQL', file: 'pl-sql.svg', width: 65 },
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/NavBars.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/NavBars.css
index fbdc380092e..14105074ab5 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/components/NavBars.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/components/NavBars.css
@@ -94,6 +94,7 @@
   border: 1px solid var(--sonarcloudBlack800);
   padding: 0 10px;
   border-radius: 3px;
+  transition: all 0.2s ease;
 }
 
 .top-navbar ul li.outline a {
@@ -114,6 +115,8 @@
 .top-navbar ul li.outline a:hover,
 .navbar ul li.outline a:hover {
   border-bottom-width: 1px;
+  background: var(--sonarcloudOrange500);
+  color: #fff;
 }
 
 .top-navbar ul li.outline:hover a {
diff --git a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
index de8f54c774b..655a91f445b 100644
--- a/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
+++ b/server/sonar-web/src/main/js/apps/about/sonarcloud/new_style.css
@@ -372,6 +372,7 @@ a.sc-orange-button {
   height: 44px;
   line-height: 44px;
   box-shadow: none;
+  border-bottom: none !important;
 }
 
 a.sc-orange-button:hover {