FAQ — .mv-faq

node scripts/add.mjs faq --out ./src/marvelous

<mv-tabs id="faq-demo" value="index" data-size="sm" style="gap:0;background:var(--mv-bg)">
  <style>#faq-demo > [role="tablist"] { justify-self: center; margin: .75rem auto 0; }</style>
  <div role="tablist" aria-label="Block variant">
    <button role="tab" data-value="index">Numbered index</button>
    <button role="tab" data-value="split">By topic</button>
    <button role="tab" data-value="grid">Open grid</button>
  </div>

  <!-- ═════════ Default: numbered index ═════════ -->
  <div role="tabpanel" data-value="index">
    <section class="mv-faq" aria-labelledby="faq-i-title">
      <div class="mv-faq-inner">
        <header class="mv-faq-header">
          <p class="mv-faq-eyebrow">FAQ <span class="mv-faq-count">/ 06</span></p>
          <h2 class="mv-faq-title" id="faq-i-title">Questions teams ask before they move their docs</h2>
          <p class="mv-faq-lead">Short, honest answers. If yours isn’t here, <a href="#faq-demo">write to the team</a> — a writer, not a bot, replies.</p>
        </header>
        <mv-accordion type="single" class="mv-faq-list">
          <div class="mv-accordion" data-icon="plus">
            <details class="mv-accordion-item" data-value="import" open>
              <summary>Can we import our existing docs from Notion, Confluence or GitBook?</summary>
              <div class="mv-accordion-content">
                <p>Yes. The importer keeps your page tree, internal links, images and code blocks, and rewrites links that pointed to the old tool. A 2,000-page Confluence space usually takes under ten minutes.</p>
                <span class="mv-faq-meta">Updated Sep 2026 · Migration</span>
              </div>
            </details>
            <details class="mv-accordion-item" data-value="git">
              <summary>Do the docs live in our repository or in your cloud?</summary>
              <div class="mv-accordion-content"><p>Both, and you choose per space. Git-synced spaces are plain Markdown in your repo, edited through pull requests; cloud spaces are for teams that prefer to write in the browser. You can switch at any time without losing history.</p></div>
            </details>
            <details class="mv-accordion-item" data-value="stale">
              <summary>How does Quillwork know a page is out of date?</summary>
              <div class="mv-accordion-content"><p>Every code snippet can be linked to a file and a line range. When that code changes on your main branch, the page gets a “needs review” flag and its owner is notified in Slack or by email.</p></div>
            </details>
            <details class="mv-accordion-item" data-value="readers">
              <summary>Do readers need an account?</summary>
              <div class="mv-accordion-content"><p>Not for public sites. Private sites can be opened with your SSO provider, a shared link that expires, or an IP allowlist. Readers never count as paid seats.</p></div>
            </details>
            <details class="mv-accordion-item" data-value="domain">
              <summary>Can we publish on our own domain?</summary>
              <div class="mv-accordion-content"><p>Yes, on every plan, with an SSL certificate issued automatically. Point a CNAME at Quillwork and the site is live on docs.yourcompany.com within a few minutes.</p></div>
            </details>
            <details class="mv-accordion-item" data-value="leave">
              <summary>What happens to our content if we leave?</summary>
              <div class="mv-accordion-content"><p>It stays yours. Export everything as Markdown with front matter, or as a static HTML site you can host anywhere. Exports stay available for 90 days after you cancel.</p></div>
            </details>
          </div>
        </mv-accordion>
        <p class="mv-faq-footer">Still deciding?<a class="mv-button" data-variant="outline" data-size="sm" href="#faq-demo">Book a 20-minute walkthrough</a><span class="mv-faq-meta">Median reply time · 38 min</span></p>
      </div>
    </section>
  </div>

  <!-- ═════════ Split: topics ═════════ -->
  <div role="tabpanel" data-value="split">
    <section class="mv-faq" data-variant="split" aria-labelledby="faq-s-title">
      <div class="mv-faq-inner">
        <header class="mv-faq-header">
          <p class="mv-faq-eyebrow">Help center</p>
          <h2 class="mv-faq-title" id="faq-s-title">Answers, sorted by topic</h2>
          <p class="mv-faq-lead">Jump to a topic, or scroll through all seven questions.</p>
          <nav aria-label="FAQ topics">
            <ul class="mv-faq-toc">
              <li><a href="#faq-s-plans">Plans &amp; billing <span class="mv-faq-toc-count">03</span></a></li>
              <li><a href="#faq-s-security">Security <span class="mv-faq-toc-count">02</span></a></li>
              <li><a href="#faq-s-writing">Writing &amp; review <span class="mv-faq-toc-count">02</span></a></li>
            </ul>
          </nav>
          <div class="mv-faq-contact">
            <strong>Talk to a docs engineer</strong>
            <p>Monday to Friday, 8 am – 8 pm CET. We read every message.</p>
            <a class="mv-button" data-variant="outline" data-size="sm" href="#faq-demo">Open a conversation
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
          </div>
        </header>
        <div class="mv-faq-groups">
          <section class="mv-faq-group" id="faq-s-plans" aria-labelledby="faq-s-plans-t">
            <h3 class="mv-faq-group-title" id="faq-s-plans-t">Plans &amp; billing</h3>
            <mv-accordion type="single" class="mv-faq-list">
              <div class="mv-accordion" data-icon="plus">
                <details class="mv-accordion-item" data-value="s-free" open>
                  <summary>Is there a free plan?</summary>
                  <div class="mv-accordion-content"><p>Teams of up to five writers get one public site, unlimited pages and Git sync for free, forever. Open-source projects get the Team plan at no cost.</p></div>
                </details>
                <details class="mv-accordion-item" data-value="s-seats">
                  <summary>Who counts as a paid seat?</summary>
                  <div class="mv-accordion-content"><p>Only people who edit. Reviewers who just leave comments and every reader are free.</p></div>
                </details>
                <details class="mv-accordion-item" data-value="s-invoice">
                  <summary>Can we pay by invoice?</summary>
                  <div class="mv-accordion-content"><p>Yes, on annual plans from ten seats, with 30-day payment terms and a purchase order number on every invoice.</p></div>
                </details>
              </div>
            </mv-accordion>
          </section>
          <section class="mv-faq-group" id="faq-s-security" aria-labelledby="faq-s-security-t">
            <h3 class="mv-faq-group-title" id="faq-s-security-t">Security</h3>
            <mv-accordion type="single" class="mv-faq-list">
              <div class="mv-accordion" data-icon="plus">
                <details class="mv-accordion-item" data-value="s-region">
                  <summary>Where is our content stored?</summary>
                  <div class="mv-accordion-content"><p>In the EU (Frankfurt) or the US (Oregon), chosen when you create the workspace. Backups stay in the same region.</p></div>
                </details>
                <details class="mv-accordion-item" data-value="s-sso">
                  <summary>Do you support SSO and SCIM?</summary>
                  <div class="mv-accordion-content"><p>SAML SSO with Okta, Entra ID and Google Workspace is included in Business; SCIM provisioning in Enterprise.</p></div>
                </details>
              </div>
            </mv-accordion>
          </section>
          <section class="mv-faq-group" id="faq-s-writing" aria-labelledby="faq-s-writing-t">
            <h3 class="mv-faq-group-title" id="faq-s-writing-t">Writing &amp; review</h3>
            <mv-accordion type="single" class="mv-faq-list">
              <div class="mv-accordion" data-icon="plus">
                <details class="mv-accordion-item" data-value="s-mdx">
                  <summary>Can we use MDX components?</summary>
                  <div class="mv-accordion-content"><p>Yes. Tabs, callouts, API playgrounds and your own React components render in the editor exactly as they will on the site.</p></div>
                </details>
                <details class="mv-accordion-item" data-value="s-approve">
                  <summary>Can a page require approval before it goes live?</summary>
                  <div class="mv-accordion-content"><p>Set required reviewers per folder. Changes wait in a review until one of them approves, just like a protected branch.</p></div>
                </details>
              </div>
            </mv-accordion>
          </section>
        </div>
      </div>
    </section>
  </div>

  <!-- ═════════ Grid ═════════ -->
  <div role="tabpanel" data-value="grid">
    <section class="mv-faq" data-variant="grid" aria-labelledby="faq-g-title" style="--mv-faq-bg:var(--mv-bg-subtle)">
      <div class="mv-faq-inner">
        <header class="mv-faq-header">
          <p class="mv-faq-eyebrow">Good to know</p>
          <h2 class="mv-faq-title" id="faq-g-title">The short version</h2>
          <p class="mv-faq-lead">Six answers we give on almost every call, all in one place.</p>
        </header>
        <dl class="mv-faq-grid">
          <div><dt>How long does a migration take?</dt><dd>Most teams import, review and publish in one afternoon. The importer handles the page tree and links; you mostly check the result.</dd></div>
          <div><dt>Does it work with our CI?</dt><dd>Every pull request gets a preview site and a link checker run. GitHub Actions, GitLab CI and Buildkite are supported out of the box.</dd></div>
          <div><dt>Can we theme the published site?</dt><dd>Colors, fonts and logo from the dashboard; full control with a custom CSS file or your own layout components.</dd></div>
          <div><dt>Is search included?</dt><dd>Yes, instant full-text search with typo tolerance on every site, plus an optional “Ask the docs” answer box.</dd></div>
          <div><dt>How are versions handled?</dt><dd>Each Git tag or branch can become a version with its own URL, and readers can switch versions from any page.</dd></div>
          <div><dt>What about uptime?</dt><dd>Published sites are served from a global CDN with a 99.99% uptime commitment on Business and Enterprise.</dd></div>
        </dl>
        <p class="mv-faq-footer">Can’t find your answer?<a class="mv-button" data-variant="secondary" data-size="sm" href="#faq-demo">Browse the help center</a></p>
      </div>
    </section>
  </div>
</mv-tabs>