Marketing

BentoSection

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.

Crew OSMarketingMarkdown

Open

Usage#

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#

ProductCrew OS

FamilyMarketing

Globalwindow.DigitalCrew.BentoSection

Sourcedigitalcrew-orchestrator: components/sections/bento-section.tsx

Import in the appimport { BentoSection } from "@/components/sections/bento-section";

API#

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

export declare function BentoSection(): JSX.Element;

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

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