Improve SEO for gitpod-vs-codespaces landing page.

Addresses  part of gitpod-io/website#841

Author: nisarhassan12

netlify.toml

@@ -406,3 +406,8 @@
   from = "/blog/gitlab-integration/+"
   to = "/blog/gitlab-integration/"
   status = 301
+
+[[redirects]]
+  from = "/gitpod-vs-codespaces"
+  to = "/gitpod-vs-github-codespaces/"
+  status = 301

src/components/gitpod-vs-codespaces/SpeedComparison.tsx

@@ -10,7 +10,7 @@ const StyledSpeedComparison = styled.div`
   margin: 5rem 0 7rem;
 
   @media(max-width: ${sizes.breakpoints.lg}) {
-      margin: 0rem 0 3rem;
+    margin: 0rem 0 3rem;
   }
 
   @media (max-width: 560px) {
@@ -39,15 +39,6 @@ const StyledSpeedComparison = styled.div`
     }
   }
 
-  h4 {
-    margin-bottom: 1rem;
-    margin-left: 1.5rem;
-
-    @media (max-width: ${sizes.breakpoints.sm}) {
-      text-align: left;
-    }
-  }
-
   p {
     color: ${colors.textLight};
   }
@@ -56,6 +47,17 @@ const StyledSpeedComparison = styled.div`
     position: relative;
     display: flex;
 
+    &__title {
+        margin-bottom: 1rem;
+        margin-left: 1.5rem;
+        font-weight: 600;
+        color: ${colors.textDark};
+
+        @media (max-width: ${sizes.breakpoints.sm}) {
+            text-align: left;
+        }
+    }
+
     @media (max-width: 605px) {
       flex-wrap: wrap;
     }
@@ -141,7 +143,7 @@ const SpeedComparison = () => (
         Click
       </div>
       <div className="item item--1">
-        <h4>Gitpod</h4>
+        <div className="bar__title">Gitpod</div>
         <div className="bar-container">
           <div className="bar bar--gitpod">
             <div className="bar--gitpod-1" title="Boot Environment & Load UI (< 1 min)"></div>
@@ -150,7 +152,7 @@ const SpeedComparison = () => (
         </div>
       </div>
       <div className="item item--2">
-        <h4>GitHub Codespaces</h4>
+        <div className="bar__title">GitHub Codespaces</div>
         <div className="bar-container">
           <div className="bar bar--codespaces">
             <div className="bar--codespaces-1" title="Boot Environment & Load UI (> 5 min)">Load</div>

src/contents/gitpod-vs-codespaces.tsx

@@ -44,8 +44,8 @@ export const features: FeatureCardProps[] = [
       </>
     ),
     Figure: PowerComparison,
-    figFootnote: <>Compared resources for 100 active hours at $9/month. Last verified 25 Sep 2020. Sources: <Link to="/pricing/">Gitpod Pricing</Link>, <a href=
-    "https://docs.github.com/en/free-pro-team@latest/github/developing-online-with-codespaces/about-billing-for-codespaces" target="_blank">GitHub Codespaces Pricing</a>.</>,
+    figFootnote: <>Compared resources for 100 active hours at $9/month. Last verified 25 Sep 2020. Sources: <Link to="/pricing/">Gitpod</Link>, <a href=
+    "https://docs.github.com/en/free-pro-team@latest/github/developing-online-with-codespaces/about-billing-for-codespaces" target="_blank">GitHub Codespaces</a>.</>,
   },
   {
     id: 'open-source',

src/pages/gitpod-vs-codespaces.tsx renamed to src/pages/gitpod-vs-github-codespaces.tsx

@@ -39,7 +39,7 @@ const QuestionMark = () => <img style={{ height: '2.1rem' }} src={questionMarkIm
 
 const Cross = () => <img style={{ height: '2.1rem' }} src={crossImg} alt="Cross" />
 
-const StyledGitpodVsCodespacesPage = styled.div`
+const StyledGitpodVsGitHubCodespacesPage = styled.div`
   .main {
     padding: 0;
   }
@@ -69,9 +69,9 @@ const StyledGitpodVsCodespacesPage = styled.div`
   }
 `
 
-const GitpodVsCodespacesPage = () => (
-  <IndexLayout title="Gitpod vs GitHub Codespaces" description="Gitpod is the faster, more powerful open-source platform that integrates with your individual stack.">
-    <StyledGitpodVsCodespacesPage>
+const GitpodVsGitHubCodespacesPage = () => (
+  <IndexLayout title="Gitpod vs GitHub Codespaces" description="Gitpod is the faster, more powerful open-source platform that integrates with your individual stack." canonical="gitpod-vs-github-codespaces">
+    <StyledGitpodVsGitHubCodespacesPage>
       <section className="main">
         <div className="row">
           <div className="intro pattern">
@@ -378,8 +378,8 @@ const GitpodVsCodespacesPage = () => (
           }
         ]}
       />
-    </StyledGitpodVsCodespacesPage>
+    </StyledGitpodVsGitHubCodespacesPage>
   </IndexLayout>
 )
 
-export default GitpodVsCodespacesPage
+export default GitpodVsGitHubCodespacesPage