feat(website): update landing page with new screenshot references

Replace 3 desktop + 3 mobile screenshots with 7 desktop + 3 mobile.
New screenshots: checklist, sharing, history, attachments, API/MCP.
Remove obsolete screenshot-tags.png and screenshot-mobile-sidebar.png.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-20 22:32:16 +01:00
committed by Fred Cabassut
co-authored by Claude Opus 4.6
parent ecc0e4d3c2
commit f37e7a5322
3 changed files with 24 additions and 8 deletions
Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

+24 -8
View File
@@ -208,27 +208,43 @@
<div class="screenshot-label">Notes grid view</div>
</div>
<div class="screenshot-card animate-in delay-2">
<img src="assets/screenshot-editor.png" alt="Rich text editor with formatting toolbar" width="1280" height="800" loading="lazy">
<img src="assets/screenshot-editor.png" alt="Rich text editor with formatting toolbar and self-hosting stack note" width="1280" height="800" loading="lazy">
<div class="screenshot-label">Rich text editor</div>
</div>
<div class="screenshot-card animate-in delay-3">
<img src="assets/screenshot-tags.png" alt="Tag filtering showing bretzel-tagged notes" width="1280" height="800" loading="lazy">
<div class="screenshot-label">Tag filtering</div>
<img src="assets/screenshot-checklist.png" alt="Checklist note with bretzel ingredients and checkboxes" width="1280" height="800" loading="lazy">
<div class="screenshot-label">Checklist mode</div>
</div>
<div class="screenshot-card animate-in delay-4">
<img src="assets/screenshot-sharing.png" alt="Share dialog with collaborator management" width="1280" height="800" loading="lazy">
<div class="screenshot-label">Note sharing</div>
</div>
<div class="screenshot-card animate-in delay-5">
<img src="assets/screenshot-history.png" alt="Note version history with side-by-side preview" width="1280" height="800" loading="lazy">
<div class="screenshot-label">Version history</div>
</div>
<div class="screenshot-card animate-in delay-6">
<img src="assets/screenshot-attachments.png" alt="Note with pixel-art bretzel featured image" width="1280" height="800" loading="lazy">
<div class="screenshot-label">Image attachments</div>
</div>
<div class="screenshot-card animate-in delay-1">
<img src="assets/screenshot-api.png" alt="API keys and MCP client configuration for Claude Code" width="1280" height="800" loading="lazy">
<div class="screenshot-label">API & MCP</div>
</div>
</div>
<h3 class="screenshots-subtitle animate-in">Mobile</h3>
<div class="screenshots-grid screenshots-grid-mobile">
<div class="screenshot-card screenshot-card-mobile animate-in delay-1">
<img src="assets/screenshot-mobile-grid.png" alt="Mobile grid view with notes and tags" width="390" height="844" loading="lazy">
<img src="assets/screenshot-mobile-grid.png" alt="Mobile notes grid with tags and colorful cards" width="390" height="844" loading="lazy">
<div class="screenshot-label">Notes view</div>
</div>
<div class="screenshot-card screenshot-card-mobile animate-in delay-2">
<img src="assets/screenshot-mobile-editor.png" alt="Mobile checklist editor" width="390" height="844" loading="lazy">
<div class="screenshot-label">Checklist editor</div>
<img src="assets/screenshot-mobile-editor.png" alt="Mobile rich text editor with self-hosting stack note" width="390" height="844" loading="lazy">
<div class="screenshot-label">Rich text editor</div>
</div>
<div class="screenshot-card screenshot-card-mobile animate-in delay-3">
<img src="assets/screenshot-mobile-sidebar.png" alt="Mobile sidebar with tags" width="390" height="844" loading="lazy">
<div class="screenshot-label">Sidebar & tags</div>
<img src="assets/screenshot-mobile-checklist.png" alt="Mobile checklist with bretzel ingredients" width="390" height="844" loading="lazy">
<div class="screenshot-label">Checklist mode</div>
</div>
</div>
</div>