Skip to content

Redesign the front page on the Solo.io design system - #49

Merged
sebbycorp merged 2 commits into
mainfrom
website-front-page-update
Sep 2, 2026
Merged

Redesign the front page on the Solo.io design system#49
sebbycorp merged 2 commits into
mainfrom
website-front-page-update

Conversation

@sebbycorp

Copy link
Copy Markdown
Collaborator

Summary

Replaces the standalone landing page with the "Agentregistry Landing" design (Solo.io design system), rebuilt with Tailwind utilities on the existing css.html pipeline.

  • Hero: full wordmark, "Build. Deploy. Discover.", Helm install snippet, Install on Kubernetes / Get started / See in action, divider.
  • Four scroll-driven sections (MCP servers, skills, agents, prompts) with a sticky arctl terminal that only starts once the first section is in view. Section icons match the UI's tab icons.
  • Interactive web UI demo: 19 real screenshots of the registry UI (captured live, light + dark) with click regions over the UI's own controls — tabs, Catalog/Deployed, rows → details panels, hover Deploy → deploy dialog with target picker, Add → menu → each Add dialog (incl. the server package row).
  • Quickstart with copyable commands, CTA, footer ("Built by Solo.io").
  • Light and dark mode: ar-* tokens in assets/css/main.css carry both palettes and flip on the .dark class Hextra manages; the nav toggle and the docs share the color-theme preference. Default is now system (hugo.yaml).
  • Accurate CLI copy: every terminal command was verified against arctl v2026.6 (get/init/apply/pull/build/wait) and a live registry; outputs mirror the real formats. Quickstart uses the chart path, service and ports from the docs.
  • Removes the old landing CSS/JS and unused uploads; adds trimmed logo assets.

Test plan

  • hugo160 server builds with no errors; / and /docs/ return 200
  • Screenshots checked at 1440px and 390px in both themes
  • Automated click-through of all 34 demo transitions, no console errors
  • Theme toggle persists and is picked up by the docs pages
  • Cloudflare Pages preview looks right
  • Static + content checks pass

🤖 Generated with Claude Code

https://claude.ai/code/session_013qU6E15XJdNYcgg6koZjM6

Replace the standalone landing (custom CSS, light-first, orbit/FAQ
sections) with the "Agentregistry Landing" design: pill nav, hero with
Helm install snippet and divider, four scroll-driven sections (MCP
servers, skills, agents, prompts) with a sticky arctl terminal that
plays only once the section is in view, a real UI screenshot in a
browser frame, a quickstart with copyable commands, CTA and footer.

- Styling is Tailwind utilities compiled by the existing css.html
  pipeline; `ar-*` tokens in assets/css/main.css carry light and dark
  palettes and are flipped by the `.dark` class Hextra already manages,
  so the nav toggle and the docs share the "color-theme" preference.
- Terminal copy uses real arctl commands (get/init/apply/pull/build/
  wait) and resource names from the sample catalog; the quickstart
  uses the chart path, service and ports from the docs.
- New logo, mark and UI screenshot assets; old landing CSS/JS and
  unused uploads removed.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013qU6E15XJdNYcgg6koZjM6
Signed-off-by: Sebastian Maniak <sebastian@maniak.io>
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 2, 2026

Copy link
Copy Markdown

Deploying agentregistry-website with  Cloudflare Pages  Cloudflare Pages

Latest commit: b4d18df
Status: ✅  Deploy successful!
Preview URL: https://148ff503.website-1n3.pages.dev
Branch Preview URL: https://website-front-page-update.website-1n3.pages.dev

View logs

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

It’s a large, user-facing landing-page overhaul with theme-system implications and many asset removals where a full visual/regression pass is needed to confidently approve.

Pull request overview

Redesigns the site front page to match the Solo.io “Agentregistry Landing” design system, replacing the legacy standalone landing implementation with a Tailwind-utility-driven approach integrated into the existing Hugo/CSS pipeline and theme switching.

Changes:

  • Removes legacy landing-page JS/CSS and unused/static assets under static/landing/ that are no longer needed for the new front page.
  • Introduces namespaced (ar-*) theme tokens and Tailwind theme bindings in assets/css/main.css to support shared light/dark/system theming without colliding with the docs theme.
  • Switches the default site theme preference to system in hugo.yaml to align landing + docs behavior.
File summaries
File Description
static/landing/uploads/mcp.svg Removes unused legacy landing upload asset.
static/landing/terminal.js Removes legacy interactive terminal demo script.
static/landing/styles.css Removes legacy landing stylesheet (replaced by Tailwind utilities/tokens).
static/landing/image-slot.js Removes unused custom element helper script from legacy landing.
static/landing/design-tokens.css Removes legacy design token file (superseded by ar-* tokens in main CSS).
static/landing/catalog.js Removes legacy interactive catalog preview script.
static/landing/assets/up-right.svg Removes unused legacy icon asset.
static/landing/assets/solo-mark.svg Updates Solo mark SVG to remove the solid white background rect.
static/landing/assets/discord.svg Updates Discord icon SVG (geometry + styling) used by the landing.
static/landing/assets/catalog-diagram.svg Removes unused legacy diagram asset.
static/landing/assets/agentregistry-mark.svg Removes unused legacy agentregistry mark asset.
hugo.yaml Sets theme default to system.
hugo_stats.json Updates Hugo stats (classes/ids/tags) consistent with the new landing markup/utilities.
assets/css/main.css Adds ar-* CSS variables and Tailwind @theme bindings for landing page theming (light/dark via .dark).
Review details
  • Files reviewed: 9/101 changed files
  • Comments generated: 0
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

The demo frame now keeps the app's 1440x900 aspect and scrolls the
full-height list captures inside it, like the real UI. Detail panels
have working Overview / Package / Technical / Raw tabs, Deploy dialogs
open from the hovered row for servers and agents, and the Add menu
leads to every Add dialog. All 25 views are live captures of the
registry UI in both themes, stored as WebP (1.6 MB total). The frame is
narrower (960px) so the section reads as a preview rather than a page.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013qU6E15XJdNYcgg6koZjM6
Signed-off-by: Sebastian Maniak <sebastian@maniak.io>
@sebbycorp
sebbycorp merged commit ae8c710 into main Sep 2, 2026
3 checks passed
@sebbycorp
sebbycorp deleted the website-front-page-update branch September 2, 2026 22:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants