# CTASection

> 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.

## Facts

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

## 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`](/design/components/glass-button.md) `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.

## API

```ts
export declare function CTASection(): JSX.Element;
```

## Example

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

- [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.
- [ConnectSection](/design/components/connect-section.md): 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).
- [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.
- [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.