[codex] Update marketing pages and docs navigation#14
Conversation
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ 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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces several new pages, including About, Careers, Reflex, and Messaging, alongside a new Agents documentation section. It also refactors the home page, updates the SiteFooter to use a dynamic configuration array, and adds a new DocsProductSwitcher dropdown to the documentation navigation. The review feedback highlights opportunities to improve code quality and user experience: consolidating duplicate JSX variables in the About page, replacing a native <img> element with Next.js's <Image> component for better optimization, and programmatically closing the <details> dropdown in the new product switcher upon navigation.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| function DocsProductSwitcher({ activeId }: { activeId: string | null }) { | ||
| const activeProduct = | ||
| docsProductOptions.find((option) => option.id === activeId) ?? docsProductOptions[0]; | ||
| const ActiveIcon = activeProduct.Icon; | ||
|
|
||
| return ( | ||
| <div className={styles.productHeader}> | ||
| <details className={styles.productSwitcher}> | ||
| <summary className={styles.productSwitcherSummary}> | ||
| <span className={styles.productSwitcherCurrent}> | ||
| <ActiveIcon className={styles.productHeaderIcon} aria-hidden="true" /> | ||
| <span className={styles.productSwitcherText}> | ||
| <span className={styles.productSwitcherLabel}>{activeProduct.label}</span> | ||
| <span className={styles.productHeaderTagline}>{activeProduct.tagline}</span> | ||
| </span> | ||
| </span> | ||
| <span className={styles.productSwitcherMeta}> | ||
| {activeProduct.version && ( | ||
| <span className={styles.productHeaderVersion}>v{activeProduct.version}</span> | ||
| )} | ||
| <ChevronDown className={styles.productSwitcherChevron} aria-hidden="true" /> | ||
| </span> | ||
| </summary> | ||
| <div className={styles.productSwitcherMenu}> | ||
| {docsProductOptions.map((option) => { | ||
| const OptionIcon = option.Icon; | ||
| const isActive = option.id === activeId; | ||
| return ( | ||
| <Link | ||
| key={option.id ?? 'relay'} | ||
| href={option.href} | ||
| className={`${styles.productSwitcherOption} ${ | ||
| isActive ? styles.productSwitcherOptionActive : '' | ||
| }`} | ||
| > | ||
| <OptionIcon className={styles.productSwitcherOptionIcon} aria-hidden="true" /> | ||
| <span className={styles.productSwitcherOptionText}> | ||
| <span>{option.label}</span> | ||
| <span>{option.tagline}</span> | ||
| </span> | ||
| </Link> | ||
| ); | ||
| })} | ||
| </div> | ||
| </details> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Using a native <details> element for the product switcher inside a persistent layout can cause the dropdown menu to remain open after navigating to a different page. To ensure a smooth user experience, we should programmatically close the dropdown when a link is clicked. Since useRef is already imported in this file, we can easily achieve this by assigning a ref to the <details> element and setting its open property to false in the link's onClick handler.
function DocsProductSwitcher({ activeId }: { activeId: string | null }) {
const detailsRef = useRef<HTMLDetailsElement>(null);
const activeProduct =
docsProductOptions.find((option) => option.id === activeId) ?? docsProductOptions[0];
const ActiveIcon = activeProduct.Icon;
return (
<div className={styles.productHeader}>
<details ref={detailsRef} className={styles.productSwitcher}>
<summary className={styles.productSwitcherSummary}>
<span className={styles.productSwitcherCurrent}>
<ActiveIcon className={styles.productHeaderIcon} aria-hidden="true" />
<span className={styles.productSwitcherText}>
<span className={styles.productSwitcherLabel}>{activeProduct.label}</span>
<span className={styles.productHeaderTagline}>{activeProduct.tagline}</span>
</span>
</span>
<span className={styles.productSwitcherMeta}>
{activeProduct.version && (
<span className={styles.productHeaderVersion}>v{activeProduct.version}</span>
)}
<ChevronDown className={styles.productSwitcherChevron} aria-hidden="true" />
</span>
</summary>
<div className={styles.productSwitcherMenu}>
{docsProductOptions.map((option) => {
const OptionIcon = option.Icon;
const isActive = option.id === activeId;
return (
<Link
key={option.id ?? 'relay'}
href={option.href}
className={`${styles.productSwitcherOption} ${
isActive ? styles.productSwitcherOptionActive : ''
}`}
onClick={() => {
if (detailsRef.current) {
detailsRef.current.open = false;
}
}}
>
<OptionIcon className={styles.productSwitcherOptionIcon} aria-hidden="true" />
<span className={styles.productSwitcherOptionText}>
<span>{option.label}</span>
<span>{option.tagline}</span>
</span>
</Link>
);
})}
</div>
</details>
</div>
);
}
| const navGetStartedLink = ( | ||
| <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}> | ||
| Get Started | ||
| </Link> | ||
| ); | ||
| const mobileGetStartedLink = ( | ||
| <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}> | ||
| Get Started | ||
| </Link> | ||
| ); | ||
|
|
||
| return ( | ||
| <div className={`${s.page} ${s.homePage} ${s.aboutPage}`}> | ||
| <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks /> |
There was a problem hiding this comment.
There is redundant code duplication where navGetStartedLink and mobileGetStartedLink are defined as two separate but completely identical JSX elements. We can consolidate them into a single getStartedLink variable and pass it to both props in <SiteNav />. This simplifies the component and improves maintainability.
const getStartedLink = (
<Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
Get Started
</Link>
);
return (
<div className={`${s.page} ${s.homePage} ${s.aboutPage}`}>
<SiteNav actions={getStartedLink} mobileMenuContent={getStartedLink} hideLinks />
| <span className={`${s.aboutOrbitNode} ${s.aboutOrbitNodeBottom}`}>Memory</span> | ||
| <span className={`${s.aboutOrbitNode} ${s.aboutOrbitNodeLeft}`}>Files</span> | ||
| <span className={s.aboutOrbitCore}> | ||
| <img src="/brand-kit/agent-relay-mark-transparent.png" alt="" className={s.aboutOrbitMark} /> |
There was a problem hiding this comment.
Using a native <img> element in Next.js can trigger the @next/next/no-img-element ESLint warning/error and bypass Next.js's automatic image optimization features (such as layout shifting prevention, resizing, and modern format serving). Consider importing and using the Next.js <Image> component from 'next/image' instead.
|
Preview deployed!
This is a Cloudflare Workers preview version of this PR's build. |
1 participant
Summary
/messagingand adds new blank-slate/reflex,/about, and/careersroutes.Impact
These changes update the public marketing surface and docs navigation so the site can support the new home/about direction while preserving the existing messaging page.
Validation
npm --workspace web run buildgit diff --checkSummary by cubic
Refreshes the marketing site and docs: adds About/Careers, moves the original home to
/messaging, introduces Agents docs with a product switcher, and rebuilds the homepage with an editable poster hero that extends under the nav, has a lower cutoff, and a deeper shadow. Also adds a new Relay explainer section to the homepage to clarify how agent teams coordinate.New Pages & Navigation
/messaging; added/about,/careers, and/reflex; rebuilt/with an editable poster hero (HomePosterText), a “Get Started” CTA, and a new Relay explainer section.npx @agent-relay@latest skills add) via the hero command CTA; refreshed Quick Start visuals/CTAs.SiteNavto support custom actions and mobile content with optional hidden links; blog now uses this and shows a “Get Started” CTA.SiteFooterinto 5 columns with cleaner links and external icons; updated landing styles.Docs
/docs/agents/*(introduction, quickstart, patterns, build, deploy) with OG images and Markdown routes;/docs/agentsredirects to introduction.product-docs-navandlib/product-docswithagentsSection.Written for commit 474e81f. Summary will update on new commits.