fix headlines order for better accessibility and seo.

src/blog/gitlab-integration.md

@@ -11,7 +11,7 @@ At Gitpod we want to make developers’ lives easier. Starting automated dev env
 Recently we asked ourselves how we could streamline the integration with your daily routine even more. Today, we are super excited to share that we’ve partnered with GitLab and built a [native Gitpod integration in GitLab’s UI](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/37985).
 
 
-# The last missing piece in your GitLab DevOps pipeline
+<h2 class="h1">The last missing piece in your GitLab DevOps pipeline</h2>
 
 GitLab is one of the most popular DevOps tools/platforms out there, used by more than 100,000 organizations across the globe. Through its Web IDE, simple edits can already be made today from within the application. However, for more advanced programming tasks, developers require a full development environment.
 
@@ -26,7 +26,7 @@ GitLab and Gitpod started a partnership to bring Gitpod's ready-to-code dev envi
 ![Gitpod button on GitLab project page](/gitlab-integration/gitpod-button-on-gitlab.png)
 
 
-# “Everyone can contribute”
+<h2 class="h1">“Everyone can contribute”</h2>
 
 GitLab’s credo “Everyone can contribute” is a perfect fit for Gitpod because contributing becomes much simpler when you allow anyone to spin up a ready-to-code development environment in a few seconds.
 
