added scroll animation in OS and Platform section

content/english/open-source/contributed-open-source.md

@@ -54,7 +54,7 @@ image_and_content_block:
   - enable: true
     subtitle: "We Are Delta"
     title: "Lots of people love us, <br> and we're also."
-    image: "images/block-image-01.png"
+    image: "images/content/compage/what-is-compage.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""
@@ -69,7 +69,7 @@ image_and_content_block:
   - enable: true
     subtitle: "We Are Delta"
     title: "Lots of people love us, <br> and we're also."
-    image: "images/block-image-01.png"
+    image: "images/content/compage/how-it-works.svg"
     content_position: "left" # Value will be - "left/right"
     bg_color: "#e9f1ff"
     content_color: ""
@@ -84,7 +84,7 @@ image_and_content_block:
   - enable: true
     subtitle: "We Are Delta"
     title: "Lots of people love us, <br> and we're also."
-    image: "images/block-image-01.png"
+    image: "images/content/compage/integrations-features.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""

content/english/open-source/our-open-source.md

@@ -54,7 +54,7 @@ image_and_content_block:
   - enable: true
     subtitle: "We Are Delta"
     title: "Lots of people love us, <br> and we're also."
-    image: "images/block-image-01.png"
+    image: "images/content/compage/what-is-compage.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""
@@ -69,7 +69,7 @@ image_and_content_block:
   - enable: true
     subtitle: "We Are Delta"
     title: "Lots of people love us, <br> and we're also."
-    image: "images/block-image-01.png"
+    image: "images/content/compage/how-it-works.svg"
     content_position: "left" # Value will be - "left/right"
     bg_color: "#e9f1ff"
     content_color: ""
@@ -84,7 +84,7 @@ image_and_content_block:
   - enable: true
     subtitle: "We Are Delta"
     title: "Lots of people love us, <br> and we're also."
-    image: "images/block-image-01.png"
+    image: "images/content/compage/integrations-features.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""

content/english/platform/capten.md

@@ -56,7 +56,7 @@ image_and_content_block:
     subtitle_color: ""
     title: "Lots of people love us, <br> and we're also."
     title_color: ""
-    image: "images/block-image-01.png"
+    image: "images/content/compage/what-is-compage.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""
@@ -73,7 +73,7 @@ image_and_content_block:
     subtitle_color: ""
     title: "Lots of people love us, <br> and we're also."
     title_color: ""
-    image: "images/block-image-01.png"
+    image: "images/content/compage/how-it-works.svg"
     content_position: "left" # Value will be - "left/right"
     bg_color: "#e9f1ff"
     content_color: ""
@@ -90,7 +90,7 @@ image_and_content_block:
     subtitle_color: ""
     title: "Lots of people love us, <br> and we're also."
     title_color: ""
-    image: "images/block-image-01.png"
+    image: "images/content/compage/integrations-features.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""

content/english/platform/opty.md

@@ -56,7 +56,7 @@ image_and_content_block:
     subtitle_color: ""
     title: "Lots of people love us, <br> and we're also."
     title_color: ""
-    image: "images/block-image-01.png"
+    image: "images/content/compage/what-is-compage.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""
@@ -73,7 +73,7 @@ image_and_content_block:
     subtitle_color: ""
     title: "Lots of people love us, <br> and we're also."
     title_color: ""
-    image: "images/block-image-01.png"
+    image: "images/content/compage/how-it-works.svg"
     content_position: "left" # Value will be - "left/right"
     bg_color: "#e9f1ff"
     content_color: ""
@@ -90,7 +90,7 @@ image_and_content_block:
     subtitle_color: ""
     title: "Lots of people love us, <br> and we're also."
     title_color: ""
-    image: "images/block-image-01.png"
+    image: "images/content/compage/integrations-features.svg"
     content_position: "right" # Value will be - "left/right"
     bg_color: ""
     content_color: ""

themes/delta/assets/scss/templates/_main.scss

@@ -1765,4 +1765,74 @@ footer {
     position: relative;
     z-index: 22;
   }
+}
+
+// animated section block
+[data-section] {
+  padding: 200px 0;
+  @include desktop {
+    padding: 110px 0;
+  }
+}
+.anim-block {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+  &-inner {
+    perspective: 1800px;
+    display: flex;
+    align-items: center;
+    position: sticky;
+    overflow: hidden;
+    top: 0;
+    margin: 0;
+    height: 100vh;
+  }
+}
+.assets {
+  position: relative;
+  transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
+  width: 35%;
+  perspective: 1800px;
+  transform: translateX(20%);
+  .asset-bg-image {
+    width: 100%;
+    display: block;
+    will-change: transform;
+    transform-origin: center top;
+    transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transform: rotate(-4e-05deg) rotateY(15deg) rotateX(9.99994deg);
+  }
+  &-right {
+    transform: translateX(160%);
+    .asset-bg-image {
+      transform: rotate(-4e-05deg) rotateY(-15deg) rotateX(9.99994deg);
+    }
+    [data-image] {
+      transform: translateX(-50%) scale(1) rotate(-4e-05deg) rotateY(-15deg) rotateX(9.99994deg);
+    }
+  }
+  [data-image] {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translateX(-50%) scale(.6) rotate(-4e-05deg) rotateY(-15deg) rotateX(9.99994deg);
+    width: 60%;
+    opacity: 0;
+    visibility: hidden;
+    transition: .23s;
+    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
+    &.show {
+      transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
+      transition-delay: .1s;
+      top: 20%;
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(-50%) scale(1) rotate(-4e-05deg) rotateY(15deg) rotateX(9.99994deg);
+    }
+  }
 }

themes/delta/layouts/open-source/single.html

