# 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.

## Facts

- **Product**: Crew OS
- **Family**: Marketing
- **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";`
- **Live preview**: /design/components/crew-network/preview.html
- **Page**: /design/components/crew-network

## 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.

## API

```ts
export default function CrewNetwork(): JSX.Element;
```

## Example

```html
<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>
```

## More in Marketing

- [BentoSection](/design/components/bento-section.md): The landing-page bento: a `SectionHeader` over a two-by-two grid of animated tiles (collaboration, security, insights, automation), each with a title and description.
- [BrandBadge](/design/components/brand-badge.md): A rounded pill in any brand colour, in three weights: solid, outline and subtle.
- [BrandIconSet](/design/components/brand-icon-set.md): The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.
- [BrandStatCard](/design/components/brand-stat-card.md): A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [ConnectSection](/design/components/connect-section.md): The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).
- [CpuSuperposition](/design/components/cpu-superposition.md): The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CTASection](/design/components/cta-section.md): The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md): The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.
- [SectionHeader](/design/components/section-header.md): The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.
- [SocialProofTestimonials](/design/components/social-proof-testimonials.md): A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.