Tweaks Workflows overview with code and different explanation

Author: mikenomitch

src/content/docs/workflows/index.mdx

@@ -10,10 +10,18 @@ sidebar:
 head:
   - tag: title
     content: Cloudflare Workflows
-
 ---
 
-import { CardGrid, Description, Feature, LinkTitleCard, Plan, RelatedProduct } from "~/components"
+import {
+	CardGrid,
+	Description,
+	Feature,
+	LinkTitleCard,
+	Plan,
+	RelatedProduct,
+	Tabs,
+	TabItem,
+} from "~/components";
 
 <Description>
 
@@ -23,11 +31,60 @@ Build durable multi-step applications on Cloudflare Workers with Workflows.
 
 <Plan type="workers-all" />
 
-Workflows is a durable execution engine built on Cloudflare Workers. Workflows allow you to build multi-step applications that can automatically retry, persist state and run for minutes, hours, days, or weeks. Workflows introduces a programming model that makes it easier to build reliable, long-running tasks, observe as they progress, and programatically trigger instances based on events across your services.
-
-Refer to the [get started guide](/workflows/get-started/guide/) to start building with Workflows.
+With Workflows, you can build applications that chain together multiple steps, automatically retry failed tasks,
+and persist state for minutes, hours, or even weeks - with no infrastructure to manage.
+
+This gives you:
+
+- Reliable multi-step operations without worrying about timeouts
+- Automatic retries and error handling
+- Built-in observability for long running operations
+- Simple and expressive code for complex processes
+
+<Tabs>
+	<TabItem label="index.ts">
+```ts
+export class CheckoutWorkflow extends WorkflowEntrypoint {
+	async run (event, step) {
+		const processorResponse = await step.do( 'submit payment', async () => {
+			let resp = await submitToPaymentProcessor(event.params.payment) ;
+			return await resp.json<any>();
+		}) ;
+
+		const textResponse = await step.do( 'send confirmation text', sendConfirmation);
+		await step.sleep('wait for feedback', '2 days');
+		await step.do('send feedback email', sendFeedbackEmail);
+		await step.sleep('delay before marketing', '30 days');
+		await step.do( 'send marketing follow up', sendFollowUp);
+	}
+}
+
+````
+</TabItem>
+<TabItem label="wrangler.jsonc">
+
+```json
+{
+	"name": "my-worker-with-workflow",
+	"main": "src/index.js",
+	"compatibility_date": "2025-02-27",
+	"workflows": [
+		{
+			"name": "checkout-workflow",
+			"binding": "CHECKOUT",
+			"class_name": "CheckoutWorkflow"
+		}
+	]
+}
+````
+
+    </TabItem>
+
+</Tabs>
+
+See the [getting started guide](/workflows/get-started/guide/) to start building with Workflows.
 
-***
+---
 
 ## Features
 
@@ -49,48 +106,69 @@ Learn how to trigger Workflows from your Workers applications, via the REST API,
 
 </Feature>
 
-***
+---
 
 ## Related products
 
 <RelatedProduct header="Workers" href="/workers/" product="workers">
 
 Build serverless applications and deploy instantly across the globe for exceptional performance, reliability, and scale.
 
-
 </RelatedProduct>
 
 <RelatedProduct header="Pages" href="/pages/" product="pages">
 
 Deploy dynamic front-end applications in record time.
 
-
 </RelatedProduct>
 
-***
+---
 
 ## More resources
 
 <CardGrid>
 
-<LinkTitleCard title="Pricing" href="/workflows/reference/pricing/" icon="seti:shell">
-Learn more about how Workflows is priced.
+<LinkTitleCard
+	title="Pricing"
+	href="/workflows/reference/pricing/"
+	icon="seti:shell"
+>
+	Learn more about how Workflows is priced.
 </LinkTitleCard>
 
-<LinkTitleCard title="Limits" href="/workflows/reference/limits/" icon="document">
-Learn more about Workflow limits, and how to work within them.
+<LinkTitleCard
+	title="Limits"
+	href="/workflows/reference/limits/"
+	icon="document"
+>
+	Learn more about Workflow limits, and how to work within them.
 </LinkTitleCard>
 
-<LinkTitleCard title="Storage options" href="/workers/platform/storage-options/" icon="document">
-Learn more about the storage and database options you can build on with Workers.
+<LinkTitleCard
+	title="Storage options"
+	href="/workers/platform/storage-options/"
+	icon="document"
+>
+	Learn more about the storage and database options you can build on with
+	Workers.
 </LinkTitleCard>
 
-<LinkTitleCard title="Developer Discord" href="https://discord.cloudflare.com" icon="discord">
-Connect with the Workers community on Discord to ask questions, show what you are building, and discuss the platform with other developers.
+<LinkTitleCard
+	title="Developer Discord"
+	href="https://discord.cloudflare.com"
+	icon="discord"
+>
+	Connect with the Workers community on Discord to ask questions, show what you
+	are building, and discuss the platform with other developers.
 </LinkTitleCard>
 
-<LinkTitleCard title="@CloudflareDev" href="https://x.com/cloudflaredev" icon="x.com">
-Follow @CloudflareDev on Twitter to learn about product announcements, and what is new in Cloudflare Developer Platform.
+<LinkTitleCard
+	title="@CloudflareDev"
+	href="https://x.com/cloudflaredev"
+	icon="x.com"
+>
+	Follow @CloudflareDev on Twitter to learn about product announcements, and
+	what is new in Cloudflare Developer Platform.
 </LinkTitleCard>
 
 </CardGrid>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />