[pricing] add self-hosted plans.

Author: nisarhassan12

src/components/PricingBox.tsx

@@ -275,7 +275,7 @@ const PricingBox: React.SFC<PricingBoxProps> = ({
             btnBackground={btnBackground}
         >
             <h4>{title}</h4>
-            {img}
+            {img ? img : null}
             {price ? <div className="price">{price}</div> : null}
             {duration ? <div className="duration">{duration}</div> : null}
             {feature ? <div className="feature">{feature}</div> : null}

src/components/self-hosted/SelfHostedPlan.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import styled from '@emotion/styled'
+import IconTick from '../../resources/icon-tick.svg'
+import { colors, borders } from '../../styles/variables'
+
+const StyledSelfHostedPlan = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 3rem 4rem;
+    background: ${colors.white};
+    border: ${borders.light};
+    margin-bottom: 3rem;
+
+    div:first-of-type {
+        margin-bottom: 4rem;
+    }
+
+    h3 {
+        margin-bottom: 1rem;
+
+        span {
+            font-weight: 400;
+            font-size: 80%;
+        }
+    }
+
+    h4 {
+        margin-bottom: 3rem;
+    }
+    
+    ul {
+        list-style-image: url(${IconTick});
+        list-style-position: inside;
+        text-align: left;
+        font-size: 85%;
+    }
+`
+
+export interface SelfHostedPlanProps {
+    title: string | JSX.Element
+    subtitle: string
+    features: string[]
+    btnText: string
+    href: string
+}
+
+const SelfHostedPlan = ({ title, subtitle, features, btnText, href }: SelfHostedPlanProps) => (
+    <StyledSelfHostedPlan>
+        <div>
+            <h3>{title}</h3>
+            <h4>{subtitle}</h4>
+            <ul>
+                {
+                    features.map((feature, i) => <li key={i}>{feature}</li>)
+                }
+            </ul>
+        </div>
+        <div>
+            <a href={href} className="btn">{btnText}</a>
+        </div>
+    </StyledSelfHostedPlan>
+)
+
+export default SelfHostedPlan

src/components/self-hosted/SelfHostedPlans.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+
+import styled from '@emotion/styled'
+import { Link } from 'gatsby'
+import { colors, borders, sizes } from '../../styles/variables'
+import SelfHostedPlan, { SelfHostedPlanProps } from './SelfHostedPlan'
+import Cloud from '../../resources/cloud.svg'
+
+const StyledSelfHostedPlans = styled.section`
+    background: ${colors.white};
+
+    h3 {
+        margin-bottom: 2rem;
+    }
+
+    .plans {
+        position: relative;
+        padding: 4rem 0;
+        max-width: 800px;
+        text-align: center;
+        background: ${colors.offWhite};
+        border: ${borders.light};
+        z-index: 10000;
+
+        &__container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            max-width: 78rem;
+            margin: 0 auto;
+            padding: 4rem 8rem 2rem;
+        }
+    }
+
+    object {
+        position: absolute;
+        top: -10rem;
+        right: -35rem;
+        z-index: -1;
+
+        @media(max-width: ${sizes.breakpoints.lg}) {
+            display: none;
+        }
+    }
+`
+
+const plans: SelfHostedPlanProps[] = [
+    {
+        title: 'Free',
+        subtitle: 'For up to 5 users',
+        features: ['Unlimited Hours', 'Private & Public Repos', 'Admin dashboard'],
+        btnText: 'Contact Sales',
+        href: '' // Todo add the href value
+    },
+    {
+        title: <>$20 <span>/month</span></>,
+        subtitle: 'per user',
+        features: ['Unlimited Hours', 'Private & Public Repos', 'Admin dashboard', '30-day free trial'],
+        btnText: 'Contact Sales',
+        href: '' // Todo add the href value
+    }
+]
+
+const SelfHostedPlans = () => (
+    <StyledSelfHostedPlans>
+        <div className="row">
+            <div className="plans">
+                <h3>Self-Host Gitpod</h3>
+                <p>Host Gitpod on your own infrastructure. Learn More.</p>
+                <div className="plans__container">
+                    {
+                        plans.map((plan: SelfHostedPlanProps, i) => <SelfHostedPlan key={`${i}+${plan.title}`} {...plan} /> )
+                    }
+                </div>
+                <Link to="/docs/self-hosted/latest/self-hosted/" className="btn btn--cta">View Install Instructions</Link>
+                <object role="presentation" tabIndex={-1} data={Cloud} />
+            </div>
+        </div>
+    </StyledSelfHostedPlans>
+)
+
+export default SelfHostedPlans

src/pages/pricing.tsx

@@ -8,6 +8,7 @@ import Details from '../components/Details'
 import PricingBoxes from '../components/pricing/PricingBoxes'
 import Plans from '../components/pricing/Plans'
 import Business from '../components/pricing/Business'
+import SelfHostedPlans from '../components/self-hosted/SelfHostedPlans'
 
 
 const PricingPage: React.SFC<{}> = () => (
@@ -18,12 +19,15 @@ const PricingPage: React.SFC<{}> = () => (
     >
             <div className="grey-container">
                 <div className="row">
-
                     <PricingBoxes />
+                </div>
+
+                    <SelfHostedPlans />
 
+                <div className="row">
                     <Plans />
-
                 </div>
+
             </div>
 
             <div className="row">