Revamp Replay Vision product page

[SaraMiteva]

IMPORTANT: Please DO NOT merge this site when done with review. I will merge it on Aug 3rd.

@smallbrownbike @ianmatson I used the new format of the Session Replay page but the screenshot placement is a bit odd and couldn't find a way to fit them, just heads up that that section might require your attention.

Summary

Adds a new Replay Vision product page at /replay-vision (plus /replay-vision/pricing), built on the same data-driven ProductReaderView pattern as /session-replay.

Product surface (/replay-vision)

• Hero – "Your product, watching itself", with light/dark hero images
• The old way / The PostHog way – animated narrative sections with flow diagrams
• Who is it for? – role-based use cases
• How do I use it? – Editor/MCP, In the app, Query & alert, Self-driving tabs (screenshots + install CTAs)
• Top features – What it looks for / How it runs / What you get back
• AI prompts – example prompts + vision-* MCP tools
• Works with... – Session Replay, Product Analytics, Dashboards & Alerts
• Roadmap, Changelog, Questions, Team – pull from the same team sources as Session Replay (teamSlug: replay)
• Install and Get started

Pricing surface (/replay-vision/pricing)

• TL;DR / Plans / Pricing calculator – placeholders (no pricing yet)
• PostHog vs... comparison summary
• Feature comparison – full table with per-feature descriptions, driven by new replay_vision product data in the FullStory, Contentsquare, Datadog, Mixpanel, and PostHog competitor files
• Footer CTA with the surveillance-hog image

Shared changes

• Overview template: backward-compatible srcDark support for the hero image
• PricingFooterCTA template: minor layout / en-dash tweaks

How to test

1. pnpm start
2. Visit http://localhost:8001/replay-vision and /replay-vision/pricing
3. Toggle light/dark and resize the window to check responsiveness

---

Created with PostHog Code

[github-actions]

Deploy preview

Status	Details	Updated (UTC)
🟢 Ready	View preview	Jul 22, 2026 04:15PM

[github-actions]

Bundle report

Total JS (gzip)

6.76 MiB (+8.0 KiB / +0.1%)

Largest changed named chunks

Chunk	Gzip	Δ vs master
app.js	2133.7 KiB	+10.2 KiB / +0.5%
component---src-pages-replay-vision-pricing-tsx.js	0.3 KiB	new
component---src-pages-replay-vision-index-tsx.js	0.2 KiB	new

Eager graph (modules shipped in each entrypoint's initial chunks)

Entrypoint	Eager size	Budget	Modules
✅ app	16.27 MiB (+47.6 KiB / +0.3%)	report-only	1984

Largest modules in the app closure

Module	Size
./src/data/mcp-tools.json	888.6 KiB
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css	747.1 KiB
./src/components/Stickers/Stickers.tsx	696.4 KiB
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js	481.4 KiB
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules	395.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.cjs.js	364.8 KiB
./src/hooks/useCustomers.tsx + 54 modules	355.1 KiB
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js	354.8 KiB
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules	351.4 KiB
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js	281.9 KiB
./src/components/ProductComparisonTable/index.tsx + 120 modules	281.7 KiB
./src/components/SearchUI/index.tsx + 87 modules	272.1 KiB
./node_modules/.pnpm/framer-motion@10.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/dom/motion.mjs + 109 modules	253.9 KiB
./node_modules/.pnpm/d3@7.9.0/node_modules/d3/src/index.js + 208 modules	247.4 KiB
./src/components/Pricing/PricingSlider/Slider.tsx + 87 modules	239.9 KiB

---

Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes for the modules actually shipped in the entrypoint's initial chunks (post-tree-shake).