BentoSection

Guidelines#

Use it for the "Your Digital Workers" section of the Crew OS landing page. It takes no props: eyebrow, title and the four tiles' copy come from the bento messages; the tiles are FirstBentoAnimation, SecondBentoAnimation, ThirdBentoAnimation (data [20, 30, 25, 45, 40, 55, 75]) and FourthBentoAnimation.

Anatomy: the section has 20px side padding (40px from md) and a bordered column (border-x) flanked by 16px rails (56px from md) of 1px diagonal hatching at 5% primary on a 10px pattern. The header shows the eyebrow (text-xs uppercase tracking-[0.2em]) and a text-3xl md:text-4xl font-medium tracking-tighter title. Tiles form one column, two from md, at least 420px tall (480px from sm, 500px from md), separated by 1px border hairlines drawn with pseudo-elements; each has the animation on top and a 24px-padded text block (text-lg font-semibold tracking-tighter title, text-muted-foreground body).

Behaviour: each tile animates when it scrolls into view (see the four bento cards). The first tile's avatar comes from randomuser.me, unreachable here; its bubble text is low-contrast on light themes.

Don't reorder tiles without their copy keys, or place it inside a container that clips horizontally without overflow-hidden (the hairlines extend to the viewport edge).

Facts#

Group	Marketing
Product	Crew OS
Global	window.DigitalCrew.BentoSection
Source	digitalcrew-orchestrator: components/sections/bento-section.tsx
Import in the app	import { BentoSection } from "@/components/sections/bento-section";

API#

TypeScript declarations emitted from components/sections/bento-section.tsx.

export declare function BentoSection(): 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("div", { className: "overflow-hidden [&_img]:bg-muted [&_img]:text-[0px]" }, h(DC.BentoSection)); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Marketing#