# ConnectSection

> The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).

## Facts

- **Product**: Crew OS
- **Family**: Marketing
- **Global**: `window.DigitalCrew.ConnectSection`
- **Source**: `digitalcrew-orchestrator: components/ui/connect-section.tsx`
- **Import in the app**: `import ConnectSection from "@/components/ui/connect-section";`
- **Live preview**: /design/components/connect-section/preview.html
- **Page**: /design/components/connect-section

## 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`](/design/components/cosmic-synapse-canvas.md), 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).

## API

```ts
export default function ConnectSection(): JSX.Element;
```

## Example

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

- [BentoSection](/design/components/bento-section.md): 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.
- [BrandBadge](/design/components/brand-badge.md): A rounded pill in any brand colour, in three weights: solid, outline and subtle.
- [BrandIconSet](/design/components/brand-icon-set.md): The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.
- [BrandStatCard](/design/components/brand-stat-card.md): A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [CpuSuperposition](/design/components/cpu-superposition.md): The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CrewNetwork](/design/components/crew-network.md): The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
- [CTASection](/design/components/cta-section.md): The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md): The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.
- [SectionHeader](/design/components/section-header.md): The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.
- [SocialProofTestimonials](/design/components/social-proof-testimonials.md): A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.