[self-hosted] update the banner contents + add the features section.

Author: nisarhassan12

src/components/index/WhyGitpod.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import styled from '@emotion/styled'
-import { colors, sizes } from '../../styles/variables'
+import { colors, sizes, borders } from '../../styles/variables'
 import ToolIntegration from '../../resources/tool-integration.svg'
 import FullDevEnvironments from '../../resources/full-dev-environments.svg'
 import ReadyToCode from '../ReadyToCode'
@@ -84,7 +84,7 @@ const Styled = styled.div`
 
             @media(min-width:  881px) {
                 width: 45%;
-                border-left: 4px solid ${colors.offWhite3};
+                border-left: ${borders.bold};
             }
 
             @media(max-width: 1150px) {

src/components/self-hosted/Feature.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import styled from '@emotion/styled'
+import { borders } from '../../styles/variables'
+
+const StyledFeature = styled.div`
+    display: flex;
+    align-items: center;
+    flex: 0 0 45%;
+    max-width: 60rem;
+    margin: 0 auto;
+    margin-bottom: 10rem;
+
+    @media(max-width: 520px) {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    div {
+        @media(min-width: 520px) {
+            border-left: ${borders.bold};
+            margin-left: 3rem;
+            padding-left: 3rem;
+        }
+    }
+
+    img {
+        flex: 0 0 15%;
+        max-width: 10rem;
+        max-height: 12rem;
+
+        @media(max-width: 520px) {
+            margin-bottom: 4rem;
+        }
+    }
+`
+
+export interface FeatureProps {
+    title: string
+    text: string
+    img: string
+}
+
+const Feature = ({ title, text, img }: FeatureProps) => (
+    <StyledFeature>
+        <img src={img} alt={title}/>
+        <div>
+            <h3>{title}</h3>
+            <p>{text}</p>
+        </div>
+    </StyledFeature>
+)
+
+export default Feature

src/components/self-hosted/Features.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import styled from '@emotion/styled'
+import Feature, { FeatureProps } from './Feature'
+import { sizes } from '../../styles/variables'
+
+const StyledFeatures = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    @media(max-width: ${sizes.breakpoints.lg}) {
+        flex-direction: column;
+    }
+`
+
+const Features = ({ features }: { features: FeatureProps[] }) => (
+    <section>
+        <StyledFeatures className="row">
+            {
+                features.map(
+                    (feature: FeatureProps, i) => <Feature
+                        key={`${i}feature.title`}
+                        {...feature}
+                    />
+                )
+            }
+        </StyledFeatures>
+    </section>
+)
+
+export default Features

src/pages/self-hosted.tsx

@@ -9,6 +9,12 @@ import Kubernetes from '../resources/kubernetes.svg'
 import Details from '../components/Details'
 import Banner from '../components/Banner'
 import ActionCard from '../components/ActionCard'
+import { FeatureProps } from '../components/self-hosted/Feature'
+import Features from '../components/self-hosted/Features'
+import Control from '../resources/control.svg'
+import Support from '../resources/support.svg'
+import GithubGitlab from '../resources/github-gitlab.svg'
+import Adminstration from '../resources/administration.svg'
 
 const StyledSelfHostedPage = styled.div`
     /* ------------------------------------------- */
@@ -134,6 +140,29 @@ const StepP = styled.p`
     }
 `;
 
+const features: FeatureProps[] = [
+    {
+        title: 'Full Data Control',
+        text: 'All data remains on your infrastructure, as Gitpod will run on air-gapped networks, disconnected from the internet.',
+        img: Control
+    },
+    {
+        title: 'GitLab & GitHub Integration',
+        text: 'Highly compatibility with Git Hosting solutions like GitHub Enterprise, GitLab Community Edition or Enterprise Edition. BitBucket integration is coming soon.',
+        img: GithubGitlab
+    },
+    {
+        title: 'Professional Support',
+        text: 'Schedule a call with our dedicated engineers whenever you need help.',
+        img: Support
+    },
+    {
+        title: 'Easy Administration',
+        text: 'No need for additional User Management. Simply use OAuth from Git Hosting and enjoy its the privileges.',
+        img: Adminstration
+    }
+]
+
 const SelfHostedPage: React.SFC<{}> = () => (
     <IndexLayout canonical='/self-hosted/' title="Self-Hosted">
         <StyledSelfHostedPage>
@@ -145,16 +174,20 @@ const SelfHostedPage: React.SFC<{}> = () => (
                 <Banner
                     subtitle="Self-hosted Gitpod"
                     title={<h1>
-                            Make Gitpod Available In-House,
+                            Keep Your Data on Your Network and
                             <br />
-                            Hosted on <strong>Your Own Infrastructure.</strong>
+                            Host it on <strong>Your Own Infrastructure.</strong>
                     </h1>}
                     linkPath="/self-hosted/#install"
-                    linkText="View Install Instructions"
+                    linkText="Install Now"
                     img={<object role="presentation" tabIndex={-1} data={Cloud}/>}
-                    children={<p>1 Month for <span>Free.</span></p>}
+                    children={<span style={{fontWeight: 600}}>And Start Your 30-day Free Trial.</span>}
                 />
             </div>
+            
+            {/* ----- Section Features ----- */}
+
+            <Features features={features} />
 
             {/* ----- Section Install ----- */}
 

src/resources/administration.svg

@@ -38,5 +38,6 @@ export const shadows = {
 
 export const borders = {
     light: '1px solid rgba(0,0,0, .08)',
-    light1: '1px solid rgba(0,0,0, .2)'
+    light1: '1px solid rgba(0,0,0, .2)',
+    bold: `4px solid ${colors.offWhite3}`
 }