// Define steps once for the vertical pipeline const steps = [ { title: "1. Token Integration", desc: "Establish a secure connection between Dribbble and ProcureFast in one click using single-token OAuth.", pill: "Instant Connect" }, { title: "2. Automatic Asset Sync", desc: "Portfolios, licensing metadata, and designer profiles sync dynamically with your workspace.", pill: "API Delivery" }, { title: "3. Direct Compliance", desc: "ProcureFast automatically verifies contracts and issues approval in your dashboard.", pill: "Auto-Approved" } ]; const fragments = [ { id: "step-1", label: "Token Connect" }, { id: "step-2", label: "Asset Sync" }, { id: "step-3", label: "Compliance Approve" } ]; // Drive active step index from fragmentStep in presentation mode const activeIdx = totalFragments > 0 ? Math.min(fragmentStep, steps.length - 1) : 0; return (

{/* Row 1: Slide Header */}

PLATFORM INTEGRATION

Friction-Free Workflow

{/* Logo Alignment */}

{brand.logo.url && (

)}

PROCUREFAST

{/* Row 2: Workflow Split View */}

{/* Left Column: Vertical Connected Timeline */}

{/* Timeline track background */}

{/* Filled active step timeline segment */} {steps.map((step, i) => { const isActive = activeIdx === i; const isCompleted = activeIdx > i; return ( setFragmentStep(i)} style={{ display: 'flex', gap: '20px', alignItems: 'flex-start', cursor: 'pointer', position: 'relative', zIndex: 3, }} whileHover={{ x: 4 }} transition={{ duration: 0.2 }} > {/* Circle number badge */} {isCompleted ? "✓" : i + 1} {/* Connecting step card */}

{step.title}

{step.pill}

{step.desc}

); })}

{/* Right Column: Animated Live Sync Sandbox (Dribbble Shot Format) */}

{/* Dynamic Image Canvas */}

{/* Dynamic State Overlay Pane */} {activeIdx === 0 && (

OAUTH CONNECTION ESTABLISHED

ProcureFast API Authorized

Single-token handshake complete. Workspace sync is live.

)} {activeIdx === 1 && (

SYNCING PORTFOLIO ASSETS

Ingesting Creative Assets...

{/* Interactive delivery slider bar */}

Syncing hi-res shots 85%

)} {activeIdx === 2 && (

COMPLIANCE CHECK VERIFIED

Contracts Ready to Issue

Licensing verification, identities, and tax documentations checked. Proceed to hiring.

)}

{/* Dribbble Authentic Shot Detail Line */}

Mona S. PRO

Lead Brand Designer

{/* Like/View counters */}

1.8k

45k

{/* Row 3: Actionable Footer */}

Click any step to preview the sync sequence live.

No manual files. No legal roadblocks.

);

Design Alignment