Files
52d89da5c9 Navbar/Footer: rewire stub /research#anchor links + fix invisible filter buttons (#3)
* Navbar: research AI & Machine Learning button → /models

The "AI & Machine Learning" item in the Research dropdown linked to
/research#ai (anchor on the research page, not a real sub-page).

Pointing it at /models — the canonical Zen Models page. /ai-models is
a redirect to /models, so /models is the source of truth.

* Navbar: research Consensus & Networks → zoo.network

The "Consensus & Networks" item in the Research dropdown linked to
/research#consensus (anchor, not a sub-page). Pointing it at
https://zoo.network — the actual Zoo Network site — and marking
it external so it opens in a new tab.

* Rewire remaining /research#anchor stubs + fix invisible filter button text

Navbar Research dropdown:
- Cryptography  /research#crypto  →  https://papers.zoo.ngo (external)

Navbar Models dropdown:
- Zen Coder  /models#coder  →  /models (anchor doesn't exist)
- Zen Omni   /models#omni   →  /models (anchor doesn't exist)

Footer Research column mirrors:
- AI & Machine Learning  /research#ai        →  /models
- Cryptography           /research#crypto    →  https://papers.zoo.ngo
- Consensus & Networks   /research#consensus →  https://zoo.network (external)
- Papers                 /research#papers    →  https://papers.zoo.ngo (external)

