merchant landing: add GOA shop samples block

Show exploration goods (stickers, coffee, caps, passes, …) with GOA prices.
This commit is contained in:
Hernâni Marques 2026-07-10 19:08:00 +02:00
parent 6cb4064a3a
commit 39dedc76ff
No known key found for this signature in database

View file

@ -231,6 +231,39 @@
font-family: ui-monospace, Menlo, monospace; font-size: 0.86em;
background: rgba(0,0,0,0.35); padding: 0.1em 0.35em; border-radius: 4px; color: #e9d5ff;
}
.shop-box {
background: rgba(24, 18, 40, 0.65);
border: 1px solid rgba(167, 139, 250, 0.38);
border-radius: 16px;
padding: 1.15rem 1.1rem 1.25rem;
margin: 0 0 1.2rem;
}
.shop-box h2 {
margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center;
}
.shop-box .shop-lead {
margin: 0 0 0.85rem; text-align: center; font-size: 0.9rem; color: var(--muted);
}
.shop-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem;
}
@media (min-width: 420px) { .shop-grid { grid-template-columns: 1fr 1fr 1fr; } }
.shop-item {
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(167, 139, 250, 0.28);
border-radius: 12px;
padding: 0.65rem 0.55rem 0.7rem;
text-align: center; min-width: 0;
}
.shop-item .emoji { display: block; font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.25rem; }
.shop-item .name {
display: block; font-size: 0.8rem; font-weight: 700; color: #faf5ff; line-height: 1.25;
}
.shop-item .price {
display: block; margin-top: 0.25rem; font-size: 0.82rem; font-weight: 750;
color: #c4b5fd; font-variant-numeric: tabular-nums;
}
</style>
</head>
<body>
@ -246,6 +279,58 @@
</p>
</header>
<aside class="shop-box" aria-labelledby="shop-title">
<h2 id="shop-title">GOA shop · samples</h2>
<p class="shop-lead">Typical exploration goods — pay with GOA in the wallet</p>
<div class="shop-grid">
<div class="shop-item">
<span class="emoji" aria-hidden="true">🪐</span>
<span class="name">Orbit sticker pack</span>
<span class="price">GOA:2</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true"></span>
<span class="name">Nebula coffee</span>
<span class="price">GOA:5</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🎧</span>
<span class="name">Voidwave playlist</span>
<span class="price">GOA:8</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🧢</span>
<span class="name">Comet cap</span>
<span class="price">GOA:15</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🛸</span>
<span class="name">Shuttle day pass</span>
<span class="price">GOA:25</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">📡</span>
<span class="name">Beacon badge</span>
<span class="price">GOA:3</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🛰️</span>
<span class="name">Relay pin</span>
<span class="price">GOA:4</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🕶️</span>
<span class="name">Eclipse shades</span>
<span class="price">GOA:12</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">📜</span>
<span class="name">Star chart print</span>
<span class="price">GOA:7</span>
</div>
</div>
</aside>
<section class="stats" id="stats" aria-labelledby="stats-title">
<h2 id="stats-title">Merchant stats</h2>
<p class="note">From merchant DB · dual currency side by side</p>