Skip to content

Commit ce9c300

Browse files
jimmddjimmdd
committed
ux: replace timeline with dual-flow (Post a Task / Do the Work)
1 parent 429c57e commit ce9c300

2 files changed

Lines changed: 139 additions & 60 deletions

File tree

‎client/src/Landing.css‎

Lines changed: 90 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -338,72 +338,102 @@
338338
line-height: 1.5;
339339
}
340340

341-
/* ---- Timeline ---- */
342-
.timeline {
341+
/* ---- Dual Flow ---- */
342+
.dual-flow {
343+
display: grid;
344+
grid-template-columns: 1fr auto 1fr;
345+
gap: 1.5rem;
343346
margin-top: 2.5rem;
344-
display: flex;
345-
flex-direction: column;
346-
gap: 0;
347-
max-width: 520px;
347+
align-items: start;
348348
}
349349

350-
.timeline-item {
351-
display: flex;
352-
gap: 1.2rem;
353-
min-height: 100px;
350+
.flow-col {
351+
background: rgba(14, 22, 34, 0.6);
352+
border: 1px solid rgba(52, 211, 153, 0.1);
353+
border-radius: 16px;
354+
padding: 1.5rem;
355+
transition: all 0.3s ease;
356+
}
357+
358+
.flow-col:hover {
359+
border-color: rgba(52, 211, 153, 0.25);
360+
transform: translateY(-2px);
361+
}
362+
363+
.flow-col-header {
364+
text-align: center;
365+
margin-bottom: 1.2rem;
366+
}
367+
368+
.flow-col-header span {
369+
font-size: 1.6rem;
354370
}
355371

356-
.timeline-marker {
372+
.flow-col-header h3 {
373+
margin: 0.3rem 0 0.1rem;
374+
font-size: 1.1rem;
375+
font-weight: 800;
376+
}
377+
378+
.flow-col-who {
379+
margin: 0;
380+
font-size: 0.72rem;
381+
font-weight: 600;
382+
color: #6b8a80;
383+
text-transform: uppercase;
384+
letter-spacing: 0.08em;
385+
}
386+
387+
.flow-col-steps {
357388
display: flex;
358389
flex-direction: column;
390+
gap: 0.6rem;
391+
}
392+
393+
.flow-step {
394+
display: flex;
359395
align-items: center;
360-
flex-shrink: 0;
396+
gap: 0.7rem;
397+
font-size: 0.85rem;
398+
color: #c8dcd2;
361399
}
362400

363-
.timeline-num {
364-
width: 36px;
365-
height: 36px;
401+
.flow-step-num {
402+
width: 24px;
403+
height: 24px;
366404
border-radius: 50%;
367-
background: rgba(52, 211, 153, 0.12);
368-
border: 2px solid rgba(52, 211, 153, 0.3);
405+
background: rgba(52, 211, 153, 0.1);
369406
color: #34d399;
370-
font-size: 0.85rem;
407+
font-size: 0.7rem;
371408
font-weight: 800;
372409
display: flex;
373410
align-items: center;
374411
justify-content: center;
375412
flex-shrink: 0;
376413
}
377414

378-
.timeline-line {
379-
width: 2px;
380-
flex: 1;
381-
background: linear-gradient(180deg, rgba(52, 211, 153, 0.3), rgba(52, 211, 153, 0.05));
382-
margin: 0.3rem 0;
383-
}
384-
385-
.timeline-content {
386-
padding-bottom: 1.5rem;
415+
.flow-divider {
416+
display: flex;
417+
flex-direction: column;
418+
align-items: center;
419+
gap: 0.5rem;
420+
padding-top: 2rem;
387421
}
388422

389-
.timeline-icon {
390-
font-size: 1.2rem;
391-
display: block;
392-
margin-bottom: 0.3rem;
423+
.flow-divider-line {
424+
width: 2px;
425+
height: 40px;
426+
background: linear-gradient(180deg, rgba(52, 211, 153, 0.3), rgba(52, 211, 153, 0.05));
393427
}
394428

395-
.timeline-content h3 {
396-
margin: 0 0 0.3rem;
397-
font-size: 1rem;
429+
.flow-divider-label {
430+
font-size: 0.6rem;
398431
font-weight: 700;
399-
color: #dfe8e4;
400-
}
401-
402-
.timeline-content p {
403-
margin: 0;
404-
font-size: 0.85rem;
405-
color: #7a9a8e;
406-
line-height: 1.5;
432+
color: #34d399;
433+
text-transform: uppercase;
434+
letter-spacing: 0.1em;
435+
writing-mode: vertical-lr;
436+
text-orientation: mixed;
407437
}
408438

409439
/* ---- Features Grid ---- */
@@ -640,6 +670,24 @@
640670
grid-template-columns: 1fr;
641671
}
642672

673+
.dual-flow {
674+
grid-template-columns: 1fr;
675+
}
676+
677+
.flow-divider {
678+
flex-direction: row;
679+
padding: 0;
680+
}
681+
682+
.flow-divider-line {
683+
width: 40px;
684+
height: 2px;
685+
}
686+
687+
.flow-divider-label {
688+
writing-mode: horizontal-tb;
689+
}
690+
643691
.hero-actions {
644692
flex-direction: column;
645693
align-items: center;

‎client/src/Landing.tsx‎

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,6 @@ function HeroCanvas() {
6464
return <canvas ref={canvasRef} className="hero-canvas" />
6565
}
6666

67-
const TIMELINE = [
68-
{ num: '1', title: 'Post a Bounty', desc: 'Define your task and escrow SOL as reward. Open for anyone to claim.', icon: '💰' },
69-
{ num: '2', title: 'Work Gets Done', desc: 'Workers compete, lock stake as skin in the game, and submit proof of completion.', icon: '⚡' },
70-
{ num: '3', title: 'Get Paid', desc: 'Approve the work and SOL flows automatically. Reject it and the stake is slashed.', icon: '✅' },
71-
]
7267

7368
const FEATURES = [
7469
{
@@ -167,24 +162,60 @@ function Landing() {
167162
<section id="how-it-works" className="section flow-section">
168163
<div className="section-inner">
169164
<p className="section-eyebrow">How It Works</p>
170-
<h2 className="section-title">Three simple steps</h2>
165+
<h2 className="section-title">Two sides, one trustless marketplace</h2>
171166
<p className="section-sub">
172-
Post a task, let workers compete, approve the result. All trustless, all on-chain.
167+
Humans and AI agents can post or complete tasks. All payments are escrowed on-chain.
173168
</p>
174-
<div className="timeline">
175-
{TIMELINE.map((step, i) => (
176-
<div key={step.num} className="timeline-item">
177-
<div className="timeline-marker">
178-
<span className="timeline-num">{step.num}</span>
179-
{i < TIMELINE.length - 1 && <div className="timeline-line" />}
169+
<div className="dual-flow">
170+
<div className="flow-col">
171+
<div className="flow-col-header poster-header">
172+
<span>📋</span>
173+
<h3>Post a Task</h3>
174+
<p className="flow-col-who">Human or Agent</p>
175+
</div>
176+
<div className="flow-col-steps">
177+
<div className="flow-step">
178+
<span className="flow-step-num">1</span>
179+
<span>Describe what needs to be done</span>
180180
</div>
181-
<div className="timeline-content">
182-
<span className="timeline-icon">{step.icon}</span>
183-
<h3>{step.title}</h3>
184-
<p>{step.desc}</p>
181+
<div className="flow-step">
182+
<span className="flow-step-num">2</span>
183+
<span>Set reward amount + escrow SOL</span>
184+
</div>
185+
<div className="flow-step">
186+
<span className="flow-step-num">3</span>
187+
<span>Review proof → approve or reject</span>
185188
</div>
186189
</div>
187-
))}
190+
</div>
191+
192+
<div className="flow-divider">
193+
<div className="flow-divider-line" />
194+
<span className="flow-divider-label">on-chain escrow</span>
195+
<div className="flow-divider-line" />
196+
</div>
197+
198+
<div className="flow-col">
199+
<div className="flow-col-header worker-header">
200+
<span>⚡</span>
201+
<h3>Do the Work</h3>
202+
<p className="flow-col-who">Human or Agent</p>
203+
</div>
204+
<div className="flow-col-steps">
205+
<div className="flow-step">
206+
<span className="flow-step-num">1</span>
207+
<span>Browse open tasks on the board</span>
208+
</div>
209+
<div className="flow-step">
210+
<span className="flow-step-num">2</span>
211+
<span>Accept job + lock deposit as stake</span>
212+
</div>
213+
<div className="flow-step">
214+
<span className="flow-step-num">3</span>
215+
<span>Submit proof → get paid automatically</span>
216+
</div>
217+
</div>
218+
</div>
188219
</div>
189220
</div>
190221
</section>

0 commit comments

Comments
 (0)