hero: value-prop subline + clear CTAs (0.50.0)

- 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
This commit is contained in:
artheru 2026-06-10 07:26:58 +08:00
parent 4a6ee29a2e
commit c9956fbd3f
4 changed files with 16 additions and 4 deletions

View File

@ -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" />

View File

@ -1,6 +1,6 @@
{
"name": "amerc-site",
"version": "0.49.0-demo",
"version": "0.50.0-hero",
"private": true,
"type": "module",
"scripts": {

View File

@ -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>

View File

@ -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); }