From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 1 Dec 2025 10:01:35 +0000 (+0100)
Subject: wip #7846 @4:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b45d11c774bb89559dd943dca75c8ba616501441;p=fluidbook-v3.git

wip #7846 @4:00
---

diff --git a/framework/application/forms/CMS/Sub/Home/Block.php b/framework/application/forms/CMS/Sub/Home/Block.php
index 89055c4..5f55882 100644
--- a/framework/application/forms/CMS/Sub/Home/Block.php
+++ b/framework/application/forms/CMS/Sub/Home/Block.php
@@ -49,7 +49,7 @@ class Fluidbook_Form_CMS_Sub_Home_Block extends CubeIT_Form_SubForm {
 
         $backgroundImage = new CubeIT_Form_Element_File_Image('backgroundmobileimage');
         $backgroundImage->setLabel('Image de fond (variante mobile)');
-        $backgroundImage->setMaxItems(1);
+        $backgroundImage->setMaxItems(5);
         $backgroundImage->setOrder(61);
         $this->addElement($backgroundImage);
 	}
diff --git a/framework/application/views/helpers/HomeServices.php b/framework/application/views/helpers/HomeServices.php
index e08bfc0..4b41bae 100644
--- a/framework/application/views/helpers/HomeServices.php
+++ b/framework/application/views/helpers/HomeServices.php
@@ -14,19 +14,17 @@ class Fluidbook_View_Helper_HomeServices extends Fluidbook_View_Helper_HomeLayer
 		$res .= $this->_leftText();
 		$res .= '</div>'; // .text
 
-		$res .= '<div class="carousel">';
-		$res .= '<div class="services-examples">';
-
-		foreach ($data['examples'] as $example) {
-			$img = $this->imageProcess($example['image'], $example['title'], 810, 506, [], 'C', 'C', 'M', false, 'auto', null, 82);
-			$rollover = $this->_rollover($example);
-			$res .= $this->htmlElement($img . $rollover, 'div', ['data-title' => $example['title']]);
-		}
-
-		$res .= '</div>'; // .services-examples
-		$res .= '<ul class="services-examples-nav" style="color: ' . $data['themecolor'] . '"></ul>'; // Populated by JS
-		$res .= '</div>'; // .carousel
-
+        $res .= '<div class="video-container">';
+        $res .= '<div class="video-wrapper">';
+        $res .= '<div class="clay_ipad">';
+        $res .= '<img src="/images/services/Pencil.png" class="pencil" />';
+        $res .= '<img src="/images/services/Eraser.png" class="eraser" />';
+        $res .= '<video width="100" loop muted autoplay><source src="/images/services/Showreel_Fluidbook_v0.mp4" /></video>';
+        $res .= '<img src="/images/services/ipad.png" class="layer" />';
+        $res .= '</div>'; // Ipad container
+        $res .= '</div>'; // Video wrapper
+        $res .= '<img src="/images/services/Ruler.png" class="ruler" />';
+        $res .= '</div>'; // Video container
 
 		return $this->_layer($res, 'services');
 	}
diff --git a/images/services/Eraser.png b/images/services/Eraser.png
new file mode 100644
index 0000000..6e3156b
Binary files /dev/null and b/images/services/Eraser.png differ
diff --git a/images/services/Pencil.png b/images/services/Pencil.png
new file mode 100644
index 0000000..7f8c836
Binary files /dev/null and b/images/services/Pencil.png differ
diff --git a/images/services/Ruler.png b/images/services/Ruler.png
new file mode 100644
index 0000000..d03ba40
Binary files /dev/null and b/images/services/Ruler.png differ
diff --git a/images/services/Showreel_Fluidbook_v0.mp4 b/images/services/Showreel_Fluidbook_v0.mp4
new file mode 100644
index 0000000..fc0c9f9
Binary files /dev/null and b/images/services/Showreel_Fluidbook_v0.mp4 differ
diff --git a/images/services/ipad.png b/images/services/ipad.png
new file mode 100644
index 0000000..da6382c
Binary files /dev/null and b/images/services/ipad.png differ
diff --git a/less/210-home.less b/less/210-home.less
index 89a8a01..b11293b 100644
--- a/less/210-home.less
+++ b/less/210-home.less
@@ -1,6 +1,11 @@
 @import "000-imports";
 
 .home {
+  .intro .picture {
+    background-color: #f2f6ff;
+    opacity: 0;
+  }
+
   .content-wrapper {
     &.fullheight {
       position: relative;
@@ -19,15 +24,103 @@
 
     // Make picture element behave like a background image so it doesn't overlap
     // the header area (image itself should have necessary whitespace included)
-    .picture {
-      opacity: 0;
-    }
 
     .picture picture img {
       height: 100%; // Needed along with width:100% so that object-fit works
       object-fit: contain;
       object-position: bottom right;
     }
+
+    .video-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      height: 100%;
+      padding: 0 8%;
+
+      @media @m900 {
+        position: relative;
+        padding: 100px 5% 100px;
+      }
+
+      .video-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        position: relative;
+
+        @media @m900 {
+          flex-direction: column;
+        }
+      }
+
+      .ruler {
+        position: absolute;
+        width: 266px;
+        bottom: -12vh;
+        right: 0;
+
+        @media @m900 {
+          bottom: 15px;
+          right: -5%;
+        }
+      }
+
+      .clay_ipad {
+        //padding-bottom: 36.20%;
+        width: 50%;
+        position: relative;
+        height: auto;
+        display: flex;
+        //overflow: hidden;
+        @media @m900 {
+          width: 100%;
+        }
+
+        video {
+          width: 96.3%;
+          position: absolute;
+          top: 50%;
+          height: 96%;
+          object-fit: cover;
+          transform: translate(-50%, -50%);
+          left: 50%;
+        }
+
+        .layer {
+          width: 100%;
+          position: relative;
+        }
+
+        .eraser {
+          position: absolute;
+          top: 7px;
+          transform: translate(100%, -100%);
+          width: 100%;
+          right: -10px;
+          max-width: 80px;
+
+          @media @m900 {
+            max-width: 59px;
+          }
+        }
+
+        .pencil {
+          position: absolute;
+          top: -48px;
+          right: 10px;
+          width: 100%;
+          max-width: 230px;
+
+          @media @m900 {
+            max-width: 200px;
+          }
+        }
+      }
+    }
 }
 
   .content-inner {