Marketing

CpuSuperposition

The features block of the Crew OS landing page: the CpuArchitecture circuit on top, overlapping the five glowing value cards of FeaturesGridWithGlowingEffect below it.

Crew OSMarketingMarkdown

Open

Usage#

Use it for the #features anchor of the landing page. It takes no props (exported here as CpuSuperposition; the source's default export is PageAvecSuperposition). The grid is loaded client-side only (next/dynamic with ssr: false).

Anatomy: a relative panel, 16px padding, rounded-xl, bg-accent/20, at least 500px tall (650px from sm, 800px from md). The circuit sits in a max-w-5xl centred column at z-10 and pulls the grid up by 20px (30px from sm, 150px from md) so the traces run into the cards; the grid sits above at z-20 with 8px side padding.

Behaviour: the circuit draws in and its light pulses loop; the cards glow toward the pointer (see CpuArchitecture and FeaturesGridWithGlowingEffect). On light themes the circuit's text-muted traces are faint by design; the chip and pulses carry it.

Don't place other content between the circuit and the grid (the overlap is tuned), or use it twice on a page (the circuit's SVG ids are global).

Facts#

ProductCrew OS

FamilyMarketing

Globalwindow.DigitalCrew.CpuSuperposition

Sourcedigitalcrew-orchestrator: components/sections/cpu-superposition.tsx

Import in the appimport CpuSuperposition from "@/components/sections/cpu-superposition";

API#

TypeScript declarations emitted from components/sections/cpu-superposition.tsx.

export default function PageAvecSuperposition(): 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(DC.CpuSuperposition); }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>