Raised Panel FAQ Block for Solid

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed. Keep it to about eight. One answer is open at a time. Add multiple to the Accordion to let several stay open.

No. It follows your theme: the shell is a tinted step off the page, and the panel is your card colour with a shadow and a ring, so it reads as lifted in a light theme, where card and page are nearly the same, and in a dark one. No dark scope is set anywhere, so nothing is a fixed colour.

Yes. Each Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all 7, and closing an answer doesn't remove it.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows every question. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question. Tab then continues to the contact link in the foot. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

It is a ghost button (href="#"): point Write to the sleep team at your help desk or a mailto: address. The block has no other button. The button's asChild receives its props: spread them onto your router's link.

The header and the panel fade up once when the page loads, with a CSS transition, and each row's square fills in as it opens. With reduced motion the entrance is off. The answers also open and close at once, with no height animation.

The header and the shell sit between the rails, the rows fill the panel, and the contact line stacks above its link. A question that doesn't fit wraps to a second line beside its square, and nothing scrolls sideways at 320 pixels.