landing-2 #1598
landing-2 #1598
Conversation
📝 WalkthroughWalkthroughThe PR extracts five reusable UI components (DownloadButton, GithubStars, LogoCloud, SocialCard, TestimonialCard) into standalone files and refactors the landing page to import and use them. Landing page styling transitions from blue to stone color scheme with restructured layout sections and updated header branding. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✨ 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: 6
🧹 Nitpick comments (1)
apps/web/src/components/github-stars.tsx (1)
9-16: Consider adding error handling for the GitHub API fetch.The query fallback to
LAST_SEENworks for unavailable data, but users won't know if the fetch failed. Consider adding error state handling or logging to improve observability.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
apps/web/public/icons/adobe.svgis excluded by!**/*.svgapps/web/public/icons/amazon.svgis excluded by!**/*.svgapps/web/public/icons/apple.svgis excluded by!**/*.svgapps/web/public/icons/bain.svgis excluded by!**/*.svgapps/web/public/icons/databricks.svgis excluded by!**/*.svgapps/web/public/icons/disney.svgis excluded by!**/*.svgapps/web/public/icons/meta.svgis excluded by!**/*.svgapps/web/public/icons/palantir.svgis excluded by!**/*.svgapps/web/public/icons/richmond_american.svgis excluded by!**/*.svgapps/web/public/icons/wayfair.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
apps/web/src/components/download-button.tsx(1 hunks)apps/web/src/components/github-stars.tsx(1 hunks)apps/web/src/components/logo-cloud.tsx(1 hunks)apps/web/src/components/social-card.tsx(1 hunks)apps/web/src/components/testimonial-card.tsx(1 hunks)apps/web/src/routes/_view/index.tsx(4 hunks)apps/web/src/routes/_view/route.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
apps/web/src/components/download-button.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/components/github-stars.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/components/logo-cloud.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/components/social-card.tsx (1)
packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/index.tsx (3)
apps/web/src/components/download-button.tsx (1)
DownloadButton(4-32)apps/web/src/components/logo-cloud.tsx (1)
LogoCloud(35-123)apps/web/src/components/social-card.tsx (1)
SocialCard(18-82)
🪛 Biome (2.1.2)
apps/web/src/routes/_view/index.tsx
[error] 39-39: Avoid using target="_blank" without rel="noopener" or rel="noreferrer".
Opening external links in new tabs without rel="noopener" is a security risk. See the explanation for more details.
Safe fix: Add the rel="noopener" attribute.
(lint/security/noBlankTarget)
🔇 Additional comments (4)
apps/web/src/components/testimonial-card.tsx (1)
1-22: LGTM!Clean, well-structured presentational component with appropriate TypeScript types. The implementation is straightforward and follows React best practices.
apps/web/src/components/logo-cloud.tsx (1)
1-123: LGTM!Well-structured component with clean separation of concerns. The responsive grid layout and border styling create a polished logo showcase. TypeScript types are properly defined and used.
apps/web/src/components/social-card.tsx (1)
1-82: LGTM! Security attributes properly included.Clean implementation with proper external link security (
rel="noopener noreferrer"on line 59). The platform-specific configuration approach is maintainable and extensible.Note: Line 78 uses
line-clamp-15, which is quite high. This appears intentional for displaying longer testimonial content, but verify this matches the design intent.apps/web/src/routes/_view/index.tsx (1)
4-7: Good refactoring: extracted components improve maintainability.The refactor to import reusable components (
DownloadButton,GithubStars,LogoCloud,SocialCard) instead of inline definitions improves code organization and reusability.
| export function DownloadButton() { | ||
| return ( | ||
| <Link | ||
| to="/downloads" | ||
| 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", | ||
| ])} | ||
| > | ||
| Download now | ||
| <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" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" | ||
| /> | ||
| </svg> | ||
| </Link> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Fix invalid Tailwind CSS class name.
Line 10 uses bg-linear-to-t which is not a valid Tailwind CSS class. The correct class for top-directed gradients is bg-gradient-to-t.
Apply this diff:
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.
| export function DownloadButton() { | |
| return ( | |
| <Link | |
| to="/downloads" | |
| 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", | |
| ])} | |
| > | |
| Download now | |
| <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" | |
| > | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" | |
| /> | |
| </svg> | |
| </Link> | |
| ); | |
| } | |
| export function DownloadButton() { | |
| return ( | |
| <Link | |
| to="/downloads" | |
| 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", | |
| ])} | |
| > | |
| Download now | |
| <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" | |
| > | |
| <path | |
| strokeLinecap="round" | |
| strokeLinejoin="round" | |
| d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" | |
| /> | |
| </svg> | |
| </Link> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In apps/web/src/components/download-button.tsx around lines 4 to 32, the
Tailwind class "bg-linear-to-t" is invalid; update the class list to use the
correct gradient utility "bg-gradient-to-t" (replace "bg-linear-to-t" with
"bg-gradient-to-t" in the className array) so the top-directed background
gradient renders correctly.
| return ( | ||
| <a href={`https://github.com/${ORG_REPO}`} target="_blank"> | ||
| <button | ||
| className={cn([ | ||
| "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", | ||
| "bg-linear-to-t from-neutral-800 to-neutral-700 text-white rounded-full", | ||
| "shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%]", | ||
| "transition-all cursor-pointer", | ||
| ])} | ||
| > | ||
| <Icon icon="mdi:github" className="text-xl" /> | ||
| <span className="ml-2">{star.data ? render(star.data) : render(LAST_SEEN)} stars</span> | ||
| </button> | ||
| </a> | ||
| ); |
There was a problem hiding this comment.
Add security attributes to external link.
Line 21 opens an external link with target="_blank" but is missing rel="noopener noreferrer", which creates a security vulnerability. The opened page can access the window.opener object and potentially redirect the original page.
Apply this diff:
- <a href={`https://github.com/${ORG_REPO}`} target="_blank">
+ <a href={`https://github.com/${ORG_REPO}`} target="_blank" rel="noopener noreferrer">📝 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.
| return ( | |
| <a href={`https://github.com/${ORG_REPO}`} target="_blank"> | |
| <button | |
| className={cn([ | |
| "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", | |
| "bg-linear-to-t from-neutral-800 to-neutral-700 text-white rounded-full", | |
| "shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%]", | |
| "transition-all cursor-pointer", | |
| ])} | |
| > | |
| <Icon icon="mdi:github" className="text-xl" /> | |
| <span className="ml-2">{star.data ? render(star.data) : render(LAST_SEEN)} stars</span> | |
| </button> | |
| </a> | |
| ); | |
| return ( | |
| <a href={`https://github.com/${ORG_REPO}`} target="_blank" rel="noopener noreferrer"> | |
| <button | |
| className={cn([ | |
| "group px-6 h-12 flex items-center justify-center text-base sm:text-lg", | |
| "bg-linear-to-t from-neutral-800 to-neutral-700 text-white rounded-full", | |
| "shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%]", | |
| "transition-all cursor-pointer", | |
| ])} | |
| > | |
| <Icon icon="mdi:github" className="text-xl" /> | |
| <span className="ml-2">{star.data ? render(star.data) : render(LAST_SEEN)} stars</span> | |
| </button> | |
| </a> | |
| ); |
🤖 Prompt for AI Agents
In apps/web/src/components/github-stars.tsx around lines 20 to 34, the anchor
uses target="_blank" without rel attributes, which allows the opened page to
access window.opener; add rel="noopener noreferrer" to the <a> tag to prevent
the new page from obtaining a reference to the opener and mitigate the security
vulnerability while keeping target="_blank".
| <main className="flex-1 bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"> | ||
| <div className="max-w-6xl mx-auto py-12 border-x border-neutral-100"> | ||
| <section className="py-16 sm:py-24"> | ||
| <div className="grid grid-cols-1 lg:grid-cols-8 gap-12 items-center"> | ||
| <div className="space-y-6 lg:col-span-3"> | ||
| <h1 className="text-4xl sm:text-5xl font-serif tracking-tight whitespace-pre-wrap"> | ||
| The AI notepad for{" "} | ||
| <Typewriter | ||
| text={["your meetings", "your lectures", "your thoughts"]} | ||
| className="text-blue-600 text-4xl sm:text-5xl font-serif tracking-tight" | ||
| speed={100} | ||
| deleteSpeed={50} | ||
| waitTime={2000} | ||
| /> | ||
| </h1> | ||
| <p className="text-lg sm:text-xl text-neutral-600 max-w-xl"> | ||
| Hyprnote is a notetaking app that listens and summarizes the world around you | ||
| </p> | ||
| <div className="flex flex-col sm:flex-row gap-4 pt-2"> | ||
| <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30"> |
There was a problem hiding this comment.
Fix invalid Tailwind CSS class names.
Lines 16 and 18 use bg-linear-to-b and bg-linear-to-b, which are not valid Tailwind CSS classes. The correct classes for gradients are bg-gradient-to-b and similar.
Apply this diff:
- <main className="flex-1 bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen">
+ <main className="flex-1 bg-gradient-to-b from-white via-stone-50/20 to-white min-h-screen">
<div className="max-w-6xl mx-auto py-12 border-x border-neutral-100">
- <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30">
+ <div className="bg-gradient-to-b from-stone-50/30 to-stone-100/30">📝 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.
| <main className="flex-1 bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"> | |
| <div className="max-w-6xl mx-auto py-12 border-x border-neutral-100"> | |
| <section className="py-16 sm:py-24"> | |
| <div className="grid grid-cols-1 lg:grid-cols-8 gap-12 items-center"> | |
| <div className="space-y-6 lg:col-span-3"> | |
| <h1 className="text-4xl sm:text-5xl font-serif tracking-tight whitespace-pre-wrap"> | |
| The AI notepad for{" "} | |
| <Typewriter | |
| text={["your meetings", "your lectures", "your thoughts"]} | |
| className="text-blue-600 text-4xl sm:text-5xl font-serif tracking-tight" | |
| speed={100} | |
| deleteSpeed={50} | |
| waitTime={2000} | |
| /> | |
| </h1> | |
| <p className="text-lg sm:text-xl text-neutral-600 max-w-xl"> | |
| Hyprnote is a notetaking app that listens and summarizes the world around you | |
| </p> | |
| <div className="flex flex-col sm:flex-row gap-4 pt-2"> | |
| <div className="bg-linear-to-b from-stone-50/30 to-stone-100/30"> | |
| <main className="flex-1 bg-gradient-to-b from-white via-stone-50/20 to-white min-h-screen"> | |
| <div className="max-w-6xl mx-auto py-12 border-x border-neutral-100"> | |
| <div className="bg-gradient-to-b from-stone-50/30 to-stone-100/30"> |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/index.tsx around lines 16 to 18, the Tailwind
classes "bg-linear-to-b" are invalid; replace them with the correct gradient
class names such as "bg-gradient-to-b" (e.g., change both occurrences of
"bg-linear-to-b" to "bg-gradient-to-b") and verify any related gradient
direction/version is consistent with Tailwind docs.
| <a | ||
| className="decoration-dotted underline hover:text-blue-600 transition-all" | ||
| className="decoration-dotted underline hover:text-stone-600 transition-all" | ||
| href="https://github.com/fastrepl/hyprnote" | ||
| target="_blank" | ||
| > | ||
| open source | ||
| </a> | ||
| </p> |
There was a problem hiding this comment.
Add security attributes to external link.
Line 39 opens an external link with target="_blank" but is missing rel="noopener noreferrer". This creates a security vulnerability where the opened page can access the window.opener object.
Apply this diff (as suggested by static analysis):
<a
- className="decoration-dotted underline hover:text-stone-600 transition-all"
+ className="decoration-dotted underline hover:text-stone-600 transition-all"
+ rel="noopener noreferrer"
href="https://github.com/fastrepl/hyprnote"
target="_blank"
>📝 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.
| <a | |
| className="decoration-dotted underline hover:text-blue-600 transition-all" | |
| className="decoration-dotted underline hover:text-stone-600 transition-all" | |
| href="https://github.com/fastrepl/hyprnote" | |
| target="_blank" | |
| > | |
| open source | |
| </a> | |
| </p> | |
| <a | |
| className="decoration-dotted underline hover:text-stone-600 transition-all" | |
| rel="noopener noreferrer" | |
| href="https://github.com/fastrepl/hyprnote" | |
| target="_blank" | |
| > | |
| open source | |
| </a> |
🧰 Tools
🪛 Biome (2.1.2)
[error] 39-39: Avoid using target="_blank" without rel="noopener" or rel="noreferrer".
Opening external links in new tabs without rel="noopener" is a security risk. See the explanation for more details.
Safe fix: Add the rel="noopener" attribute.
(lint/security/noBlankTarget)
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/index.tsx around lines 36 to 43, the external
anchor uses target="_blank" without rel attributes which allows the opened page
to access window.opener; update the <a> tag to include rel="noopener noreferrer"
(i.e., add rel="noopener noreferrer" alongside the existing target attribute) to
prevent the new page from gaining access to the opener and mitigate the security
risk.
| {/* Video - Mobile First */} | ||
| <div className="relative aspect-video w-full max-w-4xl bg-linear-to-br from-stone-50 to-neutral-50 border-t border-neutral-100 md:hidden"> | ||
| <div className="absolute inset-0 flex items-center justify-center"> | ||
| <div className="text-center space-y-4"> | ||
| <Icon icon="mdi:play-circle-outline" className="text-6xl text-neutral-400 mx-auto" /> | ||
| <p className="text-neutral-500 font-medium">Demo video coming soon</p> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Fix invalid Tailwind CSS class name.
Line 48 uses bg-linear-to-br which is not a valid Tailwind CSS class. The correct class for bottom-right gradients is bg-gradient-to-br.
Apply this diff:
- <div className="relative aspect-video w-full max-w-4xl bg-linear-to-br from-stone-50 to-neutral-50 border-t border-neutral-100 md:hidden">
+ <div className="relative aspect-video w-full max-w-4xl bg-gradient-to-br from-stone-50 to-neutral-50 border-t border-neutral-100 md:hidden">📝 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.
| {/* Video - Mobile First */} | |
| <div className="relative aspect-video w-full max-w-4xl bg-linear-to-br from-stone-50 to-neutral-50 border-t border-neutral-100 md:hidden"> | |
| <div className="absolute inset-0 flex items-center justify-center"> | |
| <div className="text-center space-y-4"> | |
| <Icon icon="mdi:play-circle-outline" className="text-6xl text-neutral-400 mx-auto" /> | |
| <p className="text-neutral-500 font-medium">Demo video coming soon</p> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Video - Mobile First */} | |
| <div className="relative aspect-video w-full max-w-4xl bg-gradient-to-br from-stone-50 to-neutral-50 border-t border-neutral-100 md:hidden"> | |
| <div className="absolute inset-0 flex items-center justify-center"> | |
| <div className="text-center space-y-4"> | |
| <Icon icon="mdi:play-circle-outline" className="text-6xl text-neutral-400 mx-auto" /> | |
| <p className="text-neutral-500 font-medium">Demo video coming soon</p> | |
| </div> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/index.tsx around lines 47 to 55, the Tailwind class
name used for the background gradient is invalid (`bg-linear-to-br`); replace it
with the correct Tailwind utility `bg-gradient-to-br` on the div so the
bottom-right gradient renders properly.
| <Link | ||
| to="/downloads" | ||
| className="px-4 h-8 flex items-center text-sm bg-linear-to-t from-blue-600 to-blue-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all" | ||
| className="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" | ||
| > | ||
| Download | ||
| </Link> |
There was a problem hiding this comment.
Fix invalid Tailwind CSS class name.
Line 39 uses bg-linear-to-t which is not a valid Tailwind CSS class. The correct class for top-directed gradients is bg-gradient-to-t.
Apply this diff:
<Link
to="/downloads"
- className="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"
+ className="px-4 h-8 flex items-center text-sm 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.
| <Link | |
| to="/downloads" | |
| className="px-4 h-8 flex items-center text-sm bg-linear-to-t from-blue-600 to-blue-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all" | |
| className="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" | |
| > | |
| Download | |
| </Link> | |
| <Link | |
| to="/downloads" | |
| className="px-4 h-8 flex items-center text-sm 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" | |
| > | |
| Download | |
| </Link> |
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/route.tsx around lines 37 to 42, the Tailwind class
"bg-linear-to-t" is invalid; replace it with the correct gradient utility
"bg-gradient-to-t" so the element uses a top-directed gradient (ensure only the
class name is changed and spacing/order of classes remains valid).
No description provided.