feat(ui): Enhance CTA section layout and messaging #2057
Conversation
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe PR modifies the blog post template to reposition the CTA section by inserting a SlashSeparator before it, removes negative horizontal margins from the CTA container, and updates the CTA heading and description text to promote Hyprnote's features. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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
🧹 Nitpick comments (1)
apps/web/src/routes/_view/blog/$slug.tsx (1)
206-206: Consider addinglaptop:px-0for consistency with the homepage CTA.The blog CTASection has
px-4on all screen sizes, while the homepage version (inapps/web/src/routes/_view/index.tsxline 2039) includeslaptop:px-0to remove horizontal padding on larger screens. This creates a visual difference that may or may not be intentional.If consistency is desired, apply this diff:
- <section className="py-16 px-4 bg-linear-to-t from-stone-50/30 to-stone-100/30"> + <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 laptop:px-0">
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/routes/_view/blog/$slug.tsx(3 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/routes/_view/blog/$slug.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/blog/$slug.tsx (2)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)apps/web/src/routes/_view/index.tsx (1)
CTASection(2006-2099)
⏰ 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). (8)
- GitHub Check: Redirect rules - hyprnote-storybook
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote-storybook
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote-storybook
- GitHub Check: Pages changed - hyprnote
- GitHub Check: ci
- GitHub Check: fmt
🔇 Additional comments (2)
apps/web/src/routes/_view/blog/$slug.tsx (2)
95-96: LGTM! Good visual separation before CTA.Adding the SlashSeparator creates clear visual separation before the CTA section, consistent with its use earlier in the layout.
218-223: LGTM! Clearer and more compelling CTA messaging.The updated heading and description are more direct and effectively highlight Hyprnote's key differentiators (local-first, privacy-focused, open source). This improves the call-to-action for blog readers.
No description provided.