wip.

Author: nisarhassan12

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

@@ -23,7 +23,8 @@ const StyledDifference = styled.section<{spacing?: 'small'}>`
   }
 
   h2 + p {
-    margin: 3rem 0 2rem;
+    max-width: 500px;
+    margin: 3rem auto 2rem;
   }
 
   .btn {
@@ -49,7 +50,7 @@ const Difference = ({title, spacing}: DifferenceProps) => {
         <h2>
             <strong>{title ? title : 'Want to See the Difference for Yourself?'}</strong>
         </h2>
-        <p>Add a Gitpod button to your repository.</p>
+        <p>Add a Gitpod button to your repository and start your dev environment with a single click.</p>
         <a
           href={
             browser === 'Firefox'

src/components/index/GetStarted.tsx

@@ -47,7 +47,7 @@ const GetStarted = () => (
             style={{padding: '8rem 0'}}
         >
             <StyledGetStarted className="row">
-                <h3 style={{textAlign: 'center', fontWeight: 400}}>Or Try an Example Project</h3>
+                <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

src/components/index/SecurityAndOSS.tsx

@@ -30,7 +30,7 @@ const Styled = styled.section`
 
 const SecurityAndOSS = () => (
   <Styled>
-    <div className="row">
+    <div className="row pattern">
       <div className="text-container">
         <TextFeature
           path={HighlySecureImg}

src/components/index/TextFeature.tsx

@@ -6,7 +6,7 @@ import { colors, borders } from '../../styles/variables'
 const StyledTextFeature = styled.div`
   max-width: 600px;
   padding: 4rem 6rem;
-  background: ${colors.offWhite};
+  background: ${colors.white};
   border: ${borders.light};
   border-radius: 3px;
   max-width: 450px;