feat(docs): turn the landing FAQ into a chat-thread conversation

Merged
IZ
7d ago
+169-180

What

Replaces the accordion FAQ in the shared FaqSection with a chat-thread layout adapted from RareUI's FAQ. This applies to the home, pricing, compare, Databunny, web-vitals, feature-flags, links, errors and uptime pages.

  • Layout: two columns. The heading and a support line ("Have a question that isn't listed here? Email support@databuddy.cc") sit on the left and stay in view on large screens. The conversation sits in a framed panel on the right, using the same corner frame as the testimonials section. On mobile everything stacks into one column.
  • Bubbles: questions are neutral bubbles on the left. Opening one sends the answer as a light reply bubble on the right, with the Databuddy logomark beside it. The first answer starts open.
  • Clickability: each question ends with a plus that rotates into a close mark when open. The panel header says "Select a question to see its answer", and hovering a question lightens its background and brightens its plus.
  • Keyboard and motion: arrow keys, Home and End move between questions. Spring animations turn off under reduced motion.
  • Cleanup: removes the now-unused Radix accordion wrapper, its .accordion-item CSS, and @radix-ui/react-accordion from the docs app. The only lockfile change is that dependency line.

Why

The old accordion was a plain bordered list that looked unlike the rest of the landing page. The chat thread gives the FAQ more personality while keeping answers one click away.

Verification

  • bun run lint passes, the docs typecheck passes, and bun install --frozen-lockfile succeeds on this branch.
  • Checked in a local browser at 1440px and 390px: the default state, opening and closing questions, hover, and the open-state close mark.
  • SEO: closed answers are not in the HTML, which matches the old Radix accordion. The FAQ JSON-LD on these pages still carries every answer.
  • Not checked visually: pricing and the compare pages, which pass their own title or subtitle.

The plus icon renders duotone on this branch. #1120 makes it solid globally, and the two PRs are independent.

Summary by cubic

Replaces the accordion FAQ on the docs landing pages (home, pricing, compare, and the Databunny, web-vitals, feature-flags, links, errors, and uptime pages) with a chat-thread conversation so it matches the rest of the landing page. Closed answers aren't in the HTML, same as the old accordion, and the FAQ JSON-LD still carries every answer.

New Features

  • Two-column layout: heading with support email on the left, framed conversation panel on the right; it stacks on mobile.
  • Questions open answers as reply bubbles with the Databuddy logomark. The first answer starts open, and a plus becomes a close mark when open.
  • Each question is an h3, so screen-reader heading navigation works as it did with the accordion.
  • Arrow keys, Home, and End move between questions; springs turn off under reduced motion.

Refactors

  • Removes the now-unused Radix accordion wrapper, its global CSS, and @radix-ui/react-accordion; the only lockfile change is that dependency line.