bank landing: GOA shop after withdraw, compact withdraw

Shop stays always visible after the one-step withdraw card.

configs/bank-landing/README.md

@@ -17,13 +17,14 @@ point merchants at `taler.hacktivism.ch`.
 ## Page layout (top → bottom)
 
 1. Hero (badge, short shared-account line)  
-2. **Get the wallet** — Play / F-Droid / iOS / web hub (Chrome · Firefox · Opera · Ubuntu Touch; gold+blue icons, [taler.net wallet](https://www.taler.net/de/wallet.html))  
+2. **Get the wallet** — Play / F-Droid / iOS / web hub (Chrome · Firefox · Opera · Ubuntu Touch; solid blue icons, [taler.net wallet](https://www.taler.net/de/wallet.html))  
-3. **Withdraw GOA** — QR_Taler frame (blue ring + logo), open CTA, live pool balance note  
+3. **Withdraw GOA** — compact QR_Taler, open CTA, live pool balance note, generate-own-account link  
-4. **How the shared account works** — collapsed fold (click to expand)  
+4. **GOA shop · samples** — always visible (2 products + merchant link)  
-5. **Optional · bank UI & GOA shop** — collapsed fold: auto-create account + credentials + QR_Taler for bank UI; mini shop  
+5. **How the shared account works** — collapsed fold (click to expand)  
-6. **GOA flow** stats  
+6. **Optional · own bank account** — collapsed fold: auto-create account + credentials + QR_Taler for bank UI  
-7. **Performance**  
+7. **GOA flow** stats  
-8. Footer  
+8. **Performance**  
+9. Footer  
 
 ## User flow (documented on the page)
 

configs/bank-landing/index.html

@@ -163,6 +163,63 @@
     }
     .step-card.step-money {
       border-color: rgba(62, 207, 191, 0.4);
+      padding: 1rem 1.05rem 1.05rem;
+      margin-bottom: 1rem;
+    }
+    .step-card.step-money h2 {
+      font-size: 1.15rem;
+      margin: 0 0 0.15rem;
+    }
+    .step-card.step-money .step-num {
+      width: 1.75rem;
+      height: 1.75rem;
+      font-size: 1rem;
+      margin-right: 0.4rem;
+    }
+    .step-card.step-money .step-tagline {
+      margin: 0 0 0.65rem;
+      font-size: 0.88rem;
+    }
+    .step-card.step-money .step-body {
+      gap: 0.5rem;
+    }
+    .step-card.step-money .qr-taler-wrap {
+      max-width: 200px;
+    }
+    .step-card.step-money .qr-taler-wrap .goa-pay-taler-qr {
+      margin-bottom: 0.3rem;
+      max-width: 200px;
+      padding: 7px;
+      border-radius: 16px;
+    }
+    .step-card.step-money .goa-pay-taler-qr__inner {
+      padding: 7px;
+      border-radius: 14px;
+      min-height: 0;
+    }
+    .step-card.step-money .qr-label {
+      margin-top: 0;
+      font-size: 0.78rem;
+    }
+    .step-card.step-money .cta {
+      font-size: 0.92rem;
+      padding: 0.55rem 1.05rem;
+      border-radius: 10px;
+    }
+    .step-card.step-money a.meta-uri {
+      margin: 0.1rem 0 0;
+      font-size: 0.68rem;
+      max-width: 20rem;
+    }
+    .step-card.step-money .balance-note {
+      margin: 0.35rem 0 0;
+      padding: 0.4rem 0.55rem;
+      font-size: 0.76rem;
+      line-height: 1.35;
+    }
+    .step-card.step-money button.gen-own-acct {
+      margin-top: 0.05rem;
+      font-size: 0.76rem;
     }
     .step-num {
       display: inline-flex;
@@ -825,10 +882,10 @@
       </div>
     </section>
 
-    <!-- ========== STEP 2: one-click community pool withdraw ========== -->
+    <!-- ========== STEP 2: one-click community pool withdraw (compact) ========== -->
     <section class="step-card step-money" id="withdraw" aria-labelledby="step2-title">
       <h2 id="step2-title"><span class="step-num">2</span> Withdraw GOA</h2>
-      <p class="step-tagline">One QR · shared account · no registration</p>
+      <p class="step-tagline">One QR · shared pool · no registration</p>
       <div class="step-body">
         <div class="qr-taler-wrap">
           <div class="goa-pay-taler-qr" id="qr-withdraw-demo-wrap">
@@ -852,6 +909,27 @@
       </div>
     </section>
 
+    <!-- ========== GOA shop (after withdraw, always visible) ========== -->
+    <aside class="shop-box" aria-labelledby="shop-title">
+      <h2 id="shop-title">GOA shop · samples</h2>
+      <p class="shop-lead">Tap → pay link · more at merchant</p>
+      <div class="shop-grid">
+        <button type="button" class="shop-item" data-product="orbit-sticker">
+          <span class="emoji" aria-hidden="true">🪐</span>
+          <span class="name">Orbit sticker pack</span>
+          <span class="price">GOA:2</span>
+        </button>
+        <button type="button" class="shop-item" data-product="nebula-coffee">
+          <span class="emoji" aria-hidden="true">☕</span>
+          <span class="name">Nebula coffee</span>
+          <span class="price">GOA:5</span>
+        </button>
+      </div>
+      <p class="shop-foot">
+        <a href="https://taler.hacktivism.ch/intro/">For more → taler.hacktivism.ch</a>
+      </p>
+    </aside>
+
     <div class="how-fold" id="how-fold">
       <button type="button" class="how-fold-toggle" id="how-fold-toggle"
               aria-expanded="false" aria-controls="how-fold-body">
@@ -868,11 +946,11 @@
       </div>
     </div>
 
-    <!-- ========== Optional bank UI + mini GOA shop (collapsed) ========== -->
+    <!-- ========== Optional: own bank UI account (collapsed) ========== -->
     <div class="more-section" id="more-fold">
       <button type="button" class="more-fold-toggle" id="more-fold-toggle"
               aria-expanded="false" aria-controls="more-fold-body">
-        <span class="more-fold-toggle-text">Optional · bank UI &amp; GOA shop</span>
+        <span class="more-fold-toggle-text">Optional · own bank account</span>
         <span class="more-fold-chevron" aria-hidden="true">›</span>
       </button>
       <div class="more-fold-body" id="more-fold-body" hidden>
@@ -925,26 +1003,6 @@
             </button>
           </div>
         </div>
-
-        <aside class="shop-box shop-mini" aria-labelledby="shop-title" style="margin-top:1rem">
-          <h2 id="shop-title">GOA shop · samples</h2>
-          <p class="shop-lead">Tap → pay link · more at merchant</p>
-          <div class="shop-grid">
-            <button type="button" class="shop-item" data-product="orbit-sticker">
-              <span class="emoji" aria-hidden="true">🪐</span>
-              <span class="name">Orbit sticker pack</span>
-              <span class="price">GOA:2</span>
-            </button>
-            <button type="button" class="shop-item" data-product="nebula-coffee">
-              <span class="emoji" aria-hidden="true">☕</span>
-              <span class="name">Nebula coffee</span>
-              <span class="price">GOA:5</span>
-            </button>
-          </div>
-          <p class="shop-foot">
-            <a href="https://taler.hacktivism.ch/intro/">For more → taler.hacktivism.ch</a>
-          </p>
-        </aside>
       </div>
     </div>
 
@@ -1071,10 +1129,10 @@
       };
       imgEl.style.display = "";
     }
-    function makeQr(el, text, logoEl) {
+    function makeQr(el, text, logoEl, sizeOpt) {
       if (!el) return;
       el.innerHTML = "";
-      var size = 220;
+      var size = sizeOpt || 220;
       if (!text) {
         el.innerHTML = '<p style="padding:1rem;color:#666;font-size:0.85rem">…</p>';
         return;
@@ -1158,7 +1216,8 @@
       makeQr(
         document.getElementById("qr-withdraw-demo"),
         uri,
-        document.getElementById("qr-withdraw-demo-logo")
+        document.getElementById("qr-withdraw-demo-logo"),
+        176
       );
     }