docs: marketing site redesign (nav, home, projects, blog, agent interface)#691
Merged
Conversation
Centers the hero around the OpenClaw OS type scale, drops the side stats panel in favor of a single-column layout, and adds a Discord secondary CTA next to "Submit a project". The directory now sits in the shared gray contentSection between two GradientDividers (new `compact` prop to skip the two tallest bars without affecting other pages). Project cards: type-driven accent colors via a TYPE_ACCENT map, filled squircle type chips, "by Official/Community" as muted meta text, hover-only arrow on link buttons, subtle shadow tokens (--openui-shadow-s / -m) matched to the home page card style. Submit section: drop the "CONTRIBUTE" eyebrow, replace the verbose paragraph with a tighter intro and a numbered checklist of what to include, and add the Share-on-Discord CTA. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ton consolidation Preview snapshot of the in-progress redesign: - New Agent Interface page (hero, feature cards, wide features, use-case accordion with videos, CTA) plus the home-page AgentInterfaceBanner - Navigation: Playground/Projects hover dropdowns, Agent Interface NEW tab, sectioned compact mobile menu - CompatibilitySection as an infinite marquee; HeroSection install pill with platform tabs; PillLink variants consolidating button styles - StepsAccordion and projects/home page polish Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
# Conflicts: # docs/app/(home)/projects/page.module.css # docs/app/(home)/projects/page.tsx
…face) Builds on the merged /projects redesign (#584) into a full visual + structural pass across the marketing site so every page shares one design system. - Navigation: grouped nav dropdowns with descriptions + hover arrows; rebuilt mobile menu tray (sentence-case sections, even tab spacing); consolidated the home Navbar and BlogNavbar onto the shared site-marketing-header. - Home: hero (dark GitHub button matches npx; mobile illustration framed, right-fade, side padding); reworked/added Cloud, Feature Grid, Use Cases, Steps, Features, Compatibility marquee, Possibilities carousel, Stuck-in-Chat, Footer; Tweet Wall live stats (GitHub stars + npm monthly downloads); replaced Shiro mascot with ShiroPeek. - /projects: removed Featured-projects header + count chip; centered mobile hero; card shadow + hairline via shared token. - /blog: card typography aligned to /projects; removed hover stroke; medium card titles on mobile; new post art. - OpenClaw OS: InstallSplitButton + OpenClawFeatures; mobile feature-grid rows. - Agent Interface: new /agent-interface page + banner, hidden from nav for now. - Design system: shared PageHero, GitHubButton, BevelButton, SectionHeader, MobileAccordion; --home-card-lift shadow token + hairline + responsive type scale in globals.css. - Removed ShiroMascot section and per-page Navbar/BlogNavbar CSS. - Ignore .vercel/ and the local assets/ drop folder. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- TweetWall: re-add the already-loaded check so the wall is not blank after a client-side navigation back to the page (next/script onLoad does not refire). - GitHub stars: cache + dedupe the fetch at the source (brand-logo) so the page makes one request instead of ~5, avoiding GitHub rate-limit exhaustion; route TweetWallStats through the shared hook. - PossibilitiesSection: respect prefers-reduced-motion (JS guard + CSS backstop) and cache the loop width instead of reading scrollWidth every frame. - Remove the dead OPENCLAW_FEATURES export and its now-unused icon imports. - Extract the Apple/Linux/Windows logos + PLATFORMS into a shared PlatformLogos module (was duplicated in HeroSection and InstallSplitButton). - Extract a shared GitHubMark for the octicon (was inlined in the glow button and the TweetWall stats). - Remove the announcement banner and the showBanner prop entirely. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
# Conflicts: # pnpm-lock.yaml
- Compatibility band: retitle to "OpenUI works with any stack" and add a short description. Increase the space above the band. On mobile, render it as a centered standalone section instead of a feature-style row: remove the icon tile, center the title and description, and size the heading to match the benchmark header. - Hero tagline: "AI apps" to "AI agents". - Cloud "View Documentation" CTA now links to /docs/agent/getting-started/openui-cloud. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
next-themes returns undefined theme/resolvedTheme during SSR and the first client render, so reading it during render and branching on it produces a server/client hydration mismatch. Gate the theme-derived values behind a mount flag so the server and the first client render paint the same fallback, then switch to the real theme after mount. - docs-navbar: the brand logo variant (text-white vs text-black). - demo/github: the theme-toggle label and the editor/dashboard mode. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add justify-content: space-between to the mobile .ctaGithub rule so the star count sits on the left and the arrow on the right, matching the home mobile GitHub button instead of centering both. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Moved out of this PR and preserved on the agent-interface-page branch for a future PR. Removes the page route, its page-only components, and its page-only image assets. Keeps AgentSteps and its 5 step videos, which the home use-cases section reuses. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
rabisg
approved these changes
Jun 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Builds on the merged /projects redesign (#584) into a full visual + structural pass
across the marketing site, so every page shares one design system: a centered hero,
consistent card treatment, a reworked navigation, and mobile-first layouts throughout.
Navigation
descriptions and a hover arrow-circle that inverts per theme.
every tab, full-width GitHub star banner.
NavbarandBlogNavbaronto the sharedsite-marketing-header(removed their per-page CSS modules); refreshed
brand-logoandtheme-toggle.Home page
npxbutton; the mobileillustration is framed with a soft shadow, fades out to the right, and gets side padding.
Compatibility (logo marquee), Possibilities (card carousel), Stuck-in-Chat, Footer.
@openuidev/lang-core).ShiroPeek./projects (refinements on top of #584)
/blog
line-height, byline); removed the border highlight on hover; card titles stay
medium-weight on mobile. Adds new post art + a copy edit to stop-making-ai-write-json.
OpenClaw OS
InstallSplitButton+OpenClawFeatures; the "stuck in chat" negatives renderas borderless feature-grid rows on mobile.
Agent Interface (new, hidden for now)
/agent-interfacepage + home banner with assets. The nav entry is commentedout until it is ready to share (page still reachable by URL).
Shared design system
PageHero(used by /projects + /blog),GitHubButton,BevelButton,SectionHeader,MobileAccordion,ExpandChevron.globals.css: a single--home-card-liftshadow token + hairline border sharedacross blog/projects/use-case/OpenClaw cards, plus a responsive typography scale.
Removed
ShiroMascotsection; per-pageNavbar/BlogNavbarCSS modules.Test plan
pnpm -C docs dev; walk/,/projects,/blog,/openclaw-os, desktop + mobile/agent-interfaceis not linked from the nav🤖 Generated with Claude Code