Context
On the homepage feature sections, 02 (Format) and 03 (Extract) show a $ FORMAT / $ EXTRACT chip stacked above an arrow that bridges the Before and After code panes. This makes the command-driven transformation obvious at a glance.
Section 01 (Find / list) has the same command-execution semantics — py-sql-cleaner list jobs/ runs against the input Python files and produces the list output — but no analogous indicator exists between the input CodePane and the TerminalListPreview in the right-side preview.
Proposal
Add a vertical bridge between the two right-side elements in section 01 with:
- A
$ LIST chip (matching the styling of .previewBridgeLabel already used in 02/03)
- A downward chevron (reuse
.workflowConnector styling from the hero workflow, or a small dedicated component)
This will visually align section 01 with 02/03 and reinforce that a command is what transforms the input into the output.
Files to touch
website/src/pages/index.tsx — wrap the contents of findPreview (or factor out a <VerticalBridge> component shared with the hero WorkflowConnector)website/src/pages/index.module.css — add the vertical bridge label + chevron styling, reusing existing CSS variables
Acceptance
- Section 01's right preview shows a labeled run-command indicator between the example input and the list output.
- The visual treatment is consistent with the bridges in sections 02 and 03.
- Build and existing layout responsiveness (mobile collapse) are preserved.
Context
On the homepage feature sections, 02 (Format) and 03 (Extract) show a
$ FORMAT/$ EXTRACTchip stacked above an arrow that bridges the Before and After code panes. This makes the command-driven transformation obvious at a glance.Section 01 (Find / list) has the same command-execution semantics —
py-sql-cleaner list jobs/runs against the input Python files and produces the list output — but no analogous indicator exists between the input CodePane and the TerminalListPreview in the right-side preview.Proposal
Add a vertical bridge between the two right-side elements in section 01 with:
$ LISTchip (matching the styling of.previewBridgeLabelalready used in 02/03).workflowConnectorstyling from the hero workflow, or a small dedicated component)This will visually align section 01 with 02/03 and reinforce that a command is what transforms the input into the output.
Files to touch
website/src/pages/index.tsx— wrap the contents offindPreview(or factor out a<VerticalBridge>component shared with the heroWorkflowConnector)website/src/pages/index.module.css— add the vertical bridge label + chevron styling, reusing existing CSS variablesAcceptance