docs: update landing ui#1077
Merged
Merged
Conversation
|
This comment has been minimized.
This comment has been minimized.
Contributor
📝 WalkthroughWalkthroughLarge UI theming update: many components switch to a dark hex-based palette, headers become full-width dark sections with emerald indicators, Hero gains a Platform Container and FeatureShowcase integration, testimonials are consolidated into a unified scrolling stream, and agents-animation replaces a multi-glow background with a single radial gradient and new Icons mapping. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~55 minutes Possibly related PRs
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 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Deploying voltagent with
|
| Latest commit: |
d478104
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://cd11eea4.voltagent.pages.dev |
| Branch Preview URL: | https://update-landing-ui.voltagent.pages.dev |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
website/src/components/two-blocks/index.tsx (2)
94-102:⚠️ Potential issue | 🟡 MinorUse
<a>instead of<button>for external URL navigation.A
<button>triggeringwindow.openfor an external URL is semantically incorrect — keyboard users and screen readers expect buttons to perform in-page actions and links to navigate. Replacing it with an<a>also natively providesCtrl+Click/ middle-click to open in a new tab. Also addrel="noopener noreferrer"to prevent tab-napping.♿ Proposed fix
- <button - type="button" - className="w-full landing-xs:py-2 landing-xs:px-3 landing-md:py-3 landing-md:px-4 text-emerald-400 font-semibold rounded-lg border border-emerald-400/20 bg-emerald-400/10 hover:bg-emerald-400/20 transition-colors duration-200 cursor-pointer landing-xs:text-sm landing-md:text-base" - onClick={() => { - window.open("https://voltagent.dev/docs/", "_blank"); - }} - > - Explore VoltAgent - </button> + <a + href="https://voltagent.dev/docs/" + target="_blank" + rel="noopener noreferrer" + className="block w-full text-center landing-xs:py-2 landing-xs:px-3 landing-md:py-3 landing-md:px-4 text-emerald-400 font-semibold rounded-lg border border-emerald-400/20 bg-emerald-400/10 hover:bg-emerald-400/20 transition-colors duration-200 landing-xs:text-sm landing-md:text-base" + > + Explore VoltAgent + </a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/two-blocks/index.tsx` around lines 94 - 102, Replace the semantic misuse of the <button> in the TwoBlocks component with an anchor: change the element rendered at the block that currently uses onClick={() => window.open("https://voltagent.dev/docs/", "_blank")} to an <a> with href="https://voltagent.dev/docs/" target="_blank" rel="noopener noreferrer", preserving the existing className, text "Explore VoltAgent" and any responsive text classes; ensure no leftover onClick remains and add an accessible label only if the visible text isn't sufficient.
61-63:⚠️ Potential issue | 🟡 MinorGrammar issue in user-facing copy: "for building and AI agents".
The sentence reads: "A TypeScript framework for building and AI agents with enterprise-grade capabilities…" — the word "and" appears to be extraneous or a word is missing (e.g. "deploying").
✏️ Suggested fix
- A TypeScript framework for building and AI agents with enterprise-grade - capabilities and seamless integrations. + A TypeScript framework for building AI agents with enterprise-grade + capabilities and seamless integrations.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/two-blocks/index.tsx` around lines 61 - 63, The text node inside the two-blocks component contains a grammar error: change the string "A TypeScript framework for building and AI agents with enterprise-grade capabilities and seamless integrations." to a correct phrasing (either remove the extraneous "and" to read "A TypeScript framework for building AI agents…" or replace "and" with a verb like "deploying" to read "for building and deploying AI agents…"). Edit the paragraph string in website/src/components/two-blocks/index.tsx (the JSX <p> text inside the TwoBlocks component) to use the chosen corrected wording and ensure punctuation/spacing remains consistent.website/src/components/testimonials/Testimonials.tsx (1)
293-297:⚠️ Potential issue | 🟡 MinorRemove debug
console.logstatements before merging.These tweet-data logging statements will execute on every page load in production, leaking internal data structure details to the browser console and adding unnecessary noise.
Proposed fix
export function Testimonials() { - // Check if tweets data is loaded - useEffect(() => { - console.log("Tweet data loaded:", tweetsData); - console.log("Type of tweetsData:", typeof tweetsData); - console.log("Tweet IDs:", Object.keys(tweetsData || {})); - }, []); - // Animation control states for each row🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/testimonials/Testimonials.tsx` around lines 293 - 297, Remove the debug console.log statements inside the useEffect in Testimonials.tsx that log "Tweet data loaded", "Type of tweetsData", and "Tweet IDs" (they reference tweetsData); either delete those three console.log calls entirely or wrap them so they only run in development (e.g., gate by process.env.NODE_ENV === 'development') to avoid leaking internal data to production.website/src/pages/index.tsx (1)
47-78:⚠️ Potential issue | 🟡 MinorRemove
jsxandglobalattributes from<style>tag — styled-jsx is not configured in this Docusaurus project.Docusaurus doesn't include styled-jsx by default. The
jsxandglobalattributes are Next.js/styled-jsx specific and will be treated as unknown HTML attributes in this React context, potentially causing console warnings. The CSS will still be injected globally (since it's a regular<style>tag), but the syntax is non-standard here.Use a plain
<style>tag instead:Proposed fix
- <style jsx global>{` + <style>{` :root {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/pages/index.tsx` around lines 47 - 78, In website/src/pages/index.tsx replace the styled-jsx-specific <style jsx global>{`...`}</style> usage with a plain React <style>{`...`}</style> so the CSS (the :root var, html/body/#__docusaurus/.main-wrapper rules and the `@keyframes` gradientShift block) remains injected but without the unsupported jsx and global attributes; locate the block containing the gradientShift keyframes and remove the jsx and global attributes from the <style> tag surrounding that template string.
🧹 Nitpick comments (12)
website/src/components/featured-blog/index.tsx (1)
84-86: Consider addingsm:font-semiboldto bridge the weight gap at thesmbreakpoint.
sm:text-5xlis active between thelanding-xsandlanding-mdbreakpoints, but there's no matchingsm:font-*class — so the heading renders atfont-normalweight at that size. If the design intent is forfont-semiboldto kick in beforelanding-md, asm:font-semibold(or equivalent) class would close the gap.✏️ Suggested tweak
-<p className="mt-1 landing-xs:text-2xl md:text-3xl landing-md:text-4xl landing-xs:mb-2 landing-md:mb-4 landing-xs:font-normal landing-md:font-semibold text-white sm:text-5xl sm:tracking-tight"> +<p className="mt-1 landing-xs:text-2xl md:text-3xl landing-md:text-4xl landing-xs:mb-2 landing-md:mb-4 landing-xs:font-normal sm:font-semibold landing-md:font-semibold text-white sm:text-5xl sm:tracking-tight">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/featured-blog/index.tsx` around lines 84 - 86, The heading paragraph in FeaturedBlog (the <p> element containing "All about AI Agents" in featured-blog/index.tsx) uses responsive classes but lacks a font-weight for the sm breakpoint; add a matching sm:font-semibold class to the className string (alongside landing-md:font-semibold and landing-xs:font-normal) so the text transitions to font-semibold at the sm breakpoint.website/src/components/two-blocks/index.tsx (2)
22-32: Remove the commented-out header block — the only actual change in this file lands in dead code.The sole changed line (Line 26) modifies font-weight classes inside a fully commented-out JSX block that is never rendered. The entire block from Line 22 to 32 is dead code. If this header is no longer needed, delete it; if it will be reused, track it in an issue rather than leaving it in-source.
🧹 Proposed cleanup
- {/* Header Section */} - {/* <div className="mb-12"> - <h2 className="landing-xs:text-sm landing-md:text-lg landing-xs:mb-2 landing-md:mb-4 font-semibold text-main-emerald tracking-wide uppercase"> - Complete AI Platform - </h2> - <p className="mt-1 landing-xs:text-2xl landing-md:text-4xl landing-xs:mb-2 landing-md:mb-4 landing-xs:font-normal landing-md:font-normal text-white sm:text-5xl sm:tracking-tight"> - Build, deploy, and monitor AI agents end-to-end - </p> - <p className="max-w-3xl landing-md:text-xl landing-xs:text-md text-gray-400"> - From development to production monitoring - everything you need for enterprise AI agents in one integrated platform. - </p> - </div> */}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/two-blocks/index.tsx` around lines 22 - 32, Remove the dead commented JSX block containing the header/description (the commented <div> that includes the <h2> "Complete AI Platform" and the two <p> tags) from the Two Blocks component; if you want to preserve the content for future work, create a tracking issue instead of leaving the commented-out code in source, otherwise delete the entire commented block to keep the file clean.
133-146: Avoid injecting<style>tags inline in JSX.In an SSR/Docusaurus environment, a
<style>block inside a component is re-injected on every render, which can cause style duplication during hydration and complicates Content Security Policy (CSP) headers. Move the keyframe definition to the Tailwind config or a global CSS file.♻️ Suggested approach — Tailwind config
In
tailwind.config.js:theme: { extend: { + keyframes: { + scrollLeftSmall: { + '0%': { transform: 'translateX(0)' }, + '100%': { transform: 'translateX(-50%)' }, + }, + }, + animation: { + 'scroll-left-small': 'scrollLeftSmall 30s linear infinite', + }, }, },Then in the component, replace the
<style>block and the class string:- <style>{` - `@keyframes` scrollLeftSmall { ... } - .scroll-left-small { animation: scrollLeftSmall 30s linear infinite; } - `}</style> - <div className="flex landing-xs:space-x-3 landing-md:space-x-4 landing-xs:py-2 landing-md:py-3 scroll-left-small"> + <div className="flex landing-xs:space-x-3 landing-md:space-x-4 landing-xs:py-2 landing-md:py-3 animate-scroll-left-small">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/two-blocks/index.tsx` around lines 133 - 146, The inline <style> block defining the keyframes/animation (scrollLeftSmall and .scroll-left-small) in the TwoBlocks component should be removed and the keyframe + animation moved to a global stylesheet or the Tailwind config; add the keyframes/animation under your global CSS (or as a Tailwind animation utility) and keep using the scroll-left-small class on the element in website/src/components/two-blocks/index.tsx, then delete the <style> tag so the component only references the class (no inline styles) to avoid SSR duplication and CSP issues.website/src/components/agents-detail/code-example.tsx (1)
281-282: Minor: redundantborderWidthinline style.Line 281 sets
borderWidth: "1px"via inline style, while line 282 already includes the Tailwindborderclass (which setsborder-width: 1px). The inline style likely exists as a specificity override for Docusaurus defaults — if so, it's fine to keep; otherwise it can be removed.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/agents-detail/code-example.tsx` around lines 281 - 282, Remove the redundant inline style borderWidth: "1px" from the JSX element that already uses the Tailwind border class (the element with the className containing "max-w-4xl ... border border-solid ... rounded-lg"); if the inline was added for specificity with Docusaurus, replace it with a Tailwind utility (!border or a custom CSS class) or leave a clarifying comment, but do not keep both the inline style and the "border" class.website/src/components/community-section/index.tsx (1)
148-193: Injecting<style>elements viauseEffectfor keyframe animations.This pattern of dynamically creating
<style>tags works but is fragile. If the component mounts multiple times concurrently (e.g., during fast navigation), orphan style tags could accumulate if cleanup races. Consider moving these@keyframesdefinitions to a CSS module or a global stylesheet for reliability, especially since they're static definitions that don't depend on props or state.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/community-section/index.tsx` around lines 148 - 193, The component currently injects static `@keyframes` into the document head inside the React.useEffect (creating a local style variable and appending/removing it), which can race and leak styles; move these static keyframe definitions out of the effect into a global stylesheet or a CSS module (e.g., add the `@keyframes` to community-section.module.css or the global CSS and import it), then remove the dynamic creation/removal logic from the React.useEffect in index.tsx (delete the style creation/appending and the cleanup that removes it) and update any className references to use the exported CSS classes if using a module.website/src/components/navbar/styles.module.css (1)
5-9:backdrop-filter: blur(12px)has no visual effect with an opaque background.With
background-color:#020202`` (fully opaque), thebackdrop-filteron line 9 doesn't produce any visible blur since there's no transparency for content to show through. This costs a compositor layer for no benefit. Consider removing it, or switching to a semi-transparent background (e.g., `rgba(2, 2, 2, 0.85)`) if the blur effect is desired.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/navbar/styles.module.css` around lines 5 - 9, The backdrop-filter rule is ineffective because the navbar uses an opaque background-color (`#020202`); either remove the useless backdrop-filter: blur(12px) declaration or make the background semi-transparent (e.g., change background-color to rgba(2,2,2,0.85)) so the blur has visible effect—update the CSS rule in styles.module.css by modifying or deleting the backdrop-filter or switching background-color to a semitransparent value to avoid an unnecessary compositor layer.website/src/components/supervisor-agent/workflow-code-example.tsx (1)
946-949: Style tag appended todocument.headis never cleaned up.The
stylesblock at module scope appends a<style>tag on every module evaluation but never removes it. In a dev/HMR scenario or if the module re-evaluates, duplicate style tags accumulate. Consider using auseEffectwith cleanup (similar to whatCommunitySectiondoes) or moving these keyframes to a CSS file.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/supervisor-agent/workflow-code-example.tsx` around lines 946 - 949, The module-level creation/appending of the style tag (styles -> styleTag -> document.head.appendChild) causes duplicate <style> elements on re-evaluation; move this DOM mutation into a React effect inside the WorkflowCodeExample component (useEffect) so the style tag is created on mount and removed in the effect's cleanup (remove the appended styleTag from document.head), or alternatively assign a stable id to the tag and skip appending if it already exists; target the module symbols styleTag, styles and the document.head append/remove logic when making the change.website/src/components/hero/index.tsx (1)
176-182: Duplicate Tailwind classes in the "Get Started" button.The className string contains
border-solidtwice andbordertwice. While this doesn't break anything functionally, it's noisy.Proposed cleanup
- className="w-full sm:w-auto px-4 py-3 font-bold landing-sm:text-lg border-solid landing-xs:text-md font-mono border-[`#3d3a39`] backdrop-blur-sm cursor-pointer bg-transparent text-[`#eeeeee`] border border-solid rounded-md transition duration-300 flex items-center outline-none justify-center sm:justify-start gap-2 hover:bg-transparent hover:border-[`#5c5855`] hover:text-[`#f3f4f6`] no-underline" + className="w-full sm:w-auto px-4 py-3 font-bold landing-sm:text-lg landing-xs:text-md font-mono border border-solid border-[`#3d3a39`] backdrop-blur-sm cursor-pointer bg-transparent text-[`#eeeeee`] rounded-md transition duration-300 flex items-center outline-none justify-center sm:justify-start gap-2 hover:bg-transparent hover:border-[`#5c5855`] hover:text-[`#f3f4f6`] no-underline"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/hero/index.tsx` around lines 176 - 182, The className on the Link component rendering the "Get Started" button contains duplicate Tailwind classes (specifically "border-solid" and "border" appear twice); edit the Link element in the hero component (the Link with children ChevronRightIcon and "Get Started") and remove the duplicate "border-solid" and duplicate "border" entries so each Tailwind utility appears only once in the className string.website/src/pages/index.tsx (1)
42-42: Commented-outFeaturedBlog— remove or track.If
FeaturedBlogis intentionally removed from the landing page, delete the import (Line 7) and this line rather than leaving commented-out code. If it's temporarily disabled, add a TODO with context.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/pages/index.tsx` at line 42, The commented-out FeaturedBlog component usage should be either fully removed or tracked; either delete the commented JSX line and remove the corresponding import of FeaturedBlog, or if it's intentionally disabled temporarily, replace the comment with a TODO explaining why and when to re-enable it (mentioning the FeaturedBlog import and the commented JSX to locate the code).website/src/components/supervisor-agent/index.tsx (1)
277-388: Consider adding keyboard accessibility to all interactive feature cards.Feature card 3 ("Shared Memory System", Lines 341–348) includes
onKeyDown,role="button", andtabIndex={0}for keyboard accessibility, but cards 1, 2, and 4 lack these attributes despite also being interactive (onClick,cursor-pointer). This is a pre-existing gap, but since you're updating these cards, it's a good time to add parity.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/supervisor-agent/index.tsx` around lines 277 - 388, The three interactive feature card divs that use highlightedSection and call handleMouseEnter, handleMouseLeave, and handleClick (the Centralized Coordination, Specialized Agent Roles, and Dynamic Agent Selection cards) need the same keyboard accessibility as the Shared Memory System card: add role="button", tabIndex={0}, and an onKeyDown handler that listens for Enter and Space to preventDefault() and call handleClick with the respective key (e.g., "centralized", "specialized", "dynamic"); ensure these attributes are placed on the same container element that currently has onClick to maintain identical behavior.website/src/components/testimonials/Testimonials.tsx (1)
628-647: Remove unnecessary(as any)casts or type articles array properly.The
articlesarray contains onlytitle,coverImage,excerpt,author,url,type, andvideoId. The casts forpublication,date,readTime,channel,views, anddurationall resolve toundefined. WhileArticleCarddefines these as optional props and handles them gracefully, the casts are redundant. Either remove these unused props and casts, or extend the articles array type definition to include optional fields that match the intended data structure.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/testimonials/Testimonials.tsx` around lines 628 - 647, The JSX is passing many unnecessary (as any) casts into ArticleCard from the seamlessArticles map — props like publication, date, readTime, channel, views, and duration are always undefined; remove those redundant casts or properly type the source array. Fix by updating the seamlessArticles (or articles) type to include those optional fields if they should exist, or simply stop passing publication/date/readTime/channel/views/duration into the ArticleCard in the map; locate the mapping over seamlessArticles and the ArticleCard usage to apply the change.website/src/components/rag/rag-animation.tsx (1)
167-183: Duplicateshadow-*/border-*classes create nondeterministic rendering in the active branch.Two problems with
getNodeHighlightClass:
Active branch concatenates both shadow values. When
isActiveistrue, the returned string contains bothshadow-[0_0_15px_rgba(92,88,85,0.2)](frombaseClasses) andshadow-[0_0_15px_rgba(92,88,85,0.6)](the active override). When duplicate property classes exist on the same element, "it's up to the order the CSS is generated" — not the order in the HTML class list — so the higher-opacity active shadow may silently lose to the base shadow depending on build order.Border color is set twice per node. Every node container already has a hardcoded
border-[#3d3a39]in itsclassNameprop (e.g., line 220), yetgetNodeHighlightClassalso returnsborder-[#5c5855]as part ofbaseClasses. Same CSS cascade ambiguity applies.The clean fix is to only emit the shadow that applies for the current state, and move the border-color assignment entirely into
getNodeHighlightClass(removing the hardcodedborder-[#3d3a39]from each node's staticclassName).♻️ Proposed refactor for `getNodeHighlightClass`
const baseClasses = isRedNode - ? "border-amber-500 shadow-[0_0_15px_rgba(245,158,11,0.2)]" - : "border-[`#5c5855`] shadow-[0_0_15px_rgba(92,88,85,0.2)]"; + ? "border-amber-500" + : "border-[`#5c5855`]"; if (isActive) { return `${baseClasses} animate-pulse ${ isRedNode - ? "shadow-[0_0_15px_rgba(245,158,11,0.6)]" - : "shadow-[0_0_15px_rgba(92,88,85,0.6)]" + ? "shadow-[0_0_15px_rgba(245,158,11,0.6)]" + : "shadow-[0_0_15px_rgba(92,88,85,0.6)]" }`; } if (isAnyNodeActive) { - return `${baseClasses} opacity-70`; + return `${baseClasses} shadow-[0_0_15px_rgba(92,88,85,0.2)] opacity-70`; } - return baseClasses; + return isRedNode + ? `${baseClasses} shadow-[0_0_15px_rgba(245,158,11,0.2)]` + : `${baseClasses} shadow-[0_0_15px_rgba(92,88,85,0.2)]`;And remove the hardcoded
border-[#3d3a39]from each node's staticclassNameso there is only one source of truth for border color.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/rag/rag-animation.tsx` around lines 167 - 183, getNodeHighlightClass currently returns baseClasses that include a shadow and a border which then get concatenated with an active shadow causing duplicate shadow and border classes; fix it by making baseClasses include only the appropriate border color (no shadow), and have the active branch return only the active shadow (no duplicate from base) — i.e., remove shadow-* from baseClasses and append the single correct shadow in the isActive branch (use the rgba variant based on isRedNode), keep the opacity/idle branch returning baseClasses + opacity as before, and then remove the hardcoded border-[`#3d3a39`] from node container className so getNodeHighlightClass is the single source of truth for border color (refer to getNodeHighlightClass and the node container className usages to locate changes).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/components/community-section/index.tsx`:
- Line 197: The section element's className in the CommunitySection component
contains a duplicate "relative" token; locate the section JSX in
website/src/components/community-section/index.tsx (the <section
className="relative w-full overflow-hidden relative z-10"> line) and remove the
duplicate so the className contains "relative" only once (e.g., "relative w-full
overflow-hidden z-10").
- Around line 224-225: The className string on the link element in
community-section's JSX includes the CSS class "relative" twice; remove the
duplicate so the class list only contains a single "relative" (locate the JSX
where className is built for the link element that uses ${link.id === "discord"
? "md:col-span-1" : ""} to find the correct spot).
In `@website/src/components/companies/CompaniesMarquee.tsx`:
- Around line 97-99: In CompaniesMarquee.tsx update the wrapper text color used
for logo SVGs so logos remain visible on the dark background: change the
hardcoded text color in the className expression (the fragment that currently
reads text-[`#3d3a39`] applied alongside baseLogo.wrapperClassName) to a lighter
utility such as text-white/40 or text-white/50 so SVGs that use
fill="currentColor" meet contrast requirements; ensure the modification
preserves existing wrapperClassName fallback logic (baseLogo.wrapperClassName ??
"w-32") and only replaces the text color token.
In `@website/src/components/rag/index.tsx`:
- Around line 20-24: The section uses the small decorative label as <h2> and the
main title as a <p>, which reverses heading semantics; update the JSX so the
large text element with class "mt-1 landing-xs:text-2xl landing-md:text-4xl ...
text-white sm:text-5xl sm:tracking-tight" becomes the semantic <h2> (or the
highest appropriate heading) and change the current decorative label element
(currently <h2 className="landing-xs:text-sm landing-md:text-lg ..."> containing
the "RAG" dot and text) to a non-heading element such as a <p> or <span> while
preserving its classes and content so screen readers see the primary section
title as a heading.
In `@website/src/components/supervisor-agent/mobile-code-block.tsx`:
- Line 253: The overlay element uses "border-solid border-[`#3d3a39`]" (and
elsewhere "border-solid border-white/10") which sets style and color but not
width, so add the Tailwind border width utility by replacing "border-solid
border-[`#3d3a39`]" with "border border-[`#3d3a39`]" (and similarly "border
border-white/10") in the JSX for the MobileCodeBlock component (the element with
className containing those tokens) — you can drop "border-solid" because
"border" already applies a solid border via Tailwind preflight.
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 578-596: The map rendering of seamlessMixedDiscordContent is
passing undefined props; update the JSX so DiscordMessage is only given username
and message (remove discriminator and timestamp) and LinkedInMessage is only
given username, title, message, avatar, and url (remove timestamp), ensuring you
only pass props that exist on item.data; locate this in the map callback that
renders <DiscordMessage .../> and <LinkedInMessage .../> and delete the
discriminator and timestamp prop attributes so components no longer receive
unnecessary undefined values.
---
Outside diff comments:
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 293-297: Remove the debug console.log statements inside the
useEffect in Testimonials.tsx that log "Tweet data loaded", "Type of
tweetsData", and "Tweet IDs" (they reference tweetsData); either delete those
three console.log calls entirely or wrap them so they only run in development
(e.g., gate by process.env.NODE_ENV === 'development') to avoid leaking internal
data to production.
In `@website/src/components/two-blocks/index.tsx`:
- Around line 94-102: Replace the semantic misuse of the <button> in the
TwoBlocks component with an anchor: change the element rendered at the block
that currently uses onClick={() => window.open("https://voltagent.dev/docs/",
"_blank")} to an <a> with href="https://voltagent.dev/docs/" target="_blank"
rel="noopener noreferrer", preserving the existing className, text "Explore
VoltAgent" and any responsive text classes; ensure no leftover onClick remains
and add an accessible label only if the visible text isn't sufficient.
- Around line 61-63: The text node inside the two-blocks component contains a
grammar error: change the string "A TypeScript framework for building and AI
agents with enterprise-grade capabilities and seamless integrations." to a
correct phrasing (either remove the extraneous "and" to read "A TypeScript
framework for building AI agents…" or replace "and" with a verb like "deploying"
to read "for building and deploying AI agents…"). Edit the paragraph string in
website/src/components/two-blocks/index.tsx (the JSX <p> text inside the
TwoBlocks component) to use the chosen corrected wording and ensure
punctuation/spacing remains consistent.
In `@website/src/pages/index.tsx`:
- Around line 47-78: In website/src/pages/index.tsx replace the
styled-jsx-specific <style jsx global>{`...`}</style> usage with a plain React
<style>{`...`}</style> so the CSS (the :root var,
html/body/#__docusaurus/.main-wrapper rules and the `@keyframes` gradientShift
block) remains injected but without the unsupported jsx and global attributes;
locate the block containing the gradientShift keyframes and remove the jsx and
global attributes from the <style> tag surrounding that template string.
---
Nitpick comments:
In `@website/src/components/agents-detail/code-example.tsx`:
- Around line 281-282: Remove the redundant inline style borderWidth: "1px" from
the JSX element that already uses the Tailwind border class (the element with
the className containing "max-w-4xl ... border border-solid ... rounded-lg"); if
the inline was added for specificity with Docusaurus, replace it with a Tailwind
utility (!border or a custom CSS class) or leave a clarifying comment, but do
not keep both the inline style and the "border" class.
In `@website/src/components/community-section/index.tsx`:
- Around line 148-193: The component currently injects static `@keyframes` into
the document head inside the React.useEffect (creating a local style variable
and appending/removing it), which can race and leak styles; move these static
keyframe definitions out of the effect into a global stylesheet or a CSS module
(e.g., add the `@keyframes` to community-section.module.css or the global CSS and
import it), then remove the dynamic creation/removal logic from the
React.useEffect in index.tsx (delete the style creation/appending and the
cleanup that removes it) and update any className references to use the exported
CSS classes if using a module.
In `@website/src/components/featured-blog/index.tsx`:
- Around line 84-86: The heading paragraph in FeaturedBlog (the <p> element
containing "All about AI Agents" in featured-blog/index.tsx) uses responsive
classes but lacks a font-weight for the sm breakpoint; add a matching
sm:font-semibold class to the className string (alongside
landing-md:font-semibold and landing-xs:font-normal) so the text transitions to
font-semibold at the sm breakpoint.
In `@website/src/components/hero/index.tsx`:
- Around line 176-182: The className on the Link component rendering the "Get
Started" button contains duplicate Tailwind classes (specifically "border-solid"
and "border" appear twice); edit the Link element in the hero component (the
Link with children ChevronRightIcon and "Get Started") and remove the duplicate
"border-solid" and duplicate "border" entries so each Tailwind utility appears
only once in the className string.
In `@website/src/components/navbar/styles.module.css`:
- Around line 5-9: The backdrop-filter rule is ineffective because the navbar
uses an opaque background-color (`#020202`); either remove the useless
backdrop-filter: blur(12px) declaration or make the background semi-transparent
(e.g., change background-color to rgba(2,2,2,0.85)) so the blur has visible
effect—update the CSS rule in styles.module.css by modifying or deleting the
backdrop-filter or switching background-color to a semitransparent value to
avoid an unnecessary compositor layer.
In `@website/src/components/rag/rag-animation.tsx`:
- Around line 167-183: getNodeHighlightClass currently returns baseClasses that
include a shadow and a border which then get concatenated with an active shadow
causing duplicate shadow and border classes; fix it by making baseClasses
include only the appropriate border color (no shadow), and have the active
branch return only the active shadow (no duplicate from base) — i.e., remove
shadow-* from baseClasses and append the single correct shadow in the isActive
branch (use the rgba variant based on isRedNode), keep the opacity/idle branch
returning baseClasses + opacity as before, and then remove the hardcoded
border-[`#3d3a39`] from node container className so getNodeHighlightClass is the
single source of truth for border color (refer to getNodeHighlightClass and the
node container className usages to locate changes).
In `@website/src/components/supervisor-agent/index.tsx`:
- Around line 277-388: The three interactive feature card divs that use
highlightedSection and call handleMouseEnter, handleMouseLeave, and handleClick
(the Centralized Coordination, Specialized Agent Roles, and Dynamic Agent
Selection cards) need the same keyboard accessibility as the Shared Memory
System card: add role="button", tabIndex={0}, and an onKeyDown handler that
listens for Enter and Space to preventDefault() and call handleClick with the
respective key (e.g., "centralized", "specialized", "dynamic"); ensure these
attributes are placed on the same container element that currently has onClick
to maintain identical behavior.
In `@website/src/components/supervisor-agent/workflow-code-example.tsx`:
- Around line 946-949: The module-level creation/appending of the style tag
(styles -> styleTag -> document.head.appendChild) causes duplicate <style>
elements on re-evaluation; move this DOM mutation into a React effect inside the
WorkflowCodeExample component (useEffect) so the style tag is created on mount
and removed in the effect's cleanup (remove the appended styleTag from
document.head), or alternatively assign a stable id to the tag and skip
appending if it already exists; target the module symbols styleTag, styles and
the document.head append/remove logic when making the change.
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 628-647: The JSX is passing many unnecessary (as any) casts into
ArticleCard from the seamlessArticles map — props like publication, date,
readTime, channel, views, and duration are always undefined; remove those
redundant casts or properly type the source array. Fix by updating the
seamlessArticles (or articles) type to include those optional fields if they
should exist, or simply stop passing
publication/date/readTime/channel/views/duration into the ArticleCard in the
map; locate the mapping over seamlessArticles and the ArticleCard usage to apply
the change.
In `@website/src/components/two-blocks/index.tsx`:
- Around line 22-32: Remove the dead commented JSX block containing the
header/description (the commented <div> that includes the <h2> "Complete AI
Platform" and the two <p> tags) from the Two Blocks component; if you want to
preserve the content for future work, create a tracking issue instead of leaving
the commented-out code in source, otherwise delete the entire commented block to
keep the file clean.
- Around line 133-146: The inline <style> block defining the keyframes/animation
(scrollLeftSmall and .scroll-left-small) in the TwoBlocks component should be
removed and the keyframe + animation moved to a global stylesheet or the
Tailwind config; add the keyframes/animation under your global CSS (or as a
Tailwind animation utility) and keep using the scroll-left-small class on the
element in website/src/components/two-blocks/index.tsx, then delete the <style>
tag so the component only references the class (no inline styles) to avoid SSR
duplication and CSP issues.
In `@website/src/pages/index.tsx`:
- Line 42: The commented-out FeaturedBlog component usage should be either fully
removed or tracked; either delete the commented JSX line and remove the
corresponding import of FeaturedBlog, or if it's intentionally disabled
temporarily, replace the comment with a TODO explaining why and when to
re-enable it (mentioning the FeaturedBlog import and the commented JSX to locate
the code).
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
website/src/components/testimonials/Testimonials.tsx (1)
293-297:⚠️ Potential issue | 🟡 MinorRemove debug
console.logstatements before merging.These three
console.logcalls are development artifacts that should not ship to production. They add noise to the browser console and expose internal data structure details to end users.🧹 Proposed fix
- useEffect(() => { - console.log("Tweet data loaded:", tweetsData); - console.log("Type of tweetsData:", typeof tweetsData); - console.log("Tweet IDs:", Object.keys(tweetsData || {})); - }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/testimonials/Testimonials.tsx` around lines 293 - 297, Remove the three debug console.log statements inside the useEffect in the Testimonials component; locate the useEffect block in Testimonials.tsx (the one that logs "Tweet data loaded:", "Type of tweetsData:" and "Tweet IDs:") and delete those console.log lines so no development logging ships to production.website/src/components/supervisor-agent/index.tsx (2)
278-388:⚠️ Potential issue | 🟠 MajorThree of four interactive cards are not keyboard-accessible
The "Shared Memory System" card correctly declares
role="button",tabIndex={0}, and anonKeyDownhandler, but the other three cards (Centralized Coordination, Specialized Agent Roles, Dynamic Agent Selection) have onlyonClick. Keyboard users cannot Tab to or activate those three cards.Apply the same accessibility attributes uniformly:
♿ Proposed fix — add `role`, `tabIndex`, and `onKeyDown` to the three missing cards
<div className={`h-[130px] p-5 rounded-lg ${ highlightedSection === "centralized" ? "border-1 border-solid border-[`#5c5855`] bg-[`#1a1a1a`]" : "border-solid border-[`#3d3a39`] bg-[`#101010`] hover:bg-[`#1a1a1a`] hover:border-[`#5c5855`]" } flex flex-col cursor-pointer transition-all duration-300`} onMouseEnter={() => handleMouseEnter("centralized")} onMouseLeave={handleMouseLeave} onClick={() => handleClick("centralized")} + onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleClick("centralized"); } }} + role="button" + tabIndex={0} >Apply the same pattern for the "specialized" and "dynamic" cards.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/supervisor-agent/index.tsx` around lines 278 - 388, The first three feature cards (centralized, specialized, and dynamic) are missing keyboard accessibility attributes that are present on the memory card. For each of these three cards, add role="button", tabIndex={0}, and an onKeyDown handler that checks if the pressed key is Enter or Space, then calls the corresponding handleClick function with preventDefault() to prevent default behavior. Apply the exact same pattern from the memory card to the centralized, specialized, and dynamic div elements that contain handleMouseEnter and onClick handlers.
279-388:⚠️ Potential issue | 🟡 Minor
border-1is not a valid Tailwind CSS utility — active-state card borders will not renderTailwind v3's border-width scale is
border-0 | border | border-2 | border-4 | border-8. There is noborder-1; without a custom config entry it is silently discarded by JIT. As a result, noborder-widthis applied to the highlighted cards, making the visual selection state invisible.This pattern is repeated for all four feature cards (active states at lines 281, 308, 335, and 368). Replace
border-1withborderin every occurrence:🐛 Proposed fix (same change applies to all 4 cards)
- ? "border-1 border-solid border-[`#5c5855`] bg-[`#1a1a1a`]" + ? "border border-solid border-[`#5c5855`] bg-[`#1a1a1a`]"Note: the inactive-state string also lacks an explicit border-width class (only
border-solidandborder-[color]are present), so neither state currently renders a visible border. Consider addingborderto the inactive state as well for consistency.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/supervisor-agent/index.tsx` around lines 279 - 388, The feature-card active-state class uses the invalid Tailwind utility "border-1" so highlighted cards show no border; update each feature card's className (the divs controlling "centralized", "specialized", "memory", and "dynamic" states where highlightedSection is compared) to replace "border-1" with the valid "border" and also add "border" to the inactive-state class strings that currently only include "border-solid" and a color (so both active and inactive states explicitly include a border-width).
🧹 Nitpick comments (8)
website/src/components/testimonials/Testimonials.tsx (2)
349-396: Consider typing the mixed content arrays or hoisting them to module scope.
mixedContentandmixedDiscordContentare initialized as untyped[], so TypeScript infersany[]. This suppresses compile-time errors for nonexistent property accesses downstream (e.g.,item.data.discriminatoron line 583). Since all source data is module-level constants, these arrays and their duplicatedseamless*variants could be computed once at module scope, which would also avoid re-allocation every render.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/testimonials/Testimonials.tsx` around lines 349 - 396, mixedContent and mixedDiscordContent are untyped (any[]) and recreated on each render; declare explicit types for their element shapes and change their declarations (mixedContent, mixedDiscordContent, seamlessMixedContent, seamlessMixedDiscordContent, seamlessArticles) to typed arrays (e.g., discriminated unions for { type: "tweet" | "linkedin" | "discord" | "linkedinmsg"; id?; data?; key: string }) then move the construction logic that builds mixedContent/mixedDiscordContent and the duplicated seamless* variants to module scope so they’re computed once at import time instead of per-render; ensure downstream accesses (like item.data.discriminator) use the typed union so the compiler enforces correct property access.
633-647: Removeas anycasts for unused article properties.
publication,date,readTime,channel,views, anddurationdon't exist on any item in thearticlesarray, and ArticleCard doesn't usedate,readTime,views, ordurationat all. Theas anycasts only bypass TypeScript errors for nonexistent properties that resolve toundefinedand serve no functional purpose.Remove all six casts — omit these props entirely since ArticleCard renders nothing for them.
🧹 Proposed fix
<ArticleCard title={article.title} coverImage={article.coverImage} excerpt={article.excerpt} author={article.author} - publication={(article as any).publication} - date={(article as any).date} - readTime={(article as any).readTime} url={article.url} type={article.type} videoId={article.videoId} - channel={(article as any).channel} - views={(article as any).views} - duration={(article as any).duration} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/testimonials/Testimonials.tsx` around lines 633 - 647, ArticleCard is being passed several non-existent/unused props with `as any` casts; remove the six casts and omit the unnecessary props entirely so TypeScript errors aren’t bypassed and unused values aren’t passed. In the JSX instantiation of ArticleCard remove the props publication, date, readTime, channel, views, and duration (they are currently referenced as `(article as any)....`), leaving only the legitimate props (title, coverImage, excerpt, author, url, type, videoId) that ArticleCard actually consumes. Ensure no other code relies on those removed props in this component.website/src/components/rag/index.tsx (1)
40-111: Minor inconsistency: icon container sizing differs from the Workflows component.In this file, icon containers use fixed
w-10 h-10(e.g., Line 45), whileworkflows/index.tsxuses responsivelanding-md:w-8 landing-lg:w-10 landing-md:h-8 landing-lg:h-10. Similarly, flex alignment here isitems-center(Line 44) vsitems-startin Workflows (Line 33). Aligning these would make the design more consistent — or better yet, both would benefit from the sharedFeatureCardcomponent suggested in the Workflows review.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/rag/index.tsx` around lines 40 - 111, The icon container sizing and vertical alignment in the RAG feature cards are inconsistent with Workflows — replace the fixed classes "w-10 h-10" and "items-center" used in the feature blocks (e.g., the div wrapping ServerStackIcon, FunnelIcon, SparklesIcon, AdjustmentsHorizontalIcon) with the responsive classes used in Workflows ("landing-md:w-8 landing-lg:w-10 landing-md:h-8 landing-lg:h-10") and the same alignment ("items-start"), or refactor these cards to use the shared FeatureCard component to ensure consistent sizing and alignment across both components.website/src/components/integrations/index.tsx (1)
55-61: Glow uses#00d992while particles use#22c55e— intentional?The
glowEffectkeyframes (Lines 55–61) use#00d992for the drop-shadow, but the particle circles (Lines 182, 191, 200) use#22c55e. If these are meant to be the same emerald accent, unify them. If the difference is deliberate (e.g., brighter glow vs. solid particle), no action needed — just flagging for awareness.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/integrations/index.tsx` around lines 55 - 61, The glowEffect keyframes currently use `#00d992` while the particle circle fills/strokes use `#22c55e`; decide which emerald accent to use and make them consistent: update the glowEffect keyframes (symbol: glowEffect) to use `#22c55e` to match the particle circles (referenced where the particle circle elements are defined) or alternatively change the particle circle color values to `#00d992` if that is the intended canonical accent; ensure the chosen hex is applied in both places so the glow color and particle color match.website/src/components/agents-detail/index.tsx (2)
21-41: Hardcoded hex colors repeated across every component in this PR.Colors like
#101010,#b8b3b0,#3d3a39,#5c5855,#1a1a1a, and#8a8380appear verbatim in workflows, integrations, rag, and agents-detail. If the theme ever changes again, every file must be hand-edited. Consider defining these as Tailwind theme tokens (e.g.,bg-landing-surface,text-landing-muted,border-landing) so a single config change propagates everywhere.This is a cross-cutting observation applicable to all files in this PR, noted here once.
56-61: Remove redundantstyle={{ borderWidth: "1px" }}— Tailwind'sborderclass already provides this.Tailwind's
borderutility setsborder-width: 1pxby default. The inline style is unnecessary and should be removed from all four cards (lines 56, 80, 105, 130).♻️ Proposed fix (repeat for all four cards)
<div - style={{ borderWidth: "1px" }} className={`landing-xs:p-3 rounded-lg border border-solid ${🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/agents-detail/index.tsx` around lines 56 - 61, Remove the redundant inline style setting borderWidth from the card JSX elements; locate the JSX elements that include style={{ borderWidth: "1px" }} (e.g., the card whose className conditionally checks selectedFeature === "tools") and delete that style prop for all four card occurrences so the Tailwind border utility (class "border") controls border width instead.website/src/components/workflows/index.tsx (1)
29-100: Consider extracting a reusableFeatureCardcomponent to reduce duplication.All four feature cards (Lines 31–46, 49–63, 67–81, 85–99) share identical markup and styling — only the icon, title, and description differ. This same card pattern is also duplicated in
rag/index.tsxandagents-detail/index.tsx. Extracting a shared component would make future theme changes a single-point edit instead of updating dozens of places.♻️ Sketch
// Reusable across workflows, rag, agents-detail, etc. function FeatureCard({ icon: Icon, title, description }: { icon: React.ComponentType<{ className?: string }>; title: string; description: string; }) { return ( <div className="relative h-full"> <div className="p-4 rounded-lg border border-solid border-[`#3d3a39`] bg-[`#101010`] hover:border-[`#5c5855`] hover:bg-[`#1a1a1a`] transition-all duration-300 h-full flex flex-col"> <div className="flex items-start gap-3 mb-3"> <div className="bg-[`#b8b3b0`]/10 landing-xs:hidden landing-md:flex landing-md:w-8 landing-lg:w-10 landing-md:h-8 landing-lg:h-10 rounded-md items-center justify-center shrink-0"> <Icon className="landing-md:w-4 landing-lg:w-5 landing-md:h-4 landing-lg:h-5 text-[`#b8b3b0`]" /> </div> <div className="landing-xs:text-sm landing-lg:text-base font-semibold text-white"> {title} </div> </div> <div className="text-[`#8a8380`] text-xs leading-relaxed">{description}</div> </div> </div> ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/workflows/index.tsx` around lines 29 - 100, Extract the repeated card markup into a reusable FeatureCard React component (e.g., function FeatureCard({ icon: Icon, title, description }) ) and replace each duplicated block in workflows/index.tsx with <FeatureCard icon={Squares2X2Icon} title="..." description="..."/>; ensure the component preserves the exact className structure for the outer wrapper, icon container, title and description so styling/behavior remain unchanged. After creating FeatureCard, update the other duplicates in rag/index.tsx and agents-detail/index.tsx to use the same component to centralize styling and future edits. Make sure props accept a React component for the icon (with className passthrough) and plain strings for title/description.website/src/components/supervisor-agent/index.tsx (1)
38-44: Redundant responsive prefixes with identical valuesBoth pairs below resolve to the same CSS regardless of viewport size; the prefixed variants add noise without benefit:
- Line 38:
landing-xs:py-10 landing-md:py-10→py-10- Line 44:
landing-xs:font-normal landing-md:font-normal→font-normal♻️ Proposed cleanup
- <div className="w-full relative z-10 bg-[`#101010`] landing-xs:py-10 landing-md:py-10"> + <div className="w-full relative z-10 bg-[`#101010`] py-10">- <p className="mt-1 landing-xs:text-2xl landing-md:text-4xl landing-xs:mb-2 landing-md:mb-4 landing-xs:font-normal landing-md:font-normal text-white sm:text-5xl sm:tracking-tight"> + <p className="mt-1 landing-xs:text-2xl landing-md:text-4xl landing-xs:mb-2 landing-md:mb-4 font-normal text-white sm:text-5xl sm:tracking-tight">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/supervisor-agent/index.tsx` around lines 38 - 44, Remove the redundant identical responsive prefixes in the JSX className strings: replace "landing-xs:py-10 landing-md:py-10" on the outer div with a single "py-10", and replace "landing-xs:font-normal landing-md:font-normal" on the <p> element with a single "font-normal"; update the className values in the supervisor-agent component (the div containing the bg-[`#101010`] and the paragraph with text-white sm:text-5xl) so they use the simplified classes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/components/agents-detail/index.tsx`:
- Around line 26-35: Replace the decorative label and section title elements so
the actual title uses the heading element: change the current <h2
className="...">Enterprise-level AI agents</h2> into a non-heading decorative
element (e.g., <span> or <div>) with the same classes for the small label, and
change the main title currently rendered as <p className="...">Complete toolkit
for enterprise level AI agents</p> into an <h2> with that <p>'s classes; keep
styling classes intact and add aria-hidden or role="presentation" to the
decorative label if appropriate to preserve accessibility semantics.
In `@website/src/components/integrations/index.tsx`:
- Around line 417-423: Replace the small label heading with a non-heading
element: change the first <h2> (the one with text "INTEGRATIONS" and classes
including "landing-xs:text-sm ... uppercase flex items-center gap-2" and the
inner colored span) to a <p> or <span> so only the main title (the second <h2>
with "Easily connect with 40+ apps in no time") remains as an <h2>; preserve all
existing classes and the colored indicator span when converting the element.
- Around line 464-477: The tooltip is currently anchored with top-0 and overlaps
the centered logo; update the tooltip positioning for the top-row and bottom-row
items (see duplicatedTopLogos rendering and the analogous bottom row render) to
position the tooltip above the icon by replacing top-0 with bottom-full, add a
small gap like mb-2 (or -mb-2 if needed for spacing), and center it horizontally
using left-1/2 plus transform -translate-x-1/2 (preserve existing z-20,
whitespace-nowrap, shadow, and border classes); keep the hover opacity behavior
and transitions intact and apply the same change to the bottom-row tooltip
rendering as well.
In `@website/src/components/supervisor-agent/index.tsx`:
- Line 67: In the SupervisorAgent component's code-panel wrapper (the div in
website/src/components/supervisor-agent/index.tsx with the long className
string), remove the conflicting utilities so Tailwind behavior is deterministic:
delete "border-t" and "rounded-none" (keeping "border-t-0" and "rounded-lg") to
ensure no top border and a large corner radius as intended.
- Line 47: Update the paragraph element in the SupervisorAgent component that
currently has className "landing-md:text-xl landing-xs:text-md text-[`#8a8380`]
mb-0" to replace the invalid Tailwind utility text-md with text-base so the
className becomes "landing-md:text-xl landing-xs:text-base text-[`#8a8380`]
mb-0"; this ensures the font-size utility is valid and not silently discarded.
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 487-489: The paragraph in Testimonials.tsx uses conflicting
Tailwind classes (`landing-xs:mb-2 !mb-0 landing-md:mb-4`) so the `!mb-0`
(important) overrides the responsive margins; remove the `!mb-0` from the class
list on the <p> (the "What are they saying?" element) so the `landing-xs:mb-2`
and `landing-md:mb-4` variants take effect, or alternatively remove the
responsive `landing-*-mb-*` classes if the intent is to always have mb-0.
In `@website/src/components/workflows/index.tsx`:
- Around line 10-19: The heading semantics are inverted: the decorative label
"Workflow Chain API" is an <h2> while the meaningful title "Orchestrate your
agents" is a <p>; update the JSX so "Orchestrate your agents" becomes the
semantic heading (e.g., change that <p> to <h2> or appropriate heading element)
and demote the small label "Workflow Chain API" to a non-heading element (e.g.,
<span> or <div> with aria-hidden="true" or role="presentation") while preserving
the existing className styling; locate the two elements by their exact text
content ("Workflow Chain API" and "Orchestrate your agents") in
website/src/components/workflows/index.tsx and swap their tags/roles accordingly
across all similar sections (RAG, Integrations, AgentsDetail).
---
Outside diff comments:
In `@website/src/components/supervisor-agent/index.tsx`:
- Around line 278-388: The first three feature cards (centralized, specialized,
and dynamic) are missing keyboard accessibility attributes that are present on
the memory card. For each of these three cards, add role="button", tabIndex={0},
and an onKeyDown handler that checks if the pressed key is Enter or Space, then
calls the corresponding handleClick function with preventDefault() to prevent
default behavior. Apply the exact same pattern from the memory card to the
centralized, specialized, and dynamic div elements that contain handleMouseEnter
and onClick handlers.
- Around line 279-388: The feature-card active-state class uses the invalid
Tailwind utility "border-1" so highlighted cards show no border; update each
feature card's className (the divs controlling "centralized", "specialized",
"memory", and "dynamic" states where highlightedSection is compared) to replace
"border-1" with the valid "border" and also add "border" to the inactive-state
class strings that currently only include "border-solid" and a color (so both
active and inactive states explicitly include a border-width).
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 293-297: Remove the three debug console.log statements inside the
useEffect in the Testimonials component; locate the useEffect block in
Testimonials.tsx (the one that logs "Tweet data loaded:", "Type of tweetsData:"
and "Tweet IDs:") and delete those console.log lines so no development logging
ships to production.
---
Duplicate comments:
In `@website/src/components/rag/index.tsx`:
- Around line 20-26: The section currently uses the small "RAG" label as the
<h2> and the prominent title "Accurate and context-aware responses" as a <p>,
which reverses semantic heading structure; update
website/src/components/rag/index.tsx so the large visible title is the actual
heading (use <h2> for the "Accurate and context-aware responses" element) and
convert the small "RAG" label into a non-heading element (e.g., <span> or
visually styled <div> with appropriate aria-hidden or role) to preserve visual
styling while keeping correct document outline semantics; ensure you update the
JSX for the elements referenced (the current h2 and p) and preserve existing
classes and accessibility attributes.
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 578-596: The map over seamlessMixedDiscordContent is passing
undefined props (discriminator and timestamp) to DiscordMessage and
LinkedInMessage; remove the nonexistent props and only pass fields that actually
exist on each item. Update the JSX inside the map so DiscordMessage receives
only username and message (omit discriminator/timestamp) and LinkedInMessage
receives username, title, message, avatar, and url — if timestamp is present on
LinkedIn items pass it conditionally (or omit entirely if none exist) to avoid
sending undefined props.
---
Nitpick comments:
In `@website/src/components/agents-detail/index.tsx`:
- Around line 56-61: Remove the redundant inline style setting borderWidth from
the card JSX elements; locate the JSX elements that include style={{
borderWidth: "1px" }} (e.g., the card whose className conditionally checks
selectedFeature === "tools") and delete that style prop for all four card
occurrences so the Tailwind border utility (class "border") controls border
width instead.
In `@website/src/components/integrations/index.tsx`:
- Around line 55-61: The glowEffect keyframes currently use `#00d992` while the
particle circle fills/strokes use `#22c55e`; decide which emerald accent to use
and make them consistent: update the glowEffect keyframes (symbol: glowEffect)
to use `#22c55e` to match the particle circles (referenced where the particle
circle elements are defined) or alternatively change the particle circle color
values to `#00d992` if that is the intended canonical accent; ensure the chosen
hex is applied in both places so the glow color and particle color match.
In `@website/src/components/rag/index.tsx`:
- Around line 40-111: The icon container sizing and vertical alignment in the
RAG feature cards are inconsistent with Workflows — replace the fixed classes
"w-10 h-10" and "items-center" used in the feature blocks (e.g., the div
wrapping ServerStackIcon, FunnelIcon, SparklesIcon, AdjustmentsHorizontalIcon)
with the responsive classes used in Workflows ("landing-md:w-8 landing-lg:w-10
landing-md:h-8 landing-lg:h-10") and the same alignment ("items-start"), or
refactor these cards to use the shared FeatureCard component to ensure
consistent sizing and alignment across both components.
In `@website/src/components/supervisor-agent/index.tsx`:
- Around line 38-44: Remove the redundant identical responsive prefixes in the
JSX className strings: replace "landing-xs:py-10 landing-md:py-10" on the outer
div with a single "py-10", and replace "landing-xs:font-normal
landing-md:font-normal" on the <p> element with a single "font-normal"; update
the className values in the supervisor-agent component (the div containing the
bg-[`#101010`] and the paragraph with text-white sm:text-5xl) so they use the
simplified classes.
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 349-396: mixedContent and mixedDiscordContent are untyped (any[])
and recreated on each render; declare explicit types for their element shapes
and change their declarations (mixedContent, mixedDiscordContent,
seamlessMixedContent, seamlessMixedDiscordContent, seamlessArticles) to typed
arrays (e.g., discriminated unions for { type: "tweet" | "linkedin" | "discord"
| "linkedinmsg"; id?; data?; key: string }) then move the construction logic
that builds mixedContent/mixedDiscordContent and the duplicated seamless*
variants to module scope so they’re computed once at import time instead of
per-render; ensure downstream accesses (like item.data.discriminator) use the
typed union so the compiler enforces correct property access.
- Around line 633-647: ArticleCard is being passed several non-existent/unused
props with `as any` casts; remove the six casts and omit the unnecessary props
entirely so TypeScript errors aren’t bypassed and unused values aren’t passed.
In the JSX instantiation of ArticleCard remove the props publication, date,
readTime, channel, views, and duration (they are currently referenced as
`(article as any)....`), leaving only the legitimate props (title, coverImage,
excerpt, author, url, type, videoId) that ArticleCard actually consumes. Ensure
no other code relies on those removed props in this component.
In `@website/src/components/workflows/index.tsx`:
- Around line 29-100: Extract the repeated card markup into a reusable
FeatureCard React component (e.g., function FeatureCard({ icon: Icon, title,
description }) ) and replace each duplicated block in workflows/index.tsx with
<FeatureCard icon={Squares2X2Icon} title="..." description="..."/>; ensure the
component preserves the exact className structure for the outer wrapper, icon
container, title and description so styling/behavior remain unchanged. After
creating FeatureCard, update the other duplicates in rag/index.tsx and
agents-detail/index.tsx to use the same component to centralize styling and
future edits. Make sure props accept a React component for the icon (with
className passthrough) and plain strings for title/description.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (6)
website/src/components/hero/index.tsx (1)
24-100: Pre-existing: no error handling fornavigator.clipboard.writeText.Line 30 calls
navigator.clipboard.writeText()without a try/catch. This can throw if clipboard access is denied (e.g., non-secure contexts, permissions policy). This is pre-existing code, but since the animation sequence depends on it completing, a rejected promise would leaveisTypingstuck astrue.Proposed fix
setIsTyping(true); // Copy to clipboard - await navigator.clipboard.writeText(originalCommand); + try { + await navigator.clipboard.writeText(originalCommand); + } catch { + // Clipboard access denied; continue with animation + }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/hero/index.tsx` around lines 24 - 100, handleCommandClick currently awaits navigator.clipboard.writeText without error handling which can reject and leave isTyping true; wrap the clipboard write in a try/catch around navigator.clipboard.writeText(originalCommand) and on error call setIsTyping(false) and return (optionally log the error), ensuring you also clear any pending timeout in typingTimerRef.current before returning; keep the rest of the typing/animation flow unchanged so the sequence only runs on successful clipboard writes.website/src/components/two-blocks/index.tsx (1)
47-47: Minor: Inconsistent background between VoltAgent and VoltOps cards.The VoltAgent card (Line 47) has no explicit background, while the VoltOps card (Line 116) has
bg-white/5. This creates a subtle visual asymmetry between the two side-by-side cards.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/two-blocks/index.tsx` at line 47, The VoltAgent card's container (the div with className that includes "relative landing-xs:p-4 landing-md:p-6 rounded-lg border border-solid border-white/10 hover:border-[`#00d992`]/30 transition-all duration-300") lacks the explicit background that the VoltOps card uses ("bg-white/5"), causing visual asymmetry; update the VoltAgent card's className to include the same background utility (or alternatively remove "bg-white/5" from the VoltOps container) so both card containers use a consistent background style, ensuring the change is applied to the div wrapping the VoltAgent content in two-blocks/index.tsx.website/src/components/agents-detail/index.tsx (1)
56-57: RedundantborderWidth: "1px"inline style.The
borderTailwind utility already setsborder-width: 1px. The inlinestyle={{ borderWidth: "1px" }}is redundant. This appears on all four feature cards (Lines 56, 80, 105, 130).Proposed fix (example for one card)
<div - style={{ borderWidth: "1px" }} className={`landing-xs:p-3 rounded-lg border border-solid ${🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/agents-detail/index.tsx` around lines 56 - 57, Remove the redundant inline style style={{ borderWidth: "1px" }} from the feature card JSX that already uses the Tailwind classes `landing-xs:p-3 rounded-lg border border-solid`; update all four occurrences in the agents-detail component so the cards rely on the `border` utility instead of the inline style (look for the JSX elements containing that className to locate each card).website/src/components/testimonials/Testimonials.tsx (2)
344-391: Mixed-content arrays reconstructed on every render — consideruseMemoor module-level constants.All five arrays (
mixedContent,mixedDiscordContent,seamlessMixedContent,seamlessMixedDiscordContent,seamlessArticles) derive solely from module-level constants. They are rebuilt on every state change (isTweetsRowPaused,isDiscordRowPaused,isArticlesRowPaused,isVisible,lockedHeight). Since the source data never changes, these can be hoisted to module scope entirely, eliminating the per-render allocation.♻️ Proposed refactor — hoist to module scope
+// --- Computed once at module level --- +const _mixedContent: Array<{type:"tweet"|"linkedin"; id?: string; data?: typeof linkedInPosts[0]; key: string}> = []; +const _maxLength = Math.max(testimonialTweetIds.length, linkedInPosts.length); +for (let i = 0; i < _maxLength; i++) { + if (i < testimonialTweetIds.length) + _mixedContent.push({ type: "tweet", id: testimonialTweetIds[i], key: `tweet-${testimonialTweetIds[i]}` }); + if (i < linkedInPosts.length) + _mixedContent.push({ type: "linkedin", data: linkedInPosts[i], key: `linkedin-${linkedInPosts[i].id}` }); +} +const _mixedDiscordContent = /* same pattern */[]; +const seamlessMixedContent = [..._mixedContent, ..._mixedContent]; +const seamlessMixedDiscordContent = [..._mixedDiscordContent, ..._mixedDiscordContent]; +const seamlessArticles = [...articles, ...articles]; export function Testimonials() { - // Create mixed content for seamless scrolling - const mixedContent = []; - ... - const seamlessMixedContent = [...mixedContent, ...mixedContent]; - const seamlessMixedDiscordContent = [...mixedDiscordContent, ...mixedDiscordContent]; - const seamlessArticles = [...articles, ...articles];🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/testimonials/Testimonials.tsx` around lines 344 - 391, The mixed-content arrays (mixedContent, mixedDiscordContent, seamlessMixedContent, seamlessMixedDiscordContent, seamlessArticles) are being reconstructed on every render even though their inputs (testimonialTweetIds, linkedInPosts, discordMessages, linkedInMessages, articles) are static; either hoist their construction to module scope or memoize them with useMemo(() => { ... }, []) so they are built once—locate the loops that populate mixedContent and mixedDiscordContent and the lines that create the doubled arrays (seamlessMixedContent, seamlessMixedDiscordContent, seamlessArticles) and move that logic out of the component or wrap it in useMemo with an empty dependency array.
623-643: Remove redundantas anycasts and dead props onArticleCard.
date,readTime,views, anddurationare not part ofArticleCard's prop interface (the component only acceptstitle,coverImage,author,publication,url,type,videoId,channel). These props are silently dropped and theas anycasts exist purely to suppress TypeScript errors.publicationandchannelare valid props but are alwaysundefinedbecause no entry in thearticlesarray defines them — omitting them letsArticleCardfall through to its own defaults.♻️ Proposed cleanup
- <ArticleCard - title={article.title} - coverImage={article.coverImage} - excerpt={article.excerpt} - author={article.author} - publication={(article as any).publication} - date={(article as any).date} - readTime={(article as any).readTime} - url={article.url} - type={article.type} - videoId={article.videoId} - channel={(article as any).channel} - views={(article as any).views} - duration={(article as any).duration} - /> + <ArticleCard + title={article.title} + coverImage={article.coverImage} + author={article.author} + url={article.url} + type={article.type} + videoId={article.videoId} + />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/testimonials/Testimonials.tsx` around lines 623 - 643, The map over seamlessArticles is passing dead props and using unnecessary as any casts to silence TS; update the JSX inside the seamlessArticles.map to only pass ArticleCard's actual props (title, coverImage, author, publication, url, type, videoId, channel) and remove the casts and the non‑existent props (date, readTime, views, duration) so TypeScript types are preserved and ArticleCard's own defaults apply for omitted fields; keep the existing key logic but trim the prop list to match the ArticleCard prop interface.website/src/pages/index.tsx (1)
63-77: Remove the unused@keyframes gradientShiftanimation.The
@keyframes gradientShiftdefined at lines 63-77 is not referenced anywhere in this file. No elements use this animation, and it was almost certainly part of the removed decorative elements. This should be cleaned up to keep the injected style block minimal.♻️ Proposed cleanup
`}</style> </main> - `@keyframes` gradientShift { - 0%, - 100% { - transform: translate(0, 0) rotate(0deg); - } - 25% { - transform: translate(-5%, 5%) rotate(1deg); - } - 50% { - transform: translate(5%, -5%) rotate(-1deg); - } - 75% { - transform: translate(-3%, -3%) rotate(0.5deg); - } - }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/pages/index.tsx` around lines 63 - 77, Remove the unused CSS animation declaration `@keyframes` gradientShift from the injected style block in index.tsx: locate the `@keyframes` gradientShift { ... } block and delete it (and any stray commas/whitespace left behind) after confirming there are no references to "gradientShift" in the file; if a search finds any references, either remove those references or replace them with the intended active animation name.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/components/hero/index.tsx`:
- Around line 118-156: The heading hierarchy is inverted because the JSX renders
an <h2> (the "The end-to-end" Link block using setShowHeart/showHeart and
BoltIcon) before the <h1> ("AI Agent Engineering" with LineShadowText); change
the outer <h2> element to a non-heading semantic element (e.g., <span> or <p>)
while preserving the Link, onMouseEnter/onMouseLeave handlers, classes and the
BoltIcon markup and classes, so the visible text and interaction remain
identical but only the <h1> remains as the primary heading to restore correct
semantics for assistive tech and SEO.
- Around line 113-115: Update the Tailwind breakpoint prefixes in the Hero
component's JSX className strings: replace the undefined "xs:" prefix with the
project's "landing-xs:" prefix (e.g., change the class on the outer div that
currently contains "xs:px-4" and the inner grid div that currently contains
"xs:grid-cols-1" to use "landing-xs:px-4" and "landing-xs:grid-cols-1"
respectively) so the utilities are recognized and not stripped in production.
In `@website/src/components/integrations/index.tsx`:
- Line 467: The logo container class strings in integrations index (the
className values containing "group relative flex-shrink-0 bg-[`#101010`] w-12 h-12
... border-solid border-[`#3d3a39`]") set border style and color but not width, so
add a Tailwind border width utility (e.g., "border" or "border-[1px]") to those
className attributes for both occurrences (the one shown and the similar one
further down) so the borders render.
---
Duplicate comments:
In `@website/src/components/integrations/index.tsx`:
- Around line 474-476: The tooltip is currently anchored with "top-0" and
overlaps the icon; update the tooltip's className (the div rendering
item.tooltip) to position it above the icon by replacing "top-0" with
"bottom-full mb-2" and add horizontal centering like "left-1/2 transform
-translate-x-1/2" while keeping "absolute" and the other styling classes; apply
the same change to the duplicate tooltip instance later in the file as well.
In `@website/src/components/supervisor-agent/mobile-code-block.tsx`:
- Line 91: The div with className "w-full border-solid border-white/10
rounded-md" is missing a Tailwind border width utility so the border won't
render; update the JSX in mobile-code-block.tsx (the element with className
containing border-solid and border-white/10) to include a border width utility
such as "border" or "border-[1px]" alongside the existing classes (e.g., "border
border-solid border-white/10 rounded-md") so the border becomes visible.
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 482-484: In Testimonials.tsx update the H2 className to stop
forcing margin-bottom to 0: remove the "!mb-0" utility (and the redundant
trailing "mb-0") from the className on the <h2> so the responsive variants
"landing-xs:mb-2" and "landing-md:mb-4" can take effect; keep the rest of the
classes intact (e.g., landing-xs:text-2xl, landing-md:text-4xl, text-white,
sm:text-5xl).
- Around line 573-591: The mapped rendering for seamlessMixedDiscordContent is
passing undefined props (discriminator and timestamp) into DiscordMessage and
LinkedInMessage; update the map so each branch only sends the props that
actually exist for that message type (e.g., for item.type === "discord" pass
username and message and only pass discriminator/timestamp if present on
item.data, and for the LinkedIn branch pass username, title, message, avatar,
url and omit timestamp unless defined), or normalize item.data beforehand into a
typed shape before rendering; target the map callback that renders
DiscordMessage and LinkedInMessage and remove/guard any unconditional forwarding
of discriminator and timestamp.
---
Nitpick comments:
In `@website/src/components/agents-detail/index.tsx`:
- Around line 56-57: Remove the redundant inline style style={{ borderWidth:
"1px" }} from the feature card JSX that already uses the Tailwind classes
`landing-xs:p-3 rounded-lg border border-solid`; update all four occurrences in
the agents-detail component so the cards rely on the `border` utility instead of
the inline style (look for the JSX elements containing that className to locate
each card).
In `@website/src/components/hero/index.tsx`:
- Around line 24-100: handleCommandClick currently awaits
navigator.clipboard.writeText without error handling which can reject and leave
isTyping true; wrap the clipboard write in a try/catch around
navigator.clipboard.writeText(originalCommand) and on error call
setIsTyping(false) and return (optionally log the error), ensuring you also
clear any pending timeout in typingTimerRef.current before returning; keep the
rest of the typing/animation flow unchanged so the sequence only runs on
successful clipboard writes.
In `@website/src/components/testimonials/Testimonials.tsx`:
- Around line 344-391: The mixed-content arrays (mixedContent,
mixedDiscordContent, seamlessMixedContent, seamlessMixedDiscordContent,
seamlessArticles) are being reconstructed on every render even though their
inputs (testimonialTweetIds, linkedInPosts, discordMessages, linkedInMessages,
articles) are static; either hoist their construction to module scope or memoize
them with useMemo(() => { ... }, []) so they are built once—locate the loops
that populate mixedContent and mixedDiscordContent and the lines that create the
doubled arrays (seamlessMixedContent, seamlessMixedDiscordContent,
seamlessArticles) and move that logic out of the component or wrap it in useMemo
with an empty dependency array.
- Around line 623-643: The map over seamlessArticles is passing dead props and
using unnecessary as any casts to silence TS; update the JSX inside the
seamlessArticles.map to only pass ArticleCard's actual props (title, coverImage,
author, publication, url, type, videoId, channel) and remove the casts and the
non‑existent props (date, readTime, views, duration) so TypeScript types are
preserved and ArticleCard's own defaults apply for omitted fields; keep the
existing key logic but trim the prop list to match the ArticleCard prop
interface.
In `@website/src/components/two-blocks/index.tsx`:
- Line 47: The VoltAgent card's container (the div with className that includes
"relative landing-xs:p-4 landing-md:p-6 rounded-lg border border-solid
border-white/10 hover:border-[`#00d992`]/30 transition-all duration-300") lacks
the explicit background that the VoltOps card uses ("bg-white/5"), causing
visual asymmetry; update the VoltAgent card's className to include the same
background utility (or alternatively remove "bg-white/5" from the VoltOps
container) so both card containers use a consistent background style, ensuring
the change is applied to the div wrapping the VoltAgent content in
two-blocks/index.tsx.
In `@website/src/pages/index.tsx`:
- Around line 63-77: Remove the unused CSS animation declaration `@keyframes`
gradientShift from the injected style block in index.tsx: locate the `@keyframes`
gradientShift { ... } block and delete it (and any stray commas/whitespace left
behind) after confirming there are no references to "gradientShift" in the file;
if a search finds any references, either remove those references or replace them
with the intended active animation name.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
website/src/components/supervisor-agent/index.tsx (1)
279-388:⚠️ Potential issue | 🟡 Minor
border-1is not a valid Tailwind v3 class — active-state card borders won't render.Tailwind v3's border-width scale is
border,border-0,border-2,border-4, andborder-8— there is noborder-1. The active-state strings (lines 281, 308, 335, 368) use"border-1 border-solid border-[#5c5855]", andborder-1will be silently discarded, leaving no border-width. The inactive-state strings (lines 282, 309, 336, 369) lack a border-width utility entirely —"border-solid border-[#3d3a39]"sets only style and color. Tailwind's Preflight resetsborder-widthto0, so both states render invisible borders. Sibling components (rag,workflows) correctly useborder border-solid border-[#3d3a39].Proposed fix (apply the same pattern to all four feature cards)
- ? "border-1 border-solid border-[`#5c5855`] bg-[`#1a1a1a`]" - : "border-solid border-[`#3d3a39`] bg-[`#101010`] hover:bg-[`#1a1a1a`] hover:border-[`#5c5855`]" + ? "border border-solid border-[`#5c5855`] bg-[`#1a1a1a`]" + : "border border-solid border-[`#3d3a39`] bg-[`#101010`] hover:bg-[`#1a1a1a`] hover:border-[`#5c5855`]"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/supervisor-agent/index.tsx` around lines 279 - 388, The active/inactive card classes in supervisor-agent's JSX (look for highlightedSection checks inside the feature card divs and the onMouseEnter/onClick handlers) use the invalid Tailwind class "border-1" and omit a border width for the inactive state; update each feature card's className (for "centralized", "specialized", "memory", "dynamic") to use a valid width utility (e.g., replace "border-1" with "border") and ensure the else branch also includes a border width (e.g., add "border" so it becomes "border border-solid border-[`#3d3a39`] ...") so both active and inactive states render the border consistently.
🧹 Nitpick comments (4)
website/src/components/community-section/index.tsx (2)
224-225: Dead conditional:md:col-span-1on the Discord tile is a no-op.The grid is
md:grid-cols-3, so every child already defaults tomd:col-span-1. The ternary is a leftover from when Discord wasmd:col-span-2and can be removed entirely.🧹 Proposed cleanup
- className={`group relative landing-xs:p-6 landing-md:p-12 z-10 landing-md:border-solid border-white/10 no-underline transition-all flex flex-col items-center animate-fade-in landing-xs:unset landing-md:bg-black/20 rounded-lg hover:border-main-emerald hover:bg-black/40 - ${link.id === "discord" ? "md:col-span-1" : ""}`} + className="group relative landing-xs:p-6 landing-md:p-12 z-10 landing-md:border-solid border-white/10 no-underline transition-all flex flex-col items-center animate-fade-in landing-xs:unset landing-md:bg-black/20 rounded-lg hover:border-main-emerald hover:bg-black/40"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/community-section/index.tsx` around lines 224 - 225, The className contains a dead conditional that appends "md:col-span-1" when link.id === "discord" — remove the ternary expression (the `link.id === "discord" ? "md:col-span-1" : ""` part) from the className in the community-section component so the Discord tile uses the default grid behavior; locate the expression inside the className template where link.id is checked and delete that conditional branch.
200-209: Minor class-string housekeeping in the header block.Three small redundancies in the changed lines:
- Line 200 —
landing-xs:py-10 landing-md:py-10: both breakpoints specify the same value. A plainpy-10(or justlanding-xs:py-10) is sufficient.- Line 206 —
landing-xs:font-normal landing-md:font-normal: again identical values on both variants. A singlefont-normalcovers both.- Lines 202, 209, 216 — stray double spaces inside className strings.
🧹 Suggested cleanup
- <div className="w-full bg-[`#101010`] landing-xs:py-10 landing-md:py-10"> + <div className="w-full bg-[`#101010`] py-10">- <h2 className="mt-1 landing-xs:text-2xl landing-md:text-4xl landing-xs:mb-2 landing-md:mb-4 landing-xs:font-normal landing-md:font-normal text-white sm:text-5xl sm:tracking-tight"> + <h2 className="mt-1 landing-xs:text-2xl landing-md:text-4xl landing-xs:mb-2 landing-md:mb-4 font-normal text-white sm:text-5xl sm:tracking-tight">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/community-section/index.tsx` around lines 200 - 209, In the CommunitySection JSX block, clean up redundant and stray spacing in className strings: replace the duplicate breakpoint padding on the outer div (className containing "landing-xs:py-10 landing-md:py-10") with a single `py-10` (or just `landing-xs:py-10`), remove the duplicated font rules on the h2 (className containing "landing-xs:font-normal landing-md:font-normal") and use a single `font-normal`, and remove any stray double spaces inside className strings on the paragraph elements (e.g., the p elements with extra spaces like "max-w-3xl landing-md:text-xl landing-xs:text-base"). Ensure you only change class strings in the top-level div, the h2 ("Join the movement"), and the adjacent p tags to keep classes consistent and compact.website/src/components/agents-detail/index.tsx (1)
56-57: Redundantstyle={{ borderWidth: "1px" }}alongside theborderTailwind utility.The
borderclass already setsborder-width: 1px. The inline style duplicates this unconditionally for all four feature cards and adds noise for no benefit.♻️ Proposed cleanup (same pattern for all four cards)
- style={{ borderWidth: "1px" }} - className={`landing-xs:p-3 rounded-lg border border-solid ${ + className={`landing-xs:p-3 rounded-lg border border-solid ${Also applies to: 80-81, 105-106, 130-131
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/agents-detail/index.tsx` around lines 56 - 57, Remove the redundant inline style that sets borderWidth on the feature card JSX elements — delete style={{ borderWidth: "1px" }} wherever it appears next to the className `landing-xs:p-3 rounded-lg border border-solid` (and the other identical card usages) in the AgentsDetail component so the Tailwind `border` utility is the sole source of border width.website/src/components/integrations/index.tsx (1)
182-201: Particle fill#22c55eis inconsistent with the emerald accent#00d992.The bolt fill (Line 170) and
glowEffectkeyframes (Lines 55–62) were updated to#00d992, but the three particle circles (Lines 182, 191, 200) still use#22c55e(Tailwindgreen-500). The two colours are visually distinct.🎨 Proposed alignment
- <circle cx="40" cy="40" r="2" fill="#22c55e" /> + <circle cx="40" cy="40" r="2" fill="#00d992" />Apply to all three
<g>groups (Lines 182, 191, 200).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/components/integrations/index.tsx` around lines 182 - 201, Update the three particle circles that still use fill="#22c55e": locate the three <g> groups with animation names "particleRotate1"/"particleRotate2"/"particleRotate3" (the groups containing two <circle> elements each) and change the larger particle circle elements (the ones with r="2" and currently fill="#22c55e") to use fill="#00d992" so they match the bolt and glowEffect color.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/components/hero/index.tsx`:
- Around line 210-213: Replace the standalone decorative small-label heading in
the Hero component so it matches the PR-wide pattern: change the <h2> element
used for the "The Platform" label to a <p> element (keeping the same className
and inner span) in website/src/components/hero/index.tsx so the small uppercase
decorative label uses <p> while the semantic <h2> headings remain reserved for
main titles.
---
Outside diff comments:
In `@website/src/components/supervisor-agent/index.tsx`:
- Around line 279-388: The active/inactive card classes in supervisor-agent's
JSX (look for highlightedSection checks inside the feature card divs and the
onMouseEnter/onClick handlers) use the invalid Tailwind class "border-1" and
omit a border width for the inactive state; update each feature card's className
(for "centralized", "specialized", "memory", "dynamic") to use a valid width
utility (e.g., replace "border-1" with "border") and ensure the else branch also
includes a border width (e.g., add "border" so it becomes "border border-solid
border-[`#3d3a39`] ...") so both active and inactive states render the border
consistently.
---
Duplicate comments:
In `@website/src/components/hero/index.tsx`:
- Around line 118-142: The heading hierarchy is inverted because the block using
<h2> (the "The end-to-end" Link) precedes the page's <h1>; change that <h2> in
the Hero component to a non-heading element (e.g., <p> or <span>) so it no
longer disrupts the document outline, keeping the same className and event
handlers (setShowHeart, showHeart, BoltIcon) and preserving visual styles and
animations; ensure any styling or aria attributes remain intact so the element
still looks/behaves the same but is not an <h2>.
- Line 113: The classes using the non-existent Tailwind breakpoint prefix `xs:`
(e.g., `xs:px-4` and `xs:grid-cols-1`) should be changed to the project's
configured prefix `landing-xs:` so they aren't removed in production; edit the
className on the outer div in website/src/components/hero/index.tsx (and the
nearby grid/column class around line 115) replacing `xs:` occurrences with
`landing-xs:` to restore the intended 360px breakpoint padding and grid
behavior.
In `@website/src/components/integrations/index.tsx`:
- Line 474: The tooltip div currently uses the class fragment "top-0" which
anchors it to the container top and overlaps the centered logo; update both
tooltip divs (the elements with className starting "absolute opacity-0
group-hover:opacity-100 ..." in integrations/index.tsx) by replacing "top-0"
with "bottom-full mb-2 left-1/2 -translate-x-1/2" so the tooltip floats centered
above the icon (apply this change to both occurrences flagged in the review).
- Line 467: The logo container className sets border style and color but omits
border width, so the border remains invisible due to Tailwind Preflight; update
the two logo container className occurrences in
website/src/components/integrations/index.tsx (the elements using "border-solid
border-[`#3d3a39`]") to include an explicit width utility such as "border" or
"border-[1px]" (and keep the existing "border-solid" and "border-[`#3d3a39`]") so
the border becomes visible on both instances.
---
Nitpick comments:
In `@website/src/components/agents-detail/index.tsx`:
- Around line 56-57: Remove the redundant inline style that sets borderWidth on
the feature card JSX elements — delete style={{ borderWidth: "1px" }} wherever
it appears next to the className `landing-xs:p-3 rounded-lg border border-solid`
(and the other identical card usages) in the AgentsDetail component so the
Tailwind `border` utility is the sole source of border width.
In `@website/src/components/community-section/index.tsx`:
- Around line 224-225: The className contains a dead conditional that appends
"md:col-span-1" when link.id === "discord" — remove the ternary expression (the
`link.id === "discord" ? "md:col-span-1" : ""` part) from the className in the
community-section component so the Discord tile uses the default grid behavior;
locate the expression inside the className template where link.id is checked and
delete that conditional branch.
- Around line 200-209: In the CommunitySection JSX block, clean up redundant and
stray spacing in className strings: replace the duplicate breakpoint padding on
the outer div (className containing "landing-xs:py-10 landing-md:py-10") with a
single `py-10` (or just `landing-xs:py-10`), remove the duplicated font rules on
the h2 (className containing "landing-xs:font-normal landing-md:font-normal")
and use a single `font-normal`, and remove any stray double spaces inside
className strings on the paragraph elements (e.g., the p elements with extra
spaces like "max-w-3xl landing-md:text-xl landing-xs:text-base"). Ensure you
only change class strings in the top-level div, the h2 ("Join the movement"),
and the adjacent p tags to keep classes consistent and compact.
In `@website/src/components/integrations/index.tsx`:
- Around line 182-201: Update the three particle circles that still use
fill="#22c55e": locate the three <g> groups with animation names
"particleRotate1"/"particleRotate2"/"particleRotate3" (the groups containing two
<circle> elements each) and change the larger particle circle elements (the ones
with r="2" and currently fill="#22c55e") to use fill="#00d992" so they match the
bolt and glowEffect color.
Comment on lines
+210
to
+213
| <h2 className="landing-xs:text-sm landing-md:text-xl landing-xs:mb-2 landing-md:mb-12 font-semibold text-[#b8b3b0] tracking-wide uppercase flex items-center justify-center gap-2"> | ||
| <span className="w-2 h-2 rounded-full bg-main-emerald inline-block" /> | ||
| The Platform | ||
| </h2> |
Contributor
There was a problem hiding this comment.
<h2> for the small "The Platform" label is inconsistent with the PR-wide <p>-label pattern.
Every other section header updated in this PR (RAG, INTEGRATIONS, Workflow Chain API, Enterprise-level AI agents, Intelligent Coordination) uses <p> for the small uppercase decorative label and <h2> for the main title. Here the label is the <h2> with no subsequent heading — the styling is identical to those <p> labels. If this section intentionally has no large title, the label should be <p> (with the section's semantic heading being implicit or carried by surrounding context).
🐛 Proposed fix
- <h2 className="landing-xs:text-sm landing-md:text-xl landing-xs:mb-2 landing-md:mb-12 font-semibold text-[`#b8b3b0`] tracking-wide uppercase flex items-center justify-center gap-2">
+ <p className="landing-xs:text-sm landing-md:text-xl landing-xs:mb-2 landing-md:mb-12 font-semibold text-[`#b8b3b0`] tracking-wide uppercase flex items-center justify-center gap-2">
<span className="w-2 h-2 rounded-full bg-main-emerald inline-block" />
The Platform
- </h2>
+ </p>📝 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
| <h2 className="landing-xs:text-sm landing-md:text-xl landing-xs:mb-2 landing-md:mb-12 font-semibold text-[#b8b3b0] tracking-wide uppercase flex items-center justify-center gap-2"> | |
| <span className="w-2 h-2 rounded-full bg-main-emerald inline-block" /> | |
| The Platform | |
| </h2> | |
| <p className="landing-xs:text-sm landing-md:text-xl landing-xs:mb-2 landing-md:mb-12 font-semibold text-[`#b8b3b0`] tracking-wide uppercase flex items-center justify-center gap-2"> | |
| <span className="w-2 h-2 rounded-full bg-main-emerald inline-block" /> | |
| The Platform | |
| </p> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@website/src/components/hero/index.tsx` around lines 210 - 213, Replace the
standalone decorative small-label heading in the Hero component so it matches
the PR-wide pattern: change the <h2> element used for the "The Platform" label
to a <p> element (keeping the same className and inner span) in
website/src/components/hero/index.tsx so the small uppercase decorative label
uses <p> while the semantic <h2> headings remain reserved for main titles.
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.
PR Checklist
Please check if your PR fulfills the following requirements:
Bugs / Features
What is the current behavior?
What is the new behavior?
fixes (issue)
Notes for reviewers
Summary by cubic
Updated the landing UI with a darker theme, lighter typography, and consistent styling across the homepage. Integrated FeatureShowcase into the Hero, refined headers and animations, fixed layering, and cleaned up background effects.
Refactors
Bug Fixes
Written for commit d478104. Summary will update on new commits.
Summary by CodeRabbit
Style
New Features