Section Library / Cluster 07

FAQ

Accordion-based Q&A sections that reduce pre-conversion friction by handling objections in place. Four layout variants cover every page context from landing pages to dedicated FAQ routes.

UTIL-FAQ-01 — FAQ Accordion

FAQ Accordion

P Purpose

Reduces friction at decision time by pre-answering the objections and questions buyers have before they're willing to fill out a form or book a call. Every unanswered question is a reason to leave the page. The categorized variant additionally captures long-tail SEO/GEO queries by structuring questions around topic clusters that search engines can index independently.

W When to Use

  • Bottom-of-page on any service, solution, or landing page — before or after the final CTA
  • Mid-page on long-form pages after pricing or comparison to handle objections inline
  • Dedicated /faq or /support route for SEO capture of long-tail questions
  • Categorized variant: complex services or dedicated FAQ pages where 15–25 questions need structure
  • Not for the top of pages — friction-reducer, not an opener
  • Not twice on the same page

I Required Inputs

  • layout — "two-col" | "single" | "categorized" | "dark"
  • overline — optional mono label, e.g. "Common Questions"
  • headline — max 60 chars, e.g. "Frequently Asked Questions"
  • items[] — 4–10 for simple variants; 3–5 categories × 5 questions for categorized. Each item: question, answer, category (categorized only)
  • emitJsonLd — set true on exactly one FaqAccordion per page to emit FAQPage JSON-LD for SEO rich results

! Do Not

  • Write answers longer than 4 sentences — if it needs more, it's a page, not an FAQ
  • Use more than 10 items in simple variants — signals an unclear offer
  • Use as a keyword dumping ground — trust tool, not SEO hack
  • Put two FAQ sections on the same page
  • Use generic questions like "What does Vstorm do?" — be specific to the page context
  • Start every question with "How" — vary the structure
  • Use fewer than 3 or more than 5 categories in the categorized variant

V Variants

  • Two-Column (default) — items split across 2 columns. Best for 6–10 Q&As on landing pages. Collapses to 1 col at 768px
  • Single Column — centered, max-width 720px, editorial feel. Best for 4–6 items
  • With Categories — sticky left sidebar nav (240px) + right panel. 3–5 categories, ~5 questions each. For /faq routes and SEO/GEO
  • Dark Background — inverted colors on --v-ink. Use inside dark CTA or closing sections

F Typical Page Flow

  • After: Comparison table, pricing, or case study section
  • Before: CTA ending or contact form
  • On service pages: place after the TriStorm process section
  • Categorized variant: primary content block on /faq routes, not mid-page
Live Preview
FAQ

Frequently Asked Questions

How long does a typical engagement take? +
From kickoff to a working agent in production: 3 weeks median. The full TriStorm cycle (Discover → Design → Deploy) runs 6–12 weeks depending on workflow complexity.
Do you work with companies under 50 employees? +
Generally no. Our methodology is tuned for mid-market — companies with 100–2,000 employees and operational complexity that justifies a dedicated agent. Smaller companies are usually better served by off-the-shelf tools.
What stack do you build on? +
Python + LangGraph + your existing infrastructure. We deploy to your cloud (AWS/GCP/Azure) and integrate with your existing data layer. No vendor lock-in.
Can we own the code? +
Yes. You own 100% of the code, the prompts, and the eval suite. We hand it off at the end of the engagement with documentation and training.
Do you offer fixed-price projects? +
Yes. Discovery is fixed-price (2 weeks). Design and Deploy phases are scoped after Discovery, based on the workflow we agree to automate.
What's your pricing model? +
Fixed-price phases. Discovery is $X, Design is $Y, Deploy depends on integration complexity. No retainers, no hourly billing.