Skip to content

Redesign home page and add /build page - #479

Draft
sebbycorp wants to merge 1 commit into
mainfrom
kagent-redesign
Draft

Redesign home page and add /build page#479
sebbycorp wants to merge 1 commit into
mainfrom
kagent-redesign

Conversation

@sebbycorp

Copy link
Copy Markdown
Collaborator

Summary

Implements the kagent.dev redesign (Solo.io design system, "kagent Home v4" and "kagent Build" artboards) in the Next.js marketing site.

  • Home: centered "Agents on Kubernetes" hero → Agent Substrate section (sub-100ms resume, 250 agents on 8 pods, sandboxed-by-default panels) → scroll-driven Build walkthrough (sandboxes, agents, MCP servers, models, skills) with a sticky manifest panel and apply status line → "What happens after you apply" → features grid → adopters → community CTA.
  • New /build page: declarative-build hero with an install terminal, the same walkthrough, "whole loop" terminal and numbered pipeline cards.
  • Styling: Tailwind utilities only. Design tokens live in globals.css as --kg-* variables (light on :root, dark on .dark) and are exposed as kg-* colours, plus Figtree / DM Sans / DM Mono font families and a few keyframes in tailwind.config.ts. The legacy rd-* custom CSS block from the previous redesign is removed.
  • Footer rebuilt compact per the design. Navbar is unchanged so it keeps matching the live kagent.dev / docs nav.
  • Default theme is now dark (the design is dark-first). Both themes verified.
  • Brand assets (kagent mark, binary pattern, concentric circles, CNCF logo) added under public/images/brand/.

Notes for reviewers

  • /build is not linked from the navbar yet; reachable by URL only.
  • The install/loop terminals stay dark in light mode on purpose: the design's light-grey command text was unreadable on a white panel.
  • Adopter logos come from src/data/adopters.yaml as before (light variants on white tiles, per the design).

Test plan

  • tsc --noEmit and ESLint clean
  • Home and /build rendered in dark and light, desktop and mobile
  • Scroll-driven step highlighting and manifest panel verified per step
  • Review on a real device / Cloudflare preview

🤖 Generated with Claude Code

Rebuilds the marketing home page from the "kagent Home v4" artboard and adds a
/build page from the "kagent Build" artboard, using Tailwind utilities on top of
a small set of design tokens (kg-* colours, Figtree / DM Sans / DM Mono).

- Home: centered hero, Agent Substrate section (resume, density, isolation
  panels), scroll-driven Build walkthrough with a manifest panel, pipeline
  cards, features grid, adopters, community CTA
- /build: declarative-build hero with install terminal, the same walkthrough,
  "whole loop" terminal and numbered pipeline
- Tokens in globals.css (:root light, .dark dark) exposed via tailwind.config.ts;
  legacy rd-* custom CSS removed
- Compact footer per the design; navbar left unchanged to match kagent.dev
- Default theme set to dark (design is dark-first)
- Brand assets added under public/images/brand

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Signed-off-by: Sebastian Maniak <sebastian@maniak.io>
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.

1 participant