CTASection

Guidelines#

Use it for the end of a landing page or a docs page, once. It takes no props: heading, description and button text come from the cta.contact messages ("Still have questions?", "Contact Our Team").

Anatomy: centred, at most 896px wide (max-w-4xl), rounded-lg (rounded-xl from md), 24px padding (32px from md, 40px from lg), bg-gradient-to-br from-neutral-600 to-neutral-800. The avatar is a round 80px video (96px from md) with a 2px white/50 border on bg-white/20 with a backdrop blur. The heading is text-xl md:text-2xl lg:text-3xl font-semibold in white; the line is text-white/80, text-base lg:text-lg. The button is a GlassButton size="lg", !bg-black text-white hover:!bg-white/90, full width on phones, rendered as a link to /contact in a new tab.

Behaviour: the video autoplays muted and looped. It is hosted remotely (auroras.tech) and does not load in this preview, so the avatar shows as an empty frosted circle, which still reads as intended.

Don't add a second button, change the gradient per theme (the panel is dark in both), or use it above the fold.

Facts#

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

API#

TypeScript declarations emitted from components/sections/cta-section.tsx.

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

More in Marketing#