From 7e7fecfd1200eda19048cd5a90b6fffb46e00d4a Mon Sep 17 00:00:00 2001 From: albertgwo Date: Fri, 13 Mar 2026 10:03:13 -0400 Subject: [PATCH 1/2] fix(homepage): run Prettier on hero section --- .../homepage/components/sections/hero.tsx | 78 ++++++++++++------- 1 file changed, 50 insertions(+), 28 deletions(-) diff --git a/packages/homepage/components/sections/hero.tsx b/packages/homepage/components/sections/hero.tsx index 8484614..94b9591 100644 --- a/packages/homepage/components/sections/hero.tsx +++ b/packages/homepage/components/sections/hero.tsx @@ -1,13 +1,13 @@ -"use client" +'use client' -import { Button } from "@/components/ui/button" -import { HeroBackground } from "@/components/hero-background" -import { Copy, ArrowRight } from "lucide-react" -import { useState } from "react" +import { Button } from '@/components/ui/button' +import { HeroBackground } from '@/components/hero-background' +import { Copy, ArrowRight } from 'lucide-react' +import { useState } from 'react' export function HeroSection() { const [copied, setCopied] = useState(false) - const installCommand = "npm i -g flowprint" + const installCommand = 'npm i -g flowprint' const handleCopy = async () => { try { @@ -22,10 +22,10 @@ export function HeroSection() { return (
- + {/* Gradient overlay */}
- +
{/* Badge */}
@@ -35,25 +35,37 @@ export function HeroSection() {
{/* Headline */} -

+

Executable
service blueprints

{/* Subheadline */} -

- Visual design, decision tables, simulation, code generation, and version control — - all in one specification that business defines and engineering ships. +

+ Visual design, decision tables, simulation, code generation, and version control — all in + one specification that business defines and engineering ships.

{/* CTAs */} -
- - +
{installCommand}
{/* YAML Preview */} -
+
- patient-intake.flowprint.yaml + + patient-intake.flowprint.yaml + 
               
-                name: patient-intake{"\n"}
-                version: 1.0.0{"\n"}
-                lanes:{"\n"}
-                {"  "}- id: patient{"\n"}
-                {"  "}- id: intake-staff{"\n"}
-                {"  "}- id: clinical{"\n"}
-                nodes:{"\n"}
-                {"  "}- id: check-in{"\n"}
-                {"    "}type: action{"\n"}
-                {"    "}lane: patient
+                name: patient-intake{'\n'}
+                version: 1.0.0{'\n'}
+                lanes:
+                {'\n'}
+                {'  '}
+                - id: patient{'\n'}
+                {'  '}
+                - id: intake-staff{'\n'}
+                {'  '}
+                - id: clinical{'\n'}
+                nodes:
+                {'\n'}
+                {'  '}
+                - id: check-in{'\n'}
+                {'    '}
+                type: action{'\n'}
+                {'    '}
+                lane: patient
From 4faa1bfe446b7bad92ea2ba5d618d2c99f988ef6 Mon Sep 17 00:00:00 2001 From: albertgwo Date: Fri, 13 Mar 2026 10:05:06 -0400 Subject: [PATCH 2/2] refactor(homepage): extract shared SVG flow scaffolding --- .../components/bridges/flow-svg-shell.tsx | 86 +++ .../components/bridges/step-by-step-svg.tsx | 506 ++++++++++++++---- .../components/bridges/walkthrough-svg.tsx | 334 +++++++++--- .../components/bridges/what-if-svg.tsx | 347 +++++++++--- 4 files changed, 999 insertions(+), 274 deletions(-) create mode 100644 packages/homepage/components/bridges/flow-svg-shell.tsx diff --git a/packages/homepage/components/bridges/flow-svg-shell.tsx b/packages/homepage/components/bridges/flow-svg-shell.tsx new file mode 100644 index 0000000..fa09ce1 --- /dev/null +++ b/packages/homepage/components/bridges/flow-svg-shell.tsx @@ -0,0 +1,86 @@ +import type { RippleObj } from './simulation-data' + +interface Lane { + y: number + height: number + label: string + labelY: number +} + +interface ArrowMarker { + id: string + fill: string +} + +interface FlowSvgShellProps { + isActive: boolean + ripples: RippleObj[] + lanes: [Lane, Lane, Lane] + markers: ArrowMarker[] + children: React.ReactNode +} + +export function FlowSvgShell({ isActive, ripples, lanes, markers, children }: FlowSvgShellProps) { + return ( + + + {markers.map((m) => ( + + + + ))} + + + {/* Lane backgrounds */} + {lanes.map((l) => ( + + ))} + + {/* Lane labels */} + {lanes.map((l) => ( + + {l.label} + + ))} + + {children} + + {/* Ripple layer */} + + {ripples.map((r) => ( + + ))} + + + ) +} diff --git a/packages/homepage/components/bridges/step-by-step-svg.tsx b/packages/homepage/components/bridges/step-by-step-svg.tsx index 137fd7a..a692d13 100644 --- a/packages/homepage/components/bridges/step-by-step-svg.tsx +++ b/packages/homepage/components/bridges/step-by-step-svg.tsx @@ -1,4 +1,5 @@ import type { RippleObj } from './simulation-data' +import { FlowSvgShell } from './flow-svg-shell' export interface StepByStepSvgProps { isActive: boolean @@ -7,162 +8,439 @@ export interface StepByStepSvgProps { export function StepByStepSvg({ isActive, sbRipples }: StepByStepSvgProps) { return ( - - - - - - - - - - - {/* Lane backgrounds */} - - - - - {/* Lane labels */} - APPLICANT - UNDERWRITING - OPERATIONS - + {/* ALL edges */} - - - - - - - - - - - - - - + + + + + + + + + + + + + + {/* Edge labels */} - approved - denied - review + + approved + + + denied + + + review + {/* ALL nodes */} {/* Submit Application (action) */} - - - ACTION - Submit Application + + + + ACTION + + + Submit Application + {/* Upload Documents (action) */} - - - ACTION - Upload Documents + + + + ACTION + + + Upload Documents + {/* Credit Check (action) */} - - - ACTION - Credit Check + + + + ACTION + + + Credit Check + {/* Risk Assessment (switch) */} - - - SWITCH - Risk + + + + SWITCH + + + Risk + {/* Generate Offer (action) */} - - - ACTION - Generate Offer + + + + ACTION + + + Generate Offer + {/* Disburse Funds (action) */} - - - ACTION - Disburse Funds + + + + ACTION + + + Disburse Funds + {/* Send Rejection (action) */} - - - ACTION - Send Rejection + + + + ACTION + + + Send Rejection + {/* Manual Review (action) */} - - - ACTION - Manual Review + + + + ACTION + + + Manual Review + {/* End (terminal) */} - - - End - - - {/* Ripple layer */} - - {sbRipples.map(r => ( - - ))} + + + + End + {/* Data tooltips for step-by-step mode */} - - In: {`{ applicant: "Jane Doe" }`} - Out: {`{ appId: "LN-8834" }`} + + + In:{' '} + {`{ applicant: "Jane Doe" }`} + + + Out:{' '} + {`{ appId: "LN-8834" }`} + - - In: {`{ docs: ["W2", "bank_stmt"] }`} - Out: {`{ verified: true, score: 0.94 }`} + + + In:{' '} + {`{ docs: ["W2", "bank_stmt"] }`} + + + Out:{' '} + {`{ verified: true, score: 0.94 }`} + - - In: {`{ ssn: "***-**-4821" }`} - Out: {`{ creditScore: 742, tier: "A" }`} + + + In:{' '} + {`{ ssn: "***-**-4821" }`} + + + Out:{' '} + {`{ creditScore: 742, tier: "A" }`} + - - In: {`{ score: 742, amount: $85K }`} - Out: {`{ decision: "approved" }`} + + + In:{' '} + {`{ score: 742, amount: $85K }`} + + + Out:{' '} + {`{ decision: "approved" }`} + - - In: {`{ rate: 5.2%, term: 30yr }`} - Out: {`{ offerId: "OFF-1192" }`} + + + In:{' '} + {`{ rate: 5.2%, term: 30yr }`} + + + Out:{' '} + {`{ offerId: "OFF-1192" }`} + - - In: {`{ amount: $85,000 }`} - Out: {`{ txId: "ACH-5510", ok: true }`} + + + In:{' '} + {`{ amount: $85,000 }`} + + + Out:{' '} + {`{ txId: "ACH-5510", ok: true }`} + - - In: {`{ reason: "DTI > 43%" }`} - Out: {`{ letter: "REJ-4410" }`} + + + In:{' '} + {`{ reason: "DTI > 43%" }`} + + + Out:{' '} + {`{ letter: "REJ-4410" }`} + - - In: {`{ flag: "income_mismatch" }`} - Out: {`{ override: "approve" }`} + + + In:{' '} + {`{ flag: "income_mismatch" }`} + + + Out:{' '} + {`{ override: "approve" }`} + - - status: disbursed + + + status: disbursed + - + ) } diff --git a/packages/homepage/components/bridges/walkthrough-svg.tsx b/packages/homepage/components/bridges/walkthrough-svg.tsx index fd7386d..5b0e159 100644 --- a/packages/homepage/components/bridges/walkthrough-svg.tsx +++ b/packages/homepage/components/bridges/walkthrough-svg.tsx @@ -1,4 +1,5 @@ import type { RippleObj } from './simulation-data' +import { FlowSvgShell } from './flow-svg-shell' export interface WalkthroughSvgProps { isActive: boolean @@ -7,104 +8,281 @@ export interface WalkthroughSvgProps { export function WalkthroughSvg({ isActive, wtRipples }: WalkthroughSvgProps) { return ( - - - - - - - - - - - {/* Lane backgrounds */} - - - - - {/* Lane labels */} - RECEPTION - TRIAGE - CLINICAL - + {/* ALL edges */} - - - - - - - - - + + + + + + + + + {/* Edge labels */} - urgent - routine + + urgent + + + routine + {/* ALL nodes */} {/* Check In (action) */} - - - ACTION - Check In + + + + ACTION + + + Check In + {/* Verify Insurance (action) */} - - - ACTION - Verify Insurance + + + + ACTION + + + Verify Insurance + {/* Initial Assessment (action) */} - - - ACTION - Initial Assessment + + + + ACTION + + + Initial Assessment + {/* Priority Rating (switch) */} - - - SWITCH - Priority + + + + SWITCH + + + Priority + {/* Emergency Prep (action) */} - - - ACTION - Emergency Prep + + + + ACTION + + + Emergency Prep + {/* Doctor Review (action) */} - - - ACTION - Doctor Review + + + + ACTION + + + Doctor Review + {/* Schedule Appointment (action) */} - - - ACTION - Schedule Appt + + + + ACTION + + + Schedule Appt + {/* End (terminal) */} - - - End - - - {/* Ripple layer */} - - {wtRipples.map(r => ( - - ))} + + + + End + - + ) } diff --git a/packages/homepage/components/bridges/what-if-svg.tsx b/packages/homepage/components/bridges/what-if-svg.tsx index 31c8007..0795444 100644 --- a/packages/homepage/components/bridges/what-if-svg.tsx +++ b/packages/homepage/components/bridges/what-if-svg.tsx @@ -1,4 +1,5 @@ import type { RippleObj } from './simulation-data' +import { FlowSvgShell } from './flow-svg-shell' export interface WhatIfSvgProps { isActive: boolean @@ -7,112 +8,294 @@ export interface WhatIfSvgProps { export function WhatIfSvg({ isActive, wiRipples }: WhatIfSvgProps) { return ( - - - - - - - - - - - - - - {/* Lane backgrounds */} - - - - - {/* Lane labels */} - CLAIMANT - ADJUSTER - SETTLEMENT - + {/* ALL edges */} - - - - - - - - + + + + + + + + {/* Edge labels */} - approve - investigate + + approve + + + investigate + {/* ALL nodes */} {/* File Claim (action) */} - - - ACTION - File Claim + + + + ACTION + + + File Claim + {/* Submit Evidence (action) */} - - - ACTION - Submit Evidence + + + + ACTION + + + Submit Evidence + {/* Review Claim (action) */} - - - ACTION - Review Claim + + + + ACTION + + + Review Claim + {/* Assess Damage (switch) */} - - - SWITCH - Assess + + + + SWITCH + + + Assess + {/* Calculate Payout (action) */} - - - ACTION - Calculate Payout + + + + ACTION + + + Calculate Payout + {/* Issue Payment (action) */} - - - ACTION - Issue Payment + + + + ACTION + + + Issue Payment + {/* End (terminal) */} - - - End + + + + End + {/* Fraud Check (action) — investigate path, hidden by default */} - - - ACTION - Fraud Check - - - {/* Ripple layer */} - - {wiRipples.map(r => ( - - ))} + + + + ACTION + + + Fraud Check + {/* Error tooltip for what-if mode */} - - {'\u26A0'} Alert: Suspicious pattern — duplicate claim #CLM-7829 + + + {'\u26A0'} Alert: Suspicious pattern — duplicate claim + #CLM-7829 + - + ) }