ux: dedupe index page cards via ui-card

This commit is contained in:
Marco Allegretti 2026-01-30 10:15:58 +01:00
parent f6099c7637
commit 063017909b

View file

@ -28,7 +28,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<div class="section-container"> <div class="section-container">
<h2>What is Likwid?</h2> <h2>What is Likwid?</h2>
<div class="what-grid"> <div class="what-grid">
<div class="what-card"> <div class="what-card ui-card">
<div class="what-icon"> <div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"/> <path d="M12 2L2 7l10 5 10-5-10-5z"/>
@ -39,7 +39,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<h3>Modular Architecture</h3> <h3>Modular Architecture</h3>
<p>Every component is a plugin. Voting methods, delegation systems, integrations, and workflows can be added, removed, or customized per community.</p> <p>Every component is a plugin. Voting methods, delegation systems, integrations, and workflows can be added, removed, or customized per community.</p>
</div> </div>
<div class="what-card"> <div class="what-card ui-card">
<div class="what-icon"> <div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/> <circle cx="12" cy="12" r="10"/>
@ -49,7 +49,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<h3>Process-Oriented</h3> <h3>Process-Oriented</h3>
<p>Governance is a process, not a feature. Likwid structures deliberation, voting, and implementation as distinct phases with clear transitions.</p> <p>Governance is a process, not a feature. Likwid structures deliberation, voting, and implementation as distinct phases with clear transitions.</p>
</div> </div>
<div class="what-card"> <div class="what-card ui-card">
<div class="what-icon"> <div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@ -96,27 +96,27 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<div class="section-container"> <div class="section-container">
<h2>Core Capabilities</h2> <h2>Core Capabilities</h2>
<div class="capabilities-grid"> <div class="capabilities-grid">
<div class="capability"> <div class="capability ui-card ui-card-pad-lg">
<h4>Advanced Voting Methods</h4> <h4>Advanced Voting Methods</h4>
<p>Schulze, STAR, Quadratic, Ranked Choice, and Approval voting. Each method is a plugin that can be enabled per community.</p> <p>Schulze, STAR, Quadratic, Ranked Choice, and Approval voting. Each method is a plugin that can be enabled per community.</p>
</div> </div>
<div class="capability"> <div class="capability ui-card ui-card-pad-lg">
<h4>Liquid Delegation</h4> <h4>Liquid Delegation</h4>
<p>Global and community-scoped delegation that is always revocable. Delegate your voice to trusted members while retaining control.</p> <p>Global and community-scoped delegation that is always revocable. Delegate your voice to trusted members while retaining control.</p>
</div> </div>
<div class="capability"> <div class="capability ui-card ui-card-pad-lg">
<h4>Structured Deliberation</h4> <h4>Structured Deliberation</h4>
<p>Inform → Discuss → Decide workflow. Ensures members understand proposals before voting begins.</p> <p>Inform → Discuss → Decide workflow. Ensures members understand proposals before voting begins.</p>
</div> </div>
<div class="capability"> <div class="capability ui-card ui-card-pad-lg">
<h4>Transparent Moderation</h4> <h4>Transparent Moderation</h4>
<p>Every moderation action is logged with reasons. Cryptographic audit trail ensures accountability.</p> <p>Every moderation action is logged with reasons. Cryptographic audit trail ensures accountability.</p>
</div> </div>
<div class="capability"> <div class="capability ui-card ui-card-pad-lg">
<h4>Privacy-Preserving Voting</h4> <h4>Privacy-Preserving Voting</h4>
<p>Separate civic and voting identities. Participate publicly while voting privately.</p> <p>Separate civic and voting identities. Participate publicly while voting privately.</p>
</div> </div>
<div class="capability"> <div class="capability ui-card ui-card-pad-lg">
<h4>Federation Ready</h4> <h4>Federation Ready</h4>
<p>Connect communities across instances. Share decisions while maintaining autonomy.</p> <p>Connect communities across instances. Share decisions while maintaining autonomy.</p>
</div> </div>
@ -162,19 +162,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<h2>Technical Foundation</h2> <h2>Technical Foundation</h2>
<p class="section-intro">Likwid is free and open source software, built with modern, auditable technology.</p> <p class="section-intro">Likwid is free and open source software, built with modern, auditable technology.</p>
<div class="tech-grid"> <div class="tech-grid">
<div class="tech-item"> <div class="tech-item ui-card ui-card-pad-lg">
<strong>Backend</strong> <strong>Backend</strong>
<span>Rust (Axum)</span> <span>Rust (Axum)</span>
</div> </div>
<div class="tech-item"> <div class="tech-item ui-card ui-card-pad-lg">
<strong>Frontend</strong> <strong>Frontend</strong>
<span>Astro + TypeScript</span> <span>Astro + TypeScript</span>
</div> </div>
<div class="tech-item"> <div class="tech-item ui-card ui-card-pad-lg">
<strong>Database</strong> <strong>Database</strong>
<span>PostgreSQL</span> <span>PostgreSQL</span>
</div> </div>
<div class="tech-item"> <div class="tech-item ui-card ui-card-pad-lg">
<strong>License</strong> <strong>License</strong>
<span>EUPL-1.2</span> <span>EUPL-1.2</span>
</div> </div>
@ -284,9 +284,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
} }
.what-card { .what-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.75rem; padding: 1.75rem;
transition: all var(--motion-normal) var(--easing-standard); transition: all var(--motion-normal) var(--easing-standard);
} }
@ -375,9 +372,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
} }
.capability { .capability {
padding: 1.5rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
@ -466,9 +460,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
.tech-item { .tech-item {
text-align: center; text-align: center;
padding: 1.5rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }