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"> <PublicLayout title="Modular Governance Engine">
<!-- Hero Section --> <!-- Hero Section -->
<section class="hero"> <section class="hero" id="top">
<div class="hero-content"> <div class="hero-content">
<h1>Governance infrastructure for distributed organizations</h1> <h1>Governance infrastructure for distributed organizations</h1>
<p class="hero-subtitle"> <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="/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> <a href="/about" class="ui-btn ui-btn-secondary ui-btn-lg">Learn More</a>
</div> </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> </div>
</section> </section>
<!-- What Is Likwid Section --> <!-- What Is Likwid Section -->
<section class="section-what"> <section class="section-what" id="what">
<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">
@ -67,7 +74,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- Who Is It For Section --> <!-- Who Is It For Section -->
<section class="section-audience"> <section class="section-audience" id="audience">
<div class="section-container"> <div class="section-container">
<h2>Built for organizations that take governance seriously</h2> <h2>Built for organizations that take governance seriously</h2>
<div class="audience-grid"> <div class="audience-grid">
@ -92,7 +99,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- Core Capabilities Section --> <!-- Core Capabilities Section -->
<section class="section-capabilities"> <section class="section-capabilities" id="capabilities">
<div class="section-container"> <div class="section-container">
<h2>Core Capabilities</h2> <h2>Core Capabilities</h2>
<div class="capabilities-grid"> <div class="capabilities-grid">
@ -125,7 +132,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- How It Works Section --> <!-- How It Works Section -->
<section class="section-how"> <section class="section-how" id="how">
<div class="section-container"> <div class="section-container">
<h2>Modular governance, explained</h2> <h2>Modular governance, explained</h2>
<p class="section-intro"> <p class="section-intro">
@ -474,7 +481,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- Technical Foundation Section --> <!-- Technical Foundation Section -->
<section class="section-technical"> <section class="section-technical" id="technical">
<div class="section-container"> <div class="section-container">
<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>
@ -503,7 +510,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<!-- Call to Action Section --> <!-- Call to Action Section -->
<section class="section-cta"> <section class="section-cta" id="cta">
<div class="section-container"> <div class="section-container">
<h2>Experience Governance in Action</h2> <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> <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; flex-wrap: wrap;
} }
.hero-jumps {
margin-top: 2.25rem;
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
/* Section Styling */ /* Section Styling */
section { section {
padding: 4rem 2rem; padding: 4rem 2rem;
} }
section[id] {
scroll-margin-top: 6rem;
}
.section-container { .section-container {
max-width: 1100px; max-width: 1100px;
margin: 0 auto; margin: 0 auto;