ux: improve demo onboarding

frontend/src/pages/demo.astro

@@ -17,16 +17,26 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
         A governance platform cannot be understood from screenshots or empty interfaces. 
         Explore a live instance with real communities, ongoing decisions, and visible history.
       </p>
+
+      <div class="demo-primary-actions">
+        <a href={`/demo?enter=1${nextQuery || '&next=%2Fcommunities'}`} class="ui-btn ui-btn-primary ui-btn-xl">Enter the Demo</a>
+        <a href="/demo?enter=1&next=%2Fcommunities" class="ui-btn ui-btn-secondary ui-btn-xl">Browse Communities</a>
+      </div>
+      <p class="demo-primary-hint">No registration required to browse. Use a demo account below to vote and participate.</p>
     </header>
 
-    ${nextParam ? `
+    {nextParam ? (
       <div class="demo-status-banner" id="demo-continue">
         <p>
-          You were trying to open <code>${nextParam.replace(/</g, '&lt;')}</code>.
+          You were trying to open <code>{nextParam}</code>.
           Enter the demo to continue.
         </p>
+        <div class="state-actions">
+          <a href={`/demo?enter=1${nextQuery}`} class="ui-btn ui-btn-primary">Continue</a>
+          <a href="/demo" class="ui-btn ui-btn-secondary">Stay on the demo page</a>
+        </div>
       </div>
-    ` : ''}
+    ) : null}
 
     <div class="demo-status-banner" id="demo-status">
       <p>Loading demo status...</p>
@@ -313,6 +323,21 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     line-height: 1.6;
   }
 
+  .demo-primary-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 1.75rem;
+  }
+
+  .demo-primary-hint {
+    margin: 1rem auto 0;
+    max-width: 70ch;
+    color: var(--color-text-muted);
+    font-size: 0.9375rem;
+  }
+
   @media (max-width: 640px) {
     .lead {
       font-size: 1.05rem;
@@ -343,6 +368,10 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     margin-top: 2rem;
   }
 
+  .start-grid .state-card {
+    grid-column: 1 / -1;
+  }
+
   @media (max-width: 900px) {
     .start-grid {
       grid-template-columns: 1fr;
@@ -826,6 +855,20 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     margin: 0;
     font-size: 0.9375rem;
   }
+
+  .demo-status-banner .hint {
+    margin-top: 0.5rem;
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+  }
+
+  .state-actions {
+    margin-top: 1.25rem;
+    display: flex;
+    gap: 0.75rem;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
 </style>
 
 <script define:vars={{ API_BASE }}>
@@ -857,7 +900,20 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     if (!grid) return;
 
     if (!cards || !cards.length) {
-      grid.innerHTML = '<div class="start-card ui-card ui-card-pad-lg"><p class="loading-text">No journeys available.</p></div>';
+      grid.innerHTML =
+        '<div class="state-card ui-card">' +
+          '<p class="empty">No journeys available.</p>' +
+          '<p class="hint">You can still enter the demo and browse communities.</p>' +
+          '<div class="state-actions">' +
+            '<a class="ui-btn ui-btn-primary" href="/demo?enter=1&next=%2Fcommunities">Enter the Demo</a>' +
+            '<button type="button" class="ui-btn ui-btn-secondary" id="retry-journeys">Retry</button>' +
+          '</div>' +
+        '</div>';
+
+      var retry = document.getElementById('retry-journeys');
+      if (retry) {
+        retry.addEventListener('click', loadSuggestedJourneys);
+      }
       return;
     }
 
@@ -1012,11 +1068,24 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
       // Update demo status indicator if needed
       const statusBanner = document.getElementById('demo-status');
       if (statusBanner) {
+        const nextTarget = nextPath || '/communities';
+        const enterHref = '/demo?enter=1&next=' + encodeURIComponent(nextTarget);
+
         if (status.demo_mode) {
-          statusBanner.innerHTML = '<p>✓ Demo mode is active. Explore freely!</p>';
+          statusBanner.innerHTML =
+            '<p>✓ Demo mode is active. Explore freely!</p>' +
+            '<div class="state-actions">' +
+              '<a class="ui-btn ui-btn-primary" href="' + enterHref + '">Enter the Demo</a>' +
+              '<a class="ui-btn ui-btn-secondary" href="/demo?enter=1&next=%2Fcommunities">Browse Communities</a>' +
+            '</div>';
           statusBanner.classList.remove('inactive');
         } else {
-          statusBanner.innerHTML = '<p>Demo mode is not currently enabled on this instance.</p>';
+          statusBanner.innerHTML =
+            '<p>Demo mode is not currently enabled on this instance.</p>' +
+            '<p class="hint">You can still explore Likwid on the public site.</p>' +
+            '<div class="state-actions">' +
+              '<a class="ui-btn ui-btn-secondary" href="/">Back to home</a>' +
+            '</div>';
           statusBanner.classList.add('inactive');
         }
       }
@@ -1042,6 +1111,26 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
       }
     } catch (error) {
       console.log('Demo API not available:', error.message);
+
+      const statusBanner = document.getElementById('demo-status');
+      if (statusBanner) {
+        statusBanner.innerHTML =
+          '<p>Could not load demo status.</p>' +
+          '<p class="hint">Please try again.</p>' +
+          '<div class="state-actions">' +
+            '<button type="button" class="ui-btn ui-btn-secondary" id="retry-demo-status">Retry</button>' +
+          '</div>';
+        statusBanner.classList.add('inactive');
+
+        const retryBtn = document.getElementById('retry-demo-status');
+        if (retryBtn) {
+          retryBtn.addEventListener('click', function() {
+            loadDemoData();
+            loadSuggestedJourneys();
+          });
+        }
+      }
+
       // Show fallback stats
       ['stats-aurora', 'stats-civic-commons', 'stats-makers'].forEach(function(id) {
         const el = document.getElementById(id);