feat(web): change mobile CTA from Download to Get reminder#2148
feat(web): change mobile CTA from Download to Get reminder#2148ComputelessComputer merged 1 commit intomainfrom
Conversation
- Update CTAButton to show 'Get reminder' for mobile users - Update MobileMenuCTAs to show 'Get reminder' for mobile users - Both buttons now redirect to home hero section with email form Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe changes modify the header component to add mobile-specific behavior for call-to-action buttons, including a dedicated "Get reminder" link for mobile platform, scroll-to-hero behavior, and menu-close handlers. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 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: 0
♻️ Duplicate comments (1)
apps/web/src/components/header.tsx (1)
615-627: Duplicate logic - see comment on lines 395-401.This mobile platform handling duplicates the logic in
CTAButton(lines 395-401). Consider consolidating as suggested in the earlier comment.
🧹 Nitpick comments (1)
apps/web/src/components/header.tsx (1)
395-401: Consider extracting the mobile platform logic to reduce duplication.This "Get reminder" logic for mobile platforms is duplicated in
MobileMenuCTAs(lines 615-627). The hard-coded text and behavior appear in both places, making maintenance harder.Consider creating a helper function or consolidating the logic:
const getMobileCTA = (platform: string | undefined) => { return platform === "mobile" ? { label: "Get reminder", action: "scroll" as const } : null; };Then use it in both
CTAButtonandMobileMenuCTAs:function CTAButton({ platformCTA, platform, mobile = false, }: { platformCTA: ReturnType<typeof getPlatformCTA>; platform?: string; mobile?: boolean; }) { const baseClass = mobile ? "px-4 h-8 flex items-center text-sm bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md active:scale-[98%] transition-all" : "px-4 h-8 flex items-center text-sm bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all"; + const mobileCTA = mobile ? getMobileCTA(platform) : null; - if (mobile && platform === "mobile") { + if (mobileCTA) { return ( <Link to="/" hash="hero" onClick={scrollToHero} className={baseClass}> - Get reminder + {mobileCTA.label} </Link> ); }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/header.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/components/header.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (9)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: Redirect rules - hyprnote-storybook
- GitHub Check: Header rules - hyprnote-storybook
- GitHub Check: Pages changed - hyprnote-storybook
- GitHub Check: fmt
- GitHub Check: ci
- GitHub Check: Devin
🔇 Additional comments (3)
apps/web/src/components/header.tsx (3)
411-415: LGTM - Cleaner label rendering.Using
platformCTA.labeldirectly is cleaner than conditional rendering.
636-648: LGTM - Consistent with CTAButton.Using
platformCTA.labeldirectly is cleaner and consistent with the similar change inCTAButton.
395-401: Unable to verify: File not found in repository.The file
apps/web/src/components/header.tsxreferenced at lines 395-401 and 615-627 could not be located in the current repository. Verification of the platform detection logic cannot proceed without access to the actual implementation of theusePlatform()hook and its return values. Ensure the correct repository and file path are being reviewed.
1 participant
Summary
Updates the mobile header CTA buttons to always show "Get reminder" for mobile users, which redirects to the home page hero section with the email form. Previously, the mobile check happened after the download action check, which could result in mobile users seeing "Download" in certain cases.
Changes made:
CTAButton: Added early return for mobile users to show "Get reminder" before checking download actionMobileMenuCTAs: Restructured conditional to checkplatform === "mobile"firstReview & Testing Checklist for Human
/download/apple-siliconNotes
Requested by: john@hyprnote.com (@ComputelessComputer)
Link to Devin run: https://app.devin.ai/sessions/6bc3d25c510c4fc684d184400759081c