Skip to content

Commit eba3bb5

Browse files
author
iexitdev
committed
Refine pricing cards and enterprise copy
1 parent e8128f3 commit eba3bb5

2 files changed

Lines changed: 24 additions & 38 deletions

File tree

‎apps/site/src/components/Pricing.astro‎

Lines changed: 18 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const proTiersByKey = Object.fromEntries(
7676
</div>
7777

7878
<div
79-
class="mx-auto mt-10 grid max-w-[1120px] grid-cols-1 gap-5 lg:grid-cols-[0.9fr_1.2fr_0.9fr]"
79+
class="mx-auto mt-10 grid max-w-[1120px] grid-cols-1 items-stretch gap-5 lg:grid-cols-3"
8080
>
8181
<article
8282
class="relative flex min-h-[438px] flex-col rounded-2xl border border-white/10 bg-white/[0.025] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.24)] transition-colors duration-300 sm:p-6 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-black/[0.018] [html[data-theme='light']_&]:shadow-[0_24px_80px_rgba(0,0,0,0.055)]"
@@ -91,9 +91,11 @@ const proTiersByKey = Object.fromEntries(
9191
<h3 class="text-xl font-semibold">Free</h3>
9292
</div>
9393

94-
<div class="mt-7 min-h-[112px]">
94+
<div class="mt-4 min-h-[72px]">
9595
<div class="flex items-end gap-2">
96-
<p class="text-[clamp(34px,7vw,46px)] font-semibold leading-none">
96+
<p
97+
class="text-[clamp(24px,3.5vw,32px)] font-semibold leading-none"
98+
>
9799
$0
98100
</p>
99101
<p
@@ -103,18 +105,13 @@ const proTiersByKey = Object.fromEntries(
103105
</p>
104106
</div>
105107
<p
106-
class="mt-4 text-sm font-light leading-6 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
108+
class="mt-2 text-sm font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
107109
>
108110
Common React Native charts for free and commercial apps.
109111
</p>
110112
</div>
111113
</div>
112114

113-
<div
114-
class="mt-5 h-px bg-gradient-to-r from-white/12 via-white/8 to-transparent transition-colors duration-300 [html[data-theme='light']_&]:from-black/12 [html[data-theme='light']_&]:via-black/8"
115-
>
116-
</div>
117-
118115
<ul class="mt-5 space-y-3 pb-8">
119116
{
120117
[
@@ -178,10 +175,10 @@ const proTiersByKey = Object.fromEntries(
178175
</span>
179176
</div>
180177

181-
<div class="mt-6 min-h-[112px]" aria-live="polite">
178+
<div class="mt-4 min-h-[72px]" aria-live="polite">
182179
<div class="flex items-end gap-2">
183180
<p
184-
class="text-[clamp(34px,7vw,46px)] font-semibold leading-none"
181+
class="text-[clamp(24px,3.5vw,32px)] font-semibold leading-none"
185182
data-pro-price
186183
>
187184
{defaultProTier.price}
@@ -194,23 +191,17 @@ const proTiersByKey = Object.fromEntries(
194191
</p>
195192
</div>
196193
<p
197-
class="mt-4 text-sm font-light leading-6 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
194+
class="mt-2 text-sm font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
198195
data-pro-description
199196
>
200197
{defaultProTier.description}
201198
</p>
202199
</div>
203200
</div>
204201

205-
<div class="mt-6">
202+
<div class="relative z-10 -mt-[17px]">
206203
<div
207-
class="flex items-center justify-between gap-3 text-xs font-semibold text-white/58 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
208-
>
209-
<span>Team size</span>
210-
<span>7+ devs: Enterprise</span>
211-
</div>
212-
<div
213-
class="relative mt-3 grid w-[min(100%,15rem)] grid-cols-3 rounded-full border border-white/10 bg-white/[0.035] p-0.5 backdrop-blur-xl transition-colors duration-300 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-black/[0.035]"
204+
class="relative mx-auto grid w-[min(100%,15rem)] grid-cols-3 rounded-full border border-white/10 bg-white/[0.035] p-0.5 backdrop-blur-xl transition-colors duration-300 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-black/[0.035]"
214205
role="group"
215206
aria-label="Choose Pro team size"
216207
>
@@ -279,29 +270,24 @@ const proTiersByKey = Object.fromEntries(
279270
<h3 class="text-xl font-semibold">Enterprise</h3>
280271
</div>
281272

282-
<div class="mt-7 min-h-[112px]">
283-
<p class="text-[clamp(34px,7vw,46px)] font-semibold leading-none">
273+
<div class="mt-4 min-h-[72px]">
274+
<p class="text-[clamp(23px,3vw,29px)] font-semibold leading-none">
284275
Custom
285276
</p>
286277
<p
287-
class="mt-4 text-sm font-light leading-6 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
278+
class="mt-2 text-sm font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
288279
>
289-
Larger teams, procurement, security review, and custom terms.
280+
Larger teams, purchasing workflows, and custom terms.
290281
</p>
291282
</div>
292283
</div>
293284

294-
<div
295-
class="mt-5 h-px bg-gradient-to-r from-white/12 via-white/8 to-transparent transition-colors duration-300 [html[data-theme='light']_&]:from-black/12 [html[data-theme='light']_&]:via-black/8"
296-
>
297-
</div>
298-
299285
<ul class="mt-5 space-y-3 pb-8">
300286
{
301287
[
302288
"7+ developers or custom scope",
303289
"Multiple products or app families",
304-
"Security and legal review",
290+
"Custom terms and invoicing",
305291
"Named support contact",
306292
"Affiliate or multi-team use"
307293
].map((feature) => (
@@ -468,7 +454,7 @@ const proTiersByKey = Object.fromEntries(
468454
border-bottom: 1px solid rgb(255 255 255 / 0.1);
469455
border-radius: 1rem 1rem 0 0;
470456
background: rgb(255 255 255 / 0.055);
471-
padding: 1.25rem;
457+
padding: 1.125rem 1.25rem 1rem;
472458
transition:
473459
background-color 300ms ease,
474460
border-color 300ms ease;
@@ -565,7 +551,7 @@ const proTiersByKey = Object.fromEntries(
565551
@media (min-width: 640px) {
566552
.pricing-card-header {
567553
margin: -1.5rem -1.5rem 0;
568-
padding: 1.5rem;
554+
padding: 1.25rem 1.5rem 1.125rem;
569555
}
570556
}
571557
</style>

‎docs/charts/pricing.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ Enterprise for larger teams, custom terms, or broader distribution rights.
1111

1212
## Pro license tiers
1313

14-
| Plan | Price | Team scope | App scope | Company scope | Support |
15-
| ---------- | ------------- | ----------------------------- | --------------------------------- | --------------------------------------------- | ---------------------- |
16-
| Solo | $149 / year | 1 developer | 1 production app | Revenue/funding cap: $250k | Standard email support |
17-
| Startup | $399 / year | Up to 3 developers | 1 production app | Revenue/funding cap: $2M | Standard email support |
18-
| Business | $1,499 / year | Up to 6 developers | Up to 2 production apps | No revenue/funding cap | Priority email support |
19-
| Enterprise | Custom | 7+ developers or custom scope | Multiple products or app families | Procurement, security review, or custom terms | Named support contact |
14+
| Plan | Price | Team scope | App scope | Company scope | Support |
15+
| ---------- | ------------- | ----------------------------- | --------------------------------- | ------------------------------------ | ---------------------- |
16+
| Solo | $149 / year | 1 developer | 1 production app | Revenue/funding cap: $250k | Standard email support |
17+
| Startup | $399 / year | Up to 3 developers | 1 production app | Revenue/funding cap: $2M | Standard email support |
18+
| Business | $1,499 / year | Up to 6 developers | Up to 2 production apps | No revenue/funding cap | Priority email support |
19+
| Enterprise | Custom | 7+ developers or custom scope | Multiple products or app families | Purchasing workflows or custom terms | Named support contact |
2020

2121
Need SDK, white-label, embedded, or customer-distributed use? Contact sales for
2222
OEM terms.

0 commit comments

Comments
 (0)