Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds an Enterprise landing page and several new client components (Rive animation, logo ticker, scroll carousel, tab switcher, form, accordion), updates homepage metadata and a card type, augments global Tally types, adds two npm dependencies, and introduces a new button variant. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes 🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (14)
apps/site/src/components/enterprise/carousel-item.tsx (1)
18-18: Remove ineffectivekeyprop from inside the component.
keyshould be set whereCarouselItemis rendered in a list, not on an internal<Card>. Keeping it here is misleading and has no effect.Proposed fix
- <Card - key={card.title} + <Card className={cn(🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/carousel-item.tsx` at line 18, Remove the ineffective key prop from inside the CarouselItem component: delete the internal prop key={card.title} on the <Card> rendered by CarouselItem and ensure callers provide a key when rendering <CarouselItem> in a list (e.g., key={card.title} at the place where CarouselItem is mapped/instantiated). Update any tests or usages that assumed an internal key to verify keys are applied by the parent renderers instead.apps/site/src/app/enterprise/page.tsx (3)
4-4: Unused import:Scriptfromnext/script.This import isn't used in this file since
EnterpriseFormhandles the Tally script internally.-import Script from "next/script";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/enterprise/page.tsx` at line 4, Remove the unused import of Script from next/script in the module (the identifier Script is not referenced); since EnterpriseForm handles the Tally script internally, delete the line importing Script to avoid unused-import lint errors and keep the file imports minimal.
475-475: Remove commented-out code before merging.This comment references a component that's either not implemented or being deferred. Either implement it or remove the comment to keep the codebase clean.
- {/* <CarouselItem className="bg-background-default" card={development_efficiency[0]} /> use this item inside the carousel */}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/enterprise/page.tsx` at line 475, Remove the leftover commented-out JSX referencing CarouselItem and development_efficiency: either implement the CarouselItem usage inside the carousel or delete the comment line entirely; locate the commented line that reads "<CarouselItem className="bg-background-default" card={development_efficiency[0]} />" near the carousel rendering and either replace it with the proper CarouselItem component usage (ensuring props match CarouselItem's signature) or remove the comment so no dead/commented JSX remains.
279-279: Component nameSiteHomedoesn't reflect its purpose.This is the enterprise page, but the component is named
SiteHome. Consider renaming toEnterprisePageor similar for clarity.-export default function SiteHome() { +export default function EnterprisePage() {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/enterprise/page.tsx` at line 279, The component is misnamed: rename the default-exported function SiteHome to a clearer name like EnterprisePage (update the function declaration and the export default to EnterprisePage) and then update any references/imports/usages of SiteHome elsewhere in the repo to the new name (search for SiteHome and replace with EnterprisePage); ensure file-level React/Next conventions remain valid after renaming (e.g., default export matches the function name) and run type checks to catch any missed references.apps/site/src/components/technology.tsx (1)
10-10: Unused import:useStateis imported but never used.This import can be safely removed to keep the code clean.
-import { useState } from "react";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/technology.tsx` at line 10, The import list in components/technology.tsx includes an unused symbol `useState`; remove `useState` from the import statement (i.e., only import what is actually used) so the module no longer contains the unused import and lints cleanly—look for the import line that currently reads `import { useState } from "react";` and update it to import only the needed React symbols or remove the line if none are required.apps/site/src/components/logo-parade.tsx (2)
2-2: Unused import:useRefis imported but never used.-import { useState, useRef } from "react"; +import { useState } from "react";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/logo-parade.tsx` at line 2, The import list in logo-parade.tsx includes an unused symbol useRef; remove useRef from the import statement (leave useState) or if you intended to use a ref, add its usage inside the LogoParade component (e.g., create and reference a ref via useRef in the component). Update the import line that currently reads import { useState, useRef } from "react" to only import what’s used.
105-105: Unused variables:speeds,speed, andsetSpeed.These are defined but never used. The animation duration is hardcoded to
110son line 132 instead of using thespeedsobject. Either remove these unused variables or wire them up to make speed configurable.♻️ Option 1: Remove unused code
-const speeds = { slow: "100s", normal: "30s", fast: "15s" };export default function LogoParade() { - const [speed, setSpeed] = useState("normal"); const [paused, setPaused] = useState(false);♻️ Option 2: Use the speed configuration
style={{ - animation: `scroll-left 110s linear infinite`, + animation: `scroll-left ${speeds[speed]} linear infinite`,Also applies to: 115-116
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/logo-parade.tsx` at line 105, The component defines unused variables speeds, speed, and setSpeed (in LogoParade) while the marquee animationDuration is hardcoded to "110s"; either remove the speeds object and the useState hook (speed, setSpeed) and related unused imports, or wire them up by replacing the hardcoded "110s" with a dynamic value derived from speeds[speed], ensure the useState default (e.g., "normal") is used, and update any controls or JSX that should call setSpeed so the animationDuration updates when speed changes.apps/site/src/components/enterprise/form.tsx (1)
16-17: Use proper typing instead of@ts-ignore.Since you've declared
Tallyon theWindowinterface inglobal.d.ts, you can access it throughwindow.Tallywith optional chaining. This provides type safety and removes the need for the ignore comment.<Script src="https://tally.so/widgets/embed.js" - //@ts-ignore - onLoad={() => Tally.loadEmbeds()} + onLoad={() => window.Tally?.loadEmbeds()} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/form.tsx` around lines 16 - 17, Replace the use of the `@ts-ignore` and direct `Tally` reference in the `onLoad` handler with a type-safe access via the declared global `Tally` on `window` (use optional chaining to safely call the embed loader). Update the `onLoad` callback that currently calls `Tally.loadEmbeds()` to call the `loadEmbeds` method through `window` (e.g., using optional chaining) so TypeScript recognizes the global from `global.d.ts` and no `@ts-ignore` is needed; ensure you reference `onLoad` and the `Tally` global when making this change.apps/site/src/components/enterprise/switch-enterprise.tsx (2)
36-55: Significant JSX duplication across desktop and mobile views.The card rendering logic (icon + title + description) is repeated three times with minimal differences. Extracting a
ContentCardsub-component would reduce duplication and make future styling changes easier to maintain.♻️ Example extraction
const ContentCard = ({ box, idx }: { box: ContentBox; idx: number }) => ( <div className="flex flex-col gap-4 relative z-2" key={idx}> <div className="flex gap-4 items-center"> <Action color="orm" size="4xl"> <i className={cn("text-foreground-orm-strong text-2xl", box.icon)} /> </Action> <h3 className="text-foreground-neutral font-sans-display text-xl stretch-display mt-0 mb-1 font-bold line-clamp-2 hover:line-clamp-none"> {box.title} </h3> </div> <p className="text-foreground-neutral dark:text-foreground-neutral-weak text-sm font-normal m-0"> {box.description} </p> </div> );Also applies to: 61-80, 93-112
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/switch-enterprise.tsx` around lines 36 - 55, Duplicate JSX for the card (icon + title + description) should be extracted into a small reusable component (e.g., ContentCard) and used in place of the repeated blocks around the map calls; create a ContentCard component that accepts props { box, idx } and renders the same structure (Action, <i className={cn(..., box.icon)} />, title h3, and description p) and then replace each occurrence (the map rendering over content[activeTab] and the two other identical blocks) with <ContentCard box={box} idx={idx} /> (ensure the key is applied to the outermost element inside ContentCard or to the map wrapper, preserve existing classNames and imports like Action and cn).
9-9: Consider defining a proper type instead ofArray<any>.Using
anyloses type safety and IDE autocompletion. A simple interface would improve maintainability:interface ContentBox { icon: string; title: string; description: string; } content: ContentBox[][];🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/switch-enterprise.tsx` at line 9, The field currently typed as "content: Array<any>;" loses type safety—define a dedicated interface (e.g., ContentBox with properties icon: string, title: string, description: string) and replace the loose Array<any> usage by typing the content field as ContentBox[][] (or ContentBox[] if it’s a single-dimensional array) so the "content" property in switch-enterprise.tsx is strongly typed and provides proper IDE autocompletion.apps/site/src/components/animation.tsx (4)
32-33: Remove debug console logs before shipping.These
console.logandconsole.errorcalls are useful during development but should be removed (or replaced with proper observability/error tracking) for production code. They add noise to the browser console and can leak internal details.♻️ Proposed fix
const { rive, RiveComponent } = useRive({ src: `/animations/${name}.riv`, autoplay: autoplay || false, - onLoad: () => console.log("Rive loaded successfully"), - onLoadError: (e) => console.error("Rive load error:", e), layout: new Layout({ fit: fit, alignment: Alignment.Center, }), });If you need error tracking in production, consider integrating with your error monitoring service instead.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/animation.tsx` around lines 32 - 33, Remove the debug console statements in the Rive component props: eliminate the onLoad: () => console.log("Rive loaded successfully") and onLoadError: (e) => console.error("Rive load error:", e) calls; either remove the onLoad handler entirely and replace onLoadError with a call to your observability API (e.g., captureException(e) / telemetry.report(e)) or no-op handlers if you must keep the props (refer to the onLoad and onLoadError properties in the animation component) so no debug console output is emitted in production.
51-51: Remove leftover debug comment.The
// <- thiscomment appears to be a development note that should be cleaned up before merging. The cleanup function itself is a good practice for preventing orphaned playback.🧹 Proposed cleanup
- return () => rive?.pause(); // <- this + return () => rive?.pause();🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/animation.tsx` at line 51, Remove the leftover dev comment after the cleanup return in the animation component; specifically edit the cleanup returned by the effect (the line containing "return () => rive?.pause();") to remove the trailing "// <- this" comment so the file (apps/site/src/components/animation.tsx) only contains the cleanup function with no inline debug note.
23-23: Redundant state:isVisiblesimply mirrorsisInView.The
isVisiblestate and its synchronization effect add unnecessary complexity. TheuseInViewhook already provides the reactiveisInViewboolean you can use directly in your playback effect. This eliminates one state variable and one effect.♻️ Proposed simplification
- const [isVisible, setVisible] = useState<boolean>(false); - const [reference, isInView] = useInView({ threshold: threshold ?? 0.2, }); // ... useRive hook ... - useEffect(() => { - if (isInView) setVisible(true); - else setVisible(false); - }, [isInView]); - useEffect(() => { if (rive) { - if (isVisible) { + if (isInView) { rive.play(); } else rive.pause(); } return () => rive?.pause(); - }, [isVisible, rive]); + }, [isInView, rive]);Also applies to: 40-43
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/animation.tsx` at line 23, The isVisible state and its setter (isVisible / setVisible) are redundant because useInView already exposes isInView; remove the useState declaration and the effect that syncs isVisible with isInView, then update the playback/useEffect logic that currently references isVisible to use isInView directly (keep the useInView hook and any refs intact). Ensure no leftover references to setVisible remain and remove any now-unused imports/variables.
59-59: Simplify the style prop assignment.The spread syntax
{...{ style: style }}is unnecessarily verbose. You can directly assign the prop, which is clearer and more idiomatic.♻️ Proposed simplification
<div ref={reference} data-testid="rive-animation" className={className} - {...{ style: style }} + style={style} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/animation.tsx` at line 59, Replace the verbose spread assignment {...{ style: style }} with a direct prop assignment style={style} in the component (look for the JSX element rendering the style prop in animation.tsx, e.g., within the Animation component or the element that currently uses {...{ style: style }}), ensuring the prop name remains "style" and the value remains the same variable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/enterprise/page.tsx`:
- Around line 145-196: The enterprises array contains identical placeholder
descriptions for every feature; update each object in the enterprises array
(match by title values like "Dedicated support", "Risk and compliance", "Custom
solutions", etc.) to provide a unique, concise description that accurately
reflects that feature's value proposition (keep tone/length consistent and
adjust any related UI copy if needed); ensure you edit the description property
for each entry rather than duplicating the placeholder text.
- Around line 274-277: The exported metadata object for the enterprise page
currently uses SITE_HOME_TITLE and SITE_HOME_DESCRIPTION which are for the
homepage; create enterprise-specific constants (e.g., SITE_ENTERPRISE_TITLE and
SITE_ENTERPRISE_DESCRIPTION) and replace the values used in the export const
metadata to reference those enterprise constants so the enterprise landing page
has correct SEO title and description.
In `@apps/site/src/components/animation.tsx`:
- Line 26: The current truthy check for the threshold value (the line setting
"threshold: threshold ? threshold : 0.2") incorrectly treats 0 as falsy and
replaces it with 0.2; update the assignment to use nullish coalescing so only
null/undefined fall back to 0.2, keeping explicit 0 values intact (locate the
threshold variable/prop usage in animation.tsx where the object property
"threshold" is assigned).
In `@apps/site/src/components/enterprise/carousel-item.tsx`:
- Around line 7-15: The component destructures a prop "last = false" but the
props type annotation (the object with "card" and optional "className") does not
include "last", causing a TypeScript error; either add "last?: boolean" to the
props type or remove "last" from the destructuring if it's unused—update the
props type definition adjacent to the destructured params in carousel-item.tsx
(the object containing card: { title, description, icon } and className?) to
include last?: boolean, or delete the "last = false" entry from the parameter
list and any references to "last" inside the component.
In `@apps/site/src/components/logo-parade.tsx`:
- Line 36: The url property in the logo object in
apps/site/src/components/logo-parade.tsx contains a leading space ("
https://www.panther.co/") which will produce a malformed link; remove the
leading whitespace so the url value is "https://www.panther.co/" (update the url
string in the logo object or wherever the url property is defined in the
LogoParade component).
In `@apps/site/src/components/technology.tsx`:
- Line 31: The className in the Technology component contains conflicting
font-family utilities ("font-sans-display!" and "font-mono!"); decide which font
family is intended and remove the other from the class list (look for the
className string in apps/site/src/components/technology.tsx where those tokens
appear) so only a single font-family utility remains and the "!"/important
modifiers are preserved only for the chosen font.
---
Nitpick comments:
In `@apps/site/src/app/enterprise/page.tsx`:
- Line 4: Remove the unused import of Script from next/script in the module (the
identifier Script is not referenced); since EnterpriseForm handles the Tally
script internally, delete the line importing Script to avoid unused-import lint
errors and keep the file imports minimal.
- Line 475: Remove the leftover commented-out JSX referencing CarouselItem and
development_efficiency: either implement the CarouselItem usage inside the
carousel or delete the comment line entirely; locate the commented line that
reads "<CarouselItem className="bg-background-default"
card={development_efficiency[0]} />" near the carousel rendering and either
replace it with the proper CarouselItem component usage (ensuring props match
CarouselItem's signature) or remove the comment so no dead/commented JSX
remains.
- Line 279: The component is misnamed: rename the default-exported function
SiteHome to a clearer name like EnterprisePage (update the function declaration
and the export default to EnterprisePage) and then update any
references/imports/usages of SiteHome elsewhere in the repo to the new name
(search for SiteHome and replace with EnterprisePage); ensure file-level
React/Next conventions remain valid after renaming (e.g., default export matches
the function name) and run type checks to catch any missed references.
In `@apps/site/src/components/animation.tsx`:
- Around line 32-33: Remove the debug console statements in the Rive component
props: eliminate the onLoad: () => console.log("Rive loaded successfully") and
onLoadError: (e) => console.error("Rive load error:", e) calls; either remove
the onLoad handler entirely and replace onLoadError with a call to your
observability API (e.g., captureException(e) / telemetry.report(e)) or no-op
handlers if you must keep the props (refer to the onLoad and onLoadError
properties in the animation component) so no debug console output is emitted in
production.
- Line 51: Remove the leftover dev comment after the cleanup return in the
animation component; specifically edit the cleanup returned by the effect (the
line containing "return () => rive?.pause();") to remove the trailing "// <-
this" comment so the file (apps/site/src/components/animation.tsx) only contains
the cleanup function with no inline debug note.
- Line 23: The isVisible state and its setter (isVisible / setVisible) are
redundant because useInView already exposes isInView; remove the useState
declaration and the effect that syncs isVisible with isInView, then update the
playback/useEffect logic that currently references isVisible to use isInView
directly (keep the useInView hook and any refs intact). Ensure no leftover
references to setVisible remain and remove any now-unused imports/variables.
- Line 59: Replace the verbose spread assignment {...{ style: style }} with a
direct prop assignment style={style} in the component (look for the JSX element
rendering the style prop in animation.tsx, e.g., within the Animation component
or the element that currently uses {...{ style: style }}), ensuring the prop
name remains "style" and the value remains the same variable.
In `@apps/site/src/components/enterprise/carousel-item.tsx`:
- Line 18: Remove the ineffective key prop from inside the CarouselItem
component: delete the internal prop key={card.title} on the <Card> rendered by
CarouselItem and ensure callers provide a key when rendering <CarouselItem> in a
list (e.g., key={card.title} at the place where CarouselItem is
mapped/instantiated). Update any tests or usages that assumed an internal key to
verify keys are applied by the parent renderers instead.
In `@apps/site/src/components/enterprise/form.tsx`:
- Around line 16-17: Replace the use of the `@ts-ignore` and direct `Tally`
reference in the `onLoad` handler with a type-safe access via the declared
global `Tally` on `window` (use optional chaining to safely call the embed
loader). Update the `onLoad` callback that currently calls `Tally.loadEmbeds()`
to call the `loadEmbeds` method through `window` (e.g., using optional chaining)
so TypeScript recognizes the global from `global.d.ts` and no `@ts-ignore` is
needed; ensure you reference `onLoad` and the `Tally` global when making this
change.
In `@apps/site/src/components/enterprise/switch-enterprise.tsx`:
- Around line 36-55: Duplicate JSX for the card (icon + title + description)
should be extracted into a small reusable component (e.g., ContentCard) and used
in place of the repeated blocks around the map calls; create a ContentCard
component that accepts props { box, idx } and renders the same structure
(Action, <i className={cn(..., box.icon)} />, title h3, and description p) and
then replace each occurrence (the map rendering over content[activeTab] and the
two other identical blocks) with <ContentCard box={box} idx={idx} /> (ensure the
key is applied to the outermost element inside ContentCard or to the map
wrapper, preserve existing classNames and imports like Action and cn).
- Line 9: The field currently typed as "content: Array<any>;" loses type
safety—define a dedicated interface (e.g., ContentBox with properties icon:
string, title: string, description: string) and replace the loose Array<any>
usage by typing the content field as ContentBox[][] (or ContentBox[] if it’s a
single-dimensional array) so the "content" property in switch-enterprise.tsx is
strongly typed and provides proper IDE autocompletion.
In `@apps/site/src/components/logo-parade.tsx`:
- Line 2: The import list in logo-parade.tsx includes an unused symbol useRef;
remove useRef from the import statement (leave useState) or if you intended to
use a ref, add its usage inside the LogoParade component (e.g., create and
reference a ref via useRef in the component). Update the import line that
currently reads import { useState, useRef } from "react" to only import what’s
used.
- Line 105: The component defines unused variables speeds, speed, and setSpeed
(in LogoParade) while the marquee animationDuration is hardcoded to "110s";
either remove the speeds object and the useState hook (speed, setSpeed) and
related unused imports, or wire them up by replacing the hardcoded "110s" with a
dynamic value derived from speeds[speed], ensure the useState default (e.g.,
"normal") is used, and update any controls or JSX that should call setSpeed so
the animationDuration updates when speed changes.
In `@apps/site/src/components/technology.tsx`:
- Line 10: The import list in components/technology.tsx includes an unused
symbol `useState`; remove `useState` from the import statement (i.e., only
import what is actually used) so the module no longer contains the unused import
and lints cleanly—look for the import line that currently reads `import {
useState } from "react";` and update it to import only the needed React symbols
or remove the line if none are required.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: bef2f3c3-d71c-4633-9f91-e81a7e49db73
⛔ Files ignored due to path filters (15)
apps/site/public/icons/technologies/mariadb.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mariadbdark.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mongodb copy.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mongodbsimple.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mssql.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mysql copy.svgis excluded by!**/*.svgapps/site/public/icons/technologies/mysqlsimple.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/Illustrations/Diagrams/Code/Type3.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/enterprise_0.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/enterprise_0_light.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/enterprise_1.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/enterprise_1_light.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/enterprise_2.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/enterprise_2_light.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
apps/site/package.jsonapps/site/public/animations/enterprise/build_fortify_grow.rivapps/site/src/app/enterprise/page.tsxapps/site/src/components/animation.tsxapps/site/src/components/enterprise/carousel-item.tsxapps/site/src/components/enterprise/footer-accordion.tsxapps/site/src/components/enterprise/form.tsxapps/site/src/components/enterprise/switch-enterprise.tsxapps/site/src/components/homepage/card-section/card-section.tsxapps/site/src/components/logo-parade.tsxapps/site/src/components/technology.tsxapps/site/src/types/global.d.tspackages/eclipse/src/components/button.tsx
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/site/src/components/enterprise/scroll-carousel.tsx (2)
62-77: Consider disabling nav buttons at scroll boundaries.Both left/right controls remain active even when already at the first/last item. Disabling at bounds would remove no-op clicks and improve interaction clarity.
Also applies to: 99-115
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/scroll-carousel.tsx` around lines 62 - 77, The left/right nav buttons in ScrollCarousel should be disabled when at the start/end to prevent no-op clicks: track the current visible index or scroll boundary inside the ScrollCarousel component (e.g., maintain a currentIndex or isAtStart/isAtEnd state updated in your scroll/resize handlers) and use that state to add disabled and aria-disabled attributes to the left/right buttons and conditionally apply the hidden/disabled styles; update the onClick handlers that call scrollByItem to be no-ops when the corresponding boundary state is true so the buttons (the elements using onClick={() => scrollByItem(-1)} and onClick={() => scrollByItem(1)}) are visually and functionally disabled at bounds.
86-89: Use index-based composite keys for better carousel resilience.While the carousel data arrays currently have unique titles, using
key={item.title}relies on title uniqueness and can cause subtle bugs if the data changes. React best practices recommend index-based composite keys for lists:key={${item.title}-${index}}or unique IDs when available. This pattern is more robust and prevents accidental DOM reuse during updates.Note: The same pattern appears redundantly in
carousel-item.tsxline 19, which can be removed since the parent already keys each item.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/scroll-carousel.tsx` around lines 86 - 89, The carousel map currently uses key={item.title} which can break on title collisions; update the items.map in ScrollCarousel (the items.map(...) render) to use an index-based composite key such as `${item.title}-${index}` (capture the index in the map callback) or a real unique id if available, and remove the duplicate key prop in carousel-item.tsx (the key on the child component) since the parent now provides the list key to avoid redundant/contradictory keys.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/site/src/components/enterprise/scroll-carousel.tsx`:
- Around line 62-77: The left/right nav buttons in ScrollCarousel should be
disabled when at the start/end to prevent no-op clicks: track the current
visible index or scroll boundary inside the ScrollCarousel component (e.g.,
maintain a currentIndex or isAtStart/isAtEnd state updated in your scroll/resize
handlers) and use that state to add disabled and aria-disabled attributes to the
left/right buttons and conditionally apply the hidden/disabled styles; update
the onClick handlers that call scrollByItem to be no-ops when the corresponding
boundary state is true so the buttons (the elements using onClick={() =>
scrollByItem(-1)} and onClick={() => scrollByItem(1)}) are visually and
functionally disabled at bounds.
- Around line 86-89: The carousel map currently uses key={item.title} which can
break on title collisions; update the items.map in ScrollCarousel (the
items.map(...) render) to use an index-based composite key such as
`${item.title}-${index}` (capture the index in the map callback) or a real
unique id if available, and remove the duplicate key prop in carousel-item.tsx
(the key on the child component) since the parent now provides the list key to
avoid redundant/contradictory keys.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d9cf1932-4a45-4a72-8fba-42f4614801a0
⛔ Files ignored due to path filters (5)
apps/site/public/illustrations/enterprise/bgf-light.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/bgf.svgis excluded by!**/*.svgapps/site/public/illustrations/enterprise/enterprise_2_light.svgis excluded by!**/*.svgapps/site/public/og/og-enterprise.pngis excluded by!**/*.pngapps/site/public/og/og-index.pngis excluded by!**/*.png
📒 Files selected for processing (4)
apps/site/src/app/(index)/page.tsxapps/site/src/app/enterprise/page.tsxapps/site/src/components/enterprise/carousel-item.tsxapps/site/src/components/enterprise/scroll-carousel.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/site/src/components/enterprise/carousel-item.tsx
- apps/site/src/app/enterprise/page.tsx
Clean up the enterprise page follow-up items so the new landing experience is easier to maintain and behaves more predictably. This resolves remaining review feedback around copy, typing, embeds, animation cleanup, and carousel interactions. Made-with: Cursor
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/site/src/app/enterprise/page.tsx (1)
64-107: Let TypeScript validate this section data instead ofany.
card: anyanddb: anythrow away the compiler right where the JSX depends onsubtitle,icon,image,name, andurl. Small local types here would catch bad data edits before they ship.🧩 Example tightening
+type DatabaseCard = { + name: string; + icon: string; + url?: string; +}; + +type ComplexityCard = { + title: string; + subtitle: string; + icon: string; + image?: string; +}; + -const databases = { +const databases: { title: string; list: DatabaseCard[] } = { title: "Supported Databases", list: [ // ... ], }; -const complexities = [ +const complexities: ComplexityCard[] = [ // ... ]; - {complexities.map((card: any, index: number) => { + {complexities.map((card, index) => { const last = index === complexities.length - 1; return ( // ... ); })} - {databases.list.map((db: any, idx: number) => ( + {databases.list.map((db, idx) => ( // ... ))}Also applies to: 110-131, 400-445
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/enterprise/page.tsx` around lines 64 - 107, The code uses loose any types (e.g., card: any, db: any) which defeats compile-time checks for fields like subtitle, icon, image, name, and url; define local interfaces such as DatabaseItem { name: string; icon: string; url: string; subtitle?: string; image?: string } and CardItem { title: string; subtitle?: string; image?: string } and annotate the constants and map callbacks (specifically the databases constant and the map callbacks that use db and card) with these types so TypeScript validates the shape, then update any variable declarations/props that currently use any to use the new interfaces to catch missing or mis-typed fields at compile time.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/enterprise/page.tsx`:
- Around line 64-107: The databases.list entries all have placeholder url: "/"
which flows into the Technology component and causes every chip to link to the
homepage; update each object in databases.list (e.g., the PostgreSQL, MySQL,
MariaDB, SQLite, SQL Server, CockroachDB, PlanetScale, MongoDB entries) to
either provide the correct destination URL for that technology or remove the url
property entirely so Technology renders no link, and apply the same fix to the
other occurrences noted (lines 447-450) to avoid shipping placeholder links to
production.
In `@apps/site/src/components/enterprise/switch-enterprise.tsx`:
- Around line 12-15: The component currently assumes exactly two tabs but types
tabs and content as arbitrary arrays; update the contract and rendering to be
consistent: either change SwitchEnterpriseProps to require exactly two entries
(e.g., use a tuple type for tabs and a tuple/array-of-two for content) and keep
the existing mobile branches that index [0] and [1], or (preferred) make the
mobile rendering dynamic by iterating over tabs and content instead of
hard-coding indices—update the render logic that references tabs[0], tabs[1],
content[0], content[1] (and related mobile branches) to map over the
tabs/content arrays and render each section, and adjust any prop
validation/types accordingly so consumers can’t pass shorter arrays.
- Around line 41-50: The buttons in the SwitchEnterprise component (the mapped
Button instances using tabs, idx, activeTab and setActiveTab) lack accessible
state; update the Button JSX to expose its selected state by adding
aria-pressed={activeTab === idx} (or, if you prefer full tab semantics, wrap
with role="tablist" and give each Button role="tab" plus
aria-selected={activeTab === idx}), ensuring the onClick still calls
setActiveTab(idx) so ARIA reflects the activeTab state.
---
Nitpick comments:
In `@apps/site/src/app/enterprise/page.tsx`:
- Around line 64-107: The code uses loose any types (e.g., card: any, db: any)
which defeats compile-time checks for fields like subtitle, icon, image, name,
and url; define local interfaces such as DatabaseItem { name: string; icon:
string; url: string; subtitle?: string; image?: string } and CardItem { title:
string; subtitle?: string; image?: string } and annotate the constants and map
callbacks (specifically the databases constant and the map callbacks that use db
and card) with these types so TypeScript validates the shape, then update any
variable declarations/props that currently use any to use the new interfaces to
catch missing or mis-typed fields at compile time.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 940504c5-c3e3-408a-b3c5-dff0ce38104f
📒 Files selected for processing (8)
apps/site/src/app/enterprise/page.tsxapps/site/src/components/animation.tsxapps/site/src/components/enterprise/carousel-item.tsxapps/site/src/components/enterprise/form.tsxapps/site/src/components/enterprise/scroll-carousel.tsxapps/site/src/components/enterprise/switch-enterprise.tsxapps/site/src/components/logo-parade.tsxapps/site/src/components/technology.tsx
✅ Files skipped from review due to trivial changes (2)
- apps/site/src/components/technology.tsx
- apps/site/src/components/logo-parade.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/site/src/components/enterprise/form.tsx
- apps/site/src/components/animation.tsx
- apps/site/src/components/enterprise/scroll-carousel.tsx
Comment on lines
+64
to
+107
| const databases = { | ||
| title: "Supported Databases", | ||
| list: [ | ||
| { | ||
| name: "PostgreSQL", | ||
| icon: "/icons/companies/postgres.svg", | ||
| url: "/", | ||
| }, | ||
| { | ||
| name: "MySQL", | ||
| icon: "/icons/technologies/mysqlsimple.svg", | ||
| url: "/", | ||
| }, | ||
| { | ||
| name: "MariaDB", | ||
| icon: "/icons/technologies/mariadb.svg", | ||
| url: "/", | ||
| }, | ||
| { | ||
| name: "SQLite", | ||
| icon: "/icons/companies/sqlite.svg", | ||
| url: "/", | ||
| }, | ||
| { | ||
| name: "SQL Server", | ||
| icon: "/icons/companies/sqlserver.svg", | ||
| url: "/", | ||
| }, | ||
| { | ||
| name: "CockroachDB", | ||
| icon: "/icons/companies/cockroachdb.svg", | ||
| url: "/", | ||
| }, | ||
| { | ||
| name: "PlanetScale", | ||
| icon: "/icons/companies/planetscale.svg", | ||
| url: "/", | ||
| }, | ||
| { | ||
| name: "MongoDB", | ||
| icon: "/icons/technologies/mongodbsimple.svg", | ||
| url: "/", | ||
| }, | ||
| ], |
Contributor
There was a problem hiding this comment.
Replace the placeholder database destinations.
Every entry in databases.list currently uses url: "/", and that value is passed straight into Technology. That either sends every “Supported Databases” chip to the homepage or ships obvious placeholder data into production. Use real targets or omit url until they exist.
Also applies to: 447-450
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/app/enterprise/page.tsx` around lines 64 - 107, The
databases.list entries all have placeholder url: "/" which flows into the
Technology component and causes every chip to link to the homepage; update each
object in databases.list (e.g., the PostgreSQL, MySQL, MariaDB, SQLite, SQL
Server, CockroachDB, PlanetScale, MongoDB entries) to either provide the correct
destination URL for that technology or remove the url property entirely so
Technology renders no link, and apply the same fix to the other occurrences
noted (lines 447-450) to avoid shipping placeholder links to production.
Comment on lines
+12
to
+15
| interface SwitchEnterpriseProps { | ||
| content: ContentBox[][]; | ||
| tabs: { id: string; value: string }[]; | ||
| } |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Make the prop contract match the hard-coded two-tab layout.
tabs and content are typed as arbitrary arrays, but the mobile branches index [0] and [1] directly. A shorter input will throw, and any third tab silently disappears on mobile. Either encode this as a fixed 2-tab API or render the mobile sections by iterating instead of hard-coding indices.
♻️ If this component is intentionally fixed to two tabs
+interface SwitchEnterpriseTab {
+ id: string;
+ value: string;
+}
+
interface SwitchEnterpriseProps {
- content: ContentBox[][];
- tabs: { id: string; value: string }[];
+ content: [ContentBox[], ContentBox[]];
+ tabs: [SwitchEnterpriseTab, SwitchEnterpriseTab];
}Also applies to: 65-84
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/components/enterprise/switch-enterprise.tsx` around lines 12 -
15, The component currently assumes exactly two tabs but types tabs and content
as arbitrary arrays; update the contract and rendering to be consistent: either
change SwitchEnterpriseProps to require exactly two entries (e.g., use a tuple
type for tabs and a tuple/array-of-two for content) and keep the existing mobile
branches that index [0] and [1], or (preferred) make the mobile rendering
dynamic by iterating over tabs and content instead of hard-coding indices—update
the render logic that references tabs[0], tabs[1], content[0], content[1] (and
related mobile branches) to map over the tabs/content arrays and render each
section, and adjust any prop validation/types accordingly so consumers can’t
pass shorter arrays.
Comment on lines
+41
to
+50
| <div className="gap-6 mx-auto justify-center items-center hidden md:flex"> | ||
| {tabs.map((tab, idx) => ( | ||
| <Button | ||
| key={tab.id} | ||
| size="4xl" | ||
| variant={activeTab === idx ? "orm" : "default-stronger"} | ||
| onClick={() => setActiveTab(idx)} | ||
| > | ||
| {tab.value} | ||
| </Button> |
Contributor
There was a problem hiding this comment.
Expose the active state on the switch buttons.
Right now the current tab is only communicated by variant, so assistive tech gets a row of identical buttons with no selected state. Add aria-pressed at minimum, or full tab semantics if you want this to behave like a tablist.
♿ Minimal fix
<Button
key={tab.id}
size="4xl"
variant={activeTab === idx ? "orm" : "default-stronger"}
+ aria-pressed={activeTab === idx}
onClick={() => setActiveTab(idx)}
>📝 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.
Suggested change
| <div className="gap-6 mx-auto justify-center items-center hidden md:flex"> | |
| {tabs.map((tab, idx) => ( | |
| <Button | |
| key={tab.id} | |
| size="4xl" | |
| variant={activeTab === idx ? "orm" : "default-stronger"} | |
| onClick={() => setActiveTab(idx)} | |
| > | |
| {tab.value} | |
| </Button> | |
| <div className="gap-6 mx-auto justify-center items-center hidden md:flex"> | |
| {tabs.map((tab, idx) => ( | |
| <Button | |
| key={tab.id} | |
| size="4xl" | |
| variant={activeTab === idx ? "orm" : "default-stronger"} | |
| aria-pressed={activeTab === idx} | |
| onClick={() => setActiveTab(idx)} | |
| > | |
| {tab.value} | |
| </Button> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/site/src/components/enterprise/switch-enterprise.tsx` around lines 41 -
50, The buttons in the SwitchEnterprise component (the mapped Button instances
using tabs, idx, activeTab and setActiveTab) lack accessible state; update the
Button JSX to expose its selected state by adding aria-pressed={activeTab ===
idx} (or, if you prefer full tab semantics, wrap with role="tablist" and give
each Button role="tab" plus aria-selected={activeTab === idx}), ensuring the
onClick still calls setActiveTab(idx) so ARIA reflects the activeTab state.
Use the nearest snapped card as the current carousel position so repeated next clicks advance reliably instead of stopping after the first scroll. Made-with: Cursor
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (3)
apps/site/src/components/enterprise/scroll-carousel.tsx (3)
37-40: Avoid shadowing theitemsprop insidescrollByItem.Using
itemsfor both props and queried elements makes this block harder to reason about. A distinct name improves clarity.♻️ Small clarity refactor
- const items = container?.querySelectorAll<HTMLElement>("[data-carousel-item]"); + const carouselItems = container?.querySelectorAll<HTMLElement>( + "[data-carousel-item]", + ); - if (!container || !items?.length) { + if (!container || !carouselItems?.length) { return; } - const itemList = Array.from(items); + const itemList = Array.from(carouselItems);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/scroll-carousel.tsx` around lines 37 - 40, The function scrollByItem is shadowing the component prop items by declaring a local variable named items from container?.querySelectorAll; rename the local query result (for example to carouselElements or carouselItems) and update any subsequent references in scrollByItem to use that new identifier so the prop items remains unshadowed and the code is clearer; locate scrollByItem and scrollRef to make the change.
71-87: Bounds state can become stale when content size changes withoutresize.If card layout changes after mount (e.g., late-loading content/fonts),
isAtStart/isAtEndmay be outdated until the user scrolls or resizes. Consider observing container size/content changes and re-runningupdateScrollBounds.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/scroll-carousel.tsx` around lines 71 - 87, The bounds update effect currently listens only for scroll and window resize, so isAtStart/isAtEnd can become stale when content or fonts load; modify the effect that references scrollRef and updateScrollBounds to also observe size/content changes (e.g., create a ResizeObserver on scrollRef.current and/or a MutationObserver for child changes) and call updateScrollBounds when observations fire (debounce via requestAnimationFrame if needed), and ensure you disconnect the observers in the effect cleanup along with removing the existing scroll/resize listeners.
91-165: Consider extracting a shared nav button component.Desktop and mobile controls duplicate the same button structure and behavior. A small shared component would reduce drift risk and simplify future style/logic updates.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/components/enterprise/scroll-carousel.tsx` around lines 91 - 165, The left/right buttons are duplicated for desktop and mobile; create a small shared component (e.g., NavButton) that accepts props: direction ('left'|'right'), disabled (use isAtStart/isAtEnd), onClick (pass scrollByItem(-1/1)), extraClassName (to keep differing layout classes), and ariaLabel, and renders the same <button> structure with the correct icon class ("fa-chevron-left"/"fa-chevron-right") and cn usage; then replace the six duplicated button instances with NavButton calls in both the desktop and mobile controls so behavior (disabled, aria-disabled, onClick) and styling are preserved.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/site/src/components/enterprise/scroll-carousel.tsx`:
- Around line 37-40: The function scrollByItem is shadowing the component prop
items by declaring a local variable named items from
container?.querySelectorAll; rename the local query result (for example to
carouselElements or carouselItems) and update any subsequent references in
scrollByItem to use that new identifier so the prop items remains unshadowed and
the code is clearer; locate scrollByItem and scrollRef to make the change.
- Around line 71-87: The bounds update effect currently listens only for scroll
and window resize, so isAtStart/isAtEnd can become stale when content or fonts
load; modify the effect that references scrollRef and updateScrollBounds to also
observe size/content changes (e.g., create a ResizeObserver on scrollRef.current
and/or a MutationObserver for child changes) and call updateScrollBounds when
observations fire (debounce via requestAnimationFrame if needed), and ensure you
disconnect the observers in the effect cleanup along with removing the existing
scroll/resize listeners.
- Around line 91-165: The left/right buttons are duplicated for desktop and
mobile; create a small shared component (e.g., NavButton) that accepts props:
direction ('left'|'right'), disabled (use isAtStart/isAtEnd), onClick (pass
scrollByItem(-1/1)), extraClassName (to keep differing layout classes), and
ariaLabel, and renders the same <button> structure with the correct icon class
("fa-chevron-left"/"fa-chevron-right") and cn usage; then replace the six
duplicated button instances with NavButton calls in both the desktop and mobile
controls so behavior (disabled, aria-disabled, onClick) and styling are
preserved.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: fa819898-344d-494c-b219-9d93ab9c6d75
📒 Files selected for processing (1)
apps/site/src/components/enterprise/scroll-carousel.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Enhancements
Chores
SEO