@@ -53,14 +53,71 @@ <h1 class="title text-xl mb-3 {{if not .title_color}}text-white{{end}}" {{with .
 
 {{with .Params.image_and_content_block}}
 {{if .enable}}
+<div class="position-relative">
+<div class="anim-block d-none d-lg-block">
+  <div class="anim-block-inner">
+    <div class="assets">
+      {{ partial "image.html" (dict "Src" "images/hp-primary-desktop.svg" "Class" "img-fluid asset-bg-image" ) }}
+
+      {{ range $i, $e := .blocks }}
+      {{ if .enable }}
+      <div data-image>
+        {{with .image}}
+        {{ partial "image.html" (dict "Src" . "Class" "img-fluid" ) }}
+        {{end}}
+      </div>
+      {{ end }}
+      {{ end }}
+    </div>
+  </div>
+</div>
+
 {{ range .blocks }}
 {{ if .enable }}
-{{ partial "image-and-content-block.html" (dict "BgColor" .bg_color "HasWave" false "SectionClass" "" "ContainerClass" "container-delta-lg" "RowClass" "gx-4 gx-xl-5" "ContentPosition" .content_position "Subtitle" .subtitle "SubtitleColor" .subtitle_color "Title" .title "TitleColor" .title_color "Content" .content "ContentColor" .content_color "Image" .image )}}
+{{ partial "image-and-content-block.html" (dict "BgColor" .bg_color "HasWave" false "SectionClass" "" "ContainerClass" "container-delta-lg" "RowClass" "gx-4 gx-xl-5" "ContentPosition" .content_position "Subtitle" .subtitle "SubtitleColor" .subtitle_color "Title" .title "TitleColor" .title_color "Content" .content "ContentColor" .content_color "Image" .image "Largegap" true )}}
 {{end}}
 {{end}}
+
+</div>
 {{end}}
 {{end}}
 
+<script>
+  // Get the elements
+  const mainSection = document.querySelector('.the-main-section');
+  const assets = document.querySelector('.assets');
+  const assetImages = document.querySelectorAll('[data-image]');
+  const sections = document.querySelectorAll('[data-section]');
+  assetImages[0].classList.add('show');
+
+  window.addEventListener('scroll', function() {
+    // Loop through the sections and get the position of each one
+    for (let i = 0; i < sections.length; i++) {
+      const sectionPos = sections[i].getBoundingClientRect().top;
+
+      if (sectionPos < (window.innerHeight / 2) && sectionPos > (-window.innerHeight / 2)) {
+        if (i === 0) {
+          assets.classList.add('assets-left');
+          assets.classList.remove('assets-right');
+        } else if (i % 2 === 1) {
+          assets.classList.remove('assets-left');
+          assets.classList.add('assets-right');
+        } else {
+          assets.classList.add('assets-left');
+          assets.classList.remove('assets-right');
+        }
+      }
+
+      if (sectionPos < (window.innerHeight / 2) && sectionPos > (-window.innerHeight / 2)) {
+        assetImages[i].classList.add('show');
+      } else {
+        assetImages[i].classList.remove('show');
+      }
+
+    }
+  });
+</script>
+
 {{if .Params.call_to_action.enable}}
 {{ partial "call-to-action-3.html" . }}
 {{end}}

themes/delta/layouts/partials/image-and-content-block.html

@@ -11,8 +11,9 @@
 {{$content:= .Content }}
 {{$contentColor:= .ContentColor }}
 {{$image:= .Image }}
+{{$large_gap:= .Largegap }}
 
-<section class="section {{$sectionClass}} {{if $hasWave}}wave-block{{end}}" style="background-color: {{$bgColor}};">
+<section class="section {{$sectionClass}} {{if $hasWave}}wave-block{{end}}" style="background-color: {{$bgColor}};" data-section>
   <div class="container {{$containerClass}}">
     <div class="row align-items-center {{$rowClass}}">
       <div class="col-lg-6 order-1 {{with $contentPosition}}{{if eq . `right`}}order-lg-1{{else if eq . `left`}}order-lg-0{{else}}order-lg-0{{end}}{{end}}">
@@ -25,7 +26,7 @@ <h2 class="title" {{with $titleColor}}style="color:{{.}} !important"{{end}}>{{$t
       <div class="col-lg-6 order-0 mb-5 mb-lg-0 {{with .contentPosition}}{{if eq . `right`}}order-lg-0{{else if eq . `left`}}order-lg-1{{else}}order-lg-1{{end}}{{end}}">
         <div class="px-2 px-md-4 text-center">
           {{with $image}}
-          {{ partial "image.html" (dict "Src" . "Size" "570x" "Webp" false "Class" "img-fluid px-0 px-md-3 mx-auto" ) }}
+          {{ partial "image.html" (dict "Src" . "Size" "570x" "Webp" false "Class" "img-fluid px-0 px-md-3 mx-auto d-block d-lg-none" ) }}
           {{end}}
         </div>
       </div>

themes/delta/layouts/platform/single.html

@@ -54,14 +54,70 @@ <h1 class="title text-xl mb-3 {{if not .title_color}}text-white{{end}}" {{with .
 
 {{with .Params.image_and_content_block}}
 {{if .enable}}
+<div class="position-relative">
+<div class="anim-block d-none d-lg-block">
+  <div class="anim-block-inner">
+    <div class="assets">
+      {{ partial "image.html" (dict "Src" "images/hp-primary-desktop.svg" "Class" "img-fluid asset-bg-image" ) }}
+
+      {{ range $i, $e := .blocks }}
+      {{ if .enable }}
+      <div data-image>
+        {{with .image}}
+        {{ partial "image.html" (dict "Src" . "Class" "img-fluid" ) }}
+        {{end}}
+      </div>
+      {{ end }}
+      {{ end }}
+    </div>
+  </div>
+</div>
+
 {{ range .blocks }}
 {{ if .enable }}
-{{ partial "image-and-content-block.html" (dict "BgColor" .bg_color "HasWave" false "SectionClass" "" "ContainerClass" "container-delta-lg" "RowClass" "gx-4 gx-xl-5" "ContentPosition" .content_position "Subtitle" .subtitle "SubtitleColor" .subtitle_color "Title" .title "TitleColor" .title_color "Content" .content "ContentColor" .content_color "Image" .image )}}
+{{ partial "image-and-content-block.html" (dict "BgColor" .bg_color "HasWave" false "SectionClass" "" "ContainerClass" "container-delta-lg" "RowClass" "gx-4 gx-xl-5" "ContentPosition" .content_position "Subtitle" .subtitle "SubtitleColor" .subtitle_color "Title" .title "TitleColor" .title_color "Content" .content "ContentColor" .content_color "Image" .image "Largegap" true )}}
 {{end}}
 {{end}}
+</div>
 {{end}}
 {{end}}
 
+<script>
+  // Get the elements
+  const mainSection = document.querySelector('.the-main-section');
+  const assets = document.querySelector('.assets');
+  const assetImages = document.querySelectorAll('[data-image]');
+  const sections = document.querySelectorAll('[data-section]');
+  assetImages[0].classList.add('show');
+
+  window.addEventListener('scroll', function() {
+    // Loop through the sections and get the position of each one
+    for (let i = 0; i < sections.length; i++) {
+      const sectionPos = sections[i].getBoundingClientRect().top;
+
+      if (sectionPos < (window.innerHeight / 2) && sectionPos > (-window.innerHeight / 2)) {
+        if (i === 0) {
+          assets.classList.add('assets-left');
+          assets.classList.remove('assets-right');
+        } else if (i % 2 === 1) {
+          assets.classList.remove('assets-left');
+          assets.classList.add('assets-right');
+        } else {
+          assets.classList.add('assets-left');
+          assets.classList.remove('assets-right');
+        }
+      }
+
+      if (sectionPos < (window.innerHeight / 2) && sectionPos > (-window.innerHeight / 2)) {
+        assetImages[i].classList.add('show');
+      } else {
+        assetImages[i].classList.remove('show');
+      }
+
+    }
+  });
+</script>
+
 {{if .Params.call_to_action.enable}}
 {{ partial "call-to-action-3.html" . }}
 {{end}}