Skip to content

Commit d4fe169

Browse files
kristianfreemankristianfreeman
committed
Add pricing page
1 parent 22b47ac commit d4fe169

File tree

1 file changed

+324
-0
lines changed

1 file changed

+324
-0
lines changed

‎src/pages/pricing.astro‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
---
2+
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
3+
import { Card, Tabs, TabItem } from "@astrojs/starlight/components";
4+
import { Details } from "~/components";
5+
6+
// Remove frontmatter constant - will be inlined in StarlightPage
7+
8+
const pricingData = {
9+
compute: [
10+
{
11+
product: "Workers",
12+
description: "Run serverless code at the edge",
13+
components: [
14+
{ name: "Requests", included: "10 million", unit: "per million requests", price: "$0.30" },
15+
{ name: "CPU time", included: "30 million ms", unit: "per million CPU milliseconds", price: "$0.02" },
16+
],
17+
link: "/workers/",
18+
},
19+
{
20+
product: "Workers for Platforms",
21+
description: "Deploy Workers on behalf of your customers",
22+
components: [
23+
{ name: "Requests", included: "20 million", unit: "per million requests", price: "$0.30" },
24+
{ name: "CPU time", included: "60 million ms", unit: "per million CPU milliseconds", price: "$0.02" },
25+
{ name: "Scripts Deployed", included: "1,000", unit: "per script", price: "$0.02" },
26+
],
27+
link: "/cloudflare-for-platforms/workers-for-platforms/",
28+
},
29+
{
30+
product: "Workflows",
31+
description: "Build durable, scalable applications",
32+
components: [
33+
{ name: "Requests", included: "None", unit: "per million requests", price: "$0.30" },
34+
{ name: "CPU time", included: "None", unit: "per million CPU milliseconds", price: "$0.02" },
35+
{ name: "Storage", included: "None", unit: "per GB-month", price: "$0.20" },
36+
],
37+
link: "/workflows/",
38+
},
39+
],
40+
storage: [
41+
{
42+
product: "R2",
43+
description: "Object storage with zero egress fees",
44+
components: [
45+
{ name: "Standard Storage", included: "10 GB-month", unit: "per GB-month", price: "$0.015" },
46+
{ name: "Standard Class A operations", included: "1 million", unit: "per million requests", price: "$4.50" },
47+
{ name: "Standard Class B operations", included: "10 million", unit: "per million requests", price: "$0.36" },
48+
{ name: "Infrequent Access Storage", included: "10 GB-month", unit: "per GB-month", price: "$0.015" },
49+
{ name: "Infrequent Access Class A operations", included: "1 million", unit: "per million requests", price: "$9.00" },
50+
{ name: "Infrequent Access Class B operations", included: "10 million", unit: "per million requests", price: "$0.90" },
51+
{ name: "Infrequent Access Data Retrieval", included: "None", unit: "per GB", price: "$0.10" },
52+
],
53+
link: "/r2/",
54+
},
55+
{
56+
product: "Workers KV",
57+
description: "Low-latency key-value data store",
58+
components: [
59+
{ name: "Stored Data", included: "1 GB", unit: "per GB-month", price: "$0.50" },
60+
{ name: "Read Requests", included: "10 million", unit: "per million requests", price: "$0.50" },
61+
{ name: "Write, Delete, List requests", included: "1 million", unit: "per million requests", price: "$5.00" },
62+
],
63+
link: "/kv/",
64+
},
65+
{
66+
product: "D1",
67+
description: "Serverless SQL database",
68+
components: [
69+
{ name: "Storage", included: "None", unit: "per GB-month", price: "$0.75" },
70+
{ name: "Rows read", included: "None", unit: "per million rows", price: "$0.001" },
71+
{ name: "Rows written", included: "None", unit: "per million rows", price: "$1.00" },
72+
],
73+
link: "/d1/",
74+
},
75+
{
76+
product: "Durable Objects",
77+
description: "Stateful serverless applications",
78+
components: [
79+
{ name: "Rows Read", included: "None", unit: "per million rows", price: "$0.0001" },
80+
{ name: "Rows written", included: "None", unit: "per million rows", price: "$1.00" },
81+
{ name: "SQL Stored data", included: "None", unit: "per GB-month", price: "$0.20" },
82+
{ name: "Read request units", included: "None", unit: "per million", price: "$0.20" },
83+
],
84+
link: "/durable-objects/",
85+
},
86+
{
87+
product: "Hyperdrive",
88+
description: "Database connection pooling",
89+
components: [
90+
{ name: "Queries", included: "Unlimited", unit: "", price: "Free" },
91+
],
92+
link: "/hyperdrive/",
93+
},
94+
{
95+
product: "Workers Analytics Engine",
96+
description: "Time-series analytics at scale",
97+
components: [
98+
{ name: "Data points written", included: "10 million", unit: "per million", price: "$0.25" },
99+
{ name: "Read queries", included: "1 million", unit: "per million", price: "$1.00" },
100+
],
101+
link: "/analytics/analytics-engine/",
102+
},
103+
{
104+
product: "Pipelines",
105+
description: "Transform and route data streams",
106+
components: [
107+
{ name: "Ingestion", included: "None", unit: "per GB", price: "$0.02" },
108+
{ name: "Delivery to R2", included: "None", unit: "per GB", price: "$0.02" },
109+
],
110+
link: "/pipelines/",
111+
},
112+
],
113+
media: [
114+
{
115+
product: "Realtime",
116+
description: "Live data streaming platform",
117+
components: [
118+
{ name: "Data Egress", included: "None", unit: "per GB", price: "$0.05" },
119+
],
120+
link: "/realtime/",
121+
},
122+
{
123+
product: "Images",
124+
description: "Resize, optimize, and transform images",
125+
components: [
126+
{ name: "Unique transformations", included: "None", unit: "per 1,000", price: "$0.50" },
127+
{ name: "Images Stored", included: "None", unit: "per 100,000", price: "$5.00" },
128+
{ name: "Images Delivered", included: "None", unit: "per 100,000", price: "$1.00" },
129+
],
130+
link: "/images/",
131+
},
132+
{
133+
product: "Stream",
134+
description: "Video streaming platform",
135+
components: [
136+
{ name: "Minutes Stored", included: "None", unit: "per 1,000 minutes", price: "$5.00" },
137+
{ name: "Minutes Delivered", included: "None", unit: "per 1,000 minutes", price: "$1.00" },
138+
],
139+
link: "/stream/",
140+
},
141+
],
142+
ai: [
143+
{
144+
product: "AI Gateway",
145+
description: "Unified API for AI providers",
146+
components: [
147+
{ name: "Logs stored", included: "None", unit: "per 100,000 logs/month", price: "$8.00" },
148+
],
149+
link: "/ai-gateway/",
150+
},
151+
{
152+
product: "Vectorize",
153+
description: "Vector database for AI",
154+
components: [
155+
{ name: "Vector dimensions queried", included: "None", unit: "per million", price: "$0.01" },
156+
{ name: "Vector dimensions stored", included: "None", unit: "per 100 million", price: "$0.05" },
157+
],
158+
link: "/vectorize/",
159+
},
160+
{
161+
product: "Workers AI",
162+
description: "Run AI models at the edge",
163+
components: [
164+
{ name: "Neurons", included: "None", unit: "per 1,000 neurons/day", price: "$0.011" },
165+
],
166+
link: "/workers-ai/",
167+
},
168+
],
169+
other: [
170+
{
171+
product: "Queues",
172+
description: "Message queuing service",
173+
components: [
174+
{ name: "Standard Operations", included: "None", unit: "per million operations", price: "$0.40" },
175+
],
176+
link: "/queues/",
177+
},
178+
{
179+
product: "Workers Observability",
180+
description: "Monitor Workers performance",
181+
components: [
182+
{ name: "Events", included: "20 million", unit: "per million events", price: "$0.60" },
183+
],
184+
link: "/workers/observability/",
185+
},
186+
{
187+
product: "Workers Builds",
188+
description: "Build Workers at scale",
189+
components: [
190+
{ name: "Build Minutes", included: "None", unit: "per minute", price: "$0.005" },
191+
],
192+
link: "/workers/",
193+
},
194+
{
195+
product: "Zaraz",
196+
description: "Third-party tool manager",
197+
components: [
198+
{ name: "Events", included: "None", unit: "per million events", price: "$5.00" },
199+
],
200+
link: "/zaraz/",
201+
},
202+
{
203+
product: "Browser Rendering",
204+
description: "Headless browser automation",
205+
components: [
206+
{ name: "Browser hours", included: "None", unit: "per hour", price: "$0.09" },
207+
{ name: "Concurrent Browser", included: "None", unit: "per concurrent browser", price: "$2.00" },
208+
],
209+
link: "/browser-rendering/",
210+
},
211+
],
212+
};
213+
214+
const categories = [
215+
{ id: "compute", name: "Compute", icon: "🚀", data: pricingData.compute },
216+
{ id: "storage", name: "Storage & Data", icon: "💾", data: pricingData.storage },
217+
{ id: "media", name: "Media", icon: "🎬", data: pricingData.media },
218+
{ id: "ai", name: "AI", icon: "🤖", data: pricingData.ai },
219+
{ id: "other", name: "Other Services", icon: "🔧", data: pricingData.other },
220+
];
221+
---
222+
223+
<StarlightPage
224+
frontmatter={{
225+
title: "Developer Platform Pricing",
226+
description: "Simple, transparent pricing for Cloudflare's developer products. Pay only for what you use.",
227+
template: "splash",
228+
}}
229+
>
230+
<div class="text-center mb-8">
231+
<h1 class="text-4xl font-bold mb-4">Simple, transparent pricing</h1>
232+
<p class="text-xl">
233+
Pay only for what you use. No hidden fees. No surprises.
234+
</p>
235+
</div>
236+
237+
<Tabs>
238+
{categories.map((category) => (
239+
<TabItem label={`${category.icon} ${category.name}`}>
240+
<div class="mt-6 space-y-6">
241+
{category.data.map((product) => (
242+
<Card title={product.product}>
243+
<div class="flex justify-between items-start mb-3">
244+
<div>
245+
<p>{product.description}</p>
246+
</div>
247+
<a href={product.link}>
248+
Learn more →
249+
</a>
250+
</div>
251+
<div class="overflow-x-auto">
252+
<table class="w-full text-sm">
253+
<thead>
254+
<tr class="border-b border-gray-200 dark:border-gray-700">
255+
<th class="text-left py-2 pr-4">Component</th>
256+
<th class="text-left py-2 px-4">Included</th>
257+
<th class="text-left py-2 px-4">Additional usage</th>
258+
</tr>
259+
</thead>
260+
<tbody>
261+
{product.components.map((component, idx) => (
262+
<tr class={idx < product.components.length - 1 ? "border-b border-gray-100 dark:border-gray-800" : ""}>
263+
<td class="py-3 pr-4">{component.name}</td>
264+
<td class="py-3 px-4">
265+
<span class="font-semibold" style="color: var(--sl-color-green-high)">
266+
{component.included}
267+
</span>
268+
</td>
269+
<td class="py-3 px-4">
270+
{component.price !== "Free" ? (
271+
<>
272+
<span class="font-semibold">{component.price}</span>
273+
{component.unit && <span> {component.unit}</span>}
274+
</>
275+
) : (
276+
<span class="font-semibold" style="color: var(--sl-color-green-high)">Free</span>
277+
)}
278+
</td>
279+
</tr>
280+
))}
281+
</tbody>
282+
</table>
283+
</div>
284+
</Card>
285+
))}
286+
</div>
287+
</TabItem>
288+
))}
289+
</Tabs>
290+
291+
<section class="mt-12">
292+
<h2 class="text-2xl font-bold mb-4">Frequently Asked Questions</h2>
293+
294+
<Details header="How does the $5 minimum work?">
295+
<p>
296+
You'll be charged $5/month minimum, which covers included usage across all developer products. Any usage beyond the included amounts is charged at the rates shown above.
297+
</p>
298+
</Details>
299+
300+
<Details header="What are Class A and Class B operations in R2?">
301+
<p>
302+
Class A operations include ListBuckets, PutBucket, ListObjects, PutObject, CopyObject, CompleteMultipartUpload, CreateMultipartUpload, ListMultipartUploads, UploadPart, UploadPartCopy, ListParts, PutBucketEncryption, PutBucketCors, and PutBucketLifecycleConfiguration. Class B operations include HeadBucket, HeadObject, GetObject, UsageSummary, GetBucketEncryption, GetBucketLocation, GetBucketCors, and GetBucketLifecycleConfiguration.
303+
</p>
304+
</Details>
305+
306+
<Details header="What are neurons in Workers AI?">
307+
<p>
308+
Neurons are our way of measuring AI compute usage. Different models consume different amounts of neurons based on their complexity and the input size. Check the Workers AI documentation for detailed neuron counts per model.
309+
</p>
310+
</Details>
311+
312+
<Details header="Is there a free tier?">
313+
<p>
314+
Yes! The included usage shown above is available with the $5/month subscription. Many developers can run their applications entirely within the included usage.
315+
</p>
316+
</Details>
317+
318+
<Details header="Can I use multiple products together?">
319+
<p>
320+
Absolutely! All developer products work seamlessly together. For example, you can use Workers with KV, D1, R2, and Queues all in the same application.
321+
</p>
322+
</Details>
323+
</section>
324+
</StarlightPage>

0 commit comments

Comments
 (0)