From 74e4e659af4dbd18737cabb7809f1f31d65944b7 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Tue, 9 Aug 2022 12:00:21 +1000
Subject: [PATCH] Update app page with new "hero" approach

---
 _includes/app_carousel.html | 26 --------------------------
 _includes/block/hero.html   |  4 ++--
 extend/app.md               |  6 ++----
 3 files changed, 4 insertions(+), 32 deletions(-)
 delete mode 100644 _includes/app_carousel.html

diff --git a/_includes/app_carousel.html b/_includes/app_carousel.html
deleted file mode 100644
index fee80251..00000000
--- a/_includes/app_carousel.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<section id='image-carousel' class='splide'>
-    <div class='splide__track'>
-        <ul class='splide__list' style='list-style-type: none; list-style: none;'>
-        {% for image in site.static_files %}
-            {% if image.path contains 'appgallery/' %}
-            <li class='splide__slide'>
-                <img src="{{ image.path | relative_url }}" alt="" />
-            </li>
-            {% endif %}
-        {% endfor %}
-        </ul>
-    </div>
-</section>
-
-<script>
-document.addEventListener( 'DOMContentLoaded', function () {
-    new Splide('#image-carousel', {
-        type: 'loop',
-        perPage: 3,
-        autoPlay: true,
-        pagination: false,
-        // pagination: false,
-        // focus: 'center',
-    }).mount();
-});
-</script>
diff --git a/_includes/block/hero.html b/_includes/block/hero.html
index a55bc302..c8245858 100644
--- a/_includes/block/hero.html
+++ b/_includes/block/hero.html
@@ -50,11 +50,11 @@
   document.addEventListener( 'DOMContentLoaded', function () {
       new Splide('#image-carousel', {
           type: 'loop',
-          perPage: 1,
+          perMove: 1,
+          perPage: {% if include.perPage %}{{ include.perPage }}{% else %}1{% endif %},
           autoPlay: true,
           pagination: false,
       }).mount();
   });
   </script>
-  
 {% endif %}
diff --git a/extend/app.md b/extend/app.md
index f0c2bb65..80ed77d9 100644
--- a/extend/app.md
+++ b/extend/app.md
@@ -1,14 +1,12 @@
 ---
+layout: default
 title: InvenTree Mobile App
 ---
 
-
-The InvenTree Mobile App brings stock control to your pocket. Integrating seamlessly with the [InvenTree API](../extend/api.md), the app provides immediate access to inventory data without requiring physical access to a computer.
+{% include block/hero.html title='Mobile stock control' title_2='in the' color='palm of your hand' gallery='appgallery/' perPage=3 detail='The InvenTree Mobile App brings stock control to your pocket. Integrating seamlessly with the InvenTree API, the app provides immediate access to inventory data wherever you are.' %}
 
 Native barcode support provides a multitude of context-sensitive stock control actions, allowing streamlined inventory management at your fingertips. The app has been optimized for speed, providing instant access to stock knowledge and handy on-site functionality.
 
-{% include app_carousel.html %}
-
 ### Features
 
 Core app features include: