ConnectSection

Guidelines#

Use it for the integrations and memory story on the landing page. It takes no props: copy comes from the connectContext, stackFeature and contextMemory messages; the "Browse all integrations" link goes to /<locale>/integrations.

Anatomy: the panel is max-w-6xl, rounded-3xl, bg-white (dark:bg-black), with 64/96/128px vertical margins. The heading is text-3xl sm:text-5xl lg:text-6xl font-bold, the lede text-gray-500. Each row is 416px tall from md (26rem), split in halves with a border-gray-200 divider between rows. Tools: three dotted border-gray-300 orbits (width 20, 28 and 36rem) spinning at 12s, 18s and 24s per turn, carrying fifteen integration logos (X, Docker, Notion, Google Drive, Intercom, Odoo, GitHub, HubSpot, MCP, Linear, Chatwoot, Looker, Aircall, Google Ads, Figma) in white rounded chips (gray-800 in dark mode, logos inverted) around a 96px mark; the orbit centre sits off the right edge on desktop. Knowledge: the neuron sphere fills its half.

Behaviour: the orbits spin linearly and forever and the sphere rotates and fires (see CosmicSynapseCanvas, which reads html.dark; this preview mirrors the theme onto that class). Neither checks reduced motion. Logos are stored assets and may not load in local renders.

Don't add more logos than three orbits hold (five each), or place it on a background that is not white/black (the panel colours are fixed).

Facts#

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

API#

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

export default function ConnectSection(): 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;
  // The neuron sphere picks its greys from html.dark (next-themes); mirror this page's theme onto that class.
  var de = document.documentElement;
  function syncDark() { de.classList.toggle("dark", /-dark$/.test(de.getAttribute("data-theme") || "")); }
  syncDark(); new MutationObserver(syncDark).observe(de, { attributes: true, attributeFilter: ["data-theme"] });
  function App() { return h(DC.ConnectSection); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Marketing#