Marketing
SectionSolutions
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.
Guidelines#
Use it for presenting the agent line-up on the Crew OS landing page. It takes no props: copy comes from the solutions messages, colours and videos from AGENT_PALETTES and AGENT_MEDIA. Sophie, Claire, Max and Kate are online; Camille and André show "Coming soon".
Anatomy: 96px vertical padding, up to 1480px wide. The heading is 200-weight, up to 56px, with its last word at 800. Roster rows: mono 11px index, name in 800-weight caps (19–24px), title in 11px mono caps, --line dividers; the active row gets a 3px accent spine and a 7% accent wash. The dossier is a two-column card with a 16px radius, accent-tinted border and glow, a status badge, a ghost numeral, mono skill chips (accent at 12%, fully rounded) and a pill button in --ink. Below 961px it becomes a snap carousel with numbered dots.
Behaviour: on screen it moves on every 6s while a 2px bar fills the active row; a click stops autoplay for good. The card rises in over 480ms; transitions take 240ms on cubic-bezier(0.16, 1, 0.3, 1). Reduced motion turns autoplay and these animations off. Agent videos are remote and do not load here, so cards show the agent's initial, the built-in fallback.
Don't change the agent list without its messages.
Facts#
| Group | Marketing |
|---|---|
| Product | Crew OS |
| Global | window.DigitalCrew.SectionSolutions |
| Source | digitalcrew-orchestrator: components/sections/solutions.tsx |
| Import in the app | import SectionSolutions from "@/components/sections/solutions"; |
API#
TypeScript declarations emitted from components/sections/solutions.tsx (the module also exports SectionSolutions).
export default function SectionSolutions(): 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.SectionSolutions); }
ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>