Repository navigation
feat(www): use-case videos on the homepage and every For page - #2435
Merged
Merged
Conversation
The guides' videos where visitors decide to download. The homepage gets a band of tabs under the logos, and each audience page one under its hero: every video beside three steps and a link to its guide, then the download. The job and study tool pages play their guide's video above "How it works", with the download after the steps. A video loads nothing until it plays, plays muted once most of it is on screen, pauses when it scrolls away, and never starts by itself for reduced motion or save-data. A section shows only hosted videos, so production changes once upload-videos.mjs has run. use_case_video_started and use_case_video_finished go to PostHog, the download buttons beside the videos carry placement: use-case-video on their autocaptured clicks, and the privacy page says so.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
|
Caution Review failedThe pull request is closed.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The guides' videos on the pages where visitors decide to download, each with a basic guide beside it.
How the videos behave: nothing loads until a video plays (
preload="none", poster first). A video plays muted once most of it is on screen, pauses when it scrolls away, and stays put once the visitor pauses it or it ends on its result. It never starts by itself when the browser asks for reduced motion or to save data. Controls are always there.What doesn't change: no new headings. The bands' headlines are
<p>s, asHomeAudiencesdoes, so each page's H2s keep their count and order for the SEO briefs.Measuring it. PostHog gets
use_case_video_started(withslug,placementand whether it played by itself) anduse_case_video_finished. The download buttons beside the videos carrydata-ph-capture-attribute-placement="use-case-video", so their autocaptured clicks can be told from the hero's and the closing card's. A funnel of page view, then video finished, then download click, split by page, shows whether the videos move downloads. The privacy policy lists what the browser records event by event, so it gains a sentence on the videos, dated 10 November 2026.Before the upload. A band shows only videos that are hosted, so production shows none of this until
node scripts/guides/upload-videos.mjshas run with the Blob token. Innext devthe local copies frompreview-videos.mjsplay.The steps come from
features/guides/use-cases.ts: each guide cut to three steps that quote the app's labels.use-cases.test.tskeeps each entry's heading and video title in step with its guide, checks the poster exists, and keeps the steps to the docs' prose rules.Stacked on #2432; the base is
feat/tutorial-guides-jobs.Why
The maintainer asked for the use-case videos on all the For pages and good ones on the homepage, to lift download conversion across the site.
Fixes # (none: asked in chat)
How to test
cd www && pnpm test:unit: every check passes but the video upload check, as on feat(www): step-by-step guides with screenshots and videos, part 1 of 4 #2428 to feat(www): jobs, license, network and update step-by-step guides with videos, part 4 of 4 #2432.cd www && pnpm build: passes (282 pages).node scripts/guides/preview-videos.mjs, thenpnpm dev, and open/,/ai-for-lawyersand/jobs/contract-redline: the first tab's video starts muted when it scrolls into view and pauses when it scrolls away. Switching tabs plays that tab's video.High-level PR Summary
This PR adds use-case videos throughout the marketing site to demonstrate SurfSense features in action. The homepage gains a See it work section with six tabbed videos (ask files, write reports, flashcards, podcasts, contract redline, questionnaires). Each For page (lawyers, accountants, students, teachers, business) shows 3-4 relevant videos below the hero. Individual feature and job pages display their specific guide video above the How it works steps. Videos autoplay muted when scrolled into view (respecting reduced motion and save-data preferences), pause when scrolled away, and include controls. The implementation tracks video engagement via PostHog events (
use_case_video_startedanduse_case_video_finished) and attributes download button clicks by placement. Videos only render once hosted via the upload script; local development uses preview copies.⏱️ Estimated Review Time: 15-30 minutes
💡 Review Order Suggestion
www/features/guides/use-cases.tswww/features/guides/autoplay.tswww/features/guides/guide-video-source.tswww/features/guides/shown-use-cases.tswww/features/guides/use-case-events.tswww/features/guides/use-case-video.tsxwww/features/guides/use-case-tabs.tsxwww/features/guides/use-case-section.tsxwww/app/(home)/_home/home-content.tswww/app/(home)/_home/home-use-cases.tsxwww/app/(home)/page.tsxwww/features/downloads/home-download-button.tsxwww/app/(home)/ai-for-lawyers/page.tsxwww/app/(home)/ai-for-accountants/page.tsxwww/app/(home)/ai-for-students/page.tsxwww/app/(home)/ai-for-teachers/page.tsxwww/app/(home)/private-ai-for-business/page.tsxwww/features/audience-pages/audience-sections.tsxwww/app/(home)/features/flashcard-generator/page.tsxwww/app/(home)/features/quiz-generator/page.tsxwww/app/(home)/features/study-guide-maker/page.tsxwww/app/(home)/features/podcast-generator/page.tsxwww/app/(home)/jobs/contract-redline/page.tsxwww/app/(home)/jobs/security-questionnaire/page.tsxwww/features/guides/use-cases.test.tswww/features/guides/guide-video.tsxwww/app/(home)/_home/home-audiences.tsxwww/app/(home)/privacy/page.tsxplans/community-local/tutorials.mdplans/community-local/tutorials.md