Skip to content

Commit 890414d

Browse files
laurakalbagmellson
laurakalbag
and
mellson
authored
Add new pricing tier to the pricing page (#274)
* Add new pricing tier to the pricing page * Update features and shrink community tier size * Update prices * Add free badge * Tweak post-heading text * Remove duplicate lock machines feature * Update feature text * Tweak button styles * Fix typo * Correct prices * Update static/pricing/index.html Co-authored-by: Anders Bech Mellson <[email protected]> * Update static/pricing/index.html Co-authored-by: Anders Bech Mellson <[email protected]> --------- Co-authored-by: Anders Bech Mellson <[email protected]>
1 parent abb4c30 commit 890414d

File tree

2 files changed

+143
-37
lines changed

2 files changed

+143
-37
lines changed

‎static/landing-page/styles.css

Lines changed: 83 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2134,7 +2134,8 @@ path.edge {
21342134
grid-template-columns: repeat(3, 1fr);
21352135
margin-top: 3rem;
21362136
grid-template-areas:
2137-
'community professional enterprise'
2137+
'community community community'
2138+
'professional team enterprise'
21382139
'services services services';
21392140
}
21402141

@@ -2161,10 +2162,22 @@ path.edge {
21612162
margin-bottom: 1.5rem;
21622163
}
21632164

2165+
.badge {
2166+
background-color: #DB4206;
2167+
border-radius: 0.3rem;
2168+
color: white;
2169+
font-size: 0.6em;
2170+
font-weight: 400;
2171+
margin-top: 0.1rem;
2172+
margin-left: 0.5rem;
2173+
padding: 0.35rem 0.4rem;
2174+
text-transform: uppercase;
2175+
}
2176+
21642177
.feature-list .pricing-text {
21652178
padding-top: 0.5rem;
21662179
padding-bottom: 0.5rem;
2167-
font-weight: 600;
2180+
font-weight: 500;
21682181
font-variation-settings: 'wght' 500;
21692182
font-size: var(--font-small);
21702183
}
@@ -2217,6 +2230,10 @@ path.edge {
22172230
margin-top: 0;
22182231
}
22192232

2233+
.tier.community {
2234+
margin-bottom: 1rem;
2235+
}
2236+
22202237
.tier.services {
22212238
margin-top: 1rem;
22222239
}
@@ -2262,7 +2279,7 @@ h2.pricing-heading {
22622279
color: var(--chakra-colors-gray-200) !important;
22632280
margin-top: 0.5rem;
22642281
font-variation-settings: 'wght' 200;
2265-
max-width: 8em;
2282+
max-width: 19ch;
22662283
}
22672284

22682285
.pricing-text.description {
@@ -2283,6 +2300,69 @@ h2.pricing-heading {
22832300
min-height: 71px;
22842301
}
22852302

2303+
@media (min-width: 1280px) {
2304+
.tier.services {
2305+
display: flex;
2306+
flex-wrap: wrap;
2307+
padding-bottom: 0;
2308+
}
2309+
2310+
.tier.community {
2311+
display: flex;
2312+
flex-wrap: nowrap;
2313+
padding-bottom: 0;
2314+
}
2315+
2316+
.tier.services .tier-header {
2317+
border-bottom: none;
2318+
flex-basis: 33%;
2319+
padding-right: 1.5rem;
2320+
}
2321+
2322+
.tier.community .tier-header {
2323+
display: flex;
2324+
align-items: center;
2325+
border-bottom: none;
2326+
margin-bottom: 0;
2327+
padding-right: 1.5rem;
2328+
}
2329+
2330+
.tier.community .pricing-heading {
2331+
align-items: center;
2332+
display: flex;
2333+
flex-wrap: nowrap;
2334+
margin: 0;
2335+
}
2336+
2337+
.tier.services .feature-list, .tier.community .feature-list {
2338+
border-left: 1px solid rgba(255, 255, 255, 0.11);
2339+
padding: 1rem 1.5rem;
2340+
}
2341+
2342+
.tier.community .feature-list {
2343+
align-items: center;
2344+
display: flex;
2345+
padding: 0.5rem 0 0.5rem 1.5rem;
2346+
justify-content: space-between;
2347+
}
2348+
2349+
.tier.community .community-text {
2350+
color: white;
2351+
font-size: calc(var(--font-small) * 1.05);
2352+
flex-basis: auto;
2353+
margin: 0;
2354+
}
2355+
2356+
.tier.community .get-started {
2357+
flex-basis: 26ch;
2358+
margin: 0;
2359+
}
2360+
2361+
.tier.community .get-started a {
2362+
margin-left: 1.5rem;
2363+
}
2364+
}
2365+
22862366
.details-wrapper {
22872367
margin-top: 0px;
22882368
margin-inline: 0.5rem 0px;

‎static/pricing/index.html

Lines changed: 60 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -68,26 +68,65 @@ <h2 class="logo">
6868
<h1 class="pricing-heading">Pricing</h1>
6969
<p class="pricing-text description">
7070
Create unlimited public projects for free. Upgrade to work privately
71-
and unlock more features. Then add users to enable team collaboration.
71+
and unlock more features. Get a team to add users and enable collaboration.
7272
</p>
7373
<div class="pricing-grid">
7474
<div class="tier-wrapper community">
7575
<div class="tier community">
7676
<div class="tier-header">
77-
<h2 class="pricing-heading">Community</h2>
78-
<p class="pricing-text price-number">$0</p>
79-
<a
77+
<h2 class="pricing-heading"><span>Community </span><span class="free badge"><span class="visually-hidden">(</span>free<span class="visually-hidden">)</span></span></h2>
78+
</div>
79+
<div class="feature-list">
80+
<p class="community-text">Create unlimited public projects for free. Upgrade to Pro to work privately and unlock more features. Get a Team plan to add users and enable collaboration.</p>
81+
<p class="get-started"><a
8082
href="/editor?source=landing-page"
8183
class="button-link sign-up-button plausible-event-name=community+signup"
8284
>
8385
Get started
84-
</a>
86+
</a></p>
87+
</div>
88+
</div>
89+
</div>
90+
<div class="tier-wrapper professional">
91+
<div class="tier professional">
92+
<div class="tier-header">
93+
<h2 class="pricing-heading">Professional</h2>
94+
<div class="horizontal">
95+
<p class="pricing-text price-number">$33</p>
96+
<div class="details-wrapper">
97+
<p class="pricing-text details">per month</p>
98+
<p class="pricing-text details">billed yearly</p>
99+
<p class="pricing-text details details-bold">
100+
$39 per month when billed monthly
101+
</p>
102+
</div>
103+
</div>
104+
<a
105+
href="/registry/billing"
106+
class="button-link sign-up-button plausible-event-name=pro+signup"
107+
>Sign up</a
108+
>
85109
</div>
86110
<ul class="feature-list">
87-
<li class="pricing-text">Unlimited public projects</li>
88-
<li class="pricing-text">Design flows</li>
89-
<li class="pricing-text">Simulate flows</li>
90-
<li class="pricing-text">Export flows as code</li>
111+
<li class="pricing-text">Everything from Community</li>
112+
<li class="pricing-text">7-day free trial</li>
113+
<li class="pricing-text">Private and unlisted projects</li>
114+
<li class="pricing-text">
115+
Generate and modify using AI ✨
116+
</li>
117+
<li class="pricing-text">
118+
Deploy live workflows
119+
</li>
120+
<li class="pricing-text">Generate React UIs</li>
121+
<li class="pricing-text">Version history</li>
122+
<li class="pricing-text">Import from GitHub</li>
123+
<li class="pricing-text">Live simulation mode</li>
124+
<li class="pricing-text">Color states and transitions</li>
125+
<li class="pricing-text">Export flows to markdown</li>
126+
<li class="pricing-text">Priority support</li>
127+
<li class="pricing-text">GitHub Sync (coming soon!)</li>
128+
<li class="pricing-text">Actors (coming soon!)</li>
129+
<li class="pricing-text">Live collaboration (coming soon!)</li>
91130
</ul>
92131
</div>
93132
<div class="pricing-arrow">
@@ -105,17 +144,17 @@ <h2 class="pricing-heading">Community</h2>
105144
</svg>
106145
</div>
107146
</div>
108-
<div class="tier-wrapper professional">
109-
<div class="tier professional">
147+
<div class="tier-wrapper team">
148+
<div class="tier team">
110149
<div class="tier-header">
111-
<h2 class="pricing-heading">Professional</h2>
150+
<h2 class="pricing-heading">Team</h2>
112151
<div class="horizontal">
113-
<p class="pricing-text price-number">$12.50</p>
152+
<p class="pricing-text price-number">$167</p>
114153
<div class="details-wrapper">
115-
<p class="pricing-text details">per seat/month</p>
154+
<p class="pricing-text details">per month</p>
116155
<p class="pricing-text details">billed yearly</p>
117156
<p class="pricing-text details details-bold">
118-
$15 per seat when billed monthly
157+
$199 per month when billed monthly
119158
</p>
120159
</div>
121160
</div>
@@ -126,25 +165,12 @@ <h2 class="pricing-heading">Professional</h2>
126165
>
127166
</div>
128167
<ul class="feature-list">
129-
<li class="pricing-text">Everything from Community</li>
130-
<li class="pricing-text">Teams and shared projects</li>
131-
<li class="pricing-text">Private and unlisted projects</li>
132-
<li class="pricing-text">Version history</li>
133-
<li class="pricing-text">Import from GitHub</li>
134-
<li class="pricing-text">Live simulation mode</li>
135-
<li class="pricing-text">
136-
Generate and modify flows using AI ✨
137-
</li>
138-
<li class="pricing-text">Lock machines</li>
139-
<li class="pricing-text">Color states and transitions</li>
140-
<li class="pricing-text">Markdown export</li>
141-
<li class="pricing-text">Priority support</li>
142-
<li class="pricing-text">GitHub Sync (coming soon!)</li>
143-
<li class="pricing-text">Workflows (coming soon!)</li>
144-
<li class="pricing-text">Live collaboration (coming soon!)</li>
145-
<li class="pricing-text">
146-
Many more pro-only features coming soon
147-
</li>
168+
<li class="pricing-text">Everything from Pro</li>
169+
<li class="pricing-text">7-day free trial</li>
170+
<li class="pricing-text">Add up to 10 team members</li>
171+
<li class="pricing-text">Shared team projects</li>
172+
<li class="pricing-text">Team admins and editors</li>
173+
<li class="pricing-text">Grant view-only access to team projects</li>
148174
</ul>
149175
</div>
150176
<div class="pricing-arrow">

0 commit comments

Comments
 (0)