Docs: Yano Wallet page and landing spotlight

docs/components/landing/Architecture.jsx

@@ -33,13 +33,14 @@ const TOOLS = [
   { name: "Yaci CLI", sub: "create-node · topup · tip", c: EMBER },
   { name: "Admin API", sub: ":10000 · REST · Swagger", c: AMBER },
   { name: "Yaci Viewer", sub: ":5173 · block explorer", c: CYAN },
+  { name: "Yano Wallet", sub: "desktop wallet · CIP-30", c: BLUE },
   { name: "CIP-30 wallet", sub: "window.cardano.yacidevkit", c: MINT },
   { name: "MCP server", sub: ":10000/mcp · AI agents", c: PINK },
 ];
 const TOOL_X = 930;
 const TOOL_W = 210;
-const TOOL_H = 52;
-const toolY = (i) => 56 + i * 66;
+const TOOL_H = 48;
+const toolY = (i) => 54 + i * 58;
 
 const curve = (x1, y1, x2, y2) => {
   const mx = (x1 + x2) / 2;
@@ -96,7 +97,7 @@ export default function Architecture() {
             Off-chain SDKs such as MeshJS, Evolution SDK, Lucid Evolution, Cardano Client Lib, PyCardano and Sutra
             connect to the devnet through Yaci Store's Blockfrost-compatible API, Ogmios, Kupo and the Submit API. The
             local devnet runs Yano and cardano-node, in companion or yano-only mode. The Yaci CLI, admin API, Yaci
-            Viewer, the CIP-30 wallet and the MCP server let you operate it.
+            Viewer, Yano Wallet, the CIP-30 wallet and the MCP server let you operate it.
           </desc>
           <defs>
             <linearGradient id="dk-core-stroke" x1="0" y1="0" x2="1" y2="1">
@@ -138,7 +139,7 @@ export default function Architecture() {
           <Wire d={curve(API_X + API_W, 379, cx, 330)} color={MINT} dur={2} delay={0.3} />
 
           {TOOLS.map((t, i) => (
-            <Wire key={t.name} d={curve(TOOL_X, toolY(i) + TOOL_H / 2, cx + cw, 120 + i * 62)} color={t.c} dur={2.3} delay={i * 0.3} />
+            <Wire key={t.name} d={curve(TOOL_X, toolY(i) + TOOL_H / 2, cx + cw, 112 + i * 56)} color={t.c} dur={2.3} delay={i * 0.3} />
           ))}
 
           {/* 01 · SDKs */}
@@ -279,18 +280,18 @@ export default function Architecture() {
             return (
               <g key={t.name}>
                 <rect className="node-bg" x={TOOL_X} y={y} width={TOOL_W} height={TOOL_H} rx="12" />
-                <rect x={TOOL_X} y={y + 15} width="3" height="22" rx="1.5" fill={t.c} />
-                <text className="node-title sm" x={TOOL_X + 18} y={y + 23}>
+                <rect x={TOOL_X} y={y + 13} width="3" height="22" rx="1.5" fill={t.c} />
+                <text className="node-title sm" x={TOOL_X + 18} y={y + 21}>
                   {t.name}
                 </text>
-                <text className="node-sub" x={TOOL_X + 18} y={y + 40}>
+                <text className="node-sub" x={TOOL_X + 18} y={y + 37}>
                   {t.sub}
                 </text>
               </g>
             );
           })}
           <text className="node-sub faint" x={TOOL_X + TOOL_W / 2} y="426" textAnchor="middle">
-            terminal · browser · AI agent
+            terminal · browser · desktop · AI agent
           </text>
         </svg>
       </div>

docs/components/landing/Landing.jsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { Inter, JetBrains_Mono, Space_Grotesk } from "next/font/google";
 import Architecture from "./Architecture";
 import HeroConsole from "./HeroConsole";
+import YanoWalletArt from "./YanoWalletArt";
 import { BlockfrostTerm, BlockSpeed, CatchUpArt, ForkArt, McpChat, NodeModes, WalletArt } from "./FeatureArt";
 import { useGithubStars, useReveal, useScrolled, useTheme } from "./hooks";
 import {
@@ -43,6 +44,7 @@ const GITHUB_URL = `https://github.com/${GITHUB_REPO}`;
 const RELEASE_URL = `${GITHUB_URL}/releases/tag/${VERSION}`;
 const DISCORD_URL = "https://discord.gg/JtQ54MSw6p";
 const X_URL = "https://x.com/bloxbean";
+const YANO_WALLET_URL = "https://github.com/bloxbean/yano-wallet";
 
 const formatStars = (n) => (n >= 1000 ? `${(n / 1000).toFixed(1).replace(/\.0$/, "")}k` : String(n));
 
@@ -93,6 +95,7 @@ function Nav({ theme, onToggleTheme, stars }) {
         <nav className="dk-nav-links" aria-label="Primary">
           <a href="#how-it-works">How it works</a>
           <a href="#features">Features</a>
+          <a href="#yano-wallet">Yano Wallet</a>
           <a href="#get-started">Get started</a>
           <a href="#whats-new">What&apos;s new</a>
           <Link href="/introduction">Docs</Link>
@@ -270,7 +273,7 @@ function HowItWorks() {
           }
         >
           Your off-chain code talks to the same APIs it uses on mainnet. DevKit runs the chain underneath, indexes
-          every block, and gives you a CLI, an admin API, a wallet and an explorer to drive it.
+          every block, and gives you a CLI, an admin API, wallets and an explorer to drive it.
         </SectionHead>
         <div className="dk-arch-card dk-reveal">
           <Architecture />
@@ -301,6 +304,144 @@ function FeatureCard({ span, accent, icon, badge, title, text, link, children, d
   );
 }
 
+/* ------------------------------------------------------------------ */
+
+const YW_POINTS = [
+  "Create or restore wallets, with multiple accounts",
+  "A CIP-30 browser connector: window.cardano.yano",
+  "Simulate before you sign: see what a transaction does first",
+  "Native assets, staking and governance votes",
+];
+
+/* Step 1 depends on how DevKit was installed. Yaci Viewer only ships in Docker; elsewhere it's an optional npm package. */
+const YW_START = [
+  { id: "native", label: "Homebrew · npm", lines: [["$", "yaci-devkit up --enable-yaci-store"]] },
+  { id: "zip", label: "Zip", lines: [["$", "./yaci-cli up --enable-yaci-store"]] },
+  {
+    id: "docker",
+    label: "Docker",
+    lines: [
+      ["$", "devkit start"],
+      ["yaci-cli:>", "create-node -o --start"],
+    ],
+    docker: true,
+  },
+];
+
+const YW_STEPS = [
+  { cmd: "brew install --cask bloxbean/tap/yano-wallet", note: "macOS · other platforms on GitHub" },
+  { cmd: "Connect → Yaci DevKit → localhost:8080", note: "then topup your address", plain: true },
+  { cmd: "Settings → Browser connector", note: "for dApps: load the connector extension, then install Native Messaging", plain: true },
+];
+
+function YanoWallet() {
+  const [copiedAt, setCopiedAt] = useState(-1);
+  const [startAt, setStartAt] = useState(0);
+  const start = YW_START[startAt];
+  const copy = async (i, text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedAt(i);
+      setTimeout(() => setCopiedAt(-1), 1600);
+    } catch {}
+  };
+
+  return (
+    <section id="yano-wallet" className="dk-section">
+      <div className="dk-container">
+        <div className="dk-yw dk-reveal">
+          <div className="dk-yw-copy">
+            <div className="dk-yw-kicker">
+              <span className="tag">Preview</span>
+              Works with Yano Wallet
+            </div>
+            <h2 className="dk-h2">
+              Sign with a <span className="dk-gradient-text">real wallet</span>
+            </h2>
+            <p className="dk-sub">
+              Yano Wallet is a desktop Cardano wallet designed for your custom devnet. Pick <b>Yaci DevKit</b> on its
+              Connect screen and it runs on your devnet&apos;s Yaci Store, so you can approve your dApp&apos;s
+              transactions in a real wallet before you ship.
+            </p>
+            <ul className="dk-yw-points">
+              {YW_POINTS.map((p) => (
+                <li key={p}>
+                  <Check /> {p}
+                </li>
+              ))}
+            </ul>
+            <ol className="dk-yw-steps">
+              <li className="start">
+                <span className="n">1</span>
+                <span className="cmd">
+                  <span className="dk-yw-switch" role="group" aria-label="How you installed Yaci DevKit">
+                    {YW_START.map((o, i) => (
+                      <button key={o.id} type="button" aria-pressed={i === startAt} onClick={() => setStartAt(i)}>
+                        {o.label}
+                      </button>
+                    ))}
+                  </span>
+                  <code key={start.id} className="dk-fade-swap">
+                    {start.lines.map(([prompt, line]) => (
+                      <span key={line} className="line">
+                        <span className="p">{prompt} </span>
+                        {line}
+                      </span>
+                    ))}
+                  </code>
+                  <span className="note">
+                    {start.docker ? "start a devnet · Yaci Store and Yaci Viewer are included" : "start a devnet with Yaci Store"}
+                  </span>
+                  {!start.docker && (
+                    <span className="note">
+                      Viewer (optional): <b>npm i -g @bloxbean/yaci-viewer</b>
+                    </span>
+                  )}
+                </span>
+                <button
+                  type="button"
+                  className="dk-copy"
+                  onClick={() => copy(0, start.lines.filter(([prompt]) => prompt === "$").map(([, line]) => line).join("\n"))}
+                  aria-label={`Copy: ${start.lines[0][1]}`}
+                >
+                  {copiedAt === 0 ? <Check /> : <Copy />}
+                </button>
+              </li>
+              {YW_STEPS.map((st, i) => (
+                <li key={st.cmd}>
+                  <span className="n">{i + 2}</span>
+                  <span className="cmd">
+                    <code>
+                      {!st.plain && <span className="p">$ </span>}
+                      {st.cmd}
+                    </code>
+                    <span className="note">{st.note}</span>
+                  </span>
+                  {!st.plain && (
+                    <button type="button" className="dk-copy" onClick={() => copy(i + 1, st.cmd)} aria-label={`Copy: ${st.cmd}`}>
+                      {copiedAt === i + 1 ? <Check /> : <Copy />}
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ol>
+            <div className="dk-yw-cta">
+              <Link href="/yano-wallet" className="dk-btn dk-btn-primary">
+                Set it up <ArrowRight />
+              </Link>
+              <a href={YANO_WALLET_URL} target="_blank" rel="noopener noreferrer" className="dk-btn dk-btn-ghost">
+                <GitHub /> yano-wallet
+              </a>
+            </div>
+            <p className="dk-yw-note">Preview release, for local devnets and test networks only.</p>
+          </div>
+          <YanoWalletArt />
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function Features() {
   return (
     <section id="features" className="dk-section">
@@ -505,8 +646,8 @@ function RunItYourWay() {
             </>
           }
         >
-          Four distributions, one CLI. Pick the one that fits your machine or your pipeline. They all share
-          <code className="dk-inline-code">~/.yaci-cli</code>.
+          Four distributions, one CLI. Pick the one that fits your machine or your pipeline. Homebrew, npm and Zip
+          share <code className="dk-inline-code">~/.yaci-cli</code>; Docker keeps its data in a Docker volume.
         </SectionHead>
 
         <div className="dk-run dk-reveal">
@@ -717,6 +858,7 @@ export default function Landing() {
         <Hero />
         <Stack />
         <HowItWorks />
+        <YanoWallet />
         <Features />
         <RunItYourWay />
         <WhatsNew />