Improve product discovery and showcase extensions
This commit is contained in:
+19
-13
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#0b45d8">
|
||||
<meta name="description" content="Napper builds focused browser tools for teachers, beginning with Hudra and Lildra for cleaner QLearn lessons and classroom presentation.">
|
||||
<title>Napper — Focused tools for better lessons</title>
|
||||
<title>Napper - Focused tools for better lessons</title>
|
||||
<link rel="stylesheet" href="/css/napper.css">
|
||||
</head>
|
||||
<body>
|
||||
@@ -27,7 +27,13 @@
|
||||
<a href="#products">Products</a>
|
||||
<a href="#approach">Approach</a>
|
||||
<a href="https://git.napper.au/napper">Source</a>
|
||||
<a class="nav-button" href="#products">Explore products</a>
|
||||
<div class="products-menu">
|
||||
<a class="nav-button" href="#products">Explore products</a>
|
||||
<div class="products-popup" aria-label="Explore products">
|
||||
<a href="/hudra"><img src="/img/HudraLogo48.png" width="34" height="34" alt=""><span><strong>Hudra</strong><small>Classroom presentations</small></span></a>
|
||||
<a href="/lildra"><img src="/img/LildraLogo48.png" width="34" height="34" alt=""><span><strong>Lildra</strong><small>Distraction-free reading</small></span></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -50,14 +56,14 @@
|
||||
|
||||
<div class="hero-visual" aria-label="Napper product family preview">
|
||||
<div class="product-stack">
|
||||
<article class="stack-card stack-hudra">
|
||||
<a class="stack-card stack-hudra" href="/hudra" aria-label="Explore Hudra">
|
||||
<img src="/img/HudraLogo128.png" width="66" height="66" alt="Hudra logo">
|
||||
<div><span class="status status-live">Available</span><h2>Hudra</h2><p>Turn lesson pages into a classroom presentation system.</p></div>
|
||||
</article>
|
||||
<article class="stack-card stack-lildra product-lildra">
|
||||
</a>
|
||||
<a class="stack-card stack-lildra product-lildra" href="/lildra" aria-label="Explore Lildra">
|
||||
<img src="/img/LildraLogo128.png" width="66" height="66" alt="Lildra logo">
|
||||
<div><span class="status status-live">Available</span><h2>Lildra</h2><p>Keep the lesson page and hide the surrounding QLearn clutter.</p></div>
|
||||
</article>
|
||||
</a>
|
||||
<article class="stack-card stack-pendra product-pendra">
|
||||
<div class="product-glyph product-glyph-pendra" aria-hidden="true">Pe</div>
|
||||
<div><span class="status">Planned</span><h2>Pendra</h2><p>Bring completed slide decks into QLearn more easily.</p></div>
|
||||
@@ -81,16 +87,16 @@
|
||||
<div class="section-heading">
|
||||
<div class="eyebrow"><span></span> Products</div>
|
||||
<h2>A growing family of focused lesson tools.</h2>
|
||||
<p>Hudra and Lildra are available now, with Pendra planned next.</p>
|
||||
<p><a class="inline-product-link" href="/hudra">Hudra</a> and <a class="inline-product-link" href="/lildra">Lildra</a> are available now, with Pendra planned next.</p>
|
||||
</div>
|
||||
|
||||
<div class="product-grid">
|
||||
<article class="product-card product-card-featured">
|
||||
<div class="product-card-top">
|
||||
<img src="/img/HudraLogo128.png" width="84" height="84" alt="Hudra logo">
|
||||
<a class="product-identity-link" href="/hudra" aria-label="Explore Hudra"><img src="/img/HudraLogo128.png" width="84" height="84" alt="Hudra logo"></a>
|
||||
<span class="status status-live">Available now</span>
|
||||
</div>
|
||||
<h3>Hudra</h3>
|
||||
<h3><a class="product-name-link" href="/hudra">Hudra</a></h3>
|
||||
<p class="product-tagline">Present QLearn lessons beautifully.</p>
|
||||
<p>Hudra turns existing lesson pages into a clean slide experience with presenter controls, previews, timers and dual-screen support.</p>
|
||||
<div class="card-actions">
|
||||
@@ -101,13 +107,13 @@
|
||||
|
||||
<article class="product-card product-lildra">
|
||||
<div class="product-card-top">
|
||||
<img src="/img/LildraLogo128.png" width="84" height="84" alt="Lildra logo">
|
||||
<a class="product-identity-link" href="/lildra" aria-label="Explore Lildra"><img src="/img/LildraLogo128.png" width="84" height="84" alt="Lildra logo"></a>
|
||||
<span class="status status-live">Available now</span>
|
||||
</div>
|
||||
<h3>Lildra</h3>
|
||||
<h3><a class="product-name-link" href="/lildra">Lildra</a></h3>
|
||||
<p class="product-tagline">QLearn content, without the QLearn clutter.</p>
|
||||
<p>Lildra hides the surrounding Canvas and QLearn interface while preserving the lesson's original content and styling in a calm reading view.</p>
|
||||
<div class="card-actions"><a class="button button-primary" href="/lildra">Explore Lildra</a><a class="text-link" href="https://git.napper.au/napper/lildra/releases">Releases <span>→</span></a></div>
|
||||
<div class="card-actions"><a class="button button-primary" href="/lildra">Explore Lildra</a><a class="text-link" href="https://chromewebstore.google.com/detail/lildra/plgcccpjkfeimphghbpojjmibmajgocp">Chrome Web Store <span>→</span></a></div>
|
||||
</article>
|
||||
|
||||
<article class="product-card product-pendra">
|
||||
@@ -156,7 +162,7 @@
|
||||
<p>Focused browser tools for better digital lessons.</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<div><strong>Products</strong><a href="/hudra">Hudra</a><a href="/lildra">Lildra</a><span>Pendra — planned</span></div>
|
||||
<div><strong>Products</strong><a href="/hudra">Hudra</a><a href="/lildra">Lildra</a><span>Pendra - planned</span></div>
|
||||
<div><strong>Resources</strong><a href="https://git.napper.au/napper">Source</a><a href="/hudra/support">Hudra support</a><a href="/lildra/support">Lildra support</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user