openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Reorder GitHub Pages sections: Preview before Features

Browse Source 
Improved content flow by showing screenshots (Preview section) before the Features section, giving visitors a visual first impression before diving into the feature list.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Ulas Kalayci
2026-05-05 11:29:11 +02:00
parent f1dd8e5161
commit dd5ba80541
1 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+45 -45
View File
@@ -587,6 +587,51 @@
</div>
</header>
<!-- Screenshots -->
<section class="screenshots-section" id="screenshots">
<div class="container">
<div class="section-header-centered reveal">
<p class="section-label" data-i18n="screenshots_label">Preview</p>
<h2 class="section-title" data-i18n="screenshots_title">See it in action</h2>
<p class="section-desc" data-i18n="screenshots_desc">A clean, intuitive interface that adapts to your device and preferred theme.</p>
</div>
</div>
<div class="screenshots-track" role="region" aria-label="Screenshots" tabindex="0">
<div class="screenshot-item reveal">
<img class="screenshot-img" data-light="screenshots/01-mobile-light.png" data-dark="screenshots/01-mobile-dark.png" src="screenshots/01-mobile-light.png" alt="Oikos Dashboard" width="270" height="480" loading="lazy">
<p class="screenshot-label">Dashboard</p>
</div>
<div class="screenshot-item reveal reveal-delay-1">
<img class="screenshot-img" data-light="screenshots/02-mobile-light.png" data-dark="screenshots/02-mobile-dark.png" src="screenshots/02-mobile-light.png" alt="Task Management" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_tasks_title">Tasks</p>
</div>
<div class="screenshot-item reveal reveal-delay-2">
<img class="screenshot-img" data-light="screenshots/03-mobile-light.png" data-dark="screenshots/03-mobile-dark.png" src="screenshots/03-mobile-light.png" alt="Meal Planning" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_meals_title">Meals</p>
</div>
<div class="screenshot-item reveal reveal-delay-3">
<img class="screenshot-img" data-light="screenshots/04-mobile-light.png" data-dark="screenshots/04-mobile-dark.png" src="screenshots/04-mobile-light.png" alt="Shopping Lists" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_shopping_title">Shopping</p>
</div>
<div class="screenshot-item reveal">
<img class="screenshot-img" data-light="screenshots/05-mobile-light.png" data-dark="screenshots/05-mobile-dark.png" src="screenshots/05-mobile-light.png" alt="Calendar" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_calendar_title">Calendar</p>
</div>
<div class="screenshot-item reveal reveal-delay-1">
<img class="screenshot-img" data-light="screenshots/06-mobile-light.png" data-dark="screenshots/06-mobile-dark.png" src="screenshots/06-mobile-light.png" alt="Budget Tracking" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_budget_title">Budget</p>
</div>
<div class="screenshot-item reveal reveal-delay-2">
<img class="screenshot-img" data-light="screenshots/07-mobile-light.png" data-dark="screenshots/07-mobile-dark.png" src="screenshots/07-mobile-light.png" alt="Notes" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_notes_title">Notes</p>
</div>
<div class="screenshot-item reveal reveal-delay-3">
<img class="screenshot-img" data-light="screenshots/08-mobile-light.png" data-dark="screenshots/08-mobile-dark.png" src="screenshots/08-mobile-light.png" alt="Contacts" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_contacts_title">Contacts</p>
</div>
</div>
</section>
<!-- Features -->
<section class="features-section" id="features">
<div class="container">
@@ -640,51 +685,6 @@
</div>
</section>
<!-- Screenshots -->
<section class="screenshots-section" id="screenshots">
<div class="container">
<div class="section-header-centered reveal">
<p class="section-label" data-i18n="screenshots_label">Preview</p>
<h2 class="section-title" data-i18n="screenshots_title">See it in action</h2>
<p class="section-desc" data-i18n="screenshots_desc">A clean, intuitive interface that adapts to your device and preferred theme.</p>
</div>
</div>
<div class="screenshots-track" role="region" aria-label="Screenshots" tabindex="0">
<div class="screenshot-item reveal">
<img class="screenshot-img" data-light="screenshots/01-mobile-light.png" data-dark="screenshots/01-mobile-dark.png" src="screenshots/01-mobile-light.png" alt="Oikos Dashboard" width="270" height="480" loading="lazy">
<p class="screenshot-label">Dashboard</p>
</div>
<div class="screenshot-item reveal reveal-delay-1">
<img class="screenshot-img" data-light="screenshots/02-mobile-light.png" data-dark="screenshots/02-mobile-dark.png" src="screenshots/02-mobile-light.png" alt="Task Management" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_tasks_title">Tasks</p>
</div>
<div class="screenshot-item reveal reveal-delay-2">
<img class="screenshot-img" data-light="screenshots/03-mobile-light.png" data-dark="screenshots/03-mobile-dark.png" src="screenshots/03-mobile-light.png" alt="Meal Planning" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_meals_title">Meals</p>
</div>
<div class="screenshot-item reveal reveal-delay-3">
<img class="screenshot-img" data-light="screenshots/04-mobile-light.png" data-dark="screenshots/04-mobile-dark.png" src="screenshots/04-mobile-light.png" alt="Shopping Lists" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_shopping_title">Shopping</p>
</div>
<div class="screenshot-item reveal">
<img class="screenshot-img" data-light="screenshots/05-mobile-light.png" data-dark="screenshots/05-mobile-dark.png" src="screenshots/05-mobile-light.png" alt="Calendar" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_calendar_title">Calendar</p>
</div>
<div class="screenshot-item reveal reveal-delay-1">
<img class="screenshot-img" data-light="screenshots/06-mobile-light.png" data-dark="screenshots/06-mobile-dark.png" src="screenshots/06-mobile-light.png" alt="Budget Tracking" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_budget_title">Budget</p>
</div>
<div class="screenshot-item reveal reveal-delay-2">
<img class="screenshot-img" data-light="screenshots/07-mobile-light.png" data-dark="screenshots/07-mobile-dark.png" src="screenshots/07-mobile-light.png" alt="Notes" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_notes_title">Notes</p>
</div>
<div class="screenshot-item reveal reveal-delay-3">
<img class="screenshot-img" data-light="screenshots/08-mobile-light.png" data-dark="screenshots/08-mobile-dark.png" src="screenshots/08-mobile-light.png" alt="Contacts" width="270" height="480" loading="lazy">
<p class="screenshot-label" data-i18n="feat_contacts_title">Contacts</p>
</div>
</div>
</section>
<!-- Philosophy -->
<section class="features-section" id="philosophy">
<div class="container">