From c9956fbd3f27eb113b28499baec73667f3567213 Mon Sep 17 00:00:00 2001
From: artheru <artheru@gmail.com>
Date: Wed, 10 Jun 2026 07:26:58 +0800
Subject: [PATCH] hero: value-prop subline + clear CTAs (0.50.0)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- replace the game-instruction subline with the actual value proposition
  (chatbox / web terminal / public URL · no infrastructure, just skills)
- add prominent hero CTAs: gold primary 'Browse Agents', outlined secondary
  'Publish yours' — visitors no longer have to discover the scene is clickable
- Georgia-styled buttons with hover lift, sit below the animated tavern
- verified live: both CTAs + value prop render
---
 index.html      | 2 +-
 package.json    | 2 +-
 src/Scene2D.jsx | 8 ++++++--
 src/styles.css  | 8 ++++++++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 4f1d1be..c5eb0e7 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0e0a14" />
     <meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
-    <meta name="version" content="0.49.0-demo" />
+    <meta name="version" content="0.50.0-hero" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
diff --git a/package.json b/package.json
index 212ca2f..00c8069 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "amerc-site",
-  "version": "0.49.0-demo",
+  "version": "0.50.0-hero",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/Scene2D.jsx b/src/Scene2D.jsx
index 8d87c1a..44d804a 100644
--- a/src/Scene2D.jsx
+++ b/src/Scene2D.jsx
@@ -7,7 +7,7 @@ import Account from './Account.jsx';
 import TavernGame from './TavernGame.jsx';
 import { api } from './api.js';
 
-const RELEASE = '0.49.0-demo';
+const RELEASE = '0.50.0-hero';
 
 const NAV = [
   { id: 'home', label: 'Tavern' },
@@ -106,7 +106,11 @@ function Home({ setRoute }) {
         <div className="gm-stage"><TavernGame onHotspot={setRoute} /></div>
         <div className="gm-caption">
           <h1>Hire agents like mercenaries.</h1>
-          <p>Walk into the tavern — talk to the <b>screen</b> to browse staff, or step to the floor to open <b>your booth</b>.</p>
+          <p>Hire, run, and deliver AI agents across any software boundary — as an embedded chatbox, a live web terminal, or a public URL. <b>No infrastructure, just skills.</b></p>
+          <div className="gm-cta">
+            <button className="gm-cta-btn gm-cta-primary" onClick={() => setRoute('agents')}>Browse Agents →</button>
+            <button className="gm-cta-btn gm-cta-secondary" onClick={() => setRoute('booth')}>Publish yours</button>
+          </div>
           {stats && (
             <div className="hero-live">
               <span><b><Count n={stats.classes} /></b> classes</span>
diff --git a/src/styles.css b/src/styles.css
index 6448914..683631e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1348,3 +1348,11 @@ button {
 .cd-send { color: #27d8ff; font-size: 14px; }
 @media (max-width: 760px) { .hf-demo { grid-template-columns: 1fr; gap: 18px; } }
 @media (prefers-reduced-motion: reduce) { .cd-msg { animation: none; } .cd-typing span { animation: none; } }
+
+/* hero CTAs (0.50) */
+.gm-cta { display: flex; gap: 12px; justify-content: center; margin: 12px 0 8px; flex-wrap: wrap; }
+.gm-cta-btn { font-family: Georgia, "Times New Roman", serif; font-size: clamp(12.5px, 1.25vw, 15px); padding: 10px 22px; border-radius: 10px; cursor: pointer; border: none; transition: transform .15s, box-shadow .15s, background .15s; }
+.gm-cta-primary { background: linear-gradient(180deg, #f3d27a, #d9a948); color: #2a1303; box-shadow: 0 6px 18px rgba(243,210,122,0.28), inset 0 1px 0 rgba(255,255,255,0.45); font-weight: 600; }
+.gm-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(243,210,122,0.42); }
+.gm-cta-secondary { background: rgba(18,12,28,0.66); color: #ecdfc6; box-shadow: inset 0 0 0 1.5px rgba(243,210,122,0.5); backdrop-filter: blur(2px); }
+.gm-cta-secondary:hover { background: rgba(42,30,58,0.85); color: #fff; transform: translateY(-2px); }