mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ui: replace landing process with modular diagrams
This commit is contained in:
parent
1843dd80c3
commit
5525e45ed6
1 changed files with 110 additions and 63 deletions
|
|
@ -127,30 +127,92 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
<!-- How It Works Section -->
|
||||
<section class="section-how">
|
||||
<div class="section-container">
|
||||
<h2>How Governance Works in Likwid</h2>
|
||||
<div class="process-flow">
|
||||
<div class="process-step">
|
||||
<div class="step-number">1</div>
|
||||
<h4>Proposal Creation</h4>
|
||||
<p>A member drafts a proposal with clear options. The proposal enters an inform phase where members can read and understand it.</p>
|
||||
<h2>Modular governance, explained</h2>
|
||||
<p class="section-intro">
|
||||
Likwid is built from composable modules. Communities enable what they need: voting methods, delegation rules, moderation tools, and integrations.
|
||||
</p>
|
||||
<div class="diagram-grid">
|
||||
<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>
|
||||
<svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Liquid delegation diagram">
|
||||
<defs>
|
||||
<marker id="arrow" 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>
|
||||
<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">2</div>
|
||||
<h4>Deliberation</h4>
|
||||
<p>Structured discussion with facilitator tools. Comments are organized to surface constructive input and identify concerns.</p>
|
||||
</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 class="process-arrow">→</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">4</div>
|
||||
<h4>Implementation</h4>
|
||||
<p>Decisions are recorded and tracked. Integration plugins can trigger external actions or workflows.</p>
|
||||
|
||||
<div class="diagram-card ui-card ui-card-pad-lg">
|
||||
<div class="diagram-header">
|
||||
<h4>Plugin-based governance</h4>
|
||||
<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>
|
||||
|
|
@ -389,60 +451,45 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
}
|
||||
|
||||
/* Process Flow Section */
|
||||
.process-flow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
.diagram-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 250px;
|
||||
text-align: center;
|
||||
@media (max-width: 900px) {
|
||||
.diagram-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.step-number {
|
||||
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;
|
||||
.diagram-header h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
margin: 0 auto 1rem;
|
||||
box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.process-step h4 {
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 0.5rem;
|
||||
.diagram-header p {
|
||||
margin: 0;
|
||||
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);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.process-arrow {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-muted);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.process-arrow {
|
||||
display: none;
|
||||
}
|
||||
.process-flow {
|
||||
gap: 2rem;
|
||||
}
|
||||
.diagram-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Technical Section */
|
||||
|
|
|
|||
Loading…
Reference in a new issue