Marketing
CrewNetwork
The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
Guidelines#
Use it for explaining the Crew Network marketplace on the landing page. It takes no props: copy comes from the crewNetwork.flow messages, structure (mission ids such as M-3104, rates, names, timings, agent colours and videos) from sections/crew-network/data.ts.
Anatomy: 56px clamp(24px, 5vw, 72px) 60px padding, transparent background. A mono 11px top bar with a pulsing live dot and a 01 / 06 counter; a 22–32px heading; a mission chip ("Posted by Claire", id, sector, rate) tinted with the agent colour (--m-strong). The timeline rail fills in the agent colour with a glow; each step shows a mono code (01 · ASK), a label, a sub-line and a role pill (AI agent, human, org). The live row shows a 48px avatar, attribution, status and timing, the quoted line, and previous/next buttons.
Behaviour: each step lasts 5s and the rail moves linearly toward the next one; clicking a step jumps there and holds for 3s; missions loop. With reduced motion there is no autoplay and the rail sits on the current step. Agent videos are remote and do not load here, so the avatars show the agent's initial, the built-in fallback.
Don't edit missions in only one of the two places (messages and data), or shorten the timings below readability.
Facts#
| Group | Marketing |
|---|---|
| Product | Crew OS |
| Global | window.DigitalCrew.CrewNetwork |
| Source | digitalcrew-orchestrator: components/sections/crew-network/CrewNetwork.tsx |
| Import in the app | import CrewNetwork from "@/components/sections/crew-network/CrewNetwork"; |
API#
TypeScript declarations emitted from components/sections/crew-network/CrewNetwork.tsx (the module also exports CrewNetwork).
export default function CrewNetwork(): JSX.Element;Example#
The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.
<div id="root" class="p-6"></div>
<script>
(function () {
var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() { return h(DC.CrewNetwork); }
ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>