FAQ accordion renders HTML tags as plain text instead of parsing links

[Md-Talim]

Describe the bug
In the FAQ section on the website, the answer content for some accordion items is being rendered as raw HTML string instead of being interpreted as HTML. Anchor tags like <a href='/screen-recorder-mac'>macOS</a> are displayed literally as text rather than as clickable hyperlinks.

Steps to reproduce

1. Go to the FAQ section on cap.so/screen-recorder
2. Click on "What platforms does Cap support?"
3. Observe the expanded answer

Expected behavior
The answer should render formatted HTML with clickable links (e.g., "macOS" and "Windows" as hyperlinks).

Actual behavior
Raw HTML tags are visible as plain text in the answer body, e.g.:

Cap is compatible with <a href='/screen-recorder-mac'>macOS</a> and <a href='/screen-recorder-windows'>Windows</a>...

Screenshots

Likely cause
The FAQ answer content is probably being set via textContent or passed into a framework without dangerouslySetInnerHTML / v-html / equivalent. The fix would be to use the appropriate method to render HTML content safely.

Environment

• Browser: Brave, Chrome
• OS: Ubuntu

[linear]

CAP-669

[tembo]

The root cause is in apps/web/components/seo/SeoPageTemplate.tsx. The file already has a renderHTML helper function (lines 24-31) that properly handles HTML content using dangerouslySetInnerHTML:

const renderHTML = (content: string) => {
  const styledContent = content.replace(
    /<a\s/g,
    '<<a class="font-semibold text-blue-500 transition-colors hover:text-blue-600" ',
  );
  return <span dangerouslySetInnerHTML={{ __html: styledContent }} />;
};

This function is already used for feature descriptions (line 245), use case descriptions (line 445), and comparison descriptions - but the FAQ answer on line 531 renders the content directly:

<p className="text-gray-3">{faq.answer}</p>

The fix is straightforward - change line 531 to use renderHTML(faq.answer) instead of {faq.answer}. Note that when the accordion is open, the styling uses text-gray-3 on a blue background, so you may want to adjust the link color styling in renderHTML to account for the inverted color scheme (or pass a variant parameter).

The FAQ content with HTML links is defined in apps/web/components/pages/seo/ScreenRecorderPage.tsx (lines 96-99).