feat: add /agents page and skillsOrg brand support

- New /agents marketing page for AI agent crypto integration
- Added skillsOrg field to BrandConfig for per-brand skills repos
- Added Agents link to navbar (desktop + mobile)
- Server-side brand detection via Host header in layout

web/app/agents/page.tsx

@@ -0,0 +1,326 @@
+import Link from "next/link"
+import type { Metadata } from "next"
+import { Navbar } from "@/components/navbar"
+import { Footer } from "@/components/footer"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import {
+  ArrowRight,
+  Bot,
+  CreditCard,
+  Globe,
+  Layers,
+  Radio,
+  Rocket,
+  Terminal,
+  Webhook,
+  Zap,
+} from "lucide-react"
+import { getBrand } from "@/lib/brand"
+
+export const metadata: Metadata = {
+  title: "Agents",
+  description:
+    "Crypto for AI agents. Pay, trade, build apps — in 1 prompt. Agents can sign up and pay autonomously.",
+}
+
+const apis = [
+  {
+    number: "01",
+    title: "Agentic Signup",
+    description:
+      "Sign up with an onchain wallet and prepay for compute, powered by x402.",
+    icon: Rocket,
+  },
+  {
+    number: "02",
+    title: "Node APIs",
+    description:
+      "Core RPC APIs for 100+ chains with reliable read/write access for agent workflows.",
+    icon: Globe,
+  },
+  {
+    number: "03",
+    title: "Data APIs",
+    description:
+      "Get onchain data across assets, including tokens, NFTs, prices, balances, and portfolio views.",
+    icon: Layers,
+  },
+  {
+    number: "04",
+    title: "Solana APIs",
+    description:
+      "Use Yellowstone gRPC streams and DAS APIs built for high-throughput Solana applications.",
+    icon: Zap,
+  },
+  {
+    number: "05",
+    title: "Webhooks",
+    description:
+      "Push onchain events directly to your backend with managed webhook delivery and signature verification.",
+    icon: Webhook,
+  },
+  {
+    number: "06",
+    title: "Recipes & Tutorials",
+    description:
+      "Follow practical crypto development recipes and tutorials to ship integrations faster.",
+    icon: Terminal,
+  },
+]
+
+const compatible = [
+  "Claude Code",
+  "Codex",
+  "Cursor",
+  "Openclaw",
+  "Hanzo Bot",
+]
+
+export default function AgentsPage() {
+  const brand = getBrand()
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Navbar />
+
+      {/* Hero */}
+      <section className="relative overflow-hidden border-b bg-gradient-to-b from-background to-muted/20">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+        <div className="container relative py-24 md:py-32 lg:py-40">
+          <div className="mx-auto flex max-w-4xl flex-col items-center text-center">
+            <Badge variant="secondary" className="mb-4">
+              <Bot className="mr-1 h-3 w-3" />
+              Crypto for Agents
+            </Badge>
+            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
+              Pay, trade, build apps.{" "}
+              <span
+                className="bg-clip-text text-transparent"
+                style={{
+                  backgroundImage: `linear-gradient(to right, ${brand.colors.accent}, ${brand.colors.accentEnd})`,
+                }}
+              >
+                In 1 prompt.
+              </span>
+            </h1>
+            <p className="mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl">
+              Agents can sign up and pay autonomously. No human required.
+              Install the {brand.name} skills to start building.
+            </p>
+
+            {/* Install Command — open standard */}
+            <div className="mt-10 w-full max-w-xl">
+              <div className="rounded-lg border bg-card p-1">
+                <div className="flex items-center gap-2 rounded-md bg-muted px-4 py-3 font-mono text-sm">
+                  <span className="text-muted-foreground select-none">$</span>
+                  <code className="flex-1 text-left">
+                    npx skills add {brand.skillsOrg}/skills --yes
+                  </code>
+                </div>
+              </div>
+              <p className="mt-3 text-sm text-muted-foreground">
+                Works with{" "}
+                {compatible.map((name, i) => (
+                  <span key={name}>
+                    <span className="font-medium text-foreground">{name}</span>
+                    {i < compatible.length - 1 ? ", " : ""}
+                  </span>
+                ))}
+                .{" "}
+                <span className="text-muted-foreground">
+                  Skills install to{" "}
+                  <code className="text-xs bg-muted rounded px-1 py-0.5">~/.hanzo/skills/</code>{" "}
+                  and auto-link to all agents.
+                </span>
+              </p>
+            </div>
+
+            {/* Payment Options */}
+            <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <CreditCard className="h-4 w-4" />
+                <span>Pay with credit card via your account</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Globe className="h-4 w-4" />
+                <span>Or USDC via x402 — no account needed</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* APIs for every AI agent */}
+      <section className="py-24">
+        <div className="container">
+          <div className="mx-auto max-w-2xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+              APIs for every AI agent
+            </h2>
+            <p className="mt-4 text-lg text-muted-foreground">
+              Everything an agent needs to interact with 100+ blockchains,
+              from signup to settlement.
+            </p>
+          </div>
+          <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {apis.map((api) => (
+              <Card key={api.number} className="group h-full transition-colors hover:border-foreground/20">
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <span
+                      className="flex h-10 w-10 items-center justify-center rounded-lg font-mono text-sm font-bold"
+                      style={{
+                        background: `linear-gradient(135deg, ${brand.colors.accent}20, ${brand.colors.accentEnd}20)`,
+                        color: brand.colors.accent,
+                      }}
+                    >
+                      {api.number}
+                    </span>
+                    <api.icon className="h-5 w-5 text-muted-foreground" />
+                  </div>
+                  <CardTitle className="mt-4">{api.title}</CardTitle>
+                  <CardDescription>{api.description}</CardDescription>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Run Locally */}
+      <section className="border-y bg-muted/30 py-24">
+        <div className="container">
+          <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
+            <div className="flex flex-col justify-center">
+              <Badge variant="secondary" className="mb-4 w-fit">
+                <Terminal className="mr-1 h-3 w-3" />
+                Run Locally
+              </Badge>
+              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+                Run locally for free
+              </h2>
+              <p className="mt-4 text-lg text-muted-foreground">
+                Boot up a local agent with a single command. Connect to the
+                Hanzo Bot cloud and start using {brand.name}, or any of our
+                partner networks — Lux, Zoo, and Pars.
+              </p>
+              <div className="mt-8 space-y-4">
+                <div className="flex gap-4">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+                    <Zap className="h-5 w-5 text-yellow-500" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold">Zero Config</h3>
+                    <p className="text-sm text-muted-foreground">
+                      One command to install. Auto-connects to hanzo.bot cloud.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+                    <Radio className="h-5 w-5 text-green-500" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold">Open Standard</h3>
+                    <p className="text-sm text-muted-foreground">
+                      Uses the open Agent Skills spec. Works with any compatible agent.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+                    <Bot className="h-5 w-5 text-blue-500" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold">~/.hanzo/skills/</h3>
+                    <p className="text-sm text-muted-foreground">
+                      Single canonical location. Symlinked to Claude, Cursor, Codex, and all agents automatically.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col justify-center">
+              <div className="space-y-4">
+                <div className="rounded-lg border bg-card p-1">
+                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
+                    <p className="text-muted-foreground"># Install skills (open standard)</p>
+                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx skills add {brand.skillsOrg}/skills --yes</p>
+                  </div>
+                </div>
+                <div className="rounded-lg border bg-card p-1">
+                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
+                    <p className="text-muted-foreground"># Or use Hanzo Bot directly</p>
+                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx @hanzo/bot skills add {brand.skillsOrg}/skills</p>
+                  </div>
+                </div>
+                <div className="rounded-lg border bg-card p-1">
+                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
+                    <p className="text-muted-foreground"># Run a local agent</p>
+                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx @hanzo/bot</p>
+                  </div>
+                </div>
+                <div className="rounded-lg border bg-card p-1">
+                  <div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
+                    <p className="text-muted-foreground"># Skills live in one place, visible to all agents</p>
+                    <p className="mt-1"><span className="text-muted-foreground select-none">$ </span>ls ~/.hanzo/skills/</p>
+                    <p className="mt-0.5 text-muted-foreground">  {brand.skillsOrg}-skills/</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-24">
+        <div className="container">
+          <div
+            className="relative overflow-hidden rounded-3xl px-6 py-20 sm:px-12 sm:py-28"
+            style={{
+              backgroundImage: `linear-gradient(to right, ${brand.colors.accent}, ${brand.colors.accentEnd})`,
+            }}
+          >
+            <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff1a_1px,transparent_1px),linear-gradient(to_bottom,#ffffff1a_1px,transparent_1px)] bg-[size:14px_24px]" />
+            <div className="relative mx-auto max-w-2xl text-center">
+              <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+                Launch your own bot
+              </h2>
+              <p className="mt-4 text-lg text-white/80">
+                Deploy an AI agent on hanzo.bot cloud, or run it locally and connect
+                to any blockchain. Powered by Hanzo AI.
+              </p>
+              <div className="mt-10 flex flex-col justify-center gap-4 sm:flex-row">
+                <Button
+                  size="xl"
+                  className="bg-white text-foreground hover:bg-white/90"
+                  asChild
+                >
+                  <a href="https://hanzo.bot" target="_blank" rel="noopener noreferrer">
+                    Launch on hanzo.bot
+                    <ArrowRight className="ml-2 h-4 w-4" />
+                  </a>
+                </Button>
+                <Button
+                  size="xl"
+                  variant="outline"
+                  className="border-white/30 bg-transparent text-white hover:bg-white/10"
+                  asChild
+                >
+                  <a href="https://hanzo.ai" target="_blank" rel="noopener noreferrer">
+                    Learn more at hanzo.ai
+                  </a>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  )
+}

web/app/layout.tsx

@@ -7,15 +7,27 @@ import { Providers } from "@/app/providers"
 import { Toaster } from "@/components/ui/sonner"
 import "@/app/globals.css"
 
-// Runtime brand detection for SSR metadata (reads BRAND env var, not baked NEXT_PUBLIC_*)
+import { headers } from "next/headers"
+
+// Runtime brand detection — single deployment serves all brands via hostname
 const brands: Record<string, { name: string; tagline: string; domain: string; icon: string; defaultTheme: string }> = {
   bootnode: { name: "Bootnode", tagline: "Blockchain Infrastructure", domain: "bootno.de", icon: "/logo/bootnode-icon.svg", defaultTheme: "light" },
   hanzo: { name: "Hanzo Web3", tagline: "Web3 Infrastructure", domain: "web3.hanzo.ai", icon: "/logo/hanzo-icon.svg", defaultTheme: "dark" },
   lux: { name: "Lux Cloud", tagline: "Next-Gen Blockchain Infrastructure", domain: "cloud.lux.network", icon: "/logo/lux-icon.svg", defaultTheme: "dark" },
   zoo: { name: "Zoo Labs", tagline: "Decentralized AI Infrastructure", domain: "web3.zoo.ngo", icon: "/logo/zoo-icon.svg", defaultTheme: "dark" },
+  pars: { name: "Pars Cloud", tagline: "Sovereign L1 Infrastructure", domain: "cloud.pars.network", icon: "/logo/pars-icon.svg", defaultTheme: "dark" },
 }
 
 function getServerBrandKey() {
+  // Detect brand from Host header (single deployment, multi-domain)
+  try {
+    const host = headers().get("host") || ""
+    if (host.includes("lux.network") || host.includes("lux.cloud")) return "lux"
+    if (host.includes("zoo.ngo") || host.includes("zoo.network")) return "zoo"
+    if (host.includes("pars.network") || host.includes("pars.id")) return "pars"
+    if (host.includes("hanzo.ai") || host.includes("hanzo.network")) return "hanzo"
+    if (host.includes("bootno.de") || host.includes("bootnode.io")) return "bootnode"
+  } catch { /* headers() unavailable outside request context */ }
   return (process.env.BRAND || process.env.NEXT_PUBLIC_BRAND || "bootnode").toLowerCase()
 }
 

web/components/navbar.tsx

@@ -134,6 +134,16 @@ export function Navbar() {
                 </Link>
               </NavigationMenuLink>
             </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link
+                  href="/agents"
+                  className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50"
+                >
+                  Agents
+                </Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
             <NavigationMenuItem>
               <NavigationMenuLink asChild>
                 <Link
@@ -192,6 +202,13 @@ export function Navbar() {
             >
               Docs
             </Link>
+            <Link
+              href="/agents"
+              className="text-sm font-medium"
+              onClick={() => setIsOpen(false)}
+            >
+              Agents
+            </Link>
             <Link
               href="/pricing"
               className="text-sm font-medium"

web/lib/brand.ts

@@ -13,6 +13,7 @@ export type BrandConfig = {
   apiUrl: string
   wsUrl: string
   statusUrl: string
+  skillsOrg: string          // GitHub org for skills repo (e.g., "bootnode", "hanzoai")
   defaultTheme: "light" | "dark"
   colors: {
     primary: string
@@ -51,6 +52,7 @@ const brands: Record<string, BrandConfig> = {
     apiUrl: "https://api.bootno.de",
     wsUrl: "wss://ws.bootno.de",
     statusUrl: "https://status.bootno.de",
+    skillsOrg: "bootnode",
     defaultTheme: "light",
     colors: {
       primary: "#000000",
@@ -84,6 +86,7 @@ const brands: Record<string, BrandConfig> = {
     apiUrl: "https://api.web3.hanzo.ai",
     wsUrl: "wss://ws.web3.hanzo.ai",
     statusUrl: "https://status.hanzo.ai",
+    skillsOrg: "hanzoai",
     defaultTheme: "dark",
     colors: {
       primary: "#fd4444",
@@ -121,6 +124,7 @@ const brands: Record<string, BrandConfig> = {
     apiUrl: "https://api.cloud.lux.network",
     wsUrl: "wss://ws.cloud.lux.network",
     statusUrl: "https://status.lux.network",
+    skillsOrg: "luxfi",
     defaultTheme: "dark",
     colors: {
       primary: "#ffffff",
@@ -158,6 +162,7 @@ const brands: Record<string, BrandConfig> = {
     apiUrl: "https://api.web3.zoo.ngo",
     wsUrl: "wss://ws.web3.zoo.ngo",
     statusUrl: "https://status.zoo.ngo",
+    skillsOrg: "zooai",
     defaultTheme: "dark",
     colors: {
       primary: "#00cc66",
@@ -182,6 +187,41 @@ const brands: Record<string, BrandConfig> = {
       { name: "GitHub", href: "https://github.com/zooai", external: true },
     ],
   },
+  pars: {
+    name: "Pars Cloud",
+    tagline: "Sovereign L1 Infrastructure",
+    description: "Sovereign blockchain infrastructure for the Pars Network ecosystem.",
+    logo: "/logo/pars-logo.svg",
+    logoIcon: "/logo/pars-icon.svg",
+    logoWhite: "/logo/pars-logo-white.svg",
+    favicon: "/logo/pars-icon.svg",
+    domain: "cloud.pars.network",
+    apiUrl: "https://api.cloud.pars.network",
+    wsUrl: "wss://ws.cloud.pars.network",
+    statusUrl: "https://status.pars.network",
+    skillsOrg: "parsnetwork",
+    defaultTheme: "dark",
+    colors: {
+      primary: "#00abff",
+      primaryForeground: "#ffffff",
+      accent: "#00abff",     // pars blue
+      accentEnd: "#F59E0B",  // amber
+    },
+    social: {
+      twitter: "https://twitter.com/parsnetwork",
+      github: "https://github.com/parsnetwork",
+    },
+    iam: {
+      url: "https://pars.id",
+      clientId: "pars-web3",
+      domain: "pars.id",
+    },
+    footerLinks: [
+      { name: "Pars Network", href: "https://pars.network", external: true },
+      { name: "Pars Explorer", href: "https://explore.pars.network", external: true },
+      { name: "GitHub", href: "https://github.com/parsnetwork", external: true },
+    ],
+  },
 }
 
 // Get brand from domain auto-detection or environment fallback
@@ -190,8 +230,9 @@ function getBrandKey(): string {
   if (typeof window !== "undefined") {
     const hostname = window.location.hostname
     if (hostname.includes("lux.cloud") || hostname.includes("lux.network")) return "lux"
-    if (hostname.includes("zoo.ngo") || hostname.includes("zoo.id")) return "zoo"
+    if (hostname.includes("zoo.ngo") || hostname.includes("zoo.network")) return "zoo"
-    if (hostname.includes("hanzo.ai")) return "hanzo"
+    if (hostname.includes("pars.network") || hostname.includes("pars.id")) return "pars"
+    if (hostname.includes("hanzo.ai") || hostname.includes("hanzo.network")) return "hanzo"
     if (hostname.includes("bootno.de") || hostname.includes("bootnode.io")) return "bootnode"
   }