mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ux: add landing page jump links
This commit is contained in:
parent
b604d99960
commit
dd7dba883d
1 changed files with 1039 additions and 1020 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue