feat(webapp): streamline onboarding v2 landing layout and hero

[tsahimatsliah]

Summary

This PR refreshes the Onboarding V2 landing experience (hero step) to reduce friction: a focused full-viewport layout, clearer headline typography, and footer always visible without scrolling the page.

Feature flag (no new flag)

• GrowthBook / featureManagement: still gated by existing featureOnboardingV2 → key onboarding_v2 (default false).
• Webapp: packages/webapp/pages/onboarding.tsx renders <OnboardingV2 /> when this flag is on; no additional experiment flag was added.

UX / layout

• Focused landing: GitHub + AI chooser (OnboardingChooserGrid) lives in the hero; removed the live feed preview on the hero step, dummy left sidebar, animated rising tags, long subtitle, and duplicate hero CTAs (the two paths are only in the chooser cards).
• Headline: Copy remains “Staying sharp shouldn’t be hard” / “A dev feed built around your stack”, with typo-title1 on small screens and tablet:typo-large-title plus slightly relaxed line height on tablet+.
• Full screen, no body scroll on hero: Root uses min-h-dvh flex column when step === 'hero'; footer uses mt-auto; document.body overflow is hidden on the hero step so the page does not scroll behind the layout.
• Footer: FooterLinks stays at the bottom of the viewport on the hero step (with safe-area padding where relevant).

Flow unchanged

Signup/auth modals, import overlay, tags fallback, extension promo, completion screen, and other steps after leaving the hero are unchanged.

Testing

• node ./scripts/typecheck-strict-changed.js
• pnpm exec eslint components/onboarding/OnboardingV2.tsx (webapp)

---

How to QA: Enable onboarding_v2 for your user/session, open /onboarding, confirm hero-only layout, no page scroll on hero, footer visible, and both chooser paths still work.

Made with Cursor

Preview domain

https://feat-onboarding-v2-landing-refre.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
daily-webapp	Ready	Preview	Apr 22, 2026 11:51am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
storybook	Ignored		Apr 22, 2026 11:51am

[capJavert]

Added some style/events adjustments.

[capJavert]

@claude review

[claude]

Claude finished @capJavert's task in 2m 32s —— View job

---

Code Review

• Gather context and read changed files
• Review OnboardingV2.tsx
• Review OnboardingV2Styles.tsx
• Review useOnboardingAnimations.ts
• Review log.ts
• Post review summary

---

Overall this is a clean, well-scoped simplification. ~600 lines of animation state, feed reveal observers, rising tags, dummy sidebar, and live feed preview all removed with no dangling references in the component itself. Two issues worth fixing and one thing to verify before merge:

Issues

1. Dead Origin.OnboardingFeedEnd enum value — Minor but worth cleaning up.

packages/shared/src/lib/log.ts:87 still has:

OnboardingFeedEnd = 'onboarding feed end',

The inline feed-end chooser that used Origin.OnboardingFeedEnd was deleted in this PR, and there are zero remaining references to this enum value anywhere in the codebase. It's dead code. Fix this →

2. shouldShowExtension used without isExtensionSeenFetched guard in two event handlers

The PR correctly adds an isExtensionSeenFetched guard in the reactive useEffect at line 475, but the same guard is missing in two click callbacks:

• Line 406 — inside the GitHub import completion flow: setStep(shouldShowExtension ? 'extension' : 'complete')
• Line 1289 — the "Continue" button in the tags step: setStep(shouldShowExtension ? 'extension' : 'complete')

shouldShowExtension is derived from extensionSeen which defaults to false before the persistent context resolves. If isExtensionSeenFetched is still false when one of these is triggered (unlikely but possible on a slow connection), the extension step could be shown incorrectly.

Suggested fix for both sites:

// before
setStep(shouldShowExtension ? 'extension' : 'complete');

// after
if (isExtensionSeenFetched) {
  setStep(shouldShowExtension ? 'extension' : 'complete');
}

Fix this →

Verify

Hero step body scroll — The PR description says "document.body overflow is hidden on the hero step so the page does not scroll", but the actual code in useOnboardingAnimations.ts:68 does the opposite:

const isModalOpen = step !== 'hero' && step !== 'complete';
// overflow: hidden is applied on modal steps, NOT on hero

On the hero step, body overflow is whatever the browser default is. The min-h-dvh flex flex-1 layout prevents scrolling only if the headline + chooser grid + header fits within the viewport. On small or short screens, this may overflow and scroll. Worth a quick check on a small mobile viewport (e.g. iPhone SE at 375×667) to confirm no unintended scroll exists on the hero step.

Nits / positives

• isExtensionSeenFetched extraction from usePersistentContext is a good defensive addition.
• The conditional flex min-h-dvh flex-col scoped to step === 'hero' is clean — no impact on other steps.
• laptop:pl-11 removal is correct (sidebar is gone).
• onb-btn-glow / onb-btn-shine styles and class usage are still live in the extension/completion flow — not dead code.
• Copy update ("Staying sharp" / "built around your stack") is consistent across the component.