From ba659eef80dfa6755d2d97313b3c58855541722c Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 09:59:48 +0100
Subject: [PATCH] ux: migrate demo cards to ui-card primitives

---
 .../components/ui/DesignSystemStyles.astro    |  8 +++
 frontend/src/pages/demo.astro                 | 56 ++++++-------------
 2 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index f095861..98374df 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -469,6 +469,14 @@
     padding: 1.1rem;
   }
 
+  .ui-card-pad-lg {
+    padding: 1.5rem;
+  }
+
+  .ui-card-pad-xl {
+    padding: 2rem;
+  }
+
   .ui-card-interactive {
     transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
   }
diff --git a/frontend/src/pages/demo.astro b/frontend/src/pages/demo.astro
index 713894a..06d9b2b 100644
--- a/frontend/src/pages/demo.astro
+++ b/frontend/src/pages/demo.astro
@@ -56,7 +56,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
       </p>
 
       <div class="community-cards" id="community-cards">
-        <div class="community-card">
+        <div class="community-card ui-card ui-card-pad-lg ui-card-interactive">
           <div class="card-header">
             <h3>Aurora Framework</h3>
             <span class="card-tag">Open Source Project</span>
@@ -72,7 +72,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
           <a href="/demo?enter=1&next=/communities/aurora" class="card-link">Explore Aurora →</a>
         </div>
 
-        <div class="community-card">
+        <div class="community-card ui-card ui-card-pad-lg ui-card-interactive">
           <div class="card-header">
             <h3>Civic Commons Network</h3>
             <span class="card-tag">Political Movement</span>
@@ -88,7 +88,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
           <a href="/demo?enter=1&next=/communities/civic-commons" class="card-link">Explore Civic Commons →</a>
         </div>
 
-        <div class="community-card">
+        <div class="community-card ui-card ui-card-pad-lg ui-card-interactive">
           <div class="card-header">
             <h3>Regional Makers Collective</h3>
             <span class="card-tag">Federation</span>
@@ -110,7 +110,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
       <h2>How to Explore</h2>
       
       <div class="access-modes">
-        <div class="access-mode">
+        <div class="access-mode ui-card ui-card-pad-xl">
           <div class="mode-icon">👁️</div>
           <h4>Browse Freely</h4>
           <p>
@@ -120,7 +120,7 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
           <a href="/demo?enter=1&next=/communities" class="mode-link">Browse Communities →</a>
         </div>
 
-        <div class="access-mode">
+        <div class="access-mode ui-card ui-card-pad-xl">
           <div class="mode-icon">🧪</div>
           <h4>Demo Accounts</h4>
           <p>
@@ -128,21 +128,21 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
             vote on proposals, create delegations, and see the member experience firsthand.
           </p>
           <div class="demo-accounts">
-            <button class="demo-login-btn" data-username="contributor">
+            <button class="demo-login-btn ui-card ui-card-soft" data-username="contributor">
               <div class="btn-icon">👤</div>
               <div class="btn-info">
                 <strong>Contributor</strong>
                 <span>Standard member - can vote and participate</span>
               </div>
             </button>
-            <button class="demo-login-btn" data-username="moderator">
+            <button class="demo-login-btn ui-card ui-card-soft" data-username="moderator">
               <div class="btn-icon">🛡️</div>
               <div class="btn-info">
                 <strong>Moderator</strong>
                 <span>Can moderate content and view logs</span>
               </div>
             </button>
-            <button class="demo-login-btn" data-username="observer">
+            <button class="demo-login-btn ui-card ui-card-soft" data-username="observer">
               <div class="btn-icon">👁️</div>
               <div class="btn-info">
                 <strong>Observer</strong>
@@ -168,35 +168,35 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
       <h2>Suggested Exploration Path</h2>
       
       <div class="journey-steps">
-        <div class="journey-step">
+        <div class="journey-step ui-card ui-card-pad-lg">
           <div class="step-number">1</div>
           <div class="step-content">
             <h4>Browse a Community</h4>
             <p>Start with Aurora Framework. See the community overview, active members, and governance structure.</p>
           </div>
         </div>
-        <div class="journey-step">
+        <div class="journey-step ui-card ui-card-pad-lg">
           <div class="step-number">2</div>
           <div class="step-content">
             <h4>Read a Completed Decision</h4>
             <p>Find a closed proposal. See the deliberation history, voting results, and how the outcome was reached.</p>
           </div>
         </div>
-        <div class="journey-step">
+        <div class="journey-step ui-card ui-card-pad-lg">
           <div class="step-number">3</div>
           <div class="step-content">
             <h4>Explore Delegations</h4>
             <p>View the delegation network. See who trusts whom on which topics and how votes flow.</p>
           </div>
         </div>
-        <div class="journey-step">
+        <div class="journey-step ui-card ui-card-pad-lg">
           <div class="step-number">4</div>
           <div class="step-content">
             <h4>Check the Moderation Log</h4>
             <p>See transparent moderation in action. Every action has a reason, a rule reference, and accountability.</p>
           </div>
         </div>
-        <div class="journey-step">
+        <div class="journey-step ui-card ui-card-pad-lg">
           <div class="step-number">5</div>
           <div class="step-content">
             <h4>Cast a Vote</h4>
@@ -221,15 +221,15 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     <section class="demo-next">
       <h2>What's Next?</h2>
       <div class="next-options">
-        <a href="/about" class="next-card">
+        <a href="/about" class="next-card ui-card ui-card-pad-lg ui-card-interactive">
           <h4>Learn More</h4>
           <p>Understand what Likwid is, who it's for, and how it works.</p>
         </a>
-        <a href="/manifesto" class="next-card">
+        <a href="/manifesto" class="next-card ui-card ui-card-pad-lg ui-card-interactive">
           <h4>Read the Manifesto</h4>
           <p>Explore the technical and political vision behind Likwid.</p>
         </a>
-        <a href="/docs" class="next-card">
+        <a href="/docs" class="next-card ui-card ui-card-pad-lg ui-card-interactive">
           <h4>Documentation</h4>
           <p>Technical guides for deployment, configuration, and development.</p>
         </a>
@@ -347,16 +347,10 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
   }
 
   .community-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
     transition: all var(--motion-normal) var(--easing-standard);
   }
 
   .community-card:hover {
-    border-color: var(--color-border-hover);
-    transform: translateY(-2px);
     box-shadow: var(--shadow-md);
   }
 
@@ -424,13 +418,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     }
   }
 
-  .access-mode {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 2rem;
-  }
-
   .mode-icon {
     font-size: 2rem;
     margin-bottom: 1rem;
@@ -464,9 +451,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     gap: 1rem;
     width: 100%;
     padding: 1rem 1.25rem;
-    background: var(--color-bg-alt);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
     cursor: pointer;
     transition: all var(--motion-fast) var(--easing-standard);
     text-align: left;
@@ -566,10 +550,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
     display: flex;
     gap: 1.5rem;
     align-items: flex-start;
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
   }
 
   .step-number {
@@ -647,10 +627,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
 
   .next-card {
     display: block;
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
     text-decoration: none;
     transition: all var(--motion-fast) var(--easing-standard);
   }