marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-10 05:23:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: replace landing process with modular diagrams

Browse source
This commit is contained in:
Marco Allegretti 2026-02-02 12:02:21 +01:00
parent 1843dd80c3
commit 5525e45ed6
1 changed files with 110 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

169
frontend/src/pages/index.astro
View file

@ -127,30 +127,92 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<!-- How It Works Section --> <!-- How It Works Section -->
<section class="section-how"> <section class="section-how">
<div class="section-container"> <div class="section-container">
<h2>How Governance Works in Likwid</h2> <h2>Modular governance, explained</h2>
<div class="process-flow"> <p class="section-intro">
<div class="process-step"> Likwid is built from composable modules. Communities enable what they need: voting methods, delegation rules, moderation tools, and integrations.
<div class="step-number">1</div> </p>
<h4>Proposal Creation</h4> <div class="diagram-grid">
<p>A member drafts a proposal with clear options. The proposal enters an inform phase where members can read and understand it.</p> <div class="diagram-card ui-card ui-card-pad-lg">
<div class="diagram-header">
<h4>Liquid delegation</h4>
<p>Delegate by trust network. Vote directly anytime to override your delegation.</p>
</div> </div>
<div class="process-arrow">→</div> <svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Liquid delegation diagram">
<div class="process-step"> <defs>
<div class="step-number">2</div> <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<h4>Deliberation</h4> <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border-hover)" />
<p>Structured discussion with facilitator tools. Comments are organized to surface constructive input and identify concerns.</p> </marker>
<marker id="arrow-muted" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border)" />
</marker>
</defs>
<rect x="24" y="24" width="512" height="172" rx="18" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
<circle cx="140" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<circle cx="280" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<circle cx="420" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<text x="140" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Alice</text>
<text x="280" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Bob</text>
<text x="420" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Carol</text>
<path d="M 175 86 L 245 86" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow)" />
<path d="M 315 86 L 385 86" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow)" />
<text x="210" y="72" text-anchor="middle" font-size="11" fill="var(--color-text-muted)">delegates</text>
<text x="350" y="72" text-anchor="middle" font-size="11" fill="var(--color-text-muted)">delegates</text>
<rect x="190" y="138" width="180" height="44" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="280" y="165" text-anchor="middle" font-size="12" fill="var(--color-text)">Direct vote (override)</text>
<path d="M 140 120 C 160 140, 180 148, 190 152" stroke="var(--color-border)" stroke-width="2" stroke-dasharray="4 4" marker-end="url(#arrow-muted)" fill="none" />
</svg>
<div class="diagram-footer">
Delegations can be scoped (global or per community) and revoked instantly.
</div> </div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="step-number">3</div>
<h4>Voting</h4>
<p>Members vote using the community's chosen method. Delegations are resolved. Results are calculated transparently.</p>
</div> </div>
<div class="process-arrow">→</div>
<div class="process-step"> <div class="diagram-card ui-card ui-card-pad-lg">
<div class="step-number">4</div> <div class="diagram-header">
<h4>Implementation</h4> <h4>Plugin-based governance</h4>
<p>Decisions are recorded and tracked. Integration plugins can trigger external actions or workflows.</p> <p>Core platform + modules. Enable what you need per community.</p>
</div>
<svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Plugin system diagram">
<defs>
<marker id="arrow2" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border-hover)" />
</marker>
</defs>
<rect x="24" y="24" width="512" height="172" rx="18" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
<rect x="210" y="78" width="140" height="64" rx="14" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<text x="280" y="106" text-anchor="middle" font-size="12" fill="var(--color-text)">Core platform</text>
<text x="280" y="126" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">users • proposals • data</text>
<rect x="70" y="54" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="130" y="77" text-anchor="middle" font-size="11" fill="var(--color-text)">Voting plugins</text>
<rect x="70" y="128" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="130" y="151" text-anchor="middle" font-size="11" fill="var(--color-text)">Delegation</text>
<rect x="370" y="54" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="430" y="77" text-anchor="middle" font-size="11" fill="var(--color-text)">Moderation</text>
<rect x="370" y="128" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="430" y="151" text-anchor="middle" font-size="11" fill="var(--color-text)">Integrations</text>
<path d="M 190 72 L 210 92" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
<path d="M 190 146 L 210 128" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
<path d="M 370 92 L 350 92" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
<path d="M 370 128 L 350 128" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
<text x="280" y="186" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">Per-community configuration decides what is enabled.</text>
</svg>
<div class="diagram-footer">
<a href="/features" class="diagram-link">See the modules →</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -389,60 +451,45 @@ import PublicLayout from '../layouts/PublicLayout.astro';
} }
/* Process Flow Section */ /* Process Flow Section */
.process-flow { .diagram-grid {
display: flex; display: grid;
align-items: flex-start; grid-template-columns: repeat(2, 1fr);
justify-content: center; gap: 2rem;
gap: 1rem;
flex-wrap: wrap;
} }
.process-step { @media (max-width: 900px) {
flex: 1; .diagram-grid {
min-width: 200px; grid-template-columns: 1fr;
max-width: 250px; }
text-align: center;
} }
.step-number { .diagram-header h4 {
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: var(--color-on-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 700; margin: 0 0 0.5rem;
margin: 0 auto 1rem;
box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25);
} }
.process-step h4 { .diagram-header p {
font-size: 1.125rem; margin: 0;
margin-bottom: 0.5rem; color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.5;
} }
.process-step p { .diagram {
width: 100%;
height: auto;
margin-top: 1.25rem;
}
.diagram-footer {
margin-top: 1.25rem;
color: var(--color-text-muted); color: var(--color-text-muted);
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5; line-height: 1.5;
} }
.process-arrow { .diagram-link {
font-size: 1.5rem; font-weight: 500;
color: var(--color-text-muted);
padding-top: 0.75rem;
}
@media (max-width: 900px) {
.process-arrow {
display: none;
}
.process-flow {
gap: 2rem;
}
} }
/* Technical Section */ /* Technical Section */