landing wip #1647
landing wip #1647
Conversation
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughWidespread UI and layout updates across many product and download routes: hero/CTA redesigns, added SlashSeparator and MockWindow previews, composed Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Page as Integrations Page
participant Icon as DraggableIcon
participant State as Position State
Note over Page,Icon `#f3f4f6`: Draggable icons with SVG beam connections
User->>Icon: pointerdown
Icon->>Icon: capture pointer, set dragging=true, record pointer offset, apply scale
User->>Icon: pointermove
Icon->>State: compute absolute position
State-->>Page: update render (icon position + recompute SVG bezier path)
User->>Icon: pointerup
Icon->>Icon: release pointer, reset scale, set dragging=false
Note over Page,State `#f8fafc`: window resize/scroll -> recalc bounding rects and initial positions
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 inconclusive)
✅ Passed checks (1 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (15)
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: 12
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/src/routes/_view/product/mini-apps.tsx (1)
106-106: Critical: Invalid Tailwind CSS class name.
bg-linear-to-bis not a valid Tailwind CSS class. This should bebg-gradient-to-bfor the gradient background to render correctly.Apply this fix:
- className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen" + className="bg-gradient-to-b from-white via-stone-50/20 to-white min-h-screen"apps/web/src/routes/_view/product/ai-assistant.tsx (1)
23-23: Critical: Invalid Tailwind CSS class name.
bg-linear-to-bshould bebg-gradient-to-b.- className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen" + className="bg-gradient-to-b from-white via-stone-50/20 to-white min-h-screen"
🧹 Nitpick comments (7)
apps/web/src/routes/_view/product/bot.tsx (1)
93-94: Percentage parsing works but could be more explicit.Using
parseInt()on strings like "15%" works because it stops at the first non-digit character, but this implicit behavior could be made clearer for maintainability.Consider making the parsing more explicit:
-const x = (containerWidth * parseInt(initialPosition.left)) / 100 - size / 2; -const y = (containerHeight * parseInt(initialPosition.top)) / 100 - size / 2; +const leftPercent = parseInt(initialPosition.left, 10); +const topPercent = parseInt(initialPosition.top, 10); +const x = (containerWidth * leftPercent) / 100 - size / 2; +const y = (containerHeight * topPercent) / 100 - size / 2;apps/web/src/routes/_view/product/mini-apps.tsx (4)
330-333: Simplify badge centering.Using
inline-flexwithw-fullandjustify-centeris unnecessarily complex. A simpleflexwith centering utilities would be clearer.- <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-100 text-sm text-orange-700 mb-6 mx-auto justify-center w-full"> + <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-orange-100 text-sm text-orange-700 mb-6 justify-center">
357-360: Simplify badge centering.Same issue as Line 330 - using
inline-flexwithw-fullis unnecessarily complex.- <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 text-sm text-purple-700 mb-6 mx-auto justify-center w-full"> + <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 text-sm text-purple-700 mb-6 justify-center">
413-420: Consider extracting hardcoded image URL to configuration.The Supabase storage URL is hardcoded. Consider extracting this to a configuration file or constant for easier maintenance and environment-specific overrides.
439-452: Add ARIA label to decorative SVG icon.The arrow SVG lacks an
aria-hidden="true"attribute since it's decorative, or should have anaria-labelif it conveys meaning.<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" + aria-hidden="true" >apps/web/src/routes/_view/product/ai-assistant.tsx (2)
235-241: Consider extracting hardcoded image URL to configuration.The Supabase storage URL is hardcoded. Consider extracting this to a configuration file or constant for easier maintenance.
260-273: Add ARIA label to decorative SVG icon.The arrow SVG should have an
aria-hidden="true"attribute since it's decorative.<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" + aria-hidden="true" >
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/web/src/routes/_view/download/index.tsx(2 hunks)apps/web/src/routes/_view/product/ai-assistant.tsx(2 hunks)apps/web/src/routes/_view/product/ai-notetaking.tsx(3 hunks)apps/web/src/routes/_view/product/api.tsx(2 hunks)apps/web/src/routes/_view/product/bot.tsx(2 hunks)apps/web/src/routes/_view/product/extensions.tsx(1 hunks)apps/web/src/routes/_view/product/local-ai.tsx(1 hunks)apps/web/src/routes/_view/product/mini-apps.tsx(4 hunks)apps/web/src/routes/_view/product/notepad.tsx(3 hunks)apps/web/src/routes/_view/product/self-hosting.tsx(2 hunks)apps/web/src/routes/_view/product/workflows.tsx(1 hunks)apps/web/src/routes/_view/route.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-12T01:18:52.105Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: packages/nango/.cursor/rules/nango.mdc:0-0
Timestamp: 2025-10-12T01:18:52.105Z
Learning: Applies to packages/nango/**/models.ts : Do not edit the models.ts file; it is auto-generated at compilation time
Applied to files:
apps/web/src/routes/_view/product/local-ai.tsx
🧬 Code graph analysis (10)
apps/web/src/routes/_view/product/extensions.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/download/index.tsx (2)
packages/utils/src/cn.ts (1)
cn(20-22)apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)
apps/web/src/routes/_view/product/workflows.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/api.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/notepad.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/ai-notetaking.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/mini-apps.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/bot.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/ai-assistant.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/self-hosting.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
🔇 Additional comments (11)
apps/web/src/routes/_view/product/local-ai.tsx (1)
2-2: LGTM! Formatting improvement.The added blank line improves readability by separating local imports from external library imports.
apps/web/src/routes/_view/route.tsx (2)
85-85: LGTM! Improved header spacing.The increased gap from 4 to 5 units provides better visual breathing room for the desktop navigation items.
117-117: LGTM! Enhanced link affordance.Adding hover underlines with dotted decoration to dropdown menu items improves user feedback and makes interactive elements more discoverable.
Also applies to: 137-137
apps/web/src/routes/_view/product/workflows.tsx (1)
21-49: LGTM! Clean "Coming Soon" placeholder.The simplified layout effectively communicates that workflows are not yet available while maintaining visual consistency with the broader redesign. The disabled button is properly styled with appropriate cursor and opacity states.
apps/web/src/routes/_view/product/extensions.tsx (1)
22-51: LGTM! Consistent "Coming Soon" implementation.The simplified layout matches the pattern established in other product pages (workflows.tsx), providing a consistent user experience for unreleased features.
apps/web/src/routes/_view/download/index.tsx (2)
19-33: LGTM! Informative banner with good UX.The new header banner effectively communicates platform availability with appropriate hover feedback. The use of
cnfor class composition keeps styling maintainable.
141-145: LGTM! Consistent disabled button styling.The disabled button styling using
cnmatches the pattern established across other product pages, providing visual consistency.apps/web/src/routes/_view/product/notepad.tsx (1)
27-49: LGTM! Effective hero section with clear value proposition.The new hero section with gradient background and three-card feature row effectively communicates the product's key differentiators. The visual hierarchy guides users naturally toward the CTA.
Also applies to: 52-73
apps/web/src/routes/_view/product/self-hosting.tsx (1)
22-51: LGTM! Consistent "Coming Soon" implementation.The simplified layout maintains the established pattern for unreleased features, providing visual consistency across the product suite.
apps/web/src/routes/_view/product/api.tsx (1)
36-41: Verify disabled button meets WCAG contrast requirements.The disabled button uses
opacity-50which may reduce text contrast below WCAG AA standards (4.5:1 for normal text). Ensure the resulting contrast ratio is sufficient.apps/web/src/routes/_view/product/ai-notetaking.tsx (1)
32-52: Confirm Tailwind version before shipping the new gradient utilities
All of the new backgrounds usebg-linear-to-*, which only exists in Tailwind CSS v4+. If the app is still on Tailwind 3 (current codebase hasn’t merged a Tailwind upgrade yet), every one of these gradients will silently drop and fall back to a solid fill. Please double‑check that we’ve already upgraded the dependency; otherwise stick with the v3bg-gradient-to-*classes or bundle the Tailwind upgrade in this PR. (stevekinney.com)Also applies to: 182-407
| className={cn([ | ||
| "inline-block px-8 py-3 text-base font-medium rounded-full", | ||
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | ||
| "hover:scale-105 active:scale-95 transition-transform", | ||
| ])} |
There was a problem hiding this comment.
Critical: Invalid Tailwind CSS class name.
bg-linear-to-t should be bg-gradient-to-t.
className={cn([
"inline-block px-8 py-3 text-base font-medium rounded-full",
- "bg-linear-to-t from-stone-600 to-stone-500 text-white",
+ "bg-gradient-to-t from-stone-600 to-stone-500 text-white",
"hover:scale-105 active:scale-95 transition-transform",
])}📝 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.
| className={cn([ | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | |
| "hover:scale-105 active:scale-95 transition-transform", | |
| ])} | |
| className={cn([ | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-gradient-to-t from-stone-600 to-stone-500 text-white", | |
| "hover:scale-105 active:scale-95 transition-transform", | |
| ])} |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/ai-assistant.tsx around lines 39 to 43 the
Tailwind class name "bg-linear-to-t" is invalid; replace it with the correct
"bg-gradient-to-t" in the className array so the gradient utility is applied
correctly (keep the rest of the classes unchanged).
|
|
||
| <section className="bg-stone-50 border border-neutral-200 rounded-lg p-8 lg:p-12 text-center"> | ||
| <h2 className="text-3xl font-serif text-stone-600 mb-4"> | ||
| <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> |
There was a problem hiding this comment.
Critical: Invalid Tailwind CSS class name.
bg-linear-to-t should be bg-gradient-to-t.
- <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0">
+ <section className="py-16 bg-gradient-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0">📝 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.
| <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> | |
| <section className="py-16 bg-gradient-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/ai-assistant.tsx around line 232, the
Tailwind CSS class name is invalid: replace the incorrect "bg-linear-to-t" with
the correct "bg-gradient-to-t" so the background gradient utility renders
properly; update the class string accordingly and run a build or Tailwind JIT to
verify the class is recognized.
| return ( | ||
| <div | ||
| className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen flex items-center justify-center" | ||
| className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]" |
There was a problem hiding this comment.
Critical: Invalid Tailwind CSS class name.
bg-linear-to-b should be bg-gradient-to-b.
- className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]"
+ className="bg-gradient-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]"📝 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.
| className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]" | |
| className="bg-gradient-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]" |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/api.tsx around line 21, the Tailwind class
name is invalid: replace the incorrect "bg-linear-to-b" with the correct
"bg-gradient-to-b" so the gradient utility is applied properly (leave the rest
of the class string unchanged).
| Built-in mini apps | ||
| <br /> | ||
| for everything | ||
| <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20"> |
There was a problem hiding this comment.
Critical: Invalid Tailwind CSS class name.
bg-linear-to-b should be bg-gradient-to-b.
- <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20">
+ <div className="bg-gradient-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20">📝 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.
| <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20"> | |
| <div className="bg-gradient-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20"> |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/mini-apps.tsx around line 110, the Tailwind
class `bg-linear-to-b` is invalid; replace it with the correct
`bg-gradient-to-b` so the gradient utility is recognized and the background
renders as intended, keeping the rest of the class list (from-stone-50/30
to-stone-100/30 px-6 py-12 lg:py-20) unchanged.
| className={cn([ | ||
| "inline-block px-8 py-3 text-base font-medium rounded-full", | ||
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | ||
| "hover:scale-105 active:scale-95 transition-transform", | ||
| ])} |
There was a problem hiding this comment.
Critical: Invalid Tailwind CSS class name.
bg-linear-to-t should be bg-gradient-to-t.
className={cn([
"inline-block px-8 py-3 text-base font-medium rounded-full",
- "bg-linear-to-t from-stone-600 to-stone-500 text-white",
+ "bg-gradient-to-t from-stone-600 to-stone-500 text-white",
"hover:scale-105 active:scale-95 transition-transform",
])}📝 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.
| className={cn([ | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | |
| "hover:scale-105 active:scale-95 transition-transform", | |
| ])} | |
| className={cn([ | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-gradient-to-t from-stone-600 to-stone-500 text-white", | |
| "hover:scale-105 active:scale-95 transition-transform", | |
| ])} |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/mini-apps.tsx around lines 122 to 126, the
Tailwind class "bg-linear-to-t" is invalid; replace it with the correct class
"bg-gradient-to-t" so the gradient background works as intended, keeping the
rest of the class list unchanged and ensuring the element still applies the
intended from/to color classes.
|
|
||
| <section className="bg-stone-50 border border-neutral-200 rounded-lg p-8 lg:p-12 text-center"> | ||
| <h2 className="text-3xl font-serif text-stone-600 mb-4"> | ||
| <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> |
There was a problem hiding this comment.
Critical: Invalid Tailwind CSS class name.
bg-linear-to-t should be bg-gradient-to-t.
- <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0">
+ <section className="py-16 bg-gradient-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0">📝 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.
| <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> | |
| <section className="py-16 bg-gradient-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/mini-apps.tsx around line 410, the Tailwind
class name is invalid: replace the incorrect `bg-linear-to-t` with the correct
`bg-gradient-to-t` in the section's className string so the gradient utility is
applied properly.
| className={cn([ | ||
| "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", | ||
| "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", | ||
| ])} |
There was a problem hiding this comment.
Critical: Invalid Tailwind CSS class name.
bg-linear-to-t should be bg-gradient-to-t.
className={cn([
"group px-6 h-12 flex items-center justify-center text-base sm:text-lg",
- "bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full",
+ "bg-gradient-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",
])}📝 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.
| className={cn([ | |
| "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", | |
| "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", | |
| ])} | |
| className={cn([ | |
| "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", | |
| "bg-gradient-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", | |
| ])} |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/mini-apps.tsx around lines 431 to 436, the
Tailwind class name typo `bg-linear-to-t` is invalid; replace it with the
correct `bg-gradient-to-t` so the gradient utility applies properly and keep the
rest of the class list unchanged.
| href="https://hyprnote.com/download" | ||
| className={cn([ | ||
| "inline-block px-8 py-3 text-base font-medium rounded-full", | ||
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | ||
| "hover:scale-105 active:scale-95 transition-transform", | ||
| ])} | ||
| > | ||
| Download for free | ||
| </a> |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the external download URL is intentional.
Both CTAs link to https://hyprnote.com/download which may cause a full page reload. If there's a local download route (like /download as seen in other files), consider using the Link component for client-side navigation.
If a local route exists, apply this change:
-<a
- href="https://hyprnote.com/download"
+<Link
+ to="/download"
className={cn([
"inline-block px-8 py-3 text-base font-medium rounded-full",
"bg-linear-to-t from-stone-600 to-stone-500 text-white",
"hover:scale-105 active:scale-95 transition-transform",
])}
>
Download for free
-</a>
+</Link>Run this script to check for local download routes:
Also applies to: 376-399
🏁 Script executed:
#!/bin/bash
# Check if there's a local download route definition
rg -n --type=ts --type=tsx 'createFileRoute.*download' -A 2Length of output: 27
🏁 Script executed:
#!/bin/bash
# Check if there's a local download route definition - simplified search
rg -n 'createFileRoute.*download|path.*download|route.*download' --type=ts -A 2Length of output: 2077
🏁 Script executed:
#!/bin/bash
# Alternative: search for download routes without type restriction
rg -n 'download' apps/web/src/routes -A 1 -B 1 | head -50Length of output: 3618
🏁 Script executed:
#!/bin/bash
# Get the actual content of notepad.tsx at the specified lines
sed -n '30,55p' apps/web/src/routes/_view/product/notepad.tsx
sed -n '370,405p' apps/web/src/routes/_view/product/notepad.tsxLength of output: 2912
🏁 Script executed:
#!/bin/bash
# Also check imports in notepad.tsx to see if Link component is available
head -20 apps/web/src/routes/_view/product/notepad.tsxLength of output: 554
Both CTA links should use the local /download route instead of the external domain.
The file already imports the Link component and local download routes exist at /_view/download/. Using the external URL causes unnecessary full page reloads, while other files (e.g., pricing.tsx) already follow the client-side navigation pattern with local routes. Apply the suggested change at both locations (lines 38–46 and 376–399).
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/notepad.tsx around lines 38–46 and 376–399,
replace the external anchor tags that point to "https://hyprnote.com/download"
with the local client-side Link component pointing to the local route
"/_view/download/" (or "/_view/download") to avoid full page reloads; preserve
the existing className and children text, and ensure you use the imported Link
component for both CTA locations so navigation is handled via client-side
routing.
ComputelessComputer
force-pushed
the
jj-branch-1
branch
2 times, most recently
from
3a360d5 to
af1e1bf
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/src/routes/_view/product/mini-apps.tsx (1)
108-475: Use Tailwind’sbg-gradient-to-*utilitiesEvery
bg-linear-to-*here (page shell, hero band, both CTA buttons, and the closing section) is a typo, so Tailwind won’t emit any gradient styles and the design regresses to a flat background. Please replace them with the supportedbg-gradient-to-*variants.- <div - className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen" + <div + className="bg-gradient-to-b from-white via-stone-50/20 to-white min-h-screen" @@ - <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20"> + <div className="bg-gradient-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20"> @@ - "bg-linear-to-t from-stone-600 to-stone-500 text-white", + "bg-gradient-to-t from-stone-600 to-stone-500 text-white", @@ - <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> + <section className="py-16 bg-gradient-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> @@ - "bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full", + "bg-gradient-to-t from-stone-600 to-stone-500 text-white rounded-full",apps/web/src/routes/_view/product/notepad.tsx (1)
25-413: Replacebg-linear-to-*with valid Tailwind gradientsThe notepad page also introduces
bg-linear-to-b/bg-linear-to-t, which Tailwind doesn’t compile. As a result, the hero band and both CTAs lose their gradient styling. Please switch every occurrence in this file to the supportedbg-gradient-to-*utilities.- <div - className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen" + <div + className="bg-gradient-to-b from-white via-stone-50/20 to-white min-h-screen" @@ - <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20"> + <div className="bg-gradient-to-b from-stone-50/30 to-stone-100/30 px-6 py-12 lg:py-20"> @@ - className={cn([ - "inline-block px-8 py-3 text-base font-medium rounded-full", - "bg-linear-to-t from-stone-600 to-stone-500 text-white", + className={cn([ + "inline-block px-8 py-3 text-base font-medium rounded-full", + "bg-gradient-to-t from-stone-600 to-stone-500 text-white", @@ - <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> + <section className="py-16 bg-gradient-to-t from-stone-50/30 to-stone-100/30 px-4 lg:px-0"> @@ - className={cn([ - "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", - "bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full", + className={cn([ + "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", + "bg-gradient-to-t from-stone-600 to-stone-500 text-white rounded-full",
🧹 Nitpick comments (1)
apps/web/src/routes/_view/product/extensions.tsx (1)
20-27: Remove unused description field.The
descriptionproperty is defined for each extension area but never rendered in the UI (lines 46-52 only usearea.label). Consider removing it to keep the data structure clean.Apply this diff:
const extensionAreas = [ - { label: "Custom Views", description: "Graph views, kanban boards, and more" }, - { label: "Themes", description: "Personalize your workspace" }, - { label: "Editor Plugins", description: "Enhanced editing capabilities" }, - { label: "Integrations", description: "Connect external tools" }, - { label: "Data Sources", description: "Import from anywhere" }, - { label: "Export Formats", description: "Share in any format" }, + "Custom Views", + "Themes", + "Editor Plugins", + "Integrations", + "Data Sources", + "Export Formats", ];And update the mapping:
- {extensionAreas.map((area) => ( + {extensionAreas.map((label) => ( <div - key={area.label} + key={label} className="px-3 py-1.5 rounded-full bg-stone-50 border border-stone-200 text-stone-600 text-xs font-medium" > - {area.label} + {label} </div> ))}
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/web/src/routes/_view/download/index.tsx(2 hunks)apps/web/src/routes/_view/index.tsx(5 hunks)apps/web/src/routes/_view/product/ai-assistant.tsx(6 hunks)apps/web/src/routes/_view/product/ai-notetaking.tsx(2 hunks)apps/web/src/routes/_view/product/api.tsx(2 hunks)apps/web/src/routes/_view/product/bot.tsx(2 hunks)apps/web/src/routes/_view/product/extensions.tsx(1 hunks)apps/web/src/routes/_view/product/local-ai.tsx(1 hunks)apps/web/src/routes/_view/product/mini-apps.tsx(9 hunks)apps/web/src/routes/_view/product/notepad.tsx(7 hunks)apps/web/src/routes/_view/product/self-hosting.tsx(2 hunks)apps/web/src/routes/_view/product/workflows.tsx(2 hunks)apps/web/src/routes/_view/route.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/web/src/routes/_view/product/api.tsx
- apps/web/src/routes/_view/product/self-hosting.tsx
🧰 Additional context used
🧬 Code graph analysis (9)
apps/web/src/routes/_view/index.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/extensions.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/bot.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/download/index.tsx (2)
packages/utils/src/cn.ts (1)
cn(20-22)apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)
apps/web/src/routes/_view/product/mini-apps.tsx (2)
packages/utils/src/cn.ts (1)
cn(20-22)apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)
apps/web/src/routes/_view/product/workflows.tsx (2)
apps/web/src/components/image.tsx (1)
Image(5-16)packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/product/notepad.tsx (2)
packages/utils/src/cn.ts (1)
cn(20-22)apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)
apps/web/src/routes/_view/product/ai-notetaking.tsx (3)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)packages/utils/src/cn.ts (1)
cn(20-22)apps/web/src/components/mock-window.tsx (1)
MockWindow(4-42)
apps/web/src/routes/_view/product/ai-assistant.tsx (2)
packages/utils/src/cn.ts (1)
cn(20-22)apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)
🔇 Additional comments (4)
apps/web/src/routes/_view/route.tsx (2)
85-85: LGTM: Spacing refinement improves visual balance.The increased gap between header navigation items is a subtle improvement to the header layout.
117-117: LGTM: Hover effects enhance navigation consistency.Adding the dotted underline hover effect to dropdown menu items brings them in line with the other navigation links in the header (Docs, Blog, Pricing, etc.), creating a more cohesive user experience.
Also applies to: 137-137
apps/web/src/routes/_view/download/index.tsx (2)
19-33: Well-structured banner with smooth hover transition.The use of
cnto compose the banner classes is clean and maintainable. The translucent background with hover effect provides good visual feedback.
35-102: Clean page structure with proper semantic sections.The layout is well-organized with clear Desktop and Mobile sections. The use of
SlashSeparatorcomponents between sections provides consistent visual separation.
| function Component() { | ||
| return ( | ||
| <div | ||
| className="bg-linear-to-b from-white via-blue-50/20 to-white min-h-screen" |
There was a problem hiding this comment.
Fix invalid Tailwind gradient class names.
Multiple locations use bg-linear-to-* which is not a valid Tailwind CSS class. The standard Tailwind gradient classes use bg-gradient-to-* instead. This will prevent the gradients from rendering correctly.
Apply these fixes:
Line 16 - Page background gradient:
- className="bg-linear-to-b from-white via-blue-50/20 to-white min-h-screen"
+ className="bg-gradient-to-b from-white via-blue-50/20 to-white min-h-screen"Line 129 - Enabled download button:
- className="group w-full px-4 h-11 flex items-center justify-center 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 text-base font-medium"
+ className="group w-full px-4 h-11 flex items-center justify-center bg-gradient-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 text-base font-medium"Line 143 - Disabled download button:
- "bg-linear-to-t from-stone-600 to-stone-500 text-white",
+ "bg-gradient-to-t from-stone-600 to-stone-500 text-white",Line 201 - CTA section background:
- <section className="py-16 bg-linear-to-t from-stone-50/30 to-stone-100/30 px-4 laptop:px-0">
+ <section className="py-16 bg-gradient-to-t from-stone-50/30 to-stone-100/30 px-4 laptop:px-0">Line 221 - CTA button:
- className="px-6 h-12 flex items-center justify-center text-base sm:text-lg 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"
+ className="px-6 h-12 flex items-center justify-center text-base sm:text-lg bg-gradient-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"Also applies to: 129-129, 143-143, 201-201, 221-221
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/download/index.tsx around lines 16, 129, 143, 201
and 221, the Tailwind gradient classes use the invalid prefix "bg-linear-to-*"
so gradients won't render; replace each "bg-linear-to-<direction>" with the
correct "bg-gradient-to-<direction>" (keeping the existing from-*, via-*, to-*
color stops and other classes intact) for the page background (line 16), enabled
download button (line 129), disabled download button (line 143), CTA section
background (line 201), and CTA button (line 221).
| className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)] relative overflow-hidden" | ||
| style={{ backgroundImage: "url(/patterns/dots.svg)" }} | ||
| > | ||
| <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white"> | ||
| <div className="px-6 py-12 lg:py-20"> | ||
| <header className="text-center"> | ||
| <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif text-stone-600 mb-6"> | ||
| <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white h-full relative"> | ||
| {DRAGGABLE_ICONS.map((icon, idx) => ( | ||
| <DraggableIcon | ||
| key={idx} | ||
| initialPosition={{ left: icon.left, top: icon.top, rotate: icon.rotate }} | ||
| size={icon.size} | ||
| /> | ||
| ))} | ||
|
|
||
| <div className="bg-[linear-gradient(to_bottom,rgba(245,245,244,0.2),white_50%,rgba(245,245,244,0.3))] px-6 h-full flex items-center justify-center relative z-10 pointer-events-none"> | ||
| <div className="text-center max-w-4xl mx-auto pointer-events-auto"> | ||
| <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600 mb-6"> | ||
| Hyprnote Bot | ||
| </h1> | ||
| <p className="text-xl lg:text-2xl text-neutral-600 leading-relaxed max-w-3xl mx-auto mb-8"> | ||
| <p className="text-lg sm:text-xl text-neutral-600"> | ||
| An optional bot solution for teams that need centralized meeting recording and management. | ||
| </p> | ||
| <button | ||
| disabled | ||
| className="px-8 py-3 text-base font-medium rounded-full bg-neutral-200 text-neutral-500 cursor-not-allowed" | ||
| > | ||
| Coming Soon | ||
| </button> | ||
| </header> | ||
| <div className="mt-8"> | ||
| <button | ||
| disabled | ||
| className={cn([ | ||
| "inline-block px-8 py-3 text-base font-medium rounded-full", | ||
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | ||
| "opacity-50 cursor-not-allowed", | ||
| ])} | ||
| > | ||
| Coming Soon | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Fix Tailwind gradient class typo
Tailwind only generates gradient utilities as bg-gradient-to-*. The new bg-linear-to-b/bg-linear-to-t classes on the hero container and CTA button won’t exist, so the gradient background disappears. Please swap every bg-linear-to-* in this file for the proper bg-gradient-to-*.
- <div
- className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)] relative overflow-hidden"
+ <div
+ className="bg-gradient-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)] relative overflow-hidden"
@@
- className={cn([
- "inline-block px-8 py-3 text-base font-medium rounded-full",
- "bg-linear-to-t from-stone-600 to-stone-500 text-white",
+ className={cn([
+ "inline-block px-8 py-3 text-base font-medium rounded-full",
+ "bg-gradient-to-t from-stone-600 to-stone-500 text-white",📝 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.
| className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)] relative overflow-hidden" | |
| style={{ backgroundImage: "url(/patterns/dots.svg)" }} | |
| > | |
| <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white"> | |
| <div className="px-6 py-12 lg:py-20"> | |
| <header className="text-center"> | |
| <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif text-stone-600 mb-6"> | |
| <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white h-full relative"> | |
| {DRAGGABLE_ICONS.map((icon, idx) => ( | |
| <DraggableIcon | |
| key={idx} | |
| initialPosition={{ left: icon.left, top: icon.top, rotate: icon.rotate }} | |
| size={icon.size} | |
| /> | |
| ))} | |
| <div className="bg-[linear-gradient(to_bottom,rgba(245,245,244,0.2),white_50%,rgba(245,245,244,0.3))] px-6 h-full flex items-center justify-center relative z-10 pointer-events-none"> | |
| <div className="text-center max-w-4xl mx-auto pointer-events-auto"> | |
| <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600 mb-6"> | |
| Hyprnote Bot | |
| </h1> | |
| <p className="text-xl lg:text-2xl text-neutral-600 leading-relaxed max-w-3xl mx-auto mb-8"> | |
| <p className="text-lg sm:text-xl text-neutral-600"> | |
| An optional bot solution for teams that need centralized meeting recording and management. | |
| </p> | |
| <button | |
| disabled | |
| className="px-8 py-3 text-base font-medium rounded-full bg-neutral-200 text-neutral-500 cursor-not-allowed" | |
| > | |
| Coming Soon | |
| </button> | |
| </header> | |
| <div className="mt-8"> | |
| <button | |
| disabled | |
| className={cn([ | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | |
| "opacity-50 cursor-not-allowed", | |
| ])} | |
| > | |
| Coming Soon | |
| </button> | |
| </div> | |
| className="bg-gradient-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)] relative overflow-hidden" | |
| style={{ backgroundImage: "url(/patterns/dots.svg)" }} | |
| > | |
| <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white h-full relative"> | |
| {DRAGGABLE_ICONS.map((icon, idx) => ( | |
| <DraggableIcon | |
| key={idx} | |
| initialPosition={{ left: icon.left, top: icon.top, rotate: icon.rotate }} | |
| size={icon.size} | |
| /> | |
| ))} | |
| <div className="bg-[linear-gradient(to_bottom,rgba(245,245,244,0.2),white_50%,rgba(245,245,244,0.3))] px-6 h-full flex items-center justify-center relative z-10 pointer-events-none"> | |
| <div className="text-center max-w-4xl mx-auto pointer-events-auto"> | |
| <h1 className="text-4xl sm:text-5xl font-serif tracking-tight text-stone-600 mb-6"> | |
| Hyprnote Bot | |
| </h1> | |
| <p className="text-lg sm:text-xl text-neutral-600"> | |
| An optional bot solution for teams that need centralized meeting recording and management. | |
| </p> | |
| <div className="mt-8"> | |
| <button | |
| disabled | |
| className={cn([ | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-gradient-to-t from-stone-600 to-stone-500 text-white", | |
| "opacity-50 cursor-not-allowed", | |
| ])} | |
| > | |
| Coming Soon | |
| </button> | |
| </div> |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/bot.tsx around lines 29 to 60, the Tailwind
gradient utility is mistyped as bg-linear-to-* (bg-linear-to-b and
bg-linear-to-t) which don’t exist; replace those occurrences with the correct
Tailwind class names bg-gradient-to-b and bg-gradient-to-t respectively so the
gradients are generated and applied (update both the hero container and the CTA
button classes).
| return ( | ||
| <div | ||
| className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen" | ||
| className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]" |
There was a problem hiding this comment.
Critical: Fix Tailwind gradient class typo.
The class bg-linear-to-b is invalid. Tailwind uses bg-gradient-to-b for linear gradients.
Apply this diff:
- className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]"
+ className="bg-gradient-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]"📝 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.
| className="bg-linear-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]" | |
| className="bg-gradient-to-b from-white via-stone-50/20 to-white h-[calc(100vh-65px)]" |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/extensions.tsx around line 31, the Tailwind
class `bg-linear-to-b` is incorrect; replace it with `bg-gradient-to-b` so the
element uses Tailwind's gradient utility (`className="bg-gradient-to-b
from-white via-stone-50/20 to-white h-[calc(100vh-65px)]"`).
| className={cn([ | ||
| "inline-flex items-center justify-center gap-2 px-8 py-3 text-base font-medium rounded-full", | ||
| "inline-block px-8 py-3 text-base font-medium rounded-full", | ||
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | ||
| "hover:scale-105 active:scale-95 transition-transform", | ||
| ])} | ||
| > | ||
| <Icon icon="mdi:puzzle" /> | ||
| <span>Request integration</span> | ||
| </a> | ||
| <a | ||
| href="mailto:[email protected]?subject=API Access Request" | ||
| className={cn([ | ||
| "inline-flex items-center justify-center gap-2 px-8 py-3 text-base font-medium rounded-full", | ||
| "border border-neutral-300 text-stone-600", | ||
| "hover:bg-white transition-colors", | ||
| "opacity-50 cursor-not-allowed", | ||
| ])} |
There was a problem hiding this comment.
Critical: Fix Tailwind gradient class typo.
The class bg-linear-to-t on line 62 is invalid. Tailwind uses bg-gradient-to-t for linear gradients.
Apply this diff:
className={cn([
"inline-block px-8 py-3 text-base font-medium rounded-full",
- "bg-linear-to-t from-stone-600 to-stone-500 text-white",
+ "bg-gradient-to-t from-stone-600 to-stone-500 text-white",
"opacity-50 cursor-not-allowed",
])}📝 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.
| className={cn([ | |
| "inline-flex items-center justify-center gap-2 px-8 py-3 text-base font-medium rounded-full", | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-linear-to-t from-stone-600 to-stone-500 text-white", | |
| "hover:scale-105 active:scale-95 transition-transform", | |
| ])} | |
| > | |
| <Icon icon="mdi:puzzle" /> | |
| <span>Request integration</span> | |
| </a> | |
| <a | |
| href="mailto:[email protected]?subject=API Access Request" | |
| className={cn([ | |
| "inline-flex items-center justify-center gap-2 px-8 py-3 text-base font-medium rounded-full", | |
| "border border-neutral-300 text-stone-600", | |
| "hover:bg-white transition-colors", | |
| "opacity-50 cursor-not-allowed", | |
| ])} | |
| className={cn([ | |
| "inline-block px-8 py-3 text-base font-medium rounded-full", | |
| "bg-gradient-to-t from-stone-600 to-stone-500 text-white", | |
| "opacity-50 cursor-not-allowed", | |
| ])} |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/product/extensions.tsx around lines 60 to 64, the
Tailwind class `bg-linear-to-t` is invalid; replace it with `bg-gradient-to-t`
so the gradient utility is applied correctly, keeping the rest of the className
array intact and preserving spacing/order.
ComputelessComputer
force-pushed
the
jj-branch-1
branch
from
af1e1bf to
d25cef3
Compare
No description provided.