add frontpage feature tour

app/assets/stylesheets/application.css

@@ -34,6 +34,7 @@
   --text-color: var(--color-dark-smoky-black);
   --hover-color: var(--color-dark-charcoal);
   --accent-color: var(--color-mid-chili);
+  --default-color: var(--color-light-sand);
   --bs-btn-border-radius: 0px;
   --bs-border-radius: 0px;
 }

app/assets/stylesheets/frontpage.css

@@ -134,7 +134,7 @@ section,
   .hero::after {
     position: absolute;
     content: "";
-    width: 44%;
+    width: 50%;
     background-color: var(--background-color);
     opacity: 0.85;
     top: 0;
@@ -161,6 +161,12 @@ section,
 .hero .container-fluid {
   z-index: 3;
   position: relative;
+  padding-left: 0;
+  margin-left: 3em;
+}
+
+.welcome-text {
+  padding-right: 2em;
 }
 
 .hero h1 {
@@ -170,7 +176,6 @@ section,
 }
 
 .hero blockquote {
-  color: color-mix(in srgb, var(--default-color), transparent 20%);
   padding-left: 20px;
   border-left: 2px solid var(--accent-color);
   margin: 40px 0;
@@ -210,7 +215,6 @@ section,
 # Why Us Section
 -------------------------------------------------------------- */
 .why-us .img-bg {
-  min-height: 500px;
   position: relative;
 }
 
@@ -224,10 +228,6 @@ section,
   z-index: 1;
 }
 
-.why-us .slides {
-  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
-}
-
 .why-us h3 {
   font-size: 24px;
   font-weight: 700;
@@ -240,8 +240,9 @@ section,
 }
 
 .why-us .swiper {
-  margin: 140px 140px 120px;
+  margin: 3em 5em;
   overflow: hidden;
+  color: var(--default-color)
 }
 
 .why-us .swiper-wrapper {
@@ -251,38 +252,41 @@ section,
 .why-us .swiper-button-prev::after,
 .why-us .swiper-button-next::after {
   font-size: 24px;
-  color: color-mix(in srgb, var(--default-color), transparent 50%);
+  color: color-mix(in srgb, var(--color-light-sand), transparent 50%);
 }
 
 .why-us .swiper-button-prev {
-  left: 80px;
+  left: 2em;
 }
 
 .why-us .swiper-button-next {
-  right: 80px;
+  right: 2em;
 }
 
 .why-us .swiper-pagination {
-  margin-top: 30px;
+  margin-top: 1em;
   position: relative;
 }
 
 .why-us .swiper-pagination .swiper-pagination-bullet {
-  background-color: color-mix(in srgb, var(--default-color), transparent 50%);
+  background-color: color-mix(in srgb, var(--color-light-sand), transparent 50%);
 }
 
 .why-us .swiper-pagination .swiper-pagination-bullet-active {
-  background-color: var(--accent-color);
+  background-color: var(--color-light-teagreen);
 }
 
 @media (width <= 992px) {
   .why-us .swiper {
     margin: 60px 60px 40px;
   }
 
-  .why-us .swiper-button-prev,
+  .why-us .swiper-button-prev {
+    left: 1em;
+  }
+
   .why-us .swiper-button-next {
-    display: none;
+    right: 1em;
   }
 
   #features .img-bg, #features .img-bg img {
@@ -295,4 +299,16 @@ section,
   .why-us .swiper {
     margin: 40px 40px 20px;
   }
+
+  #hero .container {
+    margin-left: 1em;
+  }
+
+  .why-us .swiper-button-prev {
+    left: 0.3em;
+  }
+
+  .why-us .swiper-button-next {
+    right: 0.3em;
+  }
 }

app/assets/stylesheets/header.css

@@ -50,7 +50,7 @@
 
 .navbar-toggler {
   position: absolute;
-  right: calc(50% - 20px);
+  right: calc(50% - 27px);
   top: 0.7em;
   border-width: 0 !important;
 }

app/javascript/application.js

@@ -5,6 +5,7 @@ import '@hotwired/turbo-rails'
 // from maplibre.haml caused issues with the turbo:load event which was received
 // before the module finished loading
 import 'maplibre'
+import 'frontpage'
 import 'controllers'
 
 import AOS from 'aos'

app/javascript/frontpage.js

@@ -1,4 +1,7 @@
 // loaded in /frontpage/index.html.haml
+
+let swiper;
+
 ['turbo:load'].forEach(function (e) {
   window.addEventListener(e, function () {
     // console.log(e)
@@ -19,15 +22,15 @@ function unload () {
 }
 
 function init () {
-  initSwiper()
+  swiper = initSwiper()
 }
 
 function initSwiper () {
   const config = {
     loop: true,
-    speed: 600,
+    speed: 1200,
     autoplay: {
-      delay: 5000
+      delay: 8000
     },
     slidesPerView: 'auto',
     centeredSlides: true,
@@ -39,7 +42,17 @@ function initSwiper () {
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev'
+    },
+    on: {
+      slideChange
     }
   }
   return new window.Swiper('.swiper', config)
 }
+
+function slideChange () {
+  if (swiper) {
+    // console.log('Slide changed to:', swiper.realIndex)
+    document.getElementById('swiper-image').src = 'images/frontpage/feature' + swiper.realIndex + '.png'
+  }
+}

app/views/frontpage/index.haml

@@ -1,56 +1,58 @@
 - content_for :title, "Mapforge: Create and share individual maps"
 
-/ https://swiperjs.com/
-= javascript_include_tag "swiper-bundle.min.js"
-= javascript_import_module_tag "frontpage"
-
 %main#frontpage.main
 
   / Hero Section
   #hero.hero.section.dark-background
     = image_tag "frontpage/background_map3.jpg", alt: "", 'data-aos': "zoom-out", 'data-aos-once': "true"
     .container
       .row
-        .col-lg-5
+        .col-lg-6.welcome-text
           %h1.mapforge-font{ 'data-aos': "fade-up" } Create your own maps
           %blockquote{ 'data-aos': "fade-up" }
             %p Mapforge lets you create and share individual maps. You can build your own unique maps by layering your data onto various base maps. Collaborate in real-time just like editing a document together online and share your maps.
             %p Mapforge.org is free to use and available as open-source for self-hosting, giving you full control over your data.
 
 
-  %section#features.why-us.section.hidden
+  %section#features.why-us.section
     .row.g-0
-      .col-lg-5.img-bg{"data-aos" => "fade-up", "data-aos-delay" => "100"}
-        = image_tag "frontpage/feature1.png", alt: ""
-      .col-lg-7.slides.position-relative{"data-aos" => "fade-up", "data-aos-delay" => "200"}
+      .col-lg-5.img-bg
+        %img{ src: "images/frontpage/feature0.png", id: 'swiper-image', alt: "", loading: 'lazy' }
+      .col-lg-7.background-dark.slides.position-relative
         .swiper.init-swiper
           .swiper-wrapper
             .swiper-slide
               .item
-                %h3.mb-3 Map features
-                %h4.mb-3 Unlock the full potential of your maps with our powerful and flexible mapping solution:
+                %h3.mb-3.mapforge-font Map tools
+                %h4.mb-3 Use these features to create your customized map:
                 %ul
-                  %li Customizable Base Maps: Tailor your maps to suit any use case - from street navigation to outdoor exploration or satellite imagery. Our configurable base maps ensure you always have the right backdrop for your data.
-                  %li Seamless Import/Export: Easily bring your data into our platform and export it when needed. Whether you're working with GIS files, spreadsheets, or other data sources, our import/export capabilities make integration a breeze.
-                  %li Advanced Styling: Take control of your map's appearance with our extended Style specification. Customize colors, symbols, labels, and more to create visually stunning and informative maps.
-                  %li Layered Approach: Organize your map elements with our intuitive Layer Element list. Easily manage transparency, opacity, and stacking order to create complex, layered maps.
-                  %li Visual Enhancement: Add context and depth to your maps with our Image Upload feature. Overlay photographs, diagrams, or other visual elements to enhance your data visualization.
-                  %li 3D Terrain Support: Bring your maps to life with realistic 3D terrain. Perfect for geographical, topographical, or urban planning applications.
+                  %li Choose from different base maps: Streets, satellite, topographic, biking, 3D houses etc.
+                  %li Import/Export: Supports GeoJSON, GPX, KML
+                  %li Advanced Styling: Customize colors, symbols, labels, (3D) polygons and more
+                  %li Image Upload: Add your pictures as icons and in descriptions
+                  %li 3D Terrain: View your trail with realistic elevation
             .swiper-slide
               .item
-                %h3.mb-3 Unde perspiciatis ut repellat dolorem
-                %h4.mb-3 Amet cumque nam sed voluptas doloribus iusto. Dolorem eos aliquam quis.
-                %p Dolorem quia fuga consectetur voluptatem. Earum consequatur nulla maxime necessitatibus cum accusamus. Voluptatem dolorem ut numquam dolorum delectus autem veritatis facilis. Et ea ut repellat ea. Facere est dolores fugiat dolor.
+                %h3.mb-3.mapforge-font Collaboration
+                %h4.mb-3 Work with others and stream map changes to all connected clients
+                %ul
+                  %li Live updates: Map changes are synchronized via websockets
+                  %li Login: Have your maps assigned to your account
+                  %li Access control: Decide to share map with view-only or edit permissions
             .swiper-slide
               .item
-                %h3.mb-3 Aliquid non alias minus
-                %h4.mb-3 Necessitatibus voluptatibus explicabo dolores a vitae voluptatum.
-                %p Neque voluptates aut. Soluta aut perspiciatis porro deserunt. Voluptate ut itaque velit. Aut consectetur voluptatem aspernatur sequi sit laborum. Voluptas enim dolorum fugiat aut.
+                %h3.mb-3.mapforge-font Cross platform
+                %h4.mb-3 Use Mapforge with different clients + apps
+                %ul
+                  %li Responsive Design: Works well both desktop and mobile
+                  %li Map your track: Use ulogger to visualize and share your tracks live
             .swiper-slide
               .item
-                %h3.mb-3 Necessitatibus suscipit non voluptatem quibusdam
-                %h4.mb-3 Tempora quos est ut quia adipisci ut voluptas. Deleniti laborum soluta nihil est. Eum similique neque autem ut.
-                %p Ut rerum et autem vel. Et rerum molestiae aut sit vel incidunt sit at voluptatem. Saepe dolorem et sed voluptate impedit. Ad et qui sint at qui animi animi rerum.
+                %h3.mb-3.mapforge-font Open Source
+                %h4.mb-3 Standing on the shoulders of giants
+                %ul
+                  %li Used open source projects: maplibregl.js, openstreetmap, openrouteservice, Ruby on Rails
+                  %li Self-Hosted Solution: Deploy Mapforge on your own infrastructure
           .swiper-pagination
         .swiper-button-prev
         .swiper-button-next

app/views/layouts/_head.html.haml

@@ -35,6 +35,8 @@
 
   / Bootstrap
   = javascript_include_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+  / https://swiperjs.com/
+  = javascript_include_tag "swiper-bundle.min.js"
 
   / dynamic head content
   = yield(:head)

app/views/sessions/new.html.haml

@@ -7,7 +7,7 @@
     = image_tag "frontpage/background_map4.jpg", alt: "", 'data-aos': "zoom-out", 'data-aos-once': "true"
     .container
       .row
-        .col-xl-5
+        .col-xl-5.col-lg-5
 
           %h1.mb-4 Log in
           %p.mb-3