From 9256317eaaafe17ad43ccc39669801494a046136 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 12 Dec 2025 13:09:02 +0100
Subject: [PATCH] wait #7830 @9:00

---
 .../views/helpers/BackgroundBlock.php         | 36 ++++----
 js/210-home.js                                |  6 +-
 less/210-home.less                            | 83 +++++++++++++++++--
 less/214-home-services.less                   |  2 +
 4 files changed, 101 insertions(+), 26 deletions(-)

diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php
index d247d2c..54d1b2e 100644
--- a/framework/application/views/helpers/BackgroundBlock.php
+++ b/framework/application/views/helpers/BackgroundBlock.php
@@ -25,8 +25,9 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
 
             $extra_attributes = array();
             $bg = '';
+            $mobiles = [];
             if ($data['bg_image']) {
-                foreach ($data['bg_image'] as $img) {
+                foreach ($data['bg_image'] as $key => $img) {
                     $bgimage = CubeIT_Util_Cms::extractFile($img);
                     $image_path = CubeIT_View_Helper_ImageCms::getPath($bgimage);
 
@@ -51,14 +52,14 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
                         }
                     } else {
                         if (isset($data['backgroundmobileimage'])) {
-                            $bgmobileimage = CubeIT_Util_Cms::extractFile($data['backgroundmobileimage']);
+                            $bgmobileimage = CubeIT_Util_Cms::extractFile($data['backgroundmobileimage'][$key]);
                             if ($bgmobileimage) {
                                 $attributes['data-has-mobile'] = '1';
                                 $mobile_path = CubeIT_View_Helper_ImageCms::getPath($bgmobileimage);
                                 CubeIT_Image::getDimensions($mobile_path, $image_width, $image_height);
                                 $image_ratio = $image_height / $image_width;
                                 $attributes['data-mobile-ratio'] = $image_ratio;
-                                $target_height = $mobile_max_width * $image_ratio;
+                                $target_height = 2000 * $image_ratio;
                                 $mobile = $this->imageProcess()->imageProcessGetURL($mobile_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');
                             } else {
                                 $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');
@@ -67,24 +68,25 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract
                             $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M');
                         }
 
-                        $pict = $this->picture([
-                            [
-                                'src' => $image_path,
-                                'width' => 2560
+
+                            $pict = $this->picture([
+                                [
+                                    'src' => $image_path,
+                                    'width' => 2560
+                                ],
+                                [
+                                    'src' => $mobile,
+                                    'width' => $mobile_max_width,
+                                    'media' => '(max-width: 900px)'
+                                ]
                             ],
-                            [
-                                'src' => $mobile,
-                                'width' => $mobile_max_width,
-                                'media' => '(max-width: 900px)'
-                            ]
-                        ],
-                            [
-                                'alt' => $data['title']
-                            ]);
+                                [
+                                    'alt' => $data['title']
+                                ]);
                     }
                     $bg .= $this->htmlElement($pict, 'div', array('class' => 'picture'));
                 }
-                $content = $bg . $content;
+                $content = '<div class="pictures-container">'.$bg . '</div>'.$content;
             }
         }
 
diff --git a/js/210-home.js b/js/210-home.js
index 854156e..bfd1ec4 100644
--- a/js/210-home.js
+++ b/js/210-home.js
@@ -3,6 +3,7 @@ var lastDotIndex;
 registerLoader(load_home, true);
 function load_home() {
     $(window).on('fluidbookresize', resizeHome);
+    console.log('ok')
     resizeHome();
     initScrollify();
     carouselIntro();
@@ -254,8 +255,7 @@ function carouselIntro() {
         repeatDelay: 5
     });
 
-    tl.staggerTo(".intro .picture", 1.2, {
-        opacity: 1,
+    tl.staggerTo("[data-template=home] .intro .picture", 1.2, {
+        opacity: 1
     }, 5)
-
 }
diff --git a/less/210-home.less b/less/210-home.less
index 8c15fbd..6fdc39a 100644
--- a/less/210-home.less
+++ b/less/210-home.less
@@ -1,11 +1,71 @@
 @import "000-imports";
 
 .home {
-  .intro .picture {
-    background-color: #f2f6ff;
-    opacity: 0;
+  .intro {
+    .content-wrapper {
+      @media @m900 {
+        flex-direction: column-reverse;
+        padding: 55px 0 0;
+      }
+    }
+
+    .pictures-container {
+      @media @m900 {
+        width: 100%;
+        height: 60vh;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+
+    .picture {
+      background-color: #f2f6ff;
+      opacity: 0;
+
+      @media @m900 {
+        height: 100%;
+        padding-top: 0;
+        position: static;
+      }
+
+      img {
+        @media @m900 {
+          object-position: bottom center !important;
+        }
+      }
+    }
+
+    .content-inner {
+
+      @media @m900 {
+        height: auto;
+        text-align: left;
+        padding-top: 10px;
+        padding-bottom: 0 !important;
+      }
+
+      h1 {
+        @media @m900 {
+          text-align: left;
+        }
+      }
+
+      h1:after, h2:after {
+        @media @m900 {
+          left: 0;
+          margin-left: 0;
+        }
+      }
+    }
+
+    .scroll-arrow {
+      @media @m900 {
+        display: none !important;
+      }
+    }
   }
 
+
   .content-wrapper {
     &.fullheight {
       position: relative;
@@ -15,9 +75,20 @@
         background-size: 180%;
       }
 
-      &[data-has-mobile="1"] .content-inner {
-        @media @m900 {
-          padding-bottom: 55%;
+      &[data-has-mobile="1"] {
+        background-color: #f2f6ff;
+
+        .picture {
+          @media @m900 {
+            height: 0;
+            padding-bottom: 54%;
+          }
+        }
+
+        .content-inner {
+          @media @m900 {
+            padding-bottom: 55%;
+          }
         }
       }
     }
diff --git a/less/214-home-services.less b/less/214-home-services.less
index 8cb408a..7871552 100644
--- a/less/214-home-services.less
+++ b/less/214-home-services.less
@@ -19,6 +19,8 @@ section.services {
   }
   .text {
     padding-right: 30px;
+    position: relative;
+    z-index: 2;
 
     @media @m900 {
       padding-right: 0;
-- 
2.39.5