Research papers page filter buttons:
- Active filter buttons used bg-primary text-foreground, which renders
  black text on a black background (invisible). Switched both org="all"
  and active-topic buttons to text-primary-foreground so the text is
  white on black (the theme's contrast pair).

* Navbar: make dropdowns fully opaque (no background bleed-through)

All three dropdown panels (Try Zen, main desktop dropdowns, mobile menu)
used bg-secondary/95 or bg-secondary/98 — 95–98% opacity, letting page
content show through behind the menu items.

Switched to bg-secondary (fully opaque). Kept the backdrop-blur-xl for
the subtle soft edge, but the panel itself is now solid.

* Navbar: switch dropdowns from bg-secondary (50% alpha) to bg-popover (solid)

--secondary in globals.css is intentionally rgba(255,255,255,0.5) for the
brutalist pill design, so any bg-secondary class is inherently translucent.

The theme already defines --popover as a solid color (#ffffff light,
#0a0a0a dark) — that's the right semantic for an opaque dropdown panel.

* Nav/Footer: drop docs.zoo.ngo links (site is down)

Removed every button pointing at docs.zoo.ngo since the docs site is
currently broken:

- Products dropdown: drop "LLM Gateway"
- Developers dropdown: removed entirely (Documentation, Zoo MCP, SDKs,
  LLM Gateway all linked to docs.zoo.ngo)
- Footer Research column: drop "Documentation"

Moved "Case Studies" from the now-empty Developers dropdown into the
Research dropdown (it's the only non-docs item that lived under Developers).

* Navbar: hard-pin dropdown bg to literal colors so it can't ever be transparent

bg-popover still resolved to something translucent in render. Pinning
to literal bg-white (dark:bg-zinc-900) so the panel can't depend on any
theme-variable indirection.

* Navbar: dropdowns pinned to solid white (drop dark-mode variant)

Keeps all the original styling (backdrop-blur-xl, rounded corners, shadow,
border) but the bg is now literal bg-white in every theme, never translucent.

* Models dropdown: wire first three items to distinct, real destinations

All three top items pointed at /models — clicking them while on the
catalog page was a no-op. Adding id={family.id} + scroll-mt-24 to the
model family sections so in-page anchors actually work.

- Zen Models → /models (catalog)
- Zen Coder  → /models#code (scrolls to Code family section)
- Zen Omni   → https://huggingface.co/zenlm/zen-omni-8b (external)

* Logo: swap CMY (black-center) Venn for RGB additive (white-center) Venn

Matches the brand mark from the pitch deck — three overlapping circles
in green, red, blue with yellow/cyan/magenta two-way overlaps and a
clean white center where all three meet.

Same viewBox (1024x1024) so rendered size on the page is unchanged.

Files updated:
- public/zoo-logo.svg  (used by Navbar Logo, About page, Press page)
- app/icon.svg         (Next.js App Router auto-favicon)
- public/favicon.svg   (explicit <link rel=icon>)

Note: public/zoo-logo.png is orphaned (not referenced in code). favicon.ico
is a binary file no PNG/SVG tool can regenerate from here — modern
browsers will use favicon.svg anyway, so ico is a low-priority refresh
for a designer to redo if old-IE fallback matters.

* /models: restyle buttons and boxes to match home page brutalist design

- Hero badge: rounded-full pill → .pill .pill-pink
- Hero CTAs: rounded-full Button → .btn-brutalist .pill-pink / .pill-green
- Model cards: rounded-xl bg-foreground/5 → bg-white + border-2 border-black
  + offset shadow + press-into-shadow hover
- "Research Preview" badge: rounded-full → bordered yellow brutalist chip
- Capability tags: rounded-full muted → black chips with white type
- Tool cards (Infrastructure section): rounded-2xl → brutalist panel style
- Tool icon container: rounded-xl bg-primary → brand-magenta bordered square
- Quick Start code block: rounded-xl bg-secondary → black panel with brand-green
  mono text and the same offset shadow used everywhere else
- Final CTA buttons: rounded-full Button → .btn-brutalist .pill-pink / .pill-green

* Add /api page — Zen Model API docs + ecosystem context

New internal page at /api with:
- Hero: "One endpoint. Every modality." with brutalist CTAs to get a key,
  browse weights on Hugging Face, and the local /models catalog
- Modalities grid: 8 modalities (text, vision, image, video, audio, code,
  3D, agents) with the Zen model family that owns each
- Ecosystem cards: Zen MoDE, open weights, Proof of AI revenue share,
  $AI mining, DSO (ZIP-001),  rails — the load-bearing pieces
  someone needs to understand the network past "another LLM gateway"
- Endpoints table: OpenAI-compatible REST surface, including the
  multimodal endpoints (image, video, audio, agents) and rerank/embeddings
- Quick start: 3-line OpenAI SDK example pointed at api.zoo.network/v1
- Authentication: API key vs Zoo ID (DID-signed requests for agents)
- Pricing: $0 (self-host), per-token (hosted), 25% to OSS via PoAI
- Final CTAs: get key, Hugging Face, papers.zoo.ngo

Navbar Models dropdown: Model API button now links to /api instead of
the external api.zoo.network (which is the actual API host, not docs).

All sections use the home-page brutalist visual language (.pill, .btn-brutalist,
2px black borders + offset shadow) so the page reads as part of the same site.

* Navbar Products: Zoo Industries (the cloud item) → zoo.cloud

First item in the Products dropdown is "Zoo Industries — Full AI platform
and cloud". Pointing it at https://zoo.cloud (the cloud product surface)
instead of zoo.ngo (foundation site).

* /api: Zen Model API kicker — underlined text instead of pill box

* /api: bump space above Zen Model API kicker to match gap below it

* Drop stale favicon.ico so browsers use the new RGB-Venn favicon.svg

favicon.ico was a binary file still carrying the old CMY/black-center
logo, and many browsers auto-fetch /favicon.ico ahead of the <link
rel="icon" href="/favicon.svg"> in the head — so the tab kept showing
the old mark.

Removing the ico drops that override; modern browsers fall back to the
SVG, which matches the header logo. Old-IE loses its tab icon, which is
a fine trade for the header/tab actually matching.

* btn-brutalist: animated rainbow background

Replace the static var(--pill-color, var(--secondary)) fill on .btn-brutalist
with a 6-color linear-gradient (red → yellow → green → cyan → blue → magenta →
red) animated to scroll horizontally on a 6s loop.

The .pill-* modifier classes (.pill-pink, .pill-green, etc.) still set
--pill-color, which now lives only as the background-color fallback for
prefers-reduced-motion. Buttons themselves all share the rainbow.

Respects @media (prefers-reduced-motion: reduce) — the animation pauses
and the static fallback fill is shown instead.

.pill (the static heading kicker) is untouched and keeps its color-block
treatment — only the interactive .btn-brutalist gets the rainbow.

* btn-brutalist rainbow: scope to .pill-blue only

Previous commit blanket-applied the animated rainbow to every
.btn-brutalist. Walking that back — only the blue variant (.btn-brutalist.pill-blue)
gets the rainbow now. Pink, green, cyan, yellow, red, etc. keep their
solid pill-color fill.

Still respects prefers-reduced-motion: animation off, falls back to
solid var(--brand-blue).

* Header wordmark: ZOO AI → ZOO INDUSTRIES

* Header wordmark: drop 'INDUSTRIES' to light weight (ZOO stays extrabold)

* Section heads: 2x the gap between the colored pill and its underlined heading

ZooLabsNarrative SectionHead component and the /api page section heads
shared the same mt-5 md:mt-6 (1.25-1.5rem) gap between the .pill box and
the underlined heading below it. Doubled to mt-10 md:mt-12 (2.5-3rem) so
the box and heading read as distinct lines.

* Favicon: cache-bust the URL so browsers re-fetch the new RGB-Venn

All three favicon assets (public/favicon.svg, app/icon.svg, public/zoo-logo.svg)
were updated to the RGB-additive Venn earlier, and the stale favicon.ico
was removed — but browsers cache favicons aggressively per-origin and
will keep serving the old icon from cache.

Appending ?v=rgb to faviconPath forces a fresh fetch the next time the
page loads.

* Logo: continuous slow rotation in navbar/footer

Adds a 14-second linear infinite spin to the brand mark via a new
.logo-spin utility in globals.css, applied directly to the <Image> inside
the Logo component. Respects prefers-reduced-motion (animation off).

* /research: apply brutalist treatment to match home page

- Hero badge: rounded-full pill chip → .pill .pill-pink + bigger headline
- Research Area cards: rounded-xl bg-foreground/5 → bg-white + 2px black
  border + 6/10px offset shadow + press-into-shadow hover
- "View all on GitHub" / "View on GitHub" buttons: outline Button →
  .btn-brutalist .pill-green
- Open Source project cards: rounded-xl translucent → brutalist white panel
- Paper cards: rounded-xl → brutalist white panel, featured papers get a
  yellow offset shadow instead of black to stand out
- Featured / Org / Topic badges: rounded-full muted chips → flat bordered
  chips (featured = yellow, org/topic = black-on-black)
- Final CTA buttons: rounded-full Button → .btn-brutalist .pill-pink / .pill-green

* Add product pages for /cloud /bot /dev /chat /engine /edge

Six new (or rebuilt) internal pages for the core infrastructure products
that appear in the Products dropdown, all sharing the home-page
brutalist visual language (.pill, .btn-brutalist, 2px black panels with
hard offset shadows).

- /cloud   — Zoo Cloud, the umbrella platform. Cards link to each of the
  other product pages below + identity/storage/billing/audit underneath.
  Replaces the old redirect to /products/lux.
- /bot     — Zoo Bot, "AI team in a box". Six role cards + shared
  memory/tools/voice features + hand-off + budget + audit.
- /dev     — Zoo Dev, the engineering agent. Reads whole repo, runs tests,
  opens real PRs. Guardrails: allowlist commands, read-only by default,
  per-repo budget, audit log.
- /chat    — Zoo Chat. Five-input box (talk/see/draw/listen/code), E2E
  encrypted, on-chain billing, MCP tools.
- /engine  — Zoo Engine. Four chip families (H100/H200, MI300X, Trainium,
  pooled Apple silicon). Token-priced, latency-targeted, multi-region,
  PoAI revenue share, TEE-confidential.
- /edge    — Zoo Edge. Phone/laptop/watch/router targets with
  zen-nano/zen-eco. Offline-first, cloud fall-through, hardware-attested,
  signed OTA updates.

Navbar Products dropdown is rewired to point at these internal pages:
- Zoo Industries (external zoo.cloud) → Zoo Cloud (/cloud)
- Zoo Bot/Dev/Chat/Engine/Edge — now all internal pages, not external apps
- Zoo Team kept external (it's the consulting product, not a SaaS product)

---------

Co-authored-by: Antje Worring <[email protected]>
2026-05-13 14:05:41 -04:00

1.3 KiB