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:
parent
4a6ee29a2e
commit
c9956fbd3f
@ -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" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "amerc-site",
|
||||
"version": "0.49.0-demo",
|
||||
"version": "0.50.0-hero",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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); }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user