ux: add landing page jump links

This commit is contained in:
Marco Allegretti 2026-02-05 13:08:36 +01:00
parent b604d99960
commit dd7dba883d

View file

@ -5,7 +5,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<PublicLayout title="Modular Governance Engine">
<!-- Hero Section -->
<section class="hero">
<section class="hero" id="top">
<div class="hero-content">
<h1>Governance infrastructure for distributed organizations</h1>
<p class="hero-subtitle">
@ -20,11 +20,18 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
<a href="/about" class="ui-btn ui-btn-secondary ui-btn-lg">Learn More</a>
</div>
<nav class="hero-jumps" aria-label="Jump to section">
<a class="ui-pill ui-pill-core" href="#what">What it is</a>
<a class="ui-pill ui-pill-core" href="#audience">Who it's for</a>
<a class="ui-pill ui-pill-core" href="#capabilities">Capabilities</a>
<a class="ui-pill ui-pill-core" href="#how">How it works</a>
<a class="ui-pill ui-pill-core" href="#technical">Tech</a>
</nav>
</div>
</section>
<!-- What Is Likwid Section -->
<section class="section-what">
<section class="section-what" id="what">
<div class="section-container">
<h2>What is Likwid?</h2>
<div class="what-grid">
@ -67,7 +74,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section>
<!-- Who Is It For Section -->
<section class="section-audience">
<section class="section-audience" id="audience">
<div class="section-container">
<h2>Built for organizations that take governance seriously</h2>
<div class="audience-grid">
@ -92,7 +99,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section>
<!-- Core Capabilities Section -->
<section class="section-capabilities">
<section class="section-capabilities" id="capabilities">
<div class="section-container">
<h2>Core Capabilities</h2>
<div class="capabilities-grid">
@ -125,7 +132,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section>
<!-- How It Works Section -->
<section class="section-how">
<section class="section-how" id="how">
<div class="section-container">
<h2>Modular governance, explained</h2>
<p class="section-intro">
@ -474,7 +481,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section>
<!-- Technical Foundation Section -->
<section class="section-technical">
<section class="section-technical" id="technical">
<div class="section-container">
<h2>Technical Foundation</h2>
<p class="section-intro">Likwid is free and open source software, built with modern, auditable technology.</p>
@ -503,7 +510,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section>
<!-- Call to Action Section -->
<section class="section-cta">
<section class="section-cta" id="cta">
<div class="section-container">
<h2>Experience Governance in Action</h2>
<p>The best way to understand Likwid is to see it working. Explore our demo instance with pre-populated communities, ongoing decisions, and real governance history.</p>
@ -557,11 +564,23 @@ import PublicLayout from '../layouts/PublicLayout.astro';
flex-wrap: wrap;
}
.hero-jumps {
margin-top: 2.25rem;
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
/* Section Styling */
section {
padding: 4rem 2rem;
}
section[id] {
scroll-margin-top: 6rem;
}
.section-container {
max-width: 1100px;
margin: 0 auto;