Skip to content

Commit cebda62

Browse files
marcusclaude
marcus
and
claude
committed
feat: Redesign workflow section with human-AI collaboration flow
- Replace linear workflow with 2-column interaction design - Left column: human actions (create backlog, review, monitor) - Right column: agent actions (pick tasks, handoffs, submit for review) - Show back-and-forth with arrows to illustrate collaboration - Emphasize agents working autonomously in parallel - Highlight enforced review workflow (different session must review) - Add responsive layout for mobile (stacks vertically) 🤖 Generated with Claude Code Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1 parent b8cc41e commit cebda62

File tree

2 files changed

+161
-78
lines changed

2 files changed

+161
-78
lines changed

‎website/src/css/custom.css‎

Lines changed: 91 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -656,70 +656,123 @@ html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
656656
font-family: 'Fraunces', 'Iowan Old Style', 'Palatino', 'Times New Roman', serif;
657657
color: var(--td-text-primary);
658658
font-size: 1.75rem;
659-
margin-bottom: 3rem;
659+
margin-bottom: 1rem;
660660
}
661661

662-
.sc-workflow-step {
663-
display: flex;
664-
align-items: flex-start;
665-
gap: 1.5rem;
666-
padding: 1.5rem 0;
667-
position: relative;
662+
.sc-workflow-columns {
663+
display: grid;
664+
grid-template-columns: 1fr 2px 1fr;
665+
gap: 3rem;
666+
max-width: 1000px;
667+
margin: 0 auto;
668+
align-items: start;
669+
}
670+
671+
.sc-workflow-divider {
672+
width: 2px;
673+
background: linear-gradient(
674+
to bottom,
675+
transparent 0%,
676+
var(--td-border-color) 10%,
677+
var(--td-border-color) 90%,
678+
transparent 100%
679+
);
680+
align-self: stretch;
681+
min-height: 600px;
668682
}
669683

670-
.sc-workflow-step + .sc-workflow-step {
671-
padding-top: 1.5rem;
684+
.sc-workflow-column {
685+
display: flex;
686+
flex-direction: column;
687+
gap: 1.5rem;
672688
}
673689

674-
.sc-workflow-step__number {
675-
flex-shrink: 0;
676-
width: 2.5rem;
677-
height: 2.5rem;
678-
border-radius: 50%;
679-
background-color: var(--td-bg-elevated);
680-
border: 2px solid var(--td-green);
690+
.sc-workflow-column__header {
681691
display: flex;
682692
align-items: center;
683-
justify-content: center;
693+
gap: 0.75rem;
694+
margin-bottom: 0.5rem;
695+
}
696+
697+
.sc-workflow-column__icon {
698+
font-size: 1.5rem;
699+
}
700+
701+
.sc-workflow-column__title {
684702
font-family: 'JetBrains Mono', monospace;
685-
font-size: 0.875rem;
703+
font-size: 1.1rem;
686704
font-weight: 700;
687-
color: var(--td-green);
688-
position: relative;
689-
z-index: 1;
705+
color: var(--td-text-primary);
690706
}
691707

692-
.sc-workflow-step::after {
693-
content: '';
694-
position: absolute;
695-
left: calc(1.25rem - 1px);
696-
top: 4rem;
697-
bottom: 0;
698-
width: 2px;
699-
background: linear-gradient(to bottom, var(--td-green), transparent);
700-
opacity: 0.3;
708+
.sc-workflow-item {
709+
background: var(--td-bg-elevated);
710+
border: 1px solid var(--td-border-color);
711+
border-radius: 8px;
712+
padding: 1rem 1.25rem;
713+
transition: all 0.2s ease;
701714
}
702715

703-
.sc-workflow-step:last-child::after {
704-
display: none;
716+
.sc-workflow-item:hover {
717+
border-color: var(--td-border-color-hover);
718+
background: var(--td-bg-elevated-hover);
705719
}
706720

707-
.sc-workflow-step__content {
708-
flex: 1;
721+
.sc-workflow-item--indent {
722+
margin-left: 1.5rem;
723+
border-left: 3px solid var(--td-green);
709724
}
710725

711-
.sc-workflow-step__title {
726+
.sc-workflow-item__title {
712727
font-family: 'JetBrains Mono', monospace;
713-
font-size: 1rem;
728+
font-size: 0.95rem;
714729
font-weight: 600;
715730
color: var(--td-text-primary);
716731
margin-bottom: 0.25rem;
717732
}
718733

719-
.sc-workflow-step__description {
720-
font-size: 0.875rem;
734+
.sc-workflow-item__desc {
735+
font-size: 0.85rem;
721736
color: var(--td-text-secondary);
722737
line-height: 1.5;
738+
margin-bottom: 0.5rem;
739+
}
740+
741+
.sc-workflow-item__code {
742+
display: block;
743+
font-family: 'JetBrains Mono', monospace;
744+
font-size: 0.75rem;
745+
color: var(--td-green);
746+
background: var(--td-bg-base);
747+
padding: 0.5rem;
748+
border-radius: 4px;
749+
margin-top: 0.5rem;
750+
}
751+
752+
.sc-workflow-arrow {
753+
text-align: center;
754+
color: var(--td-text-muted);
755+
font-size: 1.5rem;
756+
opacity: 0.5;
757+
}
758+
759+
.sc-workflow-spacer {
760+
height: 1rem;
761+
}
762+
763+
@media (max-width: 768px) {
764+
.sc-workflow-columns {
765+
grid-template-columns: 1fr;
766+
gap: 2rem;
767+
}
768+
769+
.sc-workflow-divider {
770+
display: none;
771+
}
772+
773+
.sc-workflow-arrow {
774+
display: none;
775+
}
723776
}
724777

725778
/* =========================================================================

‎website/src/pages/index.js‎

Lines changed: 70 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -173,51 +173,81 @@ function FeatureCards() {
173173
);
174174
}
175175

176-
const workflowSteps = [
177-
{
178-
number: 1,
179-
title: 'Create',
180-
description: 'Define a task with priority, labels, and dependencies.',
181-
command: 'td create "Add OAuth login" -p P1 -l backend',
182-
},
183-
{
184-
number: 2,
185-
title: 'Start',
186-
description: 'Focus your session on a specific issue.',
187-
command: 'td start td-a1b2',
188-
},
189-
{
190-
number: 3,
191-
title: 'Handoff',
192-
description: 'Record progress so the next session picks up cleanly.',
193-
command: 'td handoff td-a1b2 --done "OAuth callback" --remaining "Refresh tokens"',
194-
},
195-
{
196-
number: 4,
197-
title: 'Review',
198-
description: 'A different session reviews and closes the issue.',
199-
command: 'td review td-a1b2 --approve',
200-
},
201-
];
202-
203176
function WorkflowSection() {
204177
return (
205178
<section className="sc-workflow-section">
206179
<div className="sc-section-container">
207-
<h2 className="sc-workflow-section__title">The workflow</h2>
208-
<div style={{ maxWidth: 650, margin: '0 auto' }}>
209-
{workflowSteps.map((step, idx) => (
210-
<div className="sc-workflow-step" key={idx}>
211-
<div className="sc-workflow-step__number">{step.number}</div>
212-
<div className="sc-workflow-step__content">
213-
<div className="sc-workflow-step__title">{step.title}</div>
214-
<div className="sc-workflow-step__description">{step.description}</div>
215-
<code style={{ display: 'block', marginTop: '0.5rem', fontSize: '0.8rem', color: 'var(--td-green)' }}>
216-
{step.command}
217-
</code>
218-
</div>
180+
<h2 className="sc-workflow-section__title">How it works</h2>
181+
<p style={{ textAlign: 'center', color: 'var(--td-text-secondary)', maxWidth: 700, margin: '0 auto 3rem', fontSize: '1.05rem' }}>
182+
You build the backlog. Agents work through it autonomously—in parallel, with handoffs and enforced review.
183+
</p>
184+
185+
<div className="sc-workflow-columns">
186+
<div className="sc-workflow-column">
187+
<div className="sc-workflow-column__header">
188+
<span className="sc-workflow-column__icon">👤</span>
189+
<span className="sc-workflow-column__title">You</span>
219190
</div>
220-
))}
191+
192+
<div className="sc-workflow-item">
193+
<div className="sc-workflow-item__title">Create backlog</div>
194+
<div className="sc-workflow-item__desc">Define epics, break into tasks, set priorities</div>
195+
<code className="sc-workflow-item__code">td create "OAuth login" -p P1</code>
196+
</div>
197+
198+
<div className="sc-workflow-arrow">→</div>
199+
200+
<div className="sc-workflow-spacer" />
201+
202+
<div className="sc-workflow-arrow">←</div>
203+
204+
<div className="sc-workflow-item">
205+
<div className="sc-workflow-item__title">Review & approve</div>
206+
<div className="sc-workflow-item__desc">Verify work, request changes, or approve</div>
207+
<code className="sc-workflow-item__code">td approve td-a1b2</code>
208+
</div>
209+
210+
<div className="sc-workflow-spacer" />
211+
212+
<div className="sc-workflow-item">
213+
<div className="sc-workflow-item__title">Monitor in real-time</div>
214+
<div className="sc-workflow-item__desc">Watch agents work across sessions</div>
215+
<code className="sc-workflow-item__code">td monitor</code>
216+
</div>
217+
</div>
218+
219+
<div className="sc-workflow-divider" />
220+
221+
<div className="sc-workflow-column">
222+
<div className="sc-workflow-column__header">
223+
<span className="sc-workflow-column__icon">🤖</span>
224+
<span className="sc-workflow-column__title">Agents</span>
225+
</div>
226+
227+
<div className="sc-workflow-spacer" />
228+
229+
<div className="sc-workflow-arrow">←</div>
230+
231+
<div className="sc-workflow-item">
232+
<div className="sc-workflow-item__title">Pick up tasks</div>
233+
<div className="sc-workflow-item__desc">Start work, handle in parallel if ready</div>
234+
<code className="sc-workflow-item__code">td start td-a1b2</code>
235+
</div>
236+
237+
<div className="sc-workflow-item sc-workflow-item--indent">
238+
<div className="sc-workflow-item__title">Do handoffs</div>
239+
<div className="sc-workflow-item__desc">Record progress for next session</div>
240+
<code className="sc-workflow-item__code">td handoff --done "..." --remaining "..."</code>
241+
</div>
242+
243+
<div className="sc-workflow-item sc-workflow-item--indent">
244+
<div className="sc-workflow-item__title">Submit for review</div>
245+
<div className="sc-workflow-item__desc">Different agent/session must review</div>
246+
<code className="sc-workflow-item__code">td review td-a1b2</code>
247+
</div>
248+
249+
<div className="sc-workflow-arrow">→</div>
250+
</div>
221251
</div>
222252
</div>
223253
</section>

0 commit comments

Comments
 (0)