Repository navigation
feat(marketing): hero positioning A/B test + solid primary download CTA - #5832
Conversation
- Gate hero headline/subheadline on the landing-hero-positioning PostHog flag (control vs capability-mac), Mac visitors only; non-Mac platforms always render control copy - Restyle download CTA from transparent orange to solid primary (bg-foreground/text-background) - Drive-by: Biome format fix on desktop CommitRow Claude-Session: https://claude.ai/code/session_01CALU4gFuyo3ABdp1Cc7BJh
📝 WalkthroughWalkthroughHeroSection now uses platform and feature-flag variants for hero copy. DownloadButton styling uses foreground/background colors and opacity hover behavior. CommitRow formatting preserves conditional wrapping and truncation behavior. ChangesFeature-flagged hero copy
Download button styling
Commit row formatting
Estimated code review effort: 2 (Simple) | ~15 minutes Sequence Diagram(s)sequenceDiagram
participant HeroSection
participant Platform
participant FeatureFlags
participant TypewriterText
HeroSection->>Platform: read platform
HeroSection->>FeatureFlags: read HERO_POSITIONING_FLAG variant
HeroSection->>HeroSection: select HERO_COPY content
HeroSection->>TypewriterText: render headline and segments
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/marketing/src/app/components/HeroSection/HeroSection.tsx (1)
82-89: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winImprove screen reader accessibility for the typewriter effect.
Currently, the animated text wrapper is exposed to assistive technologies, causing screen readers to painfully announce the headline character-by-character as it types out.
You can improve the accessibility by hiding the animated text from screen readers using
aria-hidden="true"and adding a visually hidden (sr-only) element containing the complete headline for them to read instantly.♿ Proposed accessibility fix
- <span className="absolute inset-0"> + <span className="absolute inset-0" aria-hidden="true"> <TypewriterText key={copy.headline} segments={copy.segments} speed={40} delay={600} /> </span> + <span className="sr-only">{copy.headline}</span>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/marketing/src/app/components/HeroSection/HeroSection.tsx` around lines 82 - 89, Update the typewriter wrapper around TypewriterText in HeroSection to include aria-hidden="true", then add an sr-only element containing the complete headline text for immediate screen-reader access. Keep the existing animated rendering and headline content unchanged for visual users.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/marketing/src/app/components/HeroSection/HeroSection.tsx`:
- Around line 55-60: Update the hero copy selection in the copy expression to
use Object.hasOwn(HERO_COPY, heroVariant) instead of the in operator, while
preserving the existing platform, string-type, and control-copy fallback checks.
---
Nitpick comments:
In `@apps/marketing/src/app/components/HeroSection/HeroSection.tsx`:
- Around line 82-89: Update the typewriter wrapper around TypewriterText in
HeroSection to include aria-hidden="true", then add an sr-only element
containing the complete headline text for immediate screen-reader access. Keep
the existing animated rendering and headline content unchanged for visual users.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: be7ab783-1230-4646-8370-bd97916ffb57
📒 Files selected for processing (3)
apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useChangesTab/components/CommitFilterDropdown/components/CommitRow/CommitRow.tsxapps/marketing/src/app/components/DownloadButton/DownloadButton.tsxapps/marketing/src/app/components/HeroSection/HeroSection.tsx
| const copy = | ||
| isMacPlatform(platform) && | ||
| typeof heroVariant === "string" && | ||
| heroVariant in HERO_COPY | ||
| ? HERO_COPY[heroVariant as keyof typeof HERO_COPY] | ||
| : HERO_COPY.control; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Prevent prototype pollution by using Object.hasOwn.
Using the in operator checks the entire prototype chain. If PostHog were to return a string like "toString" for the variant key, the check would pass, but HERO_COPY["toString"] would return a function instead of a HeroCopy object, leading to a broken/empty render.
Use Object.hasOwn to safely check for direct properties on the object literal.
🛡️ Proposed fix
const copy =
isMacPlatform(platform) &&
typeof heroVariant === "string" &&
- heroVariant in HERO_COPY
+ Object.hasOwn(HERO_COPY, heroVariant)
? HERO_COPY[heroVariant as keyof typeof HERO_COPY]
: HERO_COPY.control;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const copy = | |
| isMacPlatform(platform) && | |
| typeof heroVariant === "string" && | |
| heroVariant in HERO_COPY | |
| ? HERO_COPY[heroVariant as keyof typeof HERO_COPY] | |
| : HERO_COPY.control; | |
| const copy = | |
| isMacPlatform(platform) && | |
| typeof heroVariant === "string" && | |
| Object.hasOwn(HERO_COPY, heroVariant) | |
| ? HERO_COPY[heroVariant as keyof typeof HERO_COPY] | |
| : HERO_COPY.control; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/marketing/src/app/components/HeroSection/HeroSection.tsx` around lines
55 - 60, Update the hero copy selection in the copy expression to use
Object.hasOwn(HERO_COPY, heroVariant) instead of the in operator, while
preserving the existing platform, string-type, and control-copy fallback checks.
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
Closes out the landing-hero-positioning A/B test (PostHog experiment 386395). Result was flat on download_clicked, so the control copy stays. Reverts the experiment wiring from #5832 and the flag bootstrap from #5884; the hero renders the control copy unconditionally again. Claude-Session: https://claude.ai/code/session_016SyQq825A17ZMGGDgyaoPE
What
Hero positioning experiment (
landing-hero-positioning, PostHog experiment 386395, draft — launch after this deploys):control— current "The Code Editor for AI Agents."capability-mac— "Run parallel coding agents on your Mac." with improved subheadline ("Isolated workspaces for Claude Code, Codex, and any CLI agent — run them side by side and review every change from one dashboard. Free to start.")isMacPlatform); Windows/Linux/mobile always see control. Experiment exposure is additionally filtered to$os = Mac OS Xin PostHog so non-Mac flag evaluations don't dilute analysis.Download CTA restyle (ship-lane change, no experiment): transparent orange → solid primary (
bg-foreground text-background), matching the design system's primary button (e.g. WaitlistForm submit).Drive-by: Biome format fix on desktop
CommitRow.tsx(was committed unformatted; repo-widelint:fixpicked it up).Notes
useFeatureFlagVariantKey; the hero's 600ms typewriter delay masks flag-load latency, so no flicker handling needed.https://claude.ai/code/session_01CALU4gFuyo3ABdp1Cc7BJh
Summary by cubic
Adds a Mac-only hero copy A/B test and updates the Download CTA to the solid primary button for a clearer, more consistent landing experience.
New Features
landing-hero-positioningexperiment (PostHog 386395):controlvscapability-macheadline/subheadline, shown to Mac visitors only. UsesuseFeatureFlagVariantKeyfromposthog-js/react; the typewriter delay masks flag load.bg-foreground text-background) with opacity hover.Refactors
CommitRow.tsx(no behavior change).Written for commit 8ac6f71. Summary will update on new commits.
Summary by CodeRabbit
New Features
Style
Refactor