FAQSection

Guidelines#

Use it for the FAQ block near the end of the Crew OS landing page. It takes no props: the title, description and every question and answer come from the faq messages (keys deploy, technical, training, roi, comparison, replacement, integration, security, customization, trial, fees, scaling, support, communityKb, setupTime, complex, performance).

Anatomy: the list is at most 768px wide (max-w-3xl) with 16px side padding (24px from sm, 40px from md) and 8px between items; the section adds 40px gaps and 40px bottom padding. Each question is its own card: 1px border, bg-accent, rounded-lg, px-4 py-3.5, text-sm font-medium, no underline on hover, with a 16px text-muted-foreground chevron; the open question gains a ring-primary/20 ring. The answer sits in a separate bg-accent bordered rounded-lg card, 12px padding, in text-muted-foreground font-medium leading-relaxed.

Behaviour: one question open at a time, and it can be closed again. Answers expand and collapse over 250ms on cubic-bezier(0.22, 1, 0.36, 1); the chevron turns over the same 250ms. (The preview opens the first question.)

Don't add questions in code (add them to the messages and the key list together), or nest links deep in answers.

Facts#

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

API#

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

export declare function FAQSection(): 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() {
    var ref = React.useRef(null);
    // Demo only: open the first question so an answer is visible.
    React.useEffect(function () { var b = ref.current && ref.current.querySelector("[data-slot=accordion-trigger], button[aria-expanded]"); if (b) b.click(); }, []);
    return h("div", { ref: ref }, h(DC.FAQSection));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Marketing#