SectionHeader

Guidelines#

Use it for the top of landing-page sections (bento, FAQ, testimonials, features), so they share one rhythm.

What you provide: children only. Crew OS passes, in order, an optional eyebrow (text-muted-foreground text-xs uppercase tracking-[0.2em] font-medium text-center), an h2 (text-3xl md:text-4xl font-medium tracking-tighter text-center text-balance) and an optional lede (text-muted-foreground text-center text-balance font-medium). Copy comes from the next-intl messages of each section.

Anatomy: full width and height, a 1px border-b, 40px padding (56px from md). Content is a centred column, at most 576px wide (max-w-xl), with 8px gaps. Sections usually wrap it in border-x rails so the rule meets them.

Behaviour: static.

Don't put buttons or forms in it (they belong in the section body), left-align it, or nest two headers in one section.

Facts#

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

API#

TypeScript declarations emitted from components/section-header.tsx.

interface SectionHeaderProps {
    children: React.ReactNode;
}
export declare function SectionHeader({ children }: SectionHeaderProps): 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: "border-x" },
      h(DC.SectionHeader, null,
        h("p", { className: "text-muted-foreground text-center text-xs font-medium tracking-[0.2em] uppercase" }, "Your digital workers"),
        h("h2", { className: "pb-1 text-center text-3xl font-medium tracking-tighter text-balance md:text-4xl" }, "Empower your team with Digital Workers"),
        h("p", { className: "text-muted-foreground text-center font-medium text-balance" }, "Ask your Digital Workers for real-time collaboration, seamless integrations, and actionable insights to run your operations.")));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Marketing#