update get started section.

Fixes gitpod-io/website#819

Author: nisarhassan12

src/components/MoreInfo.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { CSSProperties } from 'react'
 
 import styled from '@emotion/styled'
 import { borders, sizes } from '../styles/variables'
@@ -62,9 +62,10 @@ export interface PricingLinksProps {
   text?: JSX.Element
   links?: JSX.Element
   backgroundShouldBeWhite?: boolean
+  styles?: CSSProperties 
 }
 
-const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: PricingLinksProps) => {
+const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite, styles }: PricingLinksProps) => {
   let Img = img
   let Title = title
   let Text = text
@@ -91,7 +92,7 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
   return (
     <div
       className="pattern-bg"
-      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
+      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '', ...styles }}
     >
       <div className="row">
         <StyledPricingLinks>

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

@@ -1,5 +1,7 @@
 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'
 
 const getBrowser = (userAgent: string) => {
   const browsers = ['Opera', 'Chrome', 'Firefox', 'IE']
@@ -14,36 +16,53 @@ const getBrowser = (userAgent: string) => {
   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;
+
+    span {
+        display: flex;
+        align-items: center;
+    }
+
+    img {
+        width: 4rem;
+        margin-right: 2.5rem;
+    }
   }
 `
 
-const Difference = () => {
+interface DifferenceProps {
+    title?: string
+    spacing?: 'small'
+}
+
+const Difference = ({title, spacing}: DifferenceProps) => {
   const [browser, setBrowser] = useState()
 
   useEffect(() => {
     setBrowser(getBrowser(window.navigator.userAgent))
   })
 
   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 +72,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