From f6099c7637fe9404ad124dbb907b69331b603179 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 10:10:45 +0100
Subject: [PATCH] ux: dedupe about page cards via ui-card

---
 frontend/src/pages/about.astro | 43 +++++++++++++---------------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/about.astro b/frontend/src/pages/about.astro
index f077300..5f15909 100644
--- a/frontend/src/pages/about.astro
+++ b/frontend/src/pages/about.astro
@@ -37,19 +37,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     <section class="content-section">
       <h2>What Likwid Is</h2>
       <div class="is-grid">
-        <div class="is-item">
+        <div class="is-item ui-card ui-card-pad-lg">
           <h4>A Governance Engine</h4>
           <p>Likwid provides the core infrastructure for collective decision-making: proposals, deliberation, voting, and implementation tracking.</p>
         </div>
-        <div class="is-item">
+        <div class="is-item ui-card ui-card-pad-lg">
           <h4>Modular by Design</h4>
           <p>Every component is a plugin. Communities choose their voting methods, delegation rules, moderation policies, and integrations.</p>
         </div>
-        <div class="is-item">
+        <div class="is-item ui-card ui-card-pad-lg">
           <h4>Transparent by Default</h4>
           <p>All moderation actions are logged with reasons. There is no shadow banning. Audit trails are cryptographically verifiable.</p>
         </div>
-        <div class="is-item">
+        <div class="is-item ui-card ui-card-pad-lg">
           <h4>Self-Hostable</h4>
           <p>Organizations control their own data. Likwid runs on your infrastructure with no vendor lock-in.</p>
         </div>
@@ -59,19 +59,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     <section class="content-section">
       <h2>What Likwid Is Not</h2>
       <div class="isnot-grid">
-        <div class="isnot-item">
+        <div class="isnot-item ui-card ui-card-pad-lg">
           <h4>Not a Social Network</h4>
           <p>Likwid is not designed for casual conversation, content sharing, or social interactions. It's governance infrastructure.</p>
         </div>
-        <div class="isnot-item">
+        <div class="isnot-item ui-card ui-card-pad-lg">
           <h4>Not a Simple Poll Tool</h4>
           <p>While Likwid supports voting, it's designed for complex decisions with deliberation phases, multiple options, and sophisticated tallying methods.</p>
         </div>
-        <div class="isnot-item">
+        <div class="isnot-item ui-card ui-card-pad-lg">
           <h4>Not a Forum</h4>
           <p>Discussions in Likwid are structured and goal-oriented. They're part of a decision process, not open-ended conversation.</p>
         </div>
-        <div class="isnot-item">
+        <div class="isnot-item ui-card ui-card-pad-lg">
           <h4>Not a CRM or Membership System</h4>
           <p>Likwid handles governance, not member management, donations, or communications. It integrates with those systems.</p>
         </div>
@@ -81,7 +81,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     <section class="content-section">
       <h2>Who Is Likwid For?</h2>
       <div class="audience-section">
-        <div class="audience-block">
+        <div class="audience-block ui-card ui-card-pad-lg">
           <h4>Open Source & FLOSS Communities</h4>
           <p>
             Projects that need to make technical and organizational decisions collectively. 
@@ -89,7 +89,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
             Integration with development workflows (GitLab, Forgejo, Gitea) and documentation systems.
           </p>
         </div>
-        <div class="audience-block">
+        <div class="audience-block ui-card ui-card-pad-lg">
           <h4>Associations & NGOs</h4>
           <p>
             Member-driven organizations requiring formal decision processes.
@@ -97,7 +97,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
             Transparent moderation for community standards enforcement.
           </p>
         </div>
-        <div class="audience-block">
+        <div class="audience-block ui-card ui-card-pad-lg">
           <h4>Political Movements & Parties</h4>
           <p>
             Grassroots organizations, civic lists, and political parties.
@@ -105,7 +105,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
             Liquid democracy features for modern participatory politics.
           </p>
         </div>
-        <div class="audience-block">
+        <div class="audience-block ui-card ui-card-pad-lg">
           <h4>Federated & Distributed Organizations</h4>
           <p>
             Networks of chapters, working groups, or autonomous units.
@@ -143,7 +143,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       <p>
         Likwid is free and open source software (EUPL-1.2), built with modern, auditable technology:
       </p>
-      <div class="tech-table">
+      <div class="tech-table ui-card">
         <div class="tech-row">
           <span class="tech-label">Backend</span>
           <span class="tech-value">Rust (Axum framework)</span>
@@ -178,15 +178,15 @@ import PublicLayout from '../layouts/PublicLayout.astro';
         Explore Likwid's capabilities, understand our vision, or see the system in action.
       </p>
       <div class="cta-grid">
-        <a href="/features" class="cta-card">
+        <a href="/features" class="cta-card ui-card ui-card-pad-lg">
           <h4>Features</h4>
           <p>Detailed explanation of voting methods, delegation, and moderation tools.</p>
         </a>
-        <a href="/manifesto" class="cta-card">
+        <a href="/manifesto" class="cta-card ui-card ui-card-pad-lg">
           <h4>Manifesto</h4>
           <p>The technical and political vision behind Likwid's design.</p>
         </a>
-        <a href="/demo" class="cta-card">
+        <a href="/demo" class="cta-card ui-card ui-card-pad-lg">
           <h4>Demo</h4>
           <p>Explore a live instance with pre-populated governance history.</p>
         </a>
@@ -284,9 +284,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .is-item, .isnot-item {
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
   }
 
@@ -317,9 +314,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .audience-block {
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
   }
 
@@ -369,8 +363,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
 
   /* Tech table */
   .tech-table {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     overflow: hidden;
     margin: 1.5rem 0;
@@ -435,9 +427,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
 
   .cta-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);