ui: improve features page navigation

This commit is contained in:
Marco Allegretti 2026-02-02 11:52:23 +01:00
parent d2650fba57
commit 2d915da2c4

View file

@ -9,10 +9,18 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<p class="lead"> <p class="lead">
A comprehensive governance toolkit designed for complex, distributed organizations. A comprehensive governance toolkit designed for complex, distributed organizations.
</p> </p>
<nav class="page-nav" aria-label="On this page">
<a class="ui-pill ui-pill-recommended" href="#voting">Voting</a>
<a class="ui-pill ui-pill-core" href="#delegation">Delegation</a>
<a class="ui-pill ui-pill-core" href="#deliberation">Deliberation</a>
<a class="ui-pill ui-pill-core" href="#moderation">Moderation</a>
<a class="ui-pill ui-pill-core" href="#plugins">Plugins</a>
<a class="ui-pill ui-pill-core" href="#federation">Federation</a>
</nav>
</header> </header>
<!-- Voting Methods Section --> <!-- Voting Methods Section -->
<section class="feature-section"> <section class="feature-section" id="voting">
<div class="section-header"> <div class="section-header">
<h2>Advanced Voting Methods</h2> <h2>Advanced Voting Methods</h2>
<p> <p>
@ -95,7 +103,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- Delegation Section --> <!-- Delegation Section -->
<section class="feature-section alt-bg"> <section class="feature-section alt-bg" id="delegation">
<div class="section-header"> <div class="section-header">
<h2>Liquid Delegation</h2> <h2>Liquid Delegation</h2>
<p> <p>
@ -137,7 +145,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- Deliberation Section --> <!-- Deliberation Section -->
<section class="feature-section"> <section class="feature-section" id="deliberation">
<div class="section-header"> <div class="section-header">
<h2>Structured Deliberation</h2> <h2>Structured Deliberation</h2>
<p> <p>
@ -161,7 +169,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<h4>Discuss</h4> <h4>Discuss</h4>
<p> <p>
Structured discussion with facilitator tools. Comments can be organized, Structured discussion with facilitator tools. Comments can be organized,
constructive input surfaced, and concerns identified. Small group breakouts for complex topics. constructive input surfaced, and concerns identified.
</p> </p>
</div> </div>
<div class="process-arrow">→</div> <div class="process-arrow">→</div>
@ -190,13 +198,13 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</div> </div>
<div class="feature-item ui-card ui-card-pad-lg"> <div class="feature-item ui-card ui-card-pad-lg">
<h4>Amendment Process</h4> <h4>Amendment Process</h4>
<p>Proposals can be amended during deliberation based on feedback, with clear change tracking.</p> <p>Proposals can be updated during draft and discussion based on feedback.</p>
</div> </div>
</div> </div>
</section> </section>
<!-- Moderation Section --> <!-- Moderation Section -->
<section class="feature-section alt-bg"> <section class="feature-section alt-bg" id="moderation">
<div class="section-header"> <div class="section-header">
<h2>Transparent Moderation</h2> <h2>Transparent Moderation</h2>
<p> <p>
@ -229,17 +237,16 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</p> </p>
</div> </div>
<div class="mod-feature ui-card ui-card-pad-lg"> <div class="mod-feature ui-card ui-card-pad-lg">
<h4>Separate Identities</h4> <h4>Permissioned Results</h4>
<p> <p>
Civic identity (who you are in discussions) and voting identity (how you voted) Voting results visibility can be restricted via permissions. Communities can decide who can view detailed results.
are separated. Participate openly while maintaining ballot secrecy.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<!-- Plugin System Section --> <!-- Plugin System Section -->
<section class="feature-section"> <section class="feature-section" id="plugins">
<div class="section-header"> <div class="section-header">
<h2>Plugin Architecture</h2> <h2>Plugin Architecture</h2>
<p> <p>
@ -290,7 +297,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- Federation Section --> <!-- Federation Section -->
<section class="feature-section alt-bg"> <section class="feature-section alt-bg" id="federation">
<div class="section-header"> <div class="section-header">
<h2>Federation</h2> <h2>Federation</h2>
<p> <p>
@ -347,6 +354,18 @@ import PublicLayout from '../layouts/PublicLayout.astro';
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
.page-nav {
margin-top: 1.75rem;
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
.page-nav a {
text-decoration: none;
}
.page-header h1 { .page-header h1 {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 700; font-weight: 700;
@ -364,6 +383,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
.feature-section { .feature-section {
padding: 4rem 0; padding: 4rem 0;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
scroll-margin-top: 6.5rem;
} }
.feature-section.alt-bg { .feature-section.alt-bg {