update get started section.

Fixes gitpod-io/website#819

Author: nisarhassan12

src/components/MoreInfo.tsx

@@ -5,6 +5,12 @@ import { borders, sizes } from '../styles/variables'
 import { Link } from 'gatsby'
 import MapGrey from '../resources/map-grey.svg'
 
+const StyledMoreInfo = styled.div<{negativeSpaceTop?: string}>`
+    @media(min-width: calc(${sizes.breakpoints.md} + 1px)) {
+        margin-top: ${({negativeSpaceTop}) => negativeSpaceTop };
+    }   
+`
+
 const StyledPricingLinks = styled.section`
   max-width: 850px;
   display: flex;
@@ -62,9 +68,10 @@ export interface PricingLinksProps {
   text?: JSX.Element
   links?: JSX.Element
   backgroundShouldBeWhite?: boolean
+  negativeSpaceTop?: string
 }
 
-const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: PricingLinksProps) => {
+const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite, negativeSpaceTop }: PricingLinksProps) => {
   let Img = img
   let Title = title
   let Text = text
@@ -89,9 +96,10 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
     )
   }
   return (
-    <div
+    <StyledMoreInfo
       className="pattern-bg"
-      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
+      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : ''}}
+      negativeSpaceTop={negativeSpaceTop}
     >
       <div className="row">
         <StyledPricingLinks>
@@ -103,7 +111,7 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
           </div>
         </StyledPricingLinks>
       </div>
-    </div>
+    </StyledMoreInfo>
   )
 }
 

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

@@ -1,49 +1,65 @@
 import React, { useEffect, useState } from 'react'
 import styled from '@emotion/styled'
+import Chrome from '../../resources/chrome-logo.svg'
+import Firefox from '../../resources/firefox-logo.svg'
+import { getBrowser } from '../../utils/helpers'
 
-const getBrowser = (userAgent: string) => {
-  const browsers = ['Opera', 'Chrome', 'Firefox', 'IE']
-  let browser
-
-  browsers.forEach((b) => {
-    if (userAgent.indexOf(b) !== -1) {
-      browser = b
-    }
-  })
-
-  return browser
-}
-
-const StyledDifference = styled.section`
+const StyledDifference = styled.section<{spacing?: 'small'}>`
+  padding: ${({spacing}) => spacing === 'small' ? '6rem 0' : ''};
   text-align: center;
 
   p {
     font-size: 110%;
   }
 
   h2 + p {
-    margin: 3rem 0 2rem;
+    max-width: 700px;
+    margin: 3rem auto 2rem;
   }
 
   .btn {
     margin-bottom: 5rem;
+    padding-left: 1.5rem;
+
+    span {
+        display: flex;
+        align-items: center;
+    }
+
+    img {
+        width: 4rem;
+        margin-right: 2.5rem;
+    }
   }
 `
 
-const Difference = () => {
-  const [browser, setBrowser] = useState()
+interface DifferenceProps {
+    title?: string
+    spacing?: 'small'
+}
+
+const Difference = ({title, spacing}: DifferenceProps) => {
+  const [browser, setBrowser] = useState<any>()
+
+  const getBrowserString = (browser: any) => {
+    if ( browser === 'Firefox') {
+        return 'Firefox'
+    }
+    return 'Chrome'
+  }
 
   useEffect(() => {
-    setBrowser(getBrowser(window.navigator.userAgent))
+    let usersBrowser = getBrowser(window.navigator.userAgent)
+    setBrowser(getBrowserString(usersBrowser))
   })
 
   return (
-    <StyledDifference className="pattern-bg">
+    <StyledDifference className="pattern-bg" spacing={spacing}>
       <div className="row">
         <h2>
-          <strong>Want to See the Difference for Yourself?</strong>
+            <strong>{title ? title : 'Want to See the Difference for Yourself?'}</strong>
         </h2>
-        <p>Add a Gitpod button to your repository.</p>
+        <p>Install the browser extension which adds a Gitpod button to your GitLab, GitHub and Bitbucket projects to easily spin up a dev environment with a single click.</p>
         <a
           href={
             browser === 'Firefox'
@@ -53,7 +69,13 @@ const Difference = () => {
           target="_blank"
           className="btn btn--big btn--cta"
         >
-          Install Browser Extension
+         <span>
+              <img 
+            src={browser === 'Firefox' ? Firefox : Chrome } 
+            alt={browser}  
+          /> 
+          Add to {browser}
+         </span>
         </a>
         <p>
           Or prefix any GitLab, GitHub or Bitbucket URL with <strong>gitpod.io/#</strong>

src/components/index/GetStarted.tsx

@@ -4,33 +4,14 @@ import styled from '@emotion/styled'
 import { sizes } from '../../styles/variables'
 import { projects } from '../../contents/projects'
 import Project from './Project'
-import PrefixInput from './PrefixInput'
+import Difference from '../gitpod-vs-codespaces/Difference'
 
 const StyledGetStarted = styled.div`
   /* ------------------------------------------- */
   /* ----- Section Get Started ----- */
   /* ------------------------------------------- */
 
   .get-started {
-    padding-top: 0;
-    text-align: center;
-
-    h3 {
-      font-weight: 400;
-    }
-
-    &__prefix {
-      display: flex;
-      margin-bottom: 12rem;
-      text-align: left;
-    }
-
-    h2 + p {
-      font-size: 2rem;
-    }
-
-    /* ----- Projects ----- */
-
     &__projects {
       display: flex;
       justify-content: space-between;
@@ -55,35 +36,33 @@ const StyledGetStarted = styled.div`
 `
 
 const GetStarted = () => (
-  <StyledGetStarted className="row pattern">
-    <section className="get-started" id="get-started">
-      <h2>
-        <strong>Get Started</strong>
-      </h2>
-      <p>
-        Prefix any GitLab, GitHub, or Bitbucket URL with <strong>gitpod.io/#</strong>
-      </p>
-
-      <div className="get-started__prefix">
-        <PrefixInput />
-      </div>
-
-      <h3>Or Try an Example Project</h3>
-
-      <div className="get-started__projects">
-        {projects.map((project, i) => (
-          <Project
-            key={i}
-            image={<object role="presentation" tabIndex={-1} data={project.image} />}
-            title={project.title}
-            githubUrl={project.githubUrl}
-            gitlabUrl={project.gitlabUrl}
-            bitbucketUrl={project.bitbucketUrl}
-          />
-        ))}
-      </div>
+    <section style={{padding: '0'}}>
+        <Difference 
+            spacing="small"
+            title="Get Started"
+        />
+        <section 
+            className="get-started" 
+            id="get-started" 
+            style={{padding: '8rem 0'}}
+        >
+            <StyledGetStarted className="row">
+                <h3 style={{textAlign: 'center', fontWeight: 400}}>Don’t want to open your own repo? Choose an example.</h3>
+                <div className="get-started__projects">
+                    {projects.map((project, i) => (
+                        <Project
+                            key={i}
+                            image={<object role="presentation" tabIndex={-1} data={project.image} />}
+                            title={project.title}
+                            githubUrl={project.githubUrl}
+                            gitlabUrl={project.gitlabUrl}
+                            bitbucketUrl={project.bitbucketUrl}
+                        />
+                    ))}
+                </div>
+            </StyledGetStarted>
+        </section>
     </section>
-  </StyledGetStarted>
 )
 
 export default GetStarted