fix(compare): refine comparison pages and table accessibility

[nate-appflowy]

Summary

Refine the five comparison landing pages to match the updated Figma design. Remove the visible hero breadcrumbs and resource links, center the “vs” label, and use dedicated #AAAAAA competitor logos and the Figma AI icon.

Add three randomly selected comparison cards below Questions & Answers and above Get started. Exclude the current page and duplicates; each comparison keeps its own cover and description. Align the card grid with the comparison table, add desktop background glows, and keep the mobile section white.

Replace the shared comparison grid with a semantic table across all five pages. Add a descriptive caption, column and row headers, and screen-reader text for “Supported” and “Not supported” values while preserving the visible icons, existing text values, highlighted AppFlowy column, and sticky mobile feature column. Make the scrolling region keyboard accessible.

Mark Notion’s Offline workspace and Outline’s Native desktop & mobile apps as “Limited.” Correct the Outline FAQ to explain macOS desktop availability and browser/PWA access on mobile; the FAQ structured data uses the same corrected answer.

Scope

Changes are limited to comparison pages, their components, dedicated assets, and styles scoped to .vs-notion-page. Original logo assets, shared breadcrumbs, blog cards, and shared Get started/Header/Footer components are unchanged. Breadcrumb structured data is retained.

Recommendation selection happens during server rendering; static production pages can retain the same selection until rebuilt or revalidated.

Validation

• pnpm run lint passed.
• pnpm exec tsc --noEmit --incremental false passed.
• git diff --check passed.
• Verified all five comparison pages return HTTP 200 and include semantic table headers and nonempty textual cell values in the server-rendered HTML.
• Verified the two “Limited” values and that the corrected Outline FAQ matches its JSON-LD.
• Inspected the Confluence table on desktop and mobile, including long text cells, column sizing, horizontal scrolling, and the sticky feature column. Confirmed table, column header, row header, and labeled cell roles in the browser accessibility tree.
• Verified all five comparison pages render three distinct recommendations excluding the current page, between FAQ and Get started.
• Inspected the comparison cards in the local browser.
• Home, pricing, blog, templates, and What's new returned HTTP 200 without the comparison section or CSS scope.
• Full production build and Cypress suite not run locally; CI will provide additional coverage.