Homepage and site nav: download for your OS, download start page, customer quotes

Merged
WI
11h ago
+1267-174

The homepage leads with a desktop download for the visitor's OS. The download opens a page that says what Agent Relay does on your computer and what to do once it has downloaded. Customer quotes sit above the footer.

Download button

  • The hero button and the nav button that appears on scroll read "Download for macOS", "Download for Windows" or "Download for Linux", with that OS's logo on the right. Phones, tablets and unknown systems keep "Get started", which opens the getting-started guide.
  • OS and architecture detection is the useDesktopPlatform hook (web/lib/use-desktop-platform.ts). The /download page and the homepage button both use it.
  • The Apple and Linux (Tux) logos come from Simple Icons (CC0). The Windows logo is drawn as four panes. They live in components/home/icons.tsx.

Download start page: /download/start?build=<file>

  • A full-height split like the sign-in page, with no site nav or footer.

  • Left: the agentrelay logo (linking home), the headline "Let your agents talk to each other", the download status ("Download started"), the next step ("When it finishes, open Agent Relay and sign in. It connects your agents from there."), and, muted at the bottom, "Didn’t start? Download again · Other builds". There is no sign-in on the page; the app's own sign-in is the single step.

  • Right: "What it does on your computer", as three static points:

    • Runs quietly in the background.
    • Works with the agents you already use, with their logos.
    • Shares only what you choose: a new install shares no sessions, and you switch each chat on and off yourself.

    Nothing on the page moves except the download marker, which settles in the brand blue.

  • Opening the page starts the download, but only for files listed in DESKTOP_ASSETS, and not on a reload, a Back navigation, or a return through in-app navigation (shouldStartDownload, unit-tested).

  • Below 960px it stacks. The page is noindex, and its canonical URL is /download.

Site nav

  • SiteNavActions (GitHub stars and NavDownloadButton) is the nav's right side on every marketing and content page: about, blog, careers, company, the legal and trust pages, brand, agents, directory, /download, open source, openclaw, flows plugins and the /u pages. They use hideLinks singleAction like the homepage. The Log in / Docs / Blog text links and the hamburger menu are removed, and those links remain in the site footer. On phones the stars and button stay visible; at 400px and below only the button shows.
  • NavDownloadButton is the homepage's download button: "Download for macOS / Windows / Linux" with the OS logo, opening /download/start, or "Get started" on phones.
  • Docs keeps its search, its Log in / Docs / Blog links and its mobile docs menu. It adds the download button after its stars and at the end of the mobile menu.
  • The product landings keep their own call to action: Flows ("Try Free with Cloud"), Teams (sign-up), Enterprise ("Book Call"), Pear ("Get started") and Relayfile.

Analytics

  • desktop_download_clicked is sent when a download button is pressed: build, os, arch, placement (hero or nav) and path.
  • desktop_download_started is sent when /download/start actually starts the file, and not on a reload or a return: build, os, arch and path.
  • Both are sent by beacon, so the click survives the navigation, and both respect PostHog opt-out (lib/desktop-download-analytics.ts, unit-tested).

Customer quotes

  • CustomerQuotes sits after "Run it your way" as the last section before the footer. It is a compact row of message bubbles: Akshay Manglik (Founder, Pomerado), and Serg's X post (@sg_HGA) with an X mark linking to the post and a "Replying to" line. The row fits up to three cards across and stacks on narrow screens.
  • Quotes live in web/lib/customer-quotes.ts, and CUSTOMER_QUOTES sets which appear and in what order.
  • Shareable image: https://agentrelay.com/img/customer-quote-pomerado.png (629:368, 2516×1472). It is rendered by node scripts/generate-customer-quote.mjs with the same fonts, logo and wave lines as the OG cards. The shared font subset includes curly quotes and non-breaking characters.

Customer quote

🤖 Generated with Claude Code

Agent Relay sessions

  • claude session 27d5294e · opened via gh pr create · last active 2026-11-02