[self-hosted] updates

Author: svenefftinge

src/blog/visual-studio-online-vs-gitpod.md

@@ -36,7 +36,7 @@ Gitpod, on the other hand, builds your branches similar to a CI build *before* y
 
 # Self Hosting
 
-Gitpod can be installed on any Kubernetes cluster and deeply integrates with your existing tool chain. Whether you use GitHub, GitLab or BitBucket a deep integration is possible, providing a frictionless dev experience. We also support custom OAuth and styling/re-branding so you could even use our technology in the context of your branded service or product.
+Gitpod can be installed on any Kubernetes cluster and deeply integrates with your existing tool chain. Whether you use GitHub, GitLab or Bitbucket a deep integration is possible, providing a frictionless dev experience. We also support custom OAuth and styling/re-branding so you could even use our technology in the context of your branded service or product.
 
 On VSO there is something called ‘self-hosted’ but that doesn’t mean you can self host VSO itself. Instead, you can only point it to hardware running elsewhere and start dev environments there. You are still stuck in Microsoft / Azure land.
 

src/components/Footer.tsx

@@ -95,7 +95,7 @@ const Footer: React.SFC<{}> = () => (
                     <li><Link to="/features/">Features</Link></li>
                     <li><Link to="/pricing/">Pricing</Link></li>
                     <li><Link to="/blog/">Blog</Link></li>
-                    <li><Link to="/enterprise/">Enterprise</Link></li>
+                    <li><Link to="/self-hosted/">Self-Hosted</Link></li>
                     <li><a href="https://gitpod.io/login/" style={{color: colors.link, fontWeight: 600}}>Log In</a></li>
                 </ul>
                 <ul>

src/components/Nav.tsx

@@ -268,27 +268,8 @@ class Nav extends React.Component {
 
                             <ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
                                 <li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
+                                <li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Self-Hosted</Link></li>
                                 <li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
-                                <li className="nav__item"><Link activeClassName="active" to='/enterprise/' className="link">Enterprise</Link></li>
-                                <li className="nav__item">
-                                    <DropDown
-                                        title="Solutions"
-                                        links={[
-                                            {
-                                                text: 'Education',
-                                                to: '/education/'
-                                            },
-                                            {
-                                                text: 'Recruiting',
-                                                to: '/recruiting/'
-                                            },
-                                            {
-                                                text: 'Vendor',
-                                                to: '/vendor/'
-                                            }
-                                        ]}
-                                    />
-                                </li>
                                 <li className="nav__item">
                                     <DropDown
                                         title="Resources"

src/components/PricingBox.tsx

@@ -16,7 +16,7 @@ interface StyledPricingBoxProps {
 
 const StyledPricingBox = styled.div<StyledPricingBoxProps>`
     position: relative;
-    margin-bottom: 3rem;
+    margin: 2rem 1rem;
     padding: 3rem 2.8rem;
     font-size: 95%;
     min-height: 48rem;
@@ -28,7 +28,7 @@ const StyledPricingBox = styled.div<StyledPricingBoxProps>`
     background: ${({ background }) => background ? 'url("https://www.gitpod.io/galaxy.jpg")' : colors.white};
     background-size: ${({ background }) => background ? 'cover' : null};
     background-position: ${({ background }) => background ? 'left' : null};
-    box-shadow: ${shadows.light};
+    border: 1px solid ${colors.offWhite2};
     background-color: ${({ backgroundColor }) => backgroundColor ? backgroundColor : null};
 
     @media(min-width: ${sizes.breakpoints.md}) {

src/components/pricing/Business.tsx

@@ -35,9 +35,9 @@ const Styled = styled.div`
 const Business = () => (
     <Styled>
         <section className="business">
-            <h2>Gitpod Enterprise</h2>
+            <h2>Gitpod Self-Hosted</h2>
             <p>Unleash Developer Productivity. Use Gitpod as your dev environment and enjoy automated setups, better collaboration, higher code quality and a greater workflow.</p>
-            <Link to="/enterprise/" className="btn">Enterprise Solutions</Link>
+            <Link to="/self-hosted/" className="btn">Enterprise Solutions</Link>
         </section>
     </Styled>
 )

src/components/pricing/PricingBoxes.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import styled from '@emotion/styled'
-import { sizes } from '../../styles/variables'
+import { sizes, colors } from '../../styles/variables'
 import LightBulb from '../../resources/light-bulb.svg'
 import Rocket from '../../resources/rocket.png'
 import MagicCap from '../../resources/magic-cap.svg'
@@ -10,6 +10,7 @@ import { PricingBoxProps } from '../PricingBox'
 import PopOver from '../PopOver'
 import PricingBox from '../PricingBox'
 import { isEurope } from '../../utils/helpers'
+import Cloud from '../../resources/cloud.svg'
 
 const Styled = styled.div`
 
@@ -22,14 +23,15 @@ const Styled = styled.div`
 
         &__boxes {
             display: flex;
-            justify-content: space-between;
+            justify-content: center;
 
             @media(max-width: ${sizes.breakpoints.lg}) {
                 flex-wrap: wrap;
             }
 
             @media(max-width: 1096px) {
-                justify-content: space-evenly;
+                flex-wrap: wrap;
+                justify-content: center;
             }
 
             @media(max-width: 650px) {
@@ -41,9 +43,31 @@ const Styled = styled.div`
     }
 `
 
+const selfHostedPlans: PricingBoxProps[] = [
+    {
+        title: 'Small Teams',
+        duration: 'For up to 5 users',
+        img: <object role="presentation" tabIndex={-1} data={Cloud} />,
+        features: ['Unlimited Use', 'Private & Public Repos', 'Admin dashboard'],
+        price: 'Free',
+        btnText: 'Install Now',
+        btnBackground: true,
+        link: '/self-hosted/#install'
+    },
+    {
+        title: 'Professional Teams',
+        img: <img alt='Rocket' src={Rocket} />,
+        features: ['Unlimited Use', 'Private & Public Repos', 'Admin dashboard', '30-day free trial'],
+        price: '20$',
+        duration: 'Per user & month',
+        btnText: 'Contact Sales',
+        link: '/contact/'
+    }
+];
+
 const plans: PricingBoxProps[] = [
     {
-        title: 'Open-Source',
+        title: 'Free',
         img: <object role="presentation" tabIndex={-1} data={IconOpenSource} />,
         price: 'Free',
         duration: '50 hours / month',
@@ -64,12 +88,10 @@ const plans: PricingBoxProps[] = [
         price: <>{isEurope() ? '€23' : '$25'}<span> / month</span></>,
         duration: 'Unlimited hours',
         features: ['Private & Public Repos', <span className="span">8 Parallel Workspaces <PopOver description="The number of workspaces running at the same time." /></span>, <span className="span">30min Timeout <PopOver description="Workspaces without user activity are stopped after 30 minutes." /></span>],
-        transform: 'scale(1.05)',
-        banner: 'Recommended',
         btnText: 'Buy Now',
         btnBackground: true,
         link: 'https://gitpod.io/subscription/',
-        subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Charge your Company <PopOver textPosition="bottom" description="TDB" /></a> 
+        subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Create Team</a> 
     },
     {
         title: 'Unlimited',
@@ -79,27 +101,82 @@ const plans: PricingBoxProps[] = [
         features: ['Private & Public Repos', <span className="span">16 Parallel Workspaces <PopOver description="The number of workspaces running at the same time." /></span>, <span className="span">1h Timeout <PopOver description="Workspaces without user activity are stopped after 1 hour." /></span>, <span className="span">3h Timeout Boost <PopOver description="You can manually boost the timeout to 3 hours within a running workspace." /></span>],
         btnText: 'Buy Now',
         link: 'https://gitpod.io/subscription/',
-        subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Charge your Company <PopOver textPosition="bottom" description="TDB" /></a> 
+        subAction: <a href="https://gitpod.io/teams/" target="_blank" className="sub-action">Create Team</a> 
     }
 ]
 
+const PricingContainer = styled.div`
+    background-color: ${colors.white};
+    padding: 3rem;
+    margin: 0 -500px;
+    justify-content: flex-start;
+    border: 1px solid ${colors.offWhite2};
+`;
 
+const Tab = styled.div`
+    padding: 1rem 2rem;
+    font-size: 18px;
+    color: ${colors.textLight};
+    min-width: 15rem;
+    text-align: center;
+    background-color: ${colors.white};
+    border: 1px solid ${colors.offWhite2};
+    border-bottom: none;
+    margin-bottom: -1px;
+    cursor: pointer;
+`;
 
-const PricingBoxes = () => (
-    <Styled>
+function isSelfHosted() {
+    return typeof window !== `undefined` && window.location.hash === '#self-hosted';
+}
+
+const PricingBoxes = () => {
+    // Declare a new state variable, which we'll call "count"
+    const [selfHosted, setSelfHosted] = useState(isSelfHosted());
+    return <Styled>
         <section className="pricing">
-            <h3 className="sub">Pricing</h3>
-            <h1>Choose Your Plan</h1>
-            <div className="pricing__boxes">
-                {plans.map(
-                    (plan, i) => <PricingBox
+            <h1 className="sub">Plans &amp; Pricing</h1>
+            <div style={{
+                display: 'flex',
+                justifyContent: 'center'
+            }}>
+                <Tab style={{
+                    backgroundColor: selfHosted ? colors.offWhite2 : colors.white,
+                    borderRight: 'none'
+                }}
+                    onClick={()=>setSelfHosted(false)}
+                >Cloud</Tab>
+                <Tab style={{
+                    backgroundColor: selfHosted ? colors.white : colors.offWhite2,
+                    borderLeft: 'none'
+                }}
+                    onClick={()=> setSelfHosted(true)}
+                >Self-Hosted</Tab>
+            </div>
+            <PricingContainer>
+                <div className="pricing__boxes" style={{
+                    display: selfHosted ? 'none' : 'flex'
+                }}>
+                    {plans.map(
+                        (plan, i) => <PricingBox
                         key={i}
                         {...plan}
-                    />
-                )}
-            </div>
+                        />
+                        )}
+                </div>
+                <div className="pricing__boxes" style={{
+                    display: selfHosted ? 'flex' : 'none'
+                }}>
+                    {selfHostedPlans.map(
+                        (plan, i) => <PricingBox
+                        key={i}
+                        {...plan}
+                        />
+                        )}
+                </div>
+            </PricingContainer>
         </section>
-    </Styled>
-)
+    </Styled>;
+}
 
 export default PricingBoxes

src/components/self-hosted/Feature.tsx

@@ -9,7 +9,8 @@ const StyledFeature = styled.div`
     flex: 0 0 45%;
     max-width: 60rem;
     margin: 0 auto;
-    margin-bottom: 10rem;
+    margin-bottom: 5rem;
+    margin-top: 5rem;
 
     @media(max-width: 520px) {
         flex-direction: column;

src/components/self-hosted/Install.tsx

@@ -15,19 +15,19 @@ interface InstallProps {
 }
 
 const installs: InstallProps[] = [
-    {
-        title: "Vanilla Kubernetes",
-        img: Kubernetes,
-        alt: "Kubernetes",
-        text: "All you need is a domain and a Kubernetes cluster.",
-        linkPath: 'install-on-kubernetes' 
-    },
     {
         title: "Google Cloud Platform",
         img: GoogleCloudLogo,
         alt: "Google Cloud",
         text: " Install Gitpod optimised for Google Cloud Platform.",
         linkPath: 'install-on-gcp-script' 
+    },
+    {
+        title: "Vanilla Kubernetes",
+        img: Kubernetes,
+        alt: "Kubernetes",
+        text: "All you need is a domain and a Kubernetes cluster.",
+        linkPath: 'install-on-kubernetes' 
     }
 ]
 
@@ -99,7 +99,7 @@ const Install = () => (
                     ))
                 }
             </div>
-            <p>Enhanced support for Amazon Elastic Kuberenetes Service(EKS), Azure Kubernetes Service(AKS), and Openshift is coming soon.</p>
+            <p>Enhanced support for AWS, Azure, and Openshift is coming soon.</p>
         </div>
     </StyledSection>
 )

src/pages/contact.tsx

@@ -116,10 +116,9 @@ function encode(data: { [k: string]: string | number | boolean | null | undefine
 }
 
 const subjects: string[] = [
-    "Student Unlimited: Get Verified as a Student",
+    "I have a question regarding Gitpod Self-Hosted",
     "I have a question regarding Gitpod Education",
-    "I have a question regarding Gitpod Enterprise",
-    "I have a question regarding Self-Hosted Gitpod",
+    "Student Unlimited: Get Verified as a Student",
     "Applying for Professional Open Source",
     "Other"
 ]

src/pages/pricing.tsx

@@ -8,7 +8,6 @@ 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<{}> = () => (
@@ -21,8 +20,6 @@ const PricingPage: React.SFC<{}> = () => (
                 <div className="row">
                     <PricingBoxes />
                 </div>
-
-                    <SelfHostedPlans />
 
                 <div className="row">
                     <Plans />