feat: add fade in

packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css

@@ -75,7 +75,7 @@
 }
 
 .frame-type-cloonar_hero .social-icon:hover {
-  background: #1e3810;
+  background: var(--bs-primary-light);
 }
 
 .frame-type-cloonar_hero .hero-image-wrapper {

packages/base/ContentBlocks/ContentElements/text/templates/frontend.html

@@ -1,7 +1,7 @@
 <f:layout name="Default" />
 <f:section name="Main">
     <f:asset.css identifier="CBText" href="{cb:assetPath()}/frontend.css" />
-    <div>
+    <div class="fade-in-on-scroll">
         <f:if condition="{data.header}">
             <f:then><h2>{data.header}</h2></f:then>
         </f:if>

packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html

@@ -13,7 +13,7 @@
     <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
   </f:if>
 
-  <div class="textimage-container image-pos-{data.imageorient}">
+  <div class="textimage-container image-pos-{data.imageorient} fade-in-on-scroll">
     <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>