From 3a447d1fa55080f0c8cb9465a1e56dfbea84d457 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 23 May 2023 13:27:35 +0200
Subject: [PATCH] wip #5812 @2:00

---
 .../styles/partials/home-carousel.sass        | 61 ++++++++++++++-----
 .../resources/styles/widgets/blockText.sass   | 24 ++++++++
 .../views/widgets/carousel-home.blade.php     | 11 +++-
 .../views/widgets/text-image.blade.php        | 13 ++--
 4 files changed, 86 insertions(+), 23 deletions(-)

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
index e6a6295..d165162 100644
--- a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
@@ -66,23 +66,19 @@
             position: absolute
             width: max-content
             height: max-content
-            bottom: var(--bottom)
             left: var(--left)
-            transition: all 1s
-
-        .rightside.active
-          .thumbnail
-            position: relative
-
-          .text
-            opacity: 1
-            top: 0
 
         &.active
           .thumbnail
             img
-              transition: all 1s
-              bottom: calc(var(--bottom) - 39px)
+              animation-name: img-in
+              animation-duration: 1s
+              animation-fill-mode: forwards
+        &:not(.active)
+          .thumbnail
+            img
+              animation-name: img-out
+              animation-duration: 1.9s
 
       .rightside
         display: flex
@@ -129,7 +125,33 @@
           .overlay
             bottom: 0
 
-
+  .counter
+    position: absolute
+    width: 86px
+    height: 86px
+    z-index: 5
+    bottom: 88px
+    left: 21px
+    font-size: 25px
+    +screen-size(desktop)
+      left: calc((100vw - 1344px) / 2)
+    lottie-player:not(.active)
+      display: none
+    .text
+      position: absolute
+      top: 50%
+      left: 50%
+      transform: translate(-50%,-50%)
+      color: #FFFFFF
+    .circle
+      position: absolute
+      width: 73px
+      height: 73px
+      border: 2px solid #FFFFFF
+      top: 6px
+      border-radius: 50px
+      left: 6px
+      z-index: -1
 
 @keyframes fade-out
   0%
@@ -145,12 +167,21 @@
   100%
     transform: translateY(0)
 
-@keyframes anime-thumb
+@keyframes img-in
+  0%
+    bottom: var(--bottom)
+  100%
+    bottom: calc(var(--bottom) - 39px)
+
+@keyframes img-out
   0%
-    bottom: calc(var(--bottom) + 39px)
+    bottom: calc(var(--bottom) - 39px)
+  50%
+    bottom: calc(var(--bottom) - 78px)
   100%
     bottom: var(--bottom)
 
+
 .home-carousel-mobile
   overflow: hidden
   .thumbnail,
diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
index e4d057f..9175334 100644
--- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
@@ -33,6 +33,15 @@
       margin-bottom: 38px
       +screen-size(small-desktop)
         margin-bottom: 43px
+    .text-block-image img
+      +screen-size(small-desktop)
+        transform: translateX(-100px)
+        position: relative
+        opacity: 0
+        &.active
+          opacity: 1
+          transition: all .5s ease-out
+          transform: translateX(0)
 
   &.gallery-right
     +screen-size(small-desktop)
@@ -47,6 +56,16 @@
           grid-area: 2 / 2 / 4 / 6
         &-body
           grid-area: 4 / 2 / 5 / 6
+    .text-block-image img
+      +screen-size(small-desktop)
+        transform: translateX(100px)
+        position: relative
+        opacity: 0
+        &.active
+          opacity: 1
+          transition: all .5s ease-out
+          transform: translateX(0)
+
 
   &.has-title
     &.gallery-left
@@ -75,6 +94,11 @@
     font-size: 20px
 
   &-body
+    top: 50px
+    transition: top .5s
+    position: relative
+    &.active
+      top: 0
     h2
       width: max-content
       margin-top: var(--space-36-86)
diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
index 1c7946f..549c7de 100644
--- a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
+++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
@@ -3,7 +3,7 @@
     @php
       $key += 1;
     @endphp
-    <div class="elementor-repeater-item-{{$slide['_id']}} carousel-slide container {{ $key === 2 ? 'next' : '' }} {{ $key === 1 ? 'active' : '' }}">
+    <div class="elementor-repeater-item-{{$slide['_id']}} carousel-slide container {{ $key === 2 ? 'next' : '' }} {{ $key === 1 ? 'active' : '' }}" data-index="{{ $key }}">
       <div class="leftside {{ $key === 1 ? 'active' : '' }}">
         <div class="overlay overlayside" style="background-image: url({{$slide['background_image']['url']}})"></div>
         @if(array_key_exists('image',$slide))
@@ -25,7 +25,14 @@
     </div>
   @endforeach
   <div class="counter">
-
+    <lottie-player class="active" data-slide="1" src="bleu.json" speed="2" style="width: 86px; height: 86px;" loop autoplay></lottie-player>
+    <lottie-player data-slide="2" data-slide="2" src="vert.json" speed="2" style="width: 86px; height: 86px;" loop autoplay></lottie-player>
+    <lottie-player data-slide="3" data-slide="3" src="rose.json" speed="2" style="width: 86px; height: 86px;" loop autoplay></lottie-player>
+    <div class="text">
+      <span class="var">1</span>/<span class="length">{{ sizeof($slides) }}</span>
+    </div>
+    <div class="circle">
+    </div>
   </div>
 </div>
 
diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php
index ec95301..16d6119 100644
--- a/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php
+++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php
@@ -18,12 +18,13 @@
     </{{$settings['title_tag']}}>
   @endif
 
-  @if($settings['subtitle'])
-    <{{$settings['subtitle_tag']}} class={{implode(' ',$attributes['subtitle']['class'])}}>
+  <div class="{{implode(' ',$attributes['body']['class'])}}">
+    @if($settings['subtitle'])
+      <{{$settings['subtitle_tag']}} class={{implode(' ',$attributes['subtitle']['class'])}}>
       {!! $settings['subtitle'] !!}
-    </{{$settings['subtitle_tag']}}>
-  @endif
-
-  <div class="{{implode(' ',$attributes['body']['class'])}}">{!! $settings['body'] !!}</div>
+      </{{$settings['subtitle_tag']}}>
+    @endif
+    {!! $settings['body'] !!}
+  </div>
 
 </div>
-- 
2.39.5