Add security and privacy pages to showcase data protection commitment #2054
Conversation
🤖 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. |
📝 WalkthroughWalkthroughAdds a new static privacy route and expands the existing security route; both export Route via createFileRoute and include head() SEO metadata. Pages render multi-section React components with static content, internal links, and an external GitHub link; no runtime data fetching. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![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/web/src/routes/_view/privacy.tsx (1)
469-509: CTA section reuse and cn usage look goodThe CTA mirrors the security page’s structure, and
cnis used with grouped class arrays as per your guidelines. No issues here; sharing this pattern between pages keeps the marketing surface consistent.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/routes/_view/privacy.tsx(1 hunks)apps/web/src/routes/_view/security.tsx(1 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/security.tsxapps/web/src/routes/_view/privacy.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/privacy.tsx (2)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)packages/utils/src/cn.ts (1)
cn(20-22)
🪛 GitHub Actions: web_ci
apps/web/src/routes/_view/privacy.tsx
[error] 368-368: Type '"/legal/privacy-policy"' is not assignable to type '"/" | "/blog" | "/docs" | "/youtube" | "/x" | "/linkedin" | "/join-waitlist" | "/github" | "/founders" | "/discord" | "/contact" | "/auth" | "/webhook/stripe" | "/webhook/nango" | ... 63 more ... | ".."'.
⏰ 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). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: Devin
- GitHub Check: fmt
🔇 Additional comments (4)
apps/web/src/routes/_view/security.tsx (2)
8-35: Route and SEO head metadata look consistent and correct
createFileRoute("/_view/security")withcomponent: Componentand the structuredhead().metablock matches the pattern used on the new privacy route and should integrate cleanly with TanStack Router and your SEO setup.
37-485: Security page composition is clean and idiomaticSections are nicely factored (
HeroSection,SecurityPrinciplesSection, etc.),SlashSeparatoris reused for visual rhythm,Link/Iconusage is straightforward, andcnis applied with array arguments per your guidelines. No functional or type concerns from this file.apps/web/src/routes/_view/privacy.tsx (2)
8-35: Privacy route and head metadata are aligned with security page pattern
createFileRoute("/_view/privacy")plus thehead().metaentries for title/description and og/twitter tags match the security page setup and should plug into your routing/SEO stack without issues.
88-144: Ensure privacy promises match actual product behaviorThe promises here (no cloud uploads, no data collection/monetization, no account required, minimal telemetry off by default) are strong. Please double‑check they accurately reflect current behavior across the app and backend so this page stays truthful and compliant.
…ata protection Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
…ata protection Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
ComputelessComputer
force-pushed
the
devin/1764594722-security-privacy-pages
branch
from
1ad7fff to
f9ea523
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/web/src/routes/_view/security.tsx (4)
37-60: Background layering: ensure gradient vs pattern behavior is intentionalThe root
Componentlayout and container structure look good and match other marketing pages.Note that the inline
style={{ backgroundImage: "url(/patterns/dots.svg)" }}will override anybackground-imageset bybg-linear-to-bon this element. Ifbg-linear-to-balso defines a gradient viabackground-image, only one of them will actually render. If you intended to see both the gradient and the dots pattern, you may want to move the pattern background to an inner wrapper or use a combined background definition in CSS.
88-144: Principles list is solid; consider using a stable key instead of indexThe
SecurityPrinciplesSectionis a nice, data‑driven list and easy to extend.Given the list is static, using the array index as the React key is unlikely to cause real issues, but you can make it slightly more robust/self‑documenting by keying on a unique field like
title:- {principles.map((principle, index) => ( - <div - key={index} + {principles.map((principle) => ( + <div + key={principle.title} className="p-6 border border-neutral-200 rounded-lg bg-white" >Purely optional, the current code will work fine.
306-370: Open-source transparency section is well implemented; watch for quantitative claimsThe open-source/security‑through‑transparency story and GitHub CTA are implemented cleanly, with correct external link attributes (
target="_blank"+rel="noopener noreferrer").Minor copy consideration: phrases like “Thousands of developers have reviewed our codebase” are strong quantitative claims. If that’s intended as marketing hyperbole rather than a literally verifiable fact, you might want to soften the language to avoid sounding overstated in a security-context page.
372-443: Enterprise features section: be careful with compliance languageStructurally, the enterprise features grid and
/enterpriseCTALinkare straightforward and consistent with the rest of the page.The “Compliance ready” bullet explicitly calls out “GDPR, HIPAA, and SOC 2 compliance requirements”. That’s potentially sensitive from a legal/compliance perspective: buyers will often interpret this as de facto compliance or certification.
I’d recommend:
- Having legal/compliance explicitly sign off on this line; and/or
- Adjusting the wording toward “designed to help support…” and being precise about what’s actually provided (e.g., audit logs, access controls), especially for HIPAA/SOC 2.
Until that’s confirmed, I’d treat this line as something that must be double‑checked before shipping.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/web/src/routeTree.gen.tsis excluded by!**/*.gen.ts
📒 Files selected for processing (2)
apps/web/src/routes/_view/privacy.tsx(1 hunks)apps/web/src/routes/_view/security.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/routes/_view/privacy.tsx
🧰 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/security.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/security.tsx (3)
apps/web/src/routes/_view/privacy.tsx (1)
Route(8-35)apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)packages/utils/src/cn.ts (1)
cn(20-22)
⏰ 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). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: fmt
- GitHub Check: ci
🔇 Additional comments (5)
apps/web/src/routes/_view/security.tsx (5)
1-6: Route setup and SEO meta look consistent and completeImports,
Routecreation, and thehead()meta block match the pattern fromprivacy.tsxand give the page solid SEO coverage (title, description, OG, Twitter). Technically looks good.One thing to double‑check outside of code review: the meta descriptions and titles make strong claims (e.g., “local-first architecture, end-to-end encryption, open source transparency”). Please ensure product/infra/marketing have explicitly signed off that these are accurate for the current offering.
Also applies to: 8-35
62-86: Hero section structure and copy read cleanlyThe hero section has clear hierarchy (single
h1, supporting copy) and uses straightforward, accessible markup. The pill with the shield icon helps quickly communicate “security-first” without adding unnecessary complexity.No code changes needed here.
146-225: Local-first section layout and messaging are coherentThe three-column grid plus the offline callout card is clear and responsive, and the icon usage is consistent with the rest of the page. Markup is simple and semantic; no issues from a React/layout standpoint.
Only note is non-code: the copy (“recordings never leave your device”, “everything runs locally”) is very strong. Make sure this exactly matches how the app behaves across all supported platforms and configurations.
227-304: Encryption section is technically clear; verify the specificity of claimsThe “Enterprise-grade encryption” section is well structured and easy to scan. From a code perspective, it’s just static JSX and looks fine.
Content-wise, you’re making specific technical assertions (AES‑256 at rest, TLS 1.3 with PFS, keys never leaving the device). Those are good if true, but also easy to drift from reality as infrastructure evolves. I’d suggest confirming with whoever owns security/infra that all of these details are accurate today and will remain maintained going forward.
445-485: CTA section andcnusage look good and follow guidelinesThe CTA provides clear primary/secondary actions, and the cross‑link to
/privacyis a nice touch for users wanting more detail.Using
cnwith a grouped array of class strings keeps the button styles readable and aligns with the project’s “pass an array and group logically” convention.
ComputelessComputer
deleted the
devin/1764594722-security-privacy-pages
branch
Summary
Adds two new marketing pages to the web app:
/security- Comprehensive page showcasing Hyprnote's security-first architecture, covering local-first processing, encryption, open source transparency, and enterprise security features/privacy- Dedicated page highlighting Hyprnote's privacy commitment (separate from the legal privacy policy), covering data ownership, no-tracking policies, and transparencyBoth pages follow the existing design patterns from
opensource.tsx,enterprise.tsx, andfaq.tsx, using the same component structure, styling conventions, and SlashSeparator layout.Review & Testing Checklist for Human
/privacy,/download,/enterprise; Privacy page links to/security,/download,/legal/privacy-policyRecommended test plan:
pnpm --filter web devand navigate to/securityand/privacyNotes
bg-linear-to-bas invalid Tailwind, but this class is used consistently throughout the existing codebase (verified in 20+ files), so it's likely a custom Tailwind configurationRequested by: john@hyprnote.com (@ComputelessComputer)
Devin session: https://app.devin.ai/sessions/975c7af47dfa4a73beab1e4aae15eb4a