Feat/document collab - #4
Open
poptart-coral wants to merge 9 commits into
Open
Conversation
Co-authored-by: Dorian TETU <doriantetu34@gmail.com>
📝 WalkthroughWalkthroughAdds Documentation and Collaboration pages, a Radix-based DropdownMenu UI wrapper and mobile header dropdown, injects Header/HomePageBackground/Footer into root layout, extends FeatureCard props, adds promo sections, updates Tailwind typography and markdown dependencies, and tweaks global and home-page CSS. Changes
Sequence Diagram(s)sequenceDiagram
rect rgba(220,238,255,0.5)
participant User
end
rect rgba(200,230,201,0.5)
participant Header
end
rect rgba(255,224,178,0.5)
participant DropdownMenu
end
rect rgba(248,187,208,0.5)
participant Router
end
User->>Header: click menu toggle
Header->>DropdownMenu: toggle open state
DropdownMenu->>DropdownMenu: render Content (Portal)
DropdownMenu-->>Header: show open state
User->>DropdownMenu: select menu item
DropdownMenu->>Router: navigate to target page (e.g., /documentation)
Router-->>User: load target page
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 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. ✨ 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 |
poptart-coral
marked this pull request as ready for review
February 24, 2026 17:42
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
♻️ Duplicate comments (1)
src/app/collaboration/page.tsx (1)
5-5: Samereact-markdowndefault-import concern asdocumentation/page.tsx🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/collaboration/page.tsx` at line 5, Replace the default import of ReactMarkdown with the named import used in the other file to address the same import-style issue; change the import line to use the named symbol ReactMarkdown (import { ReactMarkdown } from "react-markdown") so the module is imported consistently with documentation/page.tsx and update any references to ReactMarkdown if necessary.
🧹 Nitpick comments (4)
src/components/home/documentation/documentation-section.tsx (1)
13-13: Use<h2>here — same heading hierarchy concern asCollaborationSection.Both sections are composed inside
home-page.tsxwhereHeroSectionlikely owns the top-level<h1>. These section titles should be<h2>.♻️ Proposed fix
- <h1 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]"> + <h2 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]"> Documentation - </h1> + </h2>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/documentation/documentation-section.tsx` at line 13, The section heading in DocumentationSection (the <h1> in documentation-section.tsx) should be downgraded to an <h2> to preserve semantic heading hierarchy because HeroSection in home-page.tsx likely provides the page-level <h1>; update the element in DocumentationSection (and ensure the same change was applied in CollaborationSection if present) so the title uses an <h2> with the same classes and accessibility/ARIA attributes preserved.src/components/home/collaborate/collaborate-section.tsx (1)
13-13: Use<h2>for section headings within the home page.
DocumentationSectionandCollaborationSectionare both rendered insidehome-page.tsxalongsideHeroSection, which presumably already has an<h1>. Multiple<h1>elements on a single page hurt SEO and accessibility (screen readers announce page structure based on heading hierarchy).♻️ Proposed fix
- <h1 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]"> + <h2 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]"> Collaboration - </h1> + </h2>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/collaborate/collaborate-section.tsx` at line 13, The heading in CollaborateSection (in src/components/home/collaborate/collaborate-section.tsx) is an <h1> which creates multiple top-level headings on the home page; replace that <h1> with an <h2> (preserving the same className/props and text content) so the section uses the correct semantic level within the page heading hierarchy and update any tests or snapshots that assert an <h1> in CollaborateSection accordingly.src/app/documentation/page.tsx (1)
7-144: Consider extracting the markdown content to a standalone.mdfileEmbedding a 140-line markdown document as a template literal couples content with layout code. Moving it to
src/content/documentation.mdand importing it withfs.readFileSync(at build time) or an MDX loader keeps the page component focused on structure.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/documentation/page.tsx` around lines 7 - 144, The page component currently inlines a large markdown template literal named document inside src/app/documentation/page.tsx which couples content with layout; extract that markdown into a standalone file (e.g. src/content/documentation.md), remove the big template literal from page.tsx, and load the content at build time (use fs.readFileSync or an MDX loader) and pass the loaded string into the page renderer (replace uses of the document constant). Ensure you update any imports/exports and the component that references document so it reads from the new file (look for the document variable in page.tsx and the page component that returns the documentation).src/app/collaboration/page.tsx (1)
7-214: Extract the 200-line markdown string to a standalone.mdfileSame rationale as the documentation page — the contributing guide is entirely content, not logic, and has an even stronger case for living in
src/content/contributing.md.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/collaboration/page.tsx` around lines 7 - 214, Extract the big markdown blob currently assigned to the const contributing in page.tsx into a standalone contributing.md file (preserving exact content), then remove the inline const contributing declaration and replace it by importing/reading that new contributing.md and assigning its contents back to the same identifier (const contributing) so the page component uses the external file; ensure any consumers of contributing in page.tsx keep working by preserving the same exported/used symbol and update imports/loader if your framework requires a different import pattern for markdown.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@package.json`:
- Line 26: The package "@radix-ui/react-dialog" is unused and should be removed
from dependencies: delete the "@radix-ui/react-dialog" entry from package.json,
run your package manager (npm/yarn/pnpm) to update node_modules and the
lockfile, and search the repo for any residual imports/usages of "react-dialog"
to ensure nothing breaks; commit the updated package.json and lockfile.
In `@src/app/collaboration/page.tsx`:
- Around line 241-250: The FeatureCard wrapping the contributing markdown uses
className="w-fit" and the inner <article> has mx-12, which lets multi-column
tables force horizontal overflow; change the FeatureCard's className from
"w-fit" to "w-full max-w-4xl" (or equivalent width constraint) and remove the
"mx-12" from the article element rendering ReactMarkdown (keep other classes
like prose/prose-invert), so the contributing content has a max width and no
extra horizontal margin that causes overflow on mobile.
In `@src/app/documentation/page.tsx`:
- Around line 171-180: The FeatureCard is using className="w-fit" which
shrink-wraps content and allows the nested <article> (className="prose
prose-invert mx-12 mt-4 text-left") to overflow on narrow viewports; remove or
replace "w-fit" on the FeatureCard with a responsive width cap such as
"max-w-4xl w-full" (or similar Tailwind classes) so the card respects viewport
width limits while the article can still use internal padding/margins; locate
the FeatureCard usage and update its className accordingly and, if needed,
adjust the article's "mx-12" to a responsive padding (e.g., px-4 md:px-12) to
prevent horizontal overflow on mobile.
- Line 7: The top-level constant named `document` in page.tsx shadows the global
DOM `document`; rename the constant (e.g., `docContent` or
`documentationMarkdown`) and update all uses within this module to the new
identifier so code won't conflict if the file becomes a client component or
triggers ESLint `no-shadow` — change the declaration of `const document = ...`
and replace every reference to `document` in this file (including in
export/default render and any helpers) with the new name.
In `@src/app/layout.tsx`:
- Around line 98-102: The body element wrapping Header, {children}, and Footer
is not a flex column so Footer's "mt-auto" has no effect; update the body
className (currently using inter.className) to make it a full-height flex column
(e.g., include flex, flex-col and min-h-screen) so the Footer component's
mt-auto will push it to the bottom; ensure you merge these utility classes with
inter.className rather than replacing it and keep Header, children and Footer in
the same body wrapper.
In `@src/components/home/collaborate/collaborate-section.tsx`:
- Around line 25-29: The CTA Link uses the Tailwind utility bg-gradient-to-r but
no gradient stops are provided, making the background transparent; update the
className on the Link (the element rendering "Explore Collaboration" and
containing ArrowRight) to include appropriate gradient stop classes (e.g., add
from-... and to-... or via-... tokens consistent with the app's accent colors)
so --tw-gradient-stops is defined and the button shows a visible gradient
background while preserving existing utilities like rounded-lg, px-8, py-4,
shadow-lg and hover:scale-105.
In `@src/components/home/documentation/documentation-section.tsx`:
- Around line 22-28: The CTA Link in documentation-section.tsx uses the Tailwind
utility bg-gradient-to-r without gradient stops, causing a transparent
background; update the Link's className (the element rendering "Explore
Documentation" with the ArrowRight icon) to include concrete gradient stop
utilities (for example add from-*/via-*/to-* or from-*/to-* matching the palette
used in collaborate-section.tsx) so the background becomes visible and matches
the existing collaborate-section styling.
In `@src/components/home/features/feature-card.tsx`:
- Line 8: The type annotation "children?: React.ReactNode" relies on a global
React type; update the file to explicitly import ReactNode from "react" and then
use that symbol in the prop type (i.e., replace or keep "children?: ReactNode"),
so add an import like 'import { ReactNode } from "react"' at the top and
reference ReactNode in the component props (look for the children?:
React.ReactNode declaration).
In `@src/components/home/footer/footer.tsx`:
- Around line 30-40: The external Link component rendering the LinkedIn link
(the JSX element using Link with props
href="https://www.linkedin.com/company/beep-industries/" and target="_blank") is
missing rel="noopener noreferrer"; update that Link element to include
rel="noopener noreferrer" so the opened tab cannot access window.opener (apply
the same fix anywhere similar in this file if present, e.g., the Link that wraps
the Linkedin and ArrowUpRight icons).
In `@src/components/home/header/header.tsx`:
- Around line 48-61: The mobile menu rendered when isOpen is true lacks a
click-outside handler; add a useRef (e.g., menuRef) to the dropdown container
and in a useEffect attach a document 'mousedown' (or 'click') listener that
checks if the event target is outside menuRef.current and, if so, calls
setIsOpen(false); ensure the listener is removed in the effect cleanup. Locate
the JSX block that renders the dropdown (the element that maps navLinks and uses
Link) and wrap it with the ref so the outside-click logic can close the menu
reliably.
- Around line 33-45: Wrap the interactive icons X and Menu in a proper <button>
element (type="button") instead of attaching onClick directly to the SVGs; move
the onClick={() => setIsOpen(!isOpen)} and className logic (using cn and isOpen)
to the button so the SVGs remain purely presentational, add
aria-expanded={isOpen} and an appropriate aria-label (e.g., aria-label={isOpen ?
"Close menu" : "Open menu"}) on the button, and ensure focus styles are
preserved (don’t remove focusable outline) in the header component containing X,
Menu, setIsOpen and isOpen.
---
Duplicate comments:
In `@src/app/collaboration/page.tsx`:
- Line 5: Replace the default import of ReactMarkdown with the named import used
in the other file to address the same import-style issue; change the import line
to use the named symbol ReactMarkdown (import { ReactMarkdown } from
"react-markdown") so the module is imported consistently with
documentation/page.tsx and update any references to ReactMarkdown if necessary.
---
Nitpick comments:
In `@src/app/collaboration/page.tsx`:
- Around line 7-214: Extract the big markdown blob currently assigned to the
const contributing in page.tsx into a standalone contributing.md file
(preserving exact content), then remove the inline const contributing
declaration and replace it by importing/reading that new contributing.md and
assigning its contents back to the same identifier (const contributing) so the
page component uses the external file; ensure any consumers of contributing in
page.tsx keep working by preserving the same exported/used symbol and update
imports/loader if your framework requires a different import pattern for
markdown.
In `@src/app/documentation/page.tsx`:
- Around line 7-144: The page component currently inlines a large markdown
template literal named document inside src/app/documentation/page.tsx which
couples content with layout; extract that markdown into a standalone file (e.g.
src/content/documentation.md), remove the big template literal from page.tsx,
and load the content at build time (use fs.readFileSync or an MDX loader) and
pass the loaded string into the page renderer (replace uses of the document
constant). Ensure you update any imports/exports and the component that
references document so it reads from the new file (look for the document
variable in page.tsx and the page component that returns the documentation).
In `@src/components/home/collaborate/collaborate-section.tsx`:
- Line 13: The heading in CollaborateSection (in
src/components/home/collaborate/collaborate-section.tsx) is an <h1> which
creates multiple top-level headings on the home page; replace that <h1> with an
<h2> (preserving the same className/props and text content) so the section uses
the correct semantic level within the page heading hierarchy and update any
tests or snapshots that assert an <h1> in CollaborateSection accordingly.
In `@src/components/home/documentation/documentation-section.tsx`:
- Line 13: The section heading in DocumentationSection (the <h1> in
documentation-section.tsx) should be downgraded to an <h2> to preserve semantic
heading hierarchy because HeroSection in home-page.tsx likely provides the
page-level <h1>; update the element in DocumentationSection (and ensure the same
change was applied in CollaborationSection if present) so the title uses an <h2>
with the same classes and accessibility/ARIA attributes preserved.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
package.jsonsrc/app/collaboration/page.tsxsrc/app/documentation/page.tsxsrc/app/layout.tsxsrc/components/home/collaborate/collaborate-section.tsxsrc/components/home/documentation/documentation-section.tsxsrc/components/home/features/feature-card.tsxsrc/components/home/footer/footer.tsxsrc/components/home/header/header.tsxsrc/components/home/home-page.tsxsrc/styles/globals.css
Comment on lines
+241
to
+250
| <FeatureCard | ||
| icon={MessageSquare} | ||
| title={"CONTRIBUTING.md"} | ||
| description="" | ||
| className="w-fit" | ||
| > | ||
| <article className="prose prose-invert mx-12 mt-4 text-left"> | ||
| <ReactMarkdown>{contributing}</ReactMarkdown> | ||
| </article> | ||
| </FeatureCard> |
There was a problem hiding this comment.
Multi-column markdown tables make the w-fit + mx-12 overflow worse here
The contributing content includes several multi-column tables (commit types, scopes, branch types). These widen the w-fit card significantly; on mobile there is no width ceiling, guaranteeing horizontal scroll. The same fix suggested for the documentation page applies — replace w-fit with w-full max-w-4xl and drop mx-12 from the article.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/collaboration/page.tsx` around lines 241 - 250, The FeatureCard
wrapping the contributing markdown uses className="w-fit" and the inner
<article> has mx-12, which lets multi-column tables force horizontal overflow;
change the FeatureCard's className from "w-fit" to "w-full max-w-4xl" (or
equivalent width constraint) and remove the "mx-12" from the article element
rendering ReactMarkdown (keep other classes like prose/prose-invert), so the
contributing content has a max width and no extra horizontal margin that causes
overflow on mobile.
Comment on lines
+171
to
+180
| <FeatureCard | ||
| icon={MessageSquare} | ||
| title={"DOCUMENTATION.md"} | ||
| description="" | ||
| className="w-fit" | ||
| > | ||
| <article className="prose prose-invert mx-12 mt-4 text-left"> | ||
| <ReactMarkdown>{document}</ReactMarkdown> | ||
| </article> | ||
| </FeatureCard> |
There was a problem hiding this comment.
w-fit card with mx-12 article will overflow on narrow viewports
w-fit makes the card shrink-wrap its content; wide markdown elements (code blocks, long paragraphs) will exceed the viewport width on mobile since there is no upper width constraint. max-w-4xl w-full (or similar) would cap the width while keeping it responsive.
📐 Suggested fix
- <FeatureCard
- icon={MessageSquare}
- title={"DOCUMENTATION.md"}
- description=""
- className="w-fit"
- >
- <article className="prose prose-invert mx-12 mt-4 text-left">
+ <FeatureCard
+ icon={MessageSquare}
+ title={"DOCUMENTATION.md"}
+ description=""
+ className="w-full max-w-4xl"
+ >
+ <article className="prose prose-invert mt-4 text-left">📝 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
| <FeatureCard | |
| icon={MessageSquare} | |
| title={"DOCUMENTATION.md"} | |
| description="" | |
| className="w-fit" | |
| > | |
| <article className="prose prose-invert mx-12 mt-4 text-left"> | |
| <ReactMarkdown>{document}</ReactMarkdown> | |
| </article> | |
| </FeatureCard> | |
| <FeatureCard | |
| icon={MessageSquare} | |
| title={"DOCUMENTATION.md"} | |
| description="" | |
| className="w-full max-w-4xl" | |
| > | |
| <article className="prose prose-invert mt-4 text-left"> | |
| <ReactMarkdown>{document}</ReactMarkdown> | |
| </article> | |
| </FeatureCard> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/documentation/page.tsx` around lines 171 - 180, The FeatureCard is
using className="w-fit" which shrink-wraps content and allows the nested
<article> (className="prose prose-invert mx-12 mt-4 text-left") to overflow on
narrow viewports; remove or replace "w-fit" on the FeatureCard with a responsive
width cap such as "max-w-4xl w-full" (or similar Tailwind classes) so the card
respects viewport width limits while the article can still use internal
padding/margins; locate the FeatureCard usage and update its className
accordingly and, if needed, adjust the article's "mx-12" to a responsive padding
(e.g., px-4 md:px-12) to prevent horizontal overflow on mobile.
Comment on lines
+22
to
+28
| <Link | ||
| href="/documentation" | ||
| className="inline-flex transform items-center justify-center gap-3 rounded-lg bg-gradient-to-r px-8 py-4 font-semibold shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl" | ||
| > | ||
| Explore Documentation | ||
| <ArrowRight className="h-5 w-5" /> | ||
| </Link> |
There was a problem hiding this comment.
Same missing gradient stops issue — CTA button has no visible background.
bg-gradient-to-r without from-*/to-* results in a transparent background, producing an unstyled link rather than a button. Apply the same fix as noted in collaborate-section.tsx.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/home/documentation/documentation-section.tsx` around lines 22
- 28, The CTA Link in documentation-section.tsx uses the Tailwind utility
bg-gradient-to-r without gradient stops, causing a transparent background;
update the Link's className (the element rendering "Explore Documentation" with
the ArrowRight icon) to include concrete gradient stop utilities (for example
add from-*/via-*/to-* or from-*/to-* matching the palette used in
collaborate-section.tsx) so the background becomes visible and matches the
existing collaborate-section styling.
Comment on lines
+33
to
+45
| <div> | ||
| <X | ||
| className={cn( | ||
| "absolute h-6 w-6 rotate-90 cursor-pointer transition-all duration-300", | ||
| isOpen ? "rotate-90 opacity-100" : "rotate-0 opacity-0" | ||
| )} | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| /> | ||
| <Menu | ||
| className={cn("h-6 w-6 cursor-pointer", isOpen ? "opacity-0" : "opacity-100")} | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Interactive icons must be wrapped in <button> elements for keyboard and screen-reader accessibility.
Attaching onClick directly to raw <X> and <Menu> SVG icons means:
- The controls are not reachable via keyboard Tab navigation.
- Screen readers won't announce them as interactive.
- No focus ring is applied.
Also, add aria-expanded and aria-label so assistive technology can describe the current menu state.
♿ Proposed fix
- <div>
- <X
- className={cn(
- "absolute h-6 w-6 rotate-90 cursor-pointer transition-all duration-300",
- isOpen ? "rotate-90 opacity-100" : "rotate-0 opacity-0"
- )}
- onClick={() => setIsOpen(!isOpen)}
- />
- <Menu
- className={cn("h-6 w-6 cursor-pointer", isOpen ? "opacity-0" : "opacity-100")}
- onClick={() => setIsOpen(!isOpen)}
- />
- </div>
+ <button
+ className="relative h-6 w-6"
+ aria-label={isOpen ? "Close menu" : "Open menu"}
+ aria-expanded={isOpen}
+ onClick={() => setIsOpen(!isOpen)}
+ >
+ <X
+ className={cn(
+ "absolute inset-0 h-6 w-6 transition-all duration-300",
+ isOpen ? "rotate-90 opacity-100" : "rotate-0 opacity-0"
+ )}
+ />
+ <Menu
+ className={cn("h-6 w-6 transition-all duration-300", isOpen ? "opacity-0" : "opacity-100")}
+ />
+ </button>📝 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> | |
| <X | |
| className={cn( | |
| "absolute h-6 w-6 rotate-90 cursor-pointer transition-all duration-300", | |
| isOpen ? "rotate-90 opacity-100" : "rotate-0 opacity-0" | |
| )} | |
| onClick={() => setIsOpen(!isOpen)} | |
| /> | |
| <Menu | |
| className={cn("h-6 w-6 cursor-pointer", isOpen ? "opacity-0" : "opacity-100")} | |
| onClick={() => setIsOpen(!isOpen)} | |
| /> | |
| </div> | |
| <button | |
| className="relative h-6 w-6" | |
| aria-label={isOpen ? "Close menu" : "Open menu"} | |
| aria-expanded={isOpen} | |
| onClick={() => setIsOpen(!isOpen)} | |
| > | |
| <X | |
| className={cn( | |
| "absolute inset-0 h-6 w-6 transition-all duration-300", | |
| isOpen ? "rotate-90 opacity-100" : "rotate-0 opacity-0" | |
| )} | |
| /> | |
| <Menu | |
| className={cn("h-6 w-6 transition-all duration-300", isOpen ? "opacity-0" : "opacity-100")} | |
| /> | |
| </button> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/home/header/header.tsx` around lines 33 - 45, Wrap the
interactive icons X and Menu in a proper <button> element (type="button")
instead of attaching onClick directly to the SVGs; move the onClick={() =>
setIsOpen(!isOpen)} and className logic (using cn and isOpen) to the button so
the SVGs remain purely presentational, add aria-expanded={isOpen} and an
appropriate aria-label (e.g., aria-label={isOpen ? "Close menu" : "Open menu"})
on the button, and ensure focus styles are preserved (don’t remove focusable
outline) in the header component containing X, Menu, setIsOpen and isOpen.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/app/documentation/page.tsx (2)
172-180:⚠️ Potential issue | 🟡 MinorUse responsive width constraints for the markdown card.
Line 176 (
w-fit) with Line 178 (mx-12) can cause horizontal overflow on narrow screens.Proposed fix
- <FeatureCard + <FeatureCard icon={MessageSquare} title={"DOCUMENTATION.md"} description="" - className="w-fit" + className="w-full max-w-4xl" > - <article className="prose prose-invert mx-12 mt-4 text-left [&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-white/10 [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-sm [&_:not(pre)>code]:before:content-none [&_:not(pre)>code]:after:content-none"> + <article className="prose prose-invert mt-4 px-4 text-left md:px-12 [&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-white/10 [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-sm [&_:not(pre)>code]:before:content-none [&_:not(pre)>code]:after:content-none">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/documentation/page.tsx` around lines 172 - 180, The FeatureCard usage currently sets className="w-fit" (in the FeatureCard JSX) and the inner article uses mx-12 which can cause horizontal overflow on small screens; change the FeatureCard className to use responsive width constraints (e.g., make it w-full on small screens and a fitted or max-width on larger screens such as w-full sm:w-auto or w-full sm:max-w-[<reasonable-px-or-rem>]) and adjust the article spacing from mx-12 to responsive padding/margins (e.g., px-4 sm:mx-12 or mx-auto with max-w) so the ReactMarkdown container (the article element) and the FeatureCard component scale without causing horizontal scroll on narrow viewports. Ensure you update the className on the FeatureCard and the className on the article element to the responsive variants.
8-8:⚠️ Potential issue | 🟡 MinorRename
documentto avoid global shadowing.Line 8 shadows the DOM global
document; this is fragile if this file ever becomes client-side or stricter shadow rules are enabled.Proposed fix
-const document = `# Beep +const documentationMarkdown = `# Beep ... - <ReactMarkdown remarkPlugins={[remarkGfm]}>{document}</ReactMarkdown> + <ReactMarkdown remarkPlugins={[remarkGfm]}>{documentationMarkdown}</ReactMarkdown>Also applies to: 179-179
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/documentation/page.tsx` at line 8, The constant named document shadows the DOM global; rename it (e.g., to docMarkdown or documentationMarkdown) wherever it's declared (the top-level `document` constant and the other occurrence around line 179) and update all references in this module (render/props/exports) to use the new name so no global `document` is shadowed and the file remains safe for client-side use.
🧹 Nitpick comments (1)
src/components/ui/dropdown-menu.tsx (1)
21-169: AllforwardRefwrappers are correct and follow standard patterns.Since the project uses React 19 (where
refis a regular prop),forwardRefis no longer strictly necessary. However, it remains fully backward-compatible, and since this is likely shadcn/ui CLI-generated code, there's no urgency to change it. You can simplify these when the shadcn CLI itself dropsforwardRefin its templates.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ui/dropdown-menu.tsx` around lines 21 - 169, The forwardRef wrappers (e.g., DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator) are correct and compatible with React 19; do not change them now — leave these components as-is and only consider simplifying to plain functions when the shadcn CLI/templates are updated to remove forwardRef usage.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/styles/globals.css`:
- Line 4: Add Tailwind 4 at-rule exceptions to the CSS linters: update
.stylelintrc.json to include an ignoreAtRules array that contains "plugin" and
"custom-variant" (and any other Tailwind at-rules you need) so the `@plugin` and
`@custom-variant` directives are allowed, and update biome.json's CSS linter
settings to recognize those same at-rules (or disable unknown-at-rule checks) so
Biome doesn't error on `@plugin/`@custom-variant; target the config entries for
stylelint's ignoreAtRules and Biome's CSS unknownAtRules/atRule settings when
making the change.
---
Duplicate comments:
In `@src/app/documentation/page.tsx`:
- Around line 172-180: The FeatureCard usage currently sets className="w-fit"
(in the FeatureCard JSX) and the inner article uses mx-12 which can cause
horizontal overflow on small screens; change the FeatureCard className to use
responsive width constraints (e.g., make it w-full on small screens and a fitted
or max-width on larger screens such as w-full sm:w-auto or w-full
sm:max-w-[<reasonable-px-or-rem>]) and adjust the article spacing from mx-12 to
responsive padding/margins (e.g., px-4 sm:mx-12 or mx-auto with max-w) so the
ReactMarkdown container (the article element) and the FeatureCard component
scale without causing horizontal scroll on narrow viewports. Ensure you update
the className on the FeatureCard and the className on the article element to the
responsive variants.
- Line 8: The constant named document shadows the DOM global; rename it (e.g.,
to docMarkdown or documentationMarkdown) wherever it's declared (the top-level
`document` constant and the other occurrence around line 179) and update all
references in this module (render/props/exports) to use the new name so no
global `document` is shadowed and the file remains safe for client-side use.
---
Nitpick comments:
In `@src/components/ui/dropdown-menu.tsx`:
- Around line 21-169: The forwardRef wrappers (e.g., DropdownMenuSubTrigger,
DropdownMenuSubContent, DropdownMenuContent, DropdownMenuItem,
DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel,
DropdownMenuSeparator) are correct and compatible with React 19; do not change
them now — leave these components as-is and only consider simplifying to plain
functions when the shadcn CLI/templates are updated to remove forwardRef usage.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
package.jsonsrc/app/collaboration/page.tsxsrc/app/documentation/page.tsxsrc/components/home/header/header.tsxsrc/components/ui/dropdown-menu.tsxsrc/styles/globals.css
🚧 Files skipped from review as they are similar to previous changes (3)
- src/app/collaboration/page.tsx
- src/components/home/header/header.tsx
- package.json
| @import "tailwindcss"; | ||
|
|
||
| @plugin "tailwindcss-animate"; | ||
| @plugin "@tailwindcss/typography"; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Tailwind-style at-rules in stylesheets =="
rg -n --type=css --type=scss '@(plugin|theme|utility|custom-variant|variant|apply|layer)\b' || true
echo
echo "== Stylelint config files =="
fd -HI 'stylelint.config.*|.stylelintrc*' || true
echo
echo "== Biome config files =="
fd -HI 'biome.json|.biomerc*' || true
echo
echo "== Tailwind config files =="
fd -HI 'tailwind.config.*' || true
echo
echo "== Package dependencies (tailwind/stylelint related) =="
if [ -f package.json ]; then
jq -r '.dependencies, .devDependencies | to_entries[] | select(.key | test("tailwind|stylelint|biome")) | "\(.key): \(.value)"' package.json || true
fiRepository: beep-industries/website
Length of output: 499
🏁 Script executed:
#!/bin/bash
echo "== Content of src/styles/globals.css =="
if [ -f src/styles/globals.css ]; then
cat -n src/styles/globals.css | head -20
else
echo "File not found"
fi
echo
echo "== Content of .stylelintrc.json =="
if [ -f .stylelintrc.json ]; then
cat -n .stylelintrc.json
else
echo "File not found"
fi
echo
echo "== Content of biome.json =="
if [ -f biome.json ]; then
cat -n biome.json
else
echo "File not found"
fiRepository: beep-industries/website
Length of output: 4398
Configure Stylelint and Biome for Tailwind 4 at-rules.
Lines 3–4 use Tailwind CSS 4's @plugin directive, which will cause linting failures. The .stylelintrc.json config must add ignoreAtRules to handle @plugin and @custom-variant, and biome.json CSS linter needs configuration to recognize these directives. Without these changes, CI will fail on unknown at-rule errors.
🧰 Tools
🪛 Biome (2.4.4)
[error] 4-4: Tailwind-specific syntax is disabled.
(parse)
🪛 Stylelint (17.3.0)
[error] 4-4: Unexpected unknown at-rule "@plugin" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/styles/globals.css` at line 4, Add Tailwind 4 at-rule exceptions to the
CSS linters: update .stylelintrc.json to include an ignoreAtRules array that
contains "plugin" and "custom-variant" (and any other Tailwind at-rules you
need) so the `@plugin` and `@custom-variant` directives are allowed, and update
biome.json's CSS linter settings to recognize those same at-rules (or disable
unknown-at-rule checks) so Biome doesn't error on `@plugin/`@custom-variant;
target the config entries for stylelint's ignoreAtRules and Biome's CSS
unknownAtRules/atRule settings when making the change.
Nayrode
force-pushed
the
feat/document-collab
branch
from
February 25, 2026 14:03
e94a2c5 to
f56fef3
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (4)
src/components/home/documentation/documentation-section.tsx (3)
13-15:⚠️ Potential issue | 🟡 MinorSame broken gradient-text setup as in
collaborate-section.tsx.
bg-gradient-to-r bg-clip-textwithouttext-transparentand gradient stops has no visual effect — text renders solid white. Please apply the same fix noted in thecollaborate-section.tsxreview comment.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/documentation/documentation-section.tsx` around lines 13 - 15, Update the H1 in the DocumentationSection component so the gradient text actually shows: modify the className on the <h1> (the element with className starting "animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px]...") to include text-transparent and explicit gradient stop colors (e.g., from-... via-... to-...) as done in collaborate-section.tsx; this ensures bg-clip-text can reveal the background gradient instead of rendering solid white.
5-33: Near-identical toCollaborationSection— covered by the shared refactor suggestion.The
PromoSectionabstraction proposed incollaborate-section.tsxapplies equally here.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/documentation/documentation-section.tsx` around lines 5 - 33, This DocumentationSection is nearly identical to CollaborationSection and should be refactored to use the shared PromoSection abstraction: extract the common JSX (header icon, title, description, CTA Link) into a reusable PromoSection component (or reuse the existing PromoSection from collaborate-section.tsx) and replace the DocumentationSection implementation with a simple wrapper that passes props (icon component, title string "Documentation", description string, href "/documentation", and CTA text) to PromoSection; update any imports and ensure DocumentationSection renders the PromoSection with the Book and ArrowRight icons while preserving existing classes like "animate-fade-in-up" and button styling.
22-28: Previous gradient-stops issue on the CTA link is resolved.The
Linknow usesbg-[#fcfcfc33](semi-transparent white) rather than a barebg-gradient-to-r, addressing the earlier invisible-background concern. Consistent withcollaborate-section.tsx.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/documentation/documentation-section.tsx` around lines 22 - 28, The CTA Link in documentation-section.tsx now uses a semi-transparent background but the className should be kept consistent with collaborate-section.tsx and avoid duplicated review comments; open the <Link> element (symbol: Link) and confirm its className matches the collaborate-section's CTA (including bg-[`#fcfcfc33`], secondary-button-animation, sizing and hover utilities) and remove any duplicated review/comment artifacts from the file or PR metadata so only the functional class change remains.src/components/home/collaborate/collaborate-section.tsx (1)
23-29: Previous gradient-stops issue is resolved.The CTA
Linknow usesbg-[#fcfcfc33](semi-transparent white) instead of the barebg-gradient-to-r, addressing the earlier invisible-background concern.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/collaborate/collaborate-section.tsx` around lines 23 - 29, The CTA Link in collaborate-section was changed from a gradient to a semi-transparent background (className on Link) to fix the invisible-background issue; ensure the Link component's className no longer includes any bg-gradient-* utilities, that the ArrowRight icon (ArrowRight) remains imported and used, and verify in the running UI that the new bg-[`#fcfcfc33`] maintains sufficient contrast and hover interactions (hover:scale-105, hover:shadow-xl) so the button looks and behaves as intended.
🧹 Nitpick comments (2)
src/components/home/home-page.tsx (1)
11-11:h-fullis redundant alongsidemin-h-screen.
min-h-screenalready ensures the container is at least100vh.h-full(height: 100% of parent) is overridden whenever the parent is shorter than the viewport, making it redundant in practice.✏️ Proposed cleanup
- <div className="relative flex min-h-screen h-full flex-col overflow-hidden"> + <div className="relative flex min-h-screen flex-col overflow-hidden">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/home-page.tsx` at line 11, The div in the HomePage component currently uses both "min-h-screen" and "h-full" in its className ("relative flex min-h-screen h-full flex-col overflow-hidden"); remove the redundant "h-full" utility so the className becomes "relative flex min-h-screen flex-col overflow-hidden" to avoid the overridden/unused height style and keep markup tidy.src/components/home/collaborate/collaborate-section.tsx (1)
5-33:DocumentationSectionandCollaborationSectionare near-duplicate components — consider extracting a shared promo-section component.The two components differ only in icon, title, description text, and link
href/label. A single parameterised component (e.g.PromoSection) would eliminate the duplication and reduce drift risk.♻️ Suggested abstraction
// src/components/home/promo-section.tsx import { Separator } from "@/components/ui/separator" import Link from "next/link" import { ArrowRight, type LucideIcon } from "lucide-react" interface PromoSectionProps { icon: LucideIcon title: string description: string href: string ctaLabel: string } export function PromoSection({ icon: Icon, title, description, href, ctaLabel }: PromoSectionProps) { return ( <div className="mt-20"> <Separator className="footer-border" /> <div className="w-full py-16"> <div className="mx-auto max-w-3xl space-y-8 px-4 text-center"> <div className="flex items-center justify-center gap-3"> <Icon className="h-12 w-12 text-white" /> <h1 className="animate-fade-in-up text-[32px] font-bold tracking-tight text-white md:text-[48px]"> {title} </h1> </div> <p className="animate-fade-in-up-delay text-lg leading-relaxed text-gray-600 md:text-xl dark:text-gray-300"> {description} </p> <Link href={href} className="inline-flex transform items-center justify-center gap-3 rounded-lg bg-[`#fcfcfc33`] text-white secondary-button-animation disabled:bg-[`#191A1A`] px-8 py-4 font-semibold shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl" > {ctaLabel} <ArrowRight className="h-5 w-5" /> </Link> </div> </div> </div> ) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/collaborate/collaborate-section.tsx` around lines 5 - 33, Two near-duplicate components, DocumentationSection and CollaborationSection, should be replaced by a single reusable PromoSection component that accepts props (icon, title, description, href, ctaLabel) so shared markup (Separator, layout divs, styles, Link and ArrowRight) is centralized; create PromoSection (props: icon as a LucideIcon, title, description, href, ctaLabel), move the common JSX into it and preserve all classNames/animations, then update DocumentationSection and CollaborationSection to return <PromoSection .../> with their specific icon, title, description, href and ctaLabel values.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/home/collaborate/collaborate-section.tsx`:
- Line 7: CollaborationSection is missing the top margin that makes it match
DocumentationSection; update the root <div> in
src/components/home/collaborate/collaborate-section.tsx (the component
CollaborationSection) to include the same top margin class (e.g., add "mt-20" to
the div's className or merge it with existing classes) so spacing is consistent
with DocumentationSection.
- Around line 13-15: The heading uses bg-gradient-to-r and bg-clip-text but
still has text-white so the gradient is invisible; update the <h1> in
CollaborateSection (and the analogous <h1> in DocumentationSection) to either
remove the gradient utilities if you want solid white, or make the gradient
active by replacing text-white with text-transparent and adding gradient stops
(e.g., from-<color>-500 via-<color>-400 to-<color>-500) so bg-clip-text shows
through; apply the same change to the h1 in documentation-section.tsx to keep
behavior consistent.
In `@src/components/home/home-page.tsx`:
- Line 2: Remove the unused import Header from this component: the symbol Header
is no longer rendered here (it has been moved to the root layout), so delete the
line importing Header from "@/components/home/header/header" and ensure there
are no other references to Header in this file (e.g., in the HomePage or default
export); run a typecheck/lint to confirm no remaining unused imports.
- Line 5: The HomePage component imports and renders HomePageBackground even
though the root layout already renders it, causing duplicate background layers;
remove the import statement for HomePageBackground and delete any JSX usage of
<HomePageBackground /> (or related variable) inside the HomePage component so
the background is only provided by the global layout, and verify no other
references to HomePageBackground remain in home-page.tsx (e.g., in the HomePage
function or its return).
---
Duplicate comments:
In `@src/components/home/collaborate/collaborate-section.tsx`:
- Around line 23-29: The CTA Link in collaborate-section was changed from a
gradient to a semi-transparent background (className on Link) to fix the
invisible-background issue; ensure the Link component's className no longer
includes any bg-gradient-* utilities, that the ArrowRight icon (ArrowRight)
remains imported and used, and verify in the running UI that the new
bg-[`#fcfcfc33`] maintains sufficient contrast and hover interactions
(hover:scale-105, hover:shadow-xl) so the button looks and behaves as intended.
In `@src/components/home/documentation/documentation-section.tsx`:
- Around line 13-15: Update the H1 in the DocumentationSection component so the
gradient text actually shows: modify the className on the <h1> (the element with
className starting "animate-fade-in-up bg-gradient-to-r bg-clip-text
text-[32px]...") to include text-transparent and explicit gradient stop colors
(e.g., from-... via-... to-...) as done in collaborate-section.tsx; this ensures
bg-clip-text can reveal the background gradient instead of rendering solid
white.
- Around line 5-33: This DocumentationSection is nearly identical to
CollaborationSection and should be refactored to use the shared PromoSection
abstraction: extract the common JSX (header icon, title, description, CTA Link)
into a reusable PromoSection component (or reuse the existing PromoSection from
collaborate-section.tsx) and replace the DocumentationSection implementation
with a simple wrapper that passes props (icon component, title string
"Documentation", description string, href "/documentation", and CTA text) to
PromoSection; update any imports and ensure DocumentationSection renders the
PromoSection with the Book and ArrowRight icons while preserving existing
classes like "animate-fade-in-up" and button styling.
- Around line 22-28: The CTA Link in documentation-section.tsx now uses a
semi-transparent background but the className should be kept consistent with
collaborate-section.tsx and avoid duplicated review comments; open the <Link>
element (symbol: Link) and confirm its className matches the
collaborate-section's CTA (including bg-[`#fcfcfc33`], secondary-button-animation,
sizing and hover utilities) and remove any duplicated review/comment artifacts
from the file or PR metadata so only the functional class change remains.
---
Nitpick comments:
In `@src/components/home/collaborate/collaborate-section.tsx`:
- Around line 5-33: Two near-duplicate components, DocumentationSection and
CollaborationSection, should be replaced by a single reusable PromoSection
component that accepts props (icon, title, description, href, ctaLabel) so
shared markup (Separator, layout divs, styles, Link and ArrowRight) is
centralized; create PromoSection (props: icon as a LucideIcon, title,
description, href, ctaLabel), move the common JSX into it and preserve all
classNames/animations, then update DocumentationSection and CollaborationSection
to return <PromoSection .../> with their specific icon, title, description, href
and ctaLabel values.
In `@src/components/home/home-page.tsx`:
- Line 11: The div in the HomePage component currently uses both "min-h-screen"
and "h-full" in its className ("relative flex min-h-screen h-full flex-col
overflow-hidden"); remove the redundant "h-full" utility so the className
becomes "relative flex min-h-screen flex-col overflow-hidden" to avoid the
overridden/unused height style and keep markup tidy.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
package.jsonsrc/app/collaboration/page.tsxsrc/app/documentation/page.tsxsrc/app/layout.tsxsrc/components/home/collaborate/collaborate-section.tsxsrc/components/home/documentation/documentation-section.tsxsrc/components/home/header/header.tsxsrc/components/home/home-page.tsxsrc/styles/home-page.css
🚧 Files skipped from review as they are similar to previous changes (5)
- src/components/home/header/header.tsx
- src/app/documentation/page.tsx
- package.json
- src/app/collaboration/page.tsx
- src/app/layout.tsx
|
|
||
| export function CollaborationSection() { | ||
| return ( | ||
| <div> |
There was a problem hiding this comment.
Missing top margin — inconsistent spacing with DocumentationSection.
DocumentationSection uses mt-20 on its root <div>, but CollaborationSection has no top margin at all. The visual gap before CollaborationSection will be tighter than expected.
✏️ Proposed fix
- <div>
+ <div className="mt-20">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/home/collaborate/collaborate-section.tsx` at line 7,
CollaborationSection is missing the top margin that makes it match
DocumentationSection; update the root <div> in
src/components/home/collaborate/collaborate-section.tsx (the component
CollaborationSection) to include the same top margin class (e.g., add "mt-20" to
the div's className or merge it with existing classes) so spacing is consistent
with DocumentationSection.
Comment on lines
+13
to
+15
| <h1 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]"> | ||
| Collaboration | ||
| </h1> |
There was a problem hiding this comment.
Gradient text effect is non-functional on the heading.
bg-gradient-to-r bg-clip-text requires text-transparent to make the gradient visible through the text. With text-white instead, the clip and gradient are inert — the text renders solid white. Either add text-transparent and define gradient stops (from-*/to-*), or remove the unused bg-gradient-to-r bg-clip-text classes.
Same issue also applies to the h1 in src/components/home/documentation/documentation-section.tsx Line 13.
✏️ Proposed fix (gradient text)
- <h1 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]">
+ <h1 className="animate-fade-in-up bg-gradient-to-r from-white to-gray-300 bg-clip-text text-[32px] font-bold tracking-tight text-transparent md:text-[48px]">Or, if a solid white heading is the intent, just drop the gradient utilities:
- <h1 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]">
+ <h1 className="animate-fade-in-up text-[32px] font-bold tracking-tight text-white md:text-[48px]">📝 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
| <h1 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]"> | |
| Collaboration | |
| </h1> | |
| <h1 className="animate-fade-in-up bg-gradient-to-r from-white to-gray-300 bg-clip-text text-[32px] font-bold tracking-tight text-transparent md:text-[48px]"> | |
| Collaboration | |
| </h1> |
Suggested change
| <h1 className="animate-fade-in-up bg-gradient-to-r bg-clip-text text-[32px] font-bold tracking-tight text-white md:text-[48px]"> | |
| Collaboration | |
| </h1> | |
| <h1 className="animate-fade-in-up text-[32px] font-bold tracking-tight text-white md:text-[48px]"> | |
| Collaboration | |
| </h1> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/home/collaborate/collaborate-section.tsx` around lines 13 -
15, The heading uses bg-gradient-to-r and bg-clip-text but still has text-white
so the gradient is invisible; update the <h1> in CollaborateSection (and the
analogous <h1> in DocumentationSection) to either remove the gradient utilities
if you want solid white, or make the gradient active by replacing text-white
with text-transparent and adding gradient stops (e.g., from-<color>-500
via-<color>-400 to-<color>-500) so bg-clip-text shows through; apply the same
change to the h1 in documentation-section.tsx to keep behavior consistent.
Member
Background grid duplication |
Member
I don't like the fact that the documentation appears at the bottom; I prefer the old landing page. Just add an arrow showing where you can scroll down. 
|
kurama
requested changes
Feb 25, 2026
|
|
||
| const contributing = `# Contributing to Beep | ||
|
|
||
| Thanks for contributing to Beep! |
Member
There was a problem hiding this comment.
You copied the files from https://github.com/beep-industries/.github, this is not very maintainable over time, is it not possible to insert them dynamically?
Otherwise, the rest seems fine to me.
nice catch |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/home/home-page.tsx (2)
25-28:h-fullon the second section wrapper is a no-op.
<main>usesflex-growwithout an explicit height, so percentage-basedh-fullon this child resolves to0. TheDocumentationSectionandCollaborationSectionalready render at their intrinsic heights regardless. The class is dead CSS and can be removed to reduce confusion.♻️ Proposed fix
- <div className="h-full"> + <div> <DocumentationSection /> <CollaborationSection /> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/home-page.tsx` around lines 25 - 28, Remove the dead CSS class by deleting the "h-full" utility on the wrapper div that contains DocumentationSection and CollaborationSection; the wrapper currently rendered as <div className="h-full"> should be changed to just <div> (or another needed utility) because <main> uses flex-grow without an explicit height so percentage-based h-full collapses to 0 and is a no-op—update the markup around DocumentationSection and CollaborationSection accordingly.
13-14: Consider extracting the64pxheader-height magic number.
h-[calc(100dvh-64px)]hardcodes the header height. If the header ever changes, this calc silently produces wrong layout and the scroll offset logic (line 20) also becomes incorrect. A CSS custom property (e.g.--header-height: 64px) shared between the layout and this component would make future changes safe.♻️ Example using a CSS variable
- <div className="flex h-[calc(100dvh-64px)] flex-col items-center justify-between"> + <div className="flex h-[calc(100dvh-var(--header-height,64px))] flex-col items-center justify-between">Define once in your global CSS or Tailwind theme:
:root { --header-height: 64px; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/home/home-page.tsx` around lines 13 - 14, The component hardcodes the header height in the className "h-[calc(100dvh-64px)]" which can diverge from the actual header and also breaks the scroll-offset logic referenced in this file; define a shared CSS custom property (e.g. --header-height) once in your global styles and replace the literal "64px" usage in the home-page component's className with a calc that uses that custom property, and update the scroll-offset logic in this component to read/compute against the same --header-height variable instead of the hardcoded 64px so both layout and scrolling remain in sync (search for "h-[calc(100dvh-64px)]" and the scroll offset logic in this file to apply the change).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/home/home-page.tsx`:
- Around line 18-23: The scroll button in home-page.tsx uses window.scrollTo({
top: window.innerHeight }) which overshoots the hero height (calc(100dvh -
64px}) and also has no accessible name; change the click handler to scroll to
the actual DocumentationSection element (e.g., query/select the
DocumentationSection DOM node or its ref and call element.scrollIntoView({
behavior: "smooth" })) so the top aligns correctly, and add an accessible name
like aria-label="Scroll to documentation" to the <button> (the icon ChevronsDown
can remain presentational).
---
Nitpick comments:
In `@src/components/home/home-page.tsx`:
- Around line 25-28: Remove the dead CSS class by deleting the "h-full" utility
on the wrapper div that contains DocumentationSection and CollaborationSection;
the wrapper currently rendered as <div className="h-full"> should be changed to
just <div> (or another needed utility) because <main> uses flex-grow without an
explicit height so percentage-based h-full collapses to 0 and is a no-op—update
the markup around DocumentationSection and CollaborationSection accordingly.
- Around line 13-14: The component hardcodes the header height in the className
"h-[calc(100dvh-64px)]" which can diverge from the actual header and also breaks
the scroll-offset logic referenced in this file; define a shared CSS custom
property (e.g. --header-height) once in your global styles and replace the
literal "64px" usage in the home-page component's className with a calc that
uses that custom property, and update the scroll-offset logic in this component
to read/compute against the same --header-height variable instead of the
hardcoded 64px so both layout and scrolling remain in sync (search for
"h-[calc(100dvh-64px)]" and the scroll offset logic in this file to apply the
change).
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
src/components/home/features/feature-card.tsxsrc/components/home/footer/footer.tsxsrc/components/home/home-page.tsx
Comment on lines
+18
to
+23
| <button | ||
| className="mb-10 cursor-pointer text-white" | ||
| onClick={() => window.scrollTo({ top: window.innerHeight, behavior: "smooth" })} | ||
| > | ||
| <ChevronsDown className="h-6 w-6 animate-bounce" /> | ||
| </button> |
There was a problem hiding this comment.
Scroll offset overshoots by 64 px, and the button lacks an accessible label.
Two issues with this button:
-
Incorrect scroll target. The hero section is
calc(100dvh − 64px)tall (line 13). With a sticky/fixed header, content starts aty = 0, so theDocumentationSectionbegins aty = (100dvh − 64). Callingwindow.scrollTo({ top: window.innerHeight })targetsy = 100dvh, which skips 64 px past the section start and cuts off theDocumentationSectionheader. The target should match the first section's actual height. -
Missing accessible name. An icon-only
<button>with noaria-labelhas no accessible name, making it unusable for screen-reader users.
🐛 Proposed fix
<button
className="mb-10 cursor-pointer text-white"
+ aria-label="Scroll to content"
- onClick={() => window.scrollTo({ top: window.innerHeight, behavior: "smooth" })}
+ onClick={() => window.scrollTo({ top: window.innerHeight - 64, behavior: "smooth" })}
>Or, even more robust — scroll to the actual DOM node rather than relying on a hardcoded offset:
+ const contentRef = useRef<HTMLDivElement>(null)
// …
<button
className="mb-10 cursor-pointer text-white"
+ aria-label="Scroll to content"
- onClick={() => window.scrollTo({ top: window.innerHeight, behavior: "smooth" })}
+ onClick={() => contentRef.current?.scrollIntoView({ behavior: "smooth" })}
>
<ChevronsDown className="h-6 w-6 animate-bounce" />
</button>
// …
- <div className="h-full">
+ <div className="h-full" ref={contentRef}>📝 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
| <button | |
| className="mb-10 cursor-pointer text-white" | |
| onClick={() => window.scrollTo({ top: window.innerHeight, behavior: "smooth" })} | |
| > | |
| <ChevronsDown className="h-6 w-6 animate-bounce" /> | |
| </button> | |
| <button | |
| className="mb-10 cursor-pointer text-white" | |
| aria-label="Scroll to content" | |
| onClick={() => window.scrollTo({ top: window.innerHeight - 64, behavior: "smooth" })} | |
| > | |
| <ChevronsDown className="h-6 w-6 animate-bounce" /> | |
| </button> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/home/home-page.tsx` around lines 18 - 23, The scroll button in
home-page.tsx uses window.scrollTo({ top: window.innerHeight }) which overshoots
the hero height (calc(100dvh - 64px}) and also has no accessible name; change
the click handler to scroll to the actual DocumentationSection element (e.g.,
query/select the DocumentationSection DOM node or its ref and call
element.scrollIntoView({ behavior: "smooth" })) so the top aligns correctly, and
add an accessible name like aria-label="Scroll to documentation" to the <button>
(the icon ChevronsDown can remain presentational).
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
3 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
Style
Chores