+ ) : 'Processing...';
+};
diff --git a/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/flow_usage/index.mdx b/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/flow_usage/index.mdx
new file mode 100644
index 0000000..8735ce0
--- /dev/null
+++ b/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/flow_usage/index.mdx
@@ -0,0 +1,74 @@
+---
+title: pgflow
+draft: true
+description: Open Source parallel processing for your Supabase app
+template: splash
+hero:
+ tagline: Type-safe background processing that run on Supabase Edge Functions or dedicated workers and stream updates back to the browser
+
+ actions:
+ - text: Check how simple it is
+ link: "#how-it-works"
+ icon: down-caret
+---
+
+import CodeAfterMarker from '../../../../../../components/CodeAfterMarker.astro';
+import { Steps } from "@astrojs/starlight/components";
+import _01_entrypoint from "./01_flow_entrypoint.ts.raw?raw";
+import _02_parallel_processing from "./02_parallel_processing.ts.raw?raw";
+import _03_combine from "./03_combine.ts.raw?raw";
+import _05_trigger from "./05_trigger.ts.raw?raw";
+
+## How it works?
+
+Lets code as simplified example - a voice memo processing flow
+for AI powered customer support system.
+
+
+
+1. #### Define entrypoints
+
+ Define `RunPayload` and root steps (steps without dependencies)
+
+
+
+2. #### Add parallel steps
+
+ Add parallel processing by adding steps that depends on `transcription` results
+
+
+
+3. #### Use results
+
+ Combine results to create a support ticket
+
+
+
+4. #### Deploy to production
+
+ ```sh
+ $ pgflow deploy flows/ProcessVoiceTicket.ts
+
+ -> generating JSON schemas... done
+ -> generating graph shape... done
+ -> upserting... done
+
+ Your flow was successfully deployed. You can run it now!
+ ```
+
+5. #### Trigger from browser
+
+ Triggering flows allows to receive live updates on flow progress by leveraging Supabase Realtime.
+
+
+
+6. #### Profit!
+
+ You gain lot more with this simple approach:
+
+ - orchestration is done by postgres, dependant steps start only when dependencies are ready
+ - we leverage Supabase Edge Functions to execute handlers - its baked in!
+ - you stream live updates/progress back to user browser in realtime
+ - end-to-end type safety via JSON schemas generated from your step handlers, all done solely based on shape of the grap and a single type annotation for whole run payload
+
+
diff --git a/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/original_index.md b/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/original_index.md
new file mode 100644
index 0000000..e8543e4
--- /dev/null
+++ b/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/original_index.md
@@ -0,0 +1,42 @@
+---
+title: pgflow
+draft: true
+template: splash
+hero:
+ tagline: Supabase-native open-source type-safe workflow engine with realtime updates
+ actions:
+ - text: Check how simple it is
+ link: "#how-it-works"
+ icon: down-caret
+---
+
+You can run whole parallel workflow from start to completion (or error)
+in the browser like a regular async function on which you can await.
+You can also monitor events for all the steps and their return values or errors too.
+
+## Examples
+
+```typescript
+// trigger a new flow run
+const flowRun = runFlow(ProcessVoiceMemo, {
+ voiceMemoId: id,
+ ownerId: currentUser.id,
+ language: "en",
+});
+
+// monitor all the step statuses
+flowRun.subscribe("yourStepName:eventName", (payload) => process(payload));
+
+// monitor mid-step realtime progress
+flowRun.subscribe("yourStepName:progress", (progress) =>
+ console.log(`flowRun progress: ${progresss}%`),
+);
+
+// treat whole run as a promise
+try {
+ const { data, error } = await flowRun;
+ console.log("Key takeaways from voice memo: ", data.keyTakeaways.join(", "));
+} catch (runError) {
+ // any step error will result in promise rejection
+}
+```
diff --git a/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/starting_with_react.mdx b/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/starting_with_react.mdx
new file mode 100644
index 0000000..48505d0
--- /dev/null
+++ b/pkgs/pgflow.dev/src/content/docs/pgflow/_ideas/landing_pages/starting_with_react.mdx
@@ -0,0 +1,128 @@
+---
+title: pgflow
+draft: true
+description: This is a starter template for Astro.
+template: splash
+hero:
+ tagline: Type-safe background processing integrated with Supabase
+ actions:
+ - text: Check it out
+ link: "#how-it-works"
+ icon: down-caret
+---
+
+import { CardGrid, Card, Code, Steps, Aside } from "@astrojs/starlight/components";
+
+## React example
+
+We will be coding a simple app that triggers a flow on button click.
+
+
+
+
+
+1. #### Create your component
+
+
+
+ ```jsx
+ const CreateMemeComponent = () => {
+ const [topic, setTopic] = useState('');
+
+ return
+ setTopic(e.target.value)}
+ placeholder="Topic of a joke"
+ />
+
+