From dd5ba80541e0a8cd29a470dac1bb93c3a815bc6a Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Tue, 5 May 2026 11:29:11 +0200
Subject: [PATCH] Reorder GitHub Pages sections: Preview before Features

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>
---
 docs/index.html | 90 ++++++++++++++++++++++++-------------------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 6a8012e..a42fbb2 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -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">