Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit d1f6a71

Browse files
nisarhassan12nisarhassan12
committed
pricing updates.
1 parent 7f4519a commit d1f6a71

17 files changed

+406
-196
lines changed

‎src/components/ActionCard.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,24 @@ const StyledActionCard = styled.section`
2929
interface Anchor {
3030
text: string
3131
href: string
32-
subject?: string
32+
subject?: string
3333
}
3434

3535
interface ActionCardProps {
3636
title: string
3737
text: string | JSX.Element
3838
anchors: Anchor[]
3939
}
40-
4140

42-
const ActionCard: React.SFC<ActionCardProps> = ({title, text, anchors }) => (
41+
42+
const ActionCard: React.SFC<ActionCardProps> = ({ title, text, anchors }) => (
4343
<StyledActionCard>
4444
<h2 className="centered-underline">{title}</h2>
45-
{ typeof text === 'string' ? <p>{text}</p> : text }
46-
{link(anchors[0].href,anchors[0].text, anchors[0].subject)}
47-
{ anchors[1] ? link(anchors[1].href,anchors[1].text, anchors[1].subject) : null }
45+
{typeof text === 'string' ? <p>{text}</p> : text}
46+
<div className="btn-wrapper">
47+
{link(anchors[0].href, anchors[0].text, anchors[0].subject)}
48+
{anchors[1] ? link(anchors[1].href, anchors[1].text, anchors[1].subject) : null}
49+
</div>
4850
</StyledActionCard>
4951
)
5052

‎src/components/PricingBox.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22

33
import styled from '@emotion/styled'
4-
import { colors, shadows, sizes } from '../styles/variables'
4+
import { colors, sizes } from '../styles/variables'
55
import IconTick from '../resources/icon-tick.svg'
66

77
interface StyledPricingBoxProps {

‎src/components/pricing/Business.tsx

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/components/pricing/Plans.tsx

Lines changed: 70 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,100 @@ import React from 'react'
33
import { isEurope } from '../../utils/helpers'
44
import { Link } from 'gatsby'
55
import styled from '@emotion/styled'
6-
import { sizes } from '../../styles/variables'
6+
import { sizes, colors, borders } from '../../styles/variables'
7+
import BagGrey from '../../resources/bag-grey.svg'
8+
import ProfessionalBadge from '../../resources/open-source-badge-grey.svg'
79

810
const Styled = styled.div`
911
padding: 5rem 0;
1012
13+
h2 {
14+
text-align: center;
15+
}
16+
1117
.links {
1218
display: flex;
1319
justify-content: space-between;
14-
padding-bottom: 1rem;
20+
padding: 5rem 0;
1521
1622
@media(max-width: ${sizes.breakpoints.md}) {
1723
flex-direction: column;
18-
}
1924
20-
& > div {
21-
22-
&:not(:last-of-type) {
23-
margin-bottom: 4rem;
24-
}
25-
26-
h2 {
25+
& > div:first-of-type {
2726
margin-bottom: 3rem;
2827
}
28+
}
2929
30-
h2 + p {
31-
margin: 0;
32-
}
30+
& > div {
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: space-between;
34+
flex: 0 0 45%;
35+
padding: 2rem 4rem;
36+
background: ${colors.white};
37+
border: ${borders.light};
38+
}
3339
34-
p:last-of-type {
35-
margin-bottom: 3rem;
36-
}
40+
img {
41+
display: block;
42+
height: 7.5rem;
43+
margin-bottom: 3rem;
44+
}
3745
38-
.btn {
39-
margin-bottom: 2rem;
40-
margin-right: 2rem;
41-
}
46+
h2 {
47+
margin-bottom: 3rem;
48+
}
4249
43-
@media(min-width: ${sizes.breakpoints.md}) {
44-
&:first-of-type {
45-
width: 45%;
46-
}
50+
h2 + p {
51+
margin: 0;
52+
}
4753
48-
&:last-of-type {
49-
width: 40%;
50-
}
51-
}
54+
p:last-of-type {
55+
margin-bottom: 3rem;
56+
}
57+
58+
.btn {
59+
margin-bottom: 2rem;
60+
margin-right: 2rem;
5261
}
5362
}
5463
`
5564

5665
const Plans = () => (
5766
<Styled>
58-
<section className="links">
59-
<div>
60-
<h3>Professional Open Source</h3>
61-
<p>
62-
Gitpod is free for up to 50 hours/month on any public repository.
63-
</p>
64-
<p>
65-
If you're a professional open-source developer and need more hours, you can apply to our free <a href="/docs/professional-open-source/" target="_blank"><strong>Professional Open Source</strong></a> plan.
66-
</p>
67-
<Link to="/contact/" state={{ subject: "Applying for Professional Open Source" }} className="btn">Apply Now</Link>
68-
</div>
69-
<div>
70-
<h3>For Students</h3>
71-
<p>
72-
Get the <strong><a href="https://gitpod.io/subscription/" target="_blank">Student Unlimited</a> plan for {isEurope() ? '€8' : '$9'}</strong> per month.
73-
</p>
74-
<p>
75-
Make sure your student email is set as your primary email on GitHub/GitLab. Please let us know if your educational institution is not correctly recognized.
76-
</p>
77-
<p>
78-
<Link to="/contact/" state={{ subject: "Student Unlimited: Get Verified as a Student" }} className="btn">Get Verified as Student</Link>
79-
</p>
67+
<section>
68+
<h2>Special <strong>Use Cases</strong></h2>
69+
<div className="links">
70+
<div>
71+
<div>
72+
<img src={ProfessionalBadge} alt="Professional Badge"/>
73+
<h3>Professional Open Source</h3>
74+
<p>
75+
Gitpod is free for up to 50 hours/month on any public repository.
76+
</p>
77+
<p>
78+
If you're a professional open-source developer and need more hours, you can apply to our free <a href="/docs/professional-open-source/" target="_blank"><strong>Professional Open Source</strong></a> plan.
79+
</p>
80+
</div>
81+
<div className="btn-container">
82+
<Link to="/contact/" state={{ subject: "Applying for Professional Open Source" }} className="btn">Apply Now</Link>
83+
</div>
84+
</div>
85+
<div>
86+
<div>
87+
<img src={BagGrey} alt="School Bag"/>
88+
<h3>For Students</h3>
89+
<p>
90+
Get the <strong><a href="https://gitpod.io/subscription/" target="_blank">Student Unlimited</a> plan for {isEurope() ? '€8' : '$9'}</strong> per month.
91+
</p>
92+
<p>
93+
Make sure your student email is set as your primary email on GitHub/GitLab. Please let us know if your educational institution is not correctly recognized.
94+
</p>
95+
</div>
96+
<div className="btn-container">
97+
<Link to="/contact/" state={{ subject: "Student Unlimited: Get Verified as a Student" }} className="btn">Get Verified as Student</Link>
98+
</div>
99+
</div>
80100
</div>
81101
</section>
82102
</Styled>

‎src/components/pricing/PricingBoxes.tsx

Lines changed: 12 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react'
1+
import React from 'react'
22

33
import styled from '@emotion/styled'
44
import { sizes, colors } from '../../styles/variables'
@@ -11,6 +11,7 @@ import PopOver from '../PopOver'
1111
import PricingBox from '../PricingBox'
1212
import { isEurope } from '../../utils/helpers'
1313
import Cloud from '../../resources/cloud.svg'
14+
import Tabs from './Tabs'
1415

1516
const Styled = styled.div`
1617
@@ -130,65 +131,27 @@ const PricingContainer = styled.div`
130131
}
131132
`;
132133

133-
const Tab = styled.button`
134-
display: block;
135-
padding: 1.3rem 2rem;
136-
font-size: 18px;
137-
color: ${colors.textLight};
138-
min-width: 15rem;
139-
text-align: center;
140-
background-color: ${colors.white};
141-
border: 1px solid ${colors.offWhite2};
142-
border-bottom-color: transparent;
143-
margin-bottom: -1px;
144-
cursor: pointer;
145-
146-
&:first-of-type {
147-
border-right: none;
148-
}
149-
150-
&:last-of-type {
151-
border-left: none;
152-
}
153-
154-
body.user-is-tabbing &:focus {
155-
outline: none;
156-
border: 1px solid #1AA6E4;;
157-
}
158-
`;
159134

160-
function isSelfHosted() {
161-
return typeof window !== `undefined` && window.location.hash === '#self-hosted';
135+
export interface PricingBoxesProps {
136+
isRendered: boolean
137+
changeIsRendered: (bool: boolean) => void
162138
}
163139

164-
const PricingBoxes = () => {
165-
// Declare a new state variable, which we'll call "count"
166-
const [selfHosted, setSelfHosted] = useState(isSelfHosted());
140+
const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => {
167141
return <Styled>
168142
<section className="pricing">
169143
<div className="grey-container container--1">
170144
<div className="row">
171145
<h1 className="sub">Plans &amp; Pricing</h1>
172-
<div style={{
173-
display: 'flex',
174-
justifyContent: 'center'
175-
}}>
176-
<Tab style={{
177-
backgroundColor: selfHosted ? colors.offWhite2 : colors.white,
178-
}}
179-
onClick={() => setSelfHosted(false)}
180-
>Cloud</Tab>
181-
<Tab style={{
182-
backgroundColor: selfHosted ? colors.white : colors.offWhite2,
183-
}}
184-
onClick={() => setSelfHosted(true)}
185-
>Self-Hosted</Tab>
186-
</div>
146+
<Tabs
147+
isRendered={isRendered}
148+
changeIsRendered={changeIsRendered}
149+
/>
187150
</div>
188151
</div>
189152
<PricingContainer>
190153
<div
191-
className={`pricing__boxes ${selfHosted ? 'hide' : 'show'}`}
154+
className={`pricing__boxes ${isRendered ? 'hide' : 'show'}`}
192155
>
193156
{plans.map(
194157
(plan, i) => <PricingBox
@@ -198,7 +161,7 @@ const PricingBoxes = () => {
198161
)}
199162
</div>
200163
<div
201-
className={`pricing__boxes ${selfHosted ? 'show' : 'hide'}`}
164+
className={`pricing__boxes ${isRendered ? 'show' : 'hide'}`}
202165
>
203166
{selfHostedPlans.map(
204167
(plan, i) => <PricingBox

0 commit comments

Comments
 (0)