@@ -37,21 +37,21 @@ We are currently helping the GitLab team [to build a fully-automated Gitpod conf
 [![GitLab integration quote](/gitlab-integration/gitlab-integration-quote.png)](https://gitlab.com/gitlab-org/gitlab-development-kit/-/issues/1076#note_419638250)
 
 
-# Hook up your GitLab Self-Managed with Gitpod.io
+<h2 class="h1">Hook up your GitLab Self-Managed with Gitpod.io</h2>
 
 The Gitpod integration is already live on gitlab.com today and is going to be part of [GitLab&nbsp;13.5](https://gitlab.com/gitlab-com/www-gitlab-com/-/merge_requests/61933) which is released on October 22nd. At that point, you’ll be able to connect your GitLab self-managed installation to gitpod.io, through a new feature that lets you register additional Git providers.
 
 Furthermore, you can [self-host Gitpod](https://www.gitpod.io/self-hosted/) (which is [open source](https://github.com/gitpod-io/gitpod)) on your own Kubernetes cluster and configure it with your GitLab instance. We have convenient installation scripts for GCP and AWS.
 
 
-# What’s next?
+<h2 class="h1">What’s next?</h2>
 
 We are continuously working on improving the GitLab integration and implementing new features for GitLab users (e.g. managing merge requests within Gitpod, [adding a Gitpod button on Merge Requests](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/43352), etc.). You can also install the [GitLab VS Code Extension](https://open-vsx.org/extension/GitLab/gitlab-workflow) in Gitpod to interact with GitLab. Just go to the Extensions view (in the left vertical menu), search for “GitLab” and choose “Install”.
 
 ![Gitpod button on GitLab project page](/gitlab-integration/gitlab-vscode-extension.png)
 
 
-# Try the Gitpod integration now!
+<h2 class="h1">Try the Gitpod integration now!</h2>
 
 The GitLab integration is available at GitLab.com and in your [self-managed GitLab](https://gitlab.com/help/integration/gitpod.md) soon. Don’t have a project at hand? Try the demo project [Spring PetClinic](https://gitlab.com/gitpod/spring-petclinic) which has a proper Gitpod configuration committed.
 

src/blog/moving-software-development-to-the-cloud.md

@@ -13,21 +13,21 @@ Since [we've started building Gitpod in July-2017](/blog/gitpod-online-ide/), we
 
 We certainly welcome the additional push Codespaces will bring, but it is important to communicate how [Gitpod compares to Codespaces](/gitpod-vs-github-codespaces/).
 
-### Gitpod is Open-Source, Multi-Cloud, and Works With GitLab, GitHub, and Bitbucket
+<h2 class="h3">Gitpod is Open-Source, Multi-Cloud, and Works With GitLab, GitHub, and Bitbucket</h2>
 
 Gitpod is an **open-source platform** which means you get full transparency over how Gitpod works and can even contribute to it. The [vibrant open-source community](https://community.gitpod.io/) of Gitpod welcomes everyone, and empowers them to develop additional features without restrictions.
 
 Furthermore, you can run Gitpod on your own infrastructure and any cloud provider. **Gitpod seamlessly works with GitHub, GitLab and Bitbucket** and can be deployed to public, private or hybrid clouds, neatly integrating into your infrastructure, **giving you full control of your system and your source code**.
 
-### Gitpod is Powerful
+<h2 class="h3">Gitpod is Powerful</h2>
 
 As a highly-optimized Kubernetes application **Gitpod is built on next-gen container technology** instead of VMs. This allows Gitpod to be extremely resource efficient giving you the best 💥 for the 💵
 
 Compared to virtual machines, isolating workspace containers from each other is harder. At Gitpod we’ve integrated the latest container isolation mechanisms that securely allow users to benefit from the resource efficiency of containers while still having root privileges. For the user this means full access to `sudo` and `docker` 🐳 Here’s a [great technical presentation](https://youtu.be/l4I2TVAnBuw?t=174) explaining how we make this happen.
 
 The result is that Gitpod offers more powerful dev environments with a small ecological footprint. Furthermore, we run Gitpod.io on a 100% carbon-neutral cloud service ❤️🌍
 
-### Gitpod is Fast
+<h2 class="h3">Gitpod is Fast</h2>
 
 Gitpod is not only extremely fast because of the higher efficiency, but also because of what we call [prebuilds](https://www.gitpod.io/docs/prebuilds/). Let’s take a closer look.
 
@@ -43,7 +43,7 @@ The advantages of having your dev environments prebuilt can not be overstated. F
 
 We believe prebuilding dev environments the way Gitpod does it, is key towards [“dev environments as code”](https://www.gitpod.io/blog/dev-env-as-code/). Without prebuilds, developers have to manually maintain and reuse their dev environments, because of the manual labour put into them. Those stateful environments drift apart over time and teams are once again working in very different setups, wasting time and energy with the resulting problems and surprises. With Gitpod "it works (or doesn't work) on my machine is a thing of the past.
 
-### The Road Ahead
+<h2 class="h3">The Road Ahead</h2>
 
 The real competition is the habit of maintaining stateful environments on overpowered local machines. We welcome GitHub and Microsoft to join forces in convincing developers around the world about the workflow and productivity benefits of automated, cloud-based dev environments 🥰
 

src/blog/opensource.md

@@ -11,7 +11,7 @@ As of today Gitpod is open source under the AGPL license at [github.com/gitpod-i
 
 For those of you who know us, this probably does not come as a big surprise. Working in open source is in our DNA and everything we’ve created over the past 10 years, including [Theia](https://github.com/eclipse-theia/theia), [Xtext](https://github.com/eclipse/xtext), [Open VSX](https://github.com/eclipse/openvsx) and many other projects have been open source. In fact, Gitpod was our only closed-source project and it is a relief to change that going forward.
 
-# Open-Source Contributions
+<h2 class="h1">Open-Source Contributions</h2>
 
 Contributing to Gitpod should be easy and accessible for everyone. All contributions are welcome, including pull requests, issues, documentation as well as updates and tweaks, blog posts, tutoials, and more. Please head over to [Github](https://github.com/gitpod-io/gitpod) to find out about the various ways you can contribute and join our [Gitpod Community](https://community.gitpod.io/).
 
@@ -59,7 +59,7 @@ Sven will run a webinar next week on Thursday, where we will showcase how we use
     </a>
 </div>
 
-# Gitpod Self-Hosted is Now Free
+<h2 class="h1">Gitpod Self-Hosted is Now Free</h2>
 
 The [SaaS offering of gitpod.io](https://www.gitpod.io/pricing/#) remains the easiest way to streamline your development workflows with continuously prebuilt dev environments.
 

src/components/Banner.tsx

@@ -76,8 +76,10 @@ const Banner: React.SFC<BannerProps> = ({ subtitle, title, paragraph, linkPath,
   <div className="row pattern">
     <StyledBanner role="banner" className="banner">
       <div className="banner__text">
-        <h3 className="sub">{subtitle}</h3>
-        {title}
+        <header>
+            <p className="sub h3">{subtitle}</p>
+            {title}
+        </header>
         {paragraph ? <p className="para">{paragraph}</p> : null}
         {link(linkPath, linkText, '', true, false)}
         {children}

src/components/FeatureItem.tsx

@@ -24,6 +24,12 @@ const StyledFeatureItem = styled.div`
             padding-left: 3rem;
         }
     }
+    
+    .h3 {
+        & + p {
+            margin: 0;
+        } 
+    }
 
     p {
         max-width: 320px;
@@ -55,7 +61,7 @@ const FeatureItem = ({ title, text, img, alt }: FeatureItemProps) => (
     <StyledFeatureItem>
         <img src={img} alt={alt ? alt : title}/>
         <div>
-            <h3>{title}</h3>
+            <h2 className="h3">{title}</h2>
             <p>{text}</p>
         </div>
     </StyledFeatureItem>

src/components/InfoCard.tsx

@@ -16,6 +16,10 @@ const StyledInfoCard = styled.section`
         padding-top: 0;
     }
 
+    .h3 + p {
+        margin: 0;
+    }
+
     .info {
         @media(min-width: 831px) {
             flex: 0 0 44%;
@@ -61,13 +65,13 @@ const InfoCard: React.SFC<{}> = () => (
     <StyledInfoCard>
         <section className="info-container">
             <div className="info">
-                <h3>Getting Started with Gitpod</h3>
+                <h2 className="h3">Getting Started with Gitpod</h2>
                 <p>You can simply start coding in Gitpod by prefixing any GitHub URL with <code>gitpod.io/#</code></p>
                 <p>For a more detailed description of Gitpod and its IDE, Theia, please have a look at our documentation.</p>
                 <Link to="/docs/" className="btn">Gitpod Docs</Link>
             </div>
             <div className="info">
-                <h3>Do You Need Help?</h3>
+                <h2 className="h3">Do You Need Help?</h2>
                 <p>If you have any question, issue or feedback, please get in touch. We love to hear your feedback and help you out.</p>
                 <Link to="/contact/" title="Contact">
                     <img alt="Mail Logo" src={Mail} />

src/components/Offers.tsx

@@ -72,6 +72,7 @@ const Offers: React.SFC<OffersProps> = ({ offers, title, para }) => (
                                 text={offer.text}
                                 banner={offer.banner}
                                 bannerColor={offer.bannerColor}
+                                headingLevel='h3'
                             />
                         )
                     )

src/components/PricingBox.tsx

@@ -76,8 +76,10 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
         color: inherit;
     }
 
-    h4 {
+    .h4 {
         font-size: 1.8rem;
+        margin-bottom: 0;
+        color: ${colors.textDark};
         margin: ${({ isTitleOutside }) => (isTitleOutside ? '-7rem 0 6rem' : '')}
     }
 
@@ -262,6 +264,7 @@ export interface PricingBoxProps {
   areFeaturesBold?: boolean
   boldFeaturesCount?: number
   perUserMonth?: boolean
+  headingLevel?: 'h2' | 'h3'
 }
 
 const PricingBox: React.SFC<PricingBoxProps> = ({
@@ -286,7 +289,8 @@ const PricingBox: React.SFC<PricingBoxProps> = ({
   info,
   areFeaturesBold,
   boldFeaturesCount = 0,
-  perUserMonth
+  perUserMonth,
+  headingLevel
 }) => (
   <StyledPricingBox
     transform={transform}
@@ -297,7 +301,9 @@ const PricingBox: React.SFC<PricingBoxProps> = ({
     btnBackground={btnBackground}
     isTitleOutside={isTitleOutside}
   >
-    <h4>{title}</h4>
+    {
+        headingLevel === 'h3' ? <h3 className="h4">{title}</h3> : headingLevel === 'h2' ? <h2 className="h4">{title}</h2> : <h4>{title}</h4>
+    }
     {img ? img : null}
     {price ? <div className="price">{price}</div> : null}
     { perUserMonth ? <div className="duration" style={{fontWeight: 400}}>per user/month</div> : null }

src/components/Quote.tsx

@@ -12,7 +12,7 @@ const StyledQuote = styled.section`
         padding: 8rem 0;
     }
 
-    h4 {
+    .h4 {
         position: relative;
         display: flex;
         justify-content: center;
@@ -74,11 +74,11 @@ interface QuoteProps {
 
 const Quote: React.SFC<QuoteProps> = ({title}) => (
         <StyledQuote className="quote row">
-            <h4 className="quote__text">
+            <h2 className="quote__text h4">
                 <object aria-label="Left Quotation Mark" tabIndex={-1} data={QuoteIcon}/>
                 <span><i>&ldquo;</i> {title}<i>&rdquo;</i></span>
                 <object aria-label="Right Quotation Mark" tabIndex={-1} data={QuoteIcon}/>
-            </h4>
+            </h2>
         </StyledQuote>
 )
 

src/components/TextBox.tsx

@@ -27,6 +27,10 @@ const StyledTextBox = styled.div`
         margin-top: 4rem;
     }
 
+    h4 {
+        margin: 3rem 0 1rem;
+    }
+
     li + li {
         margin-top: 2rem;
     }

src/components/TrustedBy.tsx

@@ -111,9 +111,9 @@ interface TrustedByProps {
 const TrustedBy = ({ brands, title, styles }: TrustedByProps) => (
   <StyledTrustedBy style={{...styles}}>
     <div className="row">
-      <h3>
+      <h2 className="h3">
         {title}
-      </h3>
+      </h2>
       <div className="logos">
         {brands.map((b: Brand) => (
           <a href={b.url} target="_blank" className="trustedBy">

src/components/blog/PostBanner.tsx

@@ -28,7 +28,7 @@ const StyledPostBanner = styled.header`
         margin-top: 2rem;
     }
 
-    h3 {
+    .h3 {
         margin: 0;
         color: ${colors.text};
         font-weight: 200;
@@ -79,8 +79,10 @@ const PostBanner: React.SFC<PostBannerProps> = ({ title, subtitle, teaserImage,
     <StyledPostBanner>
         <div className="bg" aria-hidden="true" style={{backgroundImage: `url(${teaserImage})`}} />
         <div className="contents">
-            {subtitle ? <h3>{subtitle}</h3> : null }
-            <h1>{title}</h1>
+            <header>
+                {subtitle ? <p className="h3" style={{fontWeight: 400}}>{subtitle}</p> : null }
+                <h1>{title}</h1>
+            </header>
             <div className="info">
                 <div className="author">{author} {date}</div>
                 <div className="share">{shareButtons}</div>

src/components/blog/PostPreview.tsx

@@ -26,6 +26,10 @@ const StyledPostPreview = styled.div`
         border-top-right-radius: 3px;
     }
 
+    .h3 + p {
+        margin: 0;
+    }
+
     p {
         color: ${colors.text};
         font-weight: 400;
@@ -85,7 +89,7 @@ const PostPreview: React.SFC<PostPreviewProps> = (props) => {
                     className="background"
                 />
                 <div className="content">
-                    <h3>{b.frontmatter.title}</h3>
+                    <h2 className="h3">{b.frontmatter.title}</h2>
                     <p>{b.excerpt}</p>
                 </div>
                 <div className="info">

src/components/blog/SharePost.tsx

@@ -39,7 +39,7 @@ interface SharePostProps {
 
 const SharePost = ({ title, authors, url, dontRenderHeading }: SharePostProps) => (
   <StyledSharePost>
-    {dontRenderHeading ? null : <h4>Share Blog Post</h4>}
+    {dontRenderHeading ? null : <h2 className="h4">Share Blog Post</h2>}
     <div>
       <a
         href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(

src/components/docs/ReachOut.tsx

@@ -12,9 +12,8 @@ const StyledReachOut = styled.section`
     text-align: center;
     border-radius: 3px;
 
-    h3 {
-        margin-top: 0;
-        font-weight: 600;
+    h2 + p {
+        margin: 0;
     }
 
     svg {
@@ -49,7 +48,7 @@ const StyledReachOut = styled.section`
 
 const ReachOut = () => (
     <StyledReachOut>
-        <h3>Still Have Questions?</h3>
+        <h2 className="h3">Still Have Questions?</h2>
         <p>Please reach out. We’re happy to answer them.</p>
         <div>
             <a href="https://community.gitpod.io/" target="_blank" rel="noopener" title="Community">

src/components/features/FeatureBox.tsx

@@ -20,7 +20,7 @@ const StyledFeatureBox = styled.div`
     }
   }
 
-  h3 {
+  .text {
     font-weight: 400;
     font-size: 1.7rem;
     transition: all 0.2s;
@@ -64,7 +64,7 @@ const StyledFeatureBox = styled.div`
       stroke: ${colors.white};
     }
 
-    h3 {
+    .text {
       color: ${colors.white};
     }
 
@@ -85,9 +85,7 @@ const FeatureBox: React.SFC<FeatureBoxProps> = ({ img, text, path, alt }) => (
   <StyledFeatureBox>
     <a href={`#${path}`}>
       <div>{typeof img === 'string' ? <img src={img} alt={alt} /> : img}</div>
-      <div>
-        <h3>{text}</h3>
-      </div>
+      <div className="text h3">{text}</div>
     </a>
   </StyledFeatureBox>
 )

src/components/features/StarFortFree.tsx

@@ -10,7 +10,7 @@ const Styled = styled.section`
   .start {
     text-align: center;
 
-    h3 {
+    .h3 {
       font-weight: 400;
       margin: 3rem 0;
 
@@ -29,9 +29,9 @@ const StartForFree = () => (
         <Link to="/#get-started" className="btn btn--cta btn--big">
           Start for Free
         </Link>
-        <h3>
+        <h2 className="h3">
           Prefix any GitLab, GitHub or Bitbucket URL with <span>gitpod.io/#</span>
-        </h3>
+        </h2>
       </section>
     </div>
   </Styled>

src/components/pricing/PricingBoxes.tsx

@@ -270,13 +270,22 @@ const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => {
           <div className="cards row">
             <div className={`pricing__boxes ${isRendered ? 'hide' : 'show'}`}>
               {plans.map((plan, i) => (
-                <PricingBox key={i} {...plan} />
+                <PricingBox 
+                    key={i} 
+                    {...plan}
+                    headingLevel="h2"
+                />
               ))}
             </div>
             <div className={`pricing__boxes ${isRendered ? 'show' : 'hide'}`}>
               <object role="presentation" tabIndex={-1} data={Cloud} className="cloud-img cloud-img--1" />
               {selfHostedPlans.map((plan, i) => (
-                <PricingBox key={i} {...plan} isTitleOutside={true} />
+                <PricingBox 
+                    key={i} 
+                    {...plan} 
+                    isTitleOutside={true}
+                    headingLevel="h2"
+                />
               ))}
               <object role="presentation" tabIndex={-1} data={Cloud} className="cloud-img cloud-img--2" />
             </div>