FeatureSection

Guidelines#

Use it for introducing the Crew Network on the landing page (#crew-network). It takes no props: headline, rich description and stats (42 min, 5–25 %, 24 tz) come from the crewNetwork messages. It reads the theme through next-themes, so wrap it in a theme provider (DC.PageThemeProvider in this bundle).

Anatomy: max-w-7xl with 16/24/40px side padding. The headline block is at least 280px tall (420px from sm, 640px from md, 760px from lg); the heading is font-medium tracking-tighter leading-[0.92] at clamp(2rem, 10vw, 8.5rem) (9.5rem from xl), the middle line font-light text-zinc-400 (white/30 in dark mode). The globe fills the block's height on the right. Below a rule: the description and three stats (text-3xl sm:text-4xl font-semibold values, 10–11px uppercase labels).

Behaviour: cobe renders 22,000 samples; 44 city markers (13px glowing dots) and 28 fixed arcs are projected over it every frame, fading at the limb. Each arc carries a pulse on a 4.5s loop. The globe turns 0.0015 rad per frame, can be dragged and fades in over 700ms. Light themes use dark markers on a light grey globe, dark themes white on grey. Without WebGL the globe is skipped. (Headless renders with SwiftShader draw the sphere without its dots.)

Don't layer other content behind the headline, or omit the theme provider (it would assume dark).

Facts#

Group	Marketing
Product	Crew OS
Global	window.DigitalCrew.FeatureSection
Source	digitalcrew-orchestrator: components/ui/feature-section.tsx
Import in the app	import FeatureSection from "@/components/ui/feature-section";

API#

TypeScript declarations emitted from components/ui/feature-section.tsx (the module also exports FeatureSection).

export default function FeatureSection(): any;

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.FeatureSection); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(DC.PageThemeProvider, null, h(App))));
})();
</script>

More in Marketing#