Polish Agent Orchestrator landing page#2260
Conversation
|
React Doctor found 41 issues in 11 files · 41 warnings · score 54 / 100 (Critical) · vs 41 warnings
|
codebanditssss
force-pushed
the
landing-page-close-to-final
branch
from
785500f to
7057753
Compare
* feat(landing): replace features section with GSAP scroll-driven showcase Add LandingFeaturesScroll, a pinned scroll section that walks through four product pillars with interactive mockups: agent harness, worktree isolation, review routing, and the local daemon. On desktop, the mockup starts centered and shifts right as copy fades in, then snaps through each feature with crossfade transitions. Mobile falls back to a stacked layout with scaled mockups. Swap LandingFeatures for LandingFeaturesScroll on the landing page and add gsap as a dependency for ScrollTrigger animations. * fix(landing): polish spacing and accent styling across sections Tighten vertical rhythm on the landing page and align a hero CTA with the theme accent color. - Increase agents bar bottom padding and drop the trailing period in its subtitle - changed bg color for the hero mockup "Spawn Orchestrator" button - Add bottom padding to the social proof description
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| style={{ colorScheme: "dark" }} | ||
| > | ||
| <head> | ||
| <script dangerouslySetInnerHTML={{ __html: themeScript }} /> |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-native-script (warning)
Plain <script> has no Next.js loading strategy, so it can block rendering.
Fix → Use next/script with strategy="afterInteractive" or "lazyOnload" so third-party scripts do not block rendering.
| ]; | ||
|
|
||
| export function LandingAgentsBar() { | ||
| const marqueeAgents = [...agents, ...agents]; |
There was a problem hiding this comment.
React Doctor · react-doctor/prefer-module-scope-static-value (warning)
marqueeAgents inside LandingAgentsBar uses no local state but is rebuilt every render, so it looks new each time & breaks memoized children. Move it to the top of the file, outside the component.
Fix → Move the value above the component, at the top of the file. It doesn't use local state, so rebuilding it each update is wasted and makes it look new every time.
| className="agent-logo-pill group flex h-14 shrink-0 items-center gap-3 px-4" | ||
| > | ||
| <div className="agent-logo-pill-icon"> | ||
| <img |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images.
Fix → Use next/image so users get optimized formats, responsive srcsets, and lazy loading instead of oversized image downloads.
| Star on GitHub · {formatCompactNumber(stars)} | ||
| <ArrowRightIcon className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /> | ||
| </a> | ||
| <a |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-a-element (warning)
Plain reloads the whole page for internal links, so Next.js loses client-side navigation and prefetching.
Fix → import Link from 'next/link' for client-side navigation, prefetching, and preserved scroll position
| <div className="relative min-h-[460px] w-[44%]"> | ||
| {panels.map((panel, i) => ( | ||
| <div | ||
| key={i} |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "i".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
| })} | ||
| </div> | ||
| <div className="mx-1 hidden h-4 w-px bg-[color:var(--border)] lg:block" /> | ||
| <a |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-a-element (warning)
Plain reloads the whole page for internal links, so Next.js loses client-side navigation and prefetching.
Fix → import Link from 'next/link' for client-side navigation, prefetching, and preserved scroll position
|
|
||
| {open && ( | ||
| <div className="absolute inset-x-0 top-full mt-4 flex flex-col gap-1 rounded-2xl border border-[color:var(--border)] bg-[color:var(--bg)]/95 p-4 mx-4 backdrop-blur-xl shadow-2xl md:hidden"> | ||
| <a |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-a-element (warning)
Plain reloads the whole page for internal links, so Next.js loses client-side navigation and prefetching.
Fix → import Link from 'next/link' for client-side navigation, prefetching, and preserved scroll position
| } | ||
|
|
||
| return ( | ||
| <img |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images.
Fix → Use next/image so users get optimized formats, responsive srcsets, and lazy loading instead of oversized image downloads.
| className="relative aspect-video overflow-hidden rounded-md border border-[color:var(--border-strong)] bg-black" | ||
| > | ||
| {muxPlaybackId && isPlaying ? ( | ||
| <iframe |
There was a problem hiding this comment.
React Doctor · react-doctor/iframe-missing-sandbox (warning)
An <iframe> with no sandbox is a security hole: the embedded page gets full access to your site.
Fix → Add sandbox="" or a curated value so embedded pages cannot get full access to your site by default.
| className="group absolute inset-0 cursor-pointer overflow-hidden text-left" | ||
| aria-label={`Play ${videoTitle}`} | ||
| > | ||
| <img |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images.
Fix → Use next/image so users get optimized formats, responsive srcsets, and lazy loading instead of oversized image downloads.
3 participants
Preview
Validation