@dcodegroup-au/page-builder 0.8.0 → 0.8.2

package/src/components/presenters/components/SliderPresenter.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10">
+  <div class="flex h-[494px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-[24px] lg:rounded-[48px] z-10">
     <Carousel :items-to-show="1" v-model="currentSlide" :autoplay="5000" class="carousel w-full" :wrap-around="true">
       <Slide v-for="(slide, index) in slides" :key="index">
         <div class="flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full">
-          <div class="flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]">
+          <div class="flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-7 sm:mt-14 lg:mt-[218px]">
             <div class="gap-2 flex z-10 mb-4">
               <a v-if="slides.length > 1"
                  v-for="(slide, index) in slides"
@@ -12,16 +12,16 @@
             </div>
             <h3 class="text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
             <div class="max-md:flex-1">
-              <p class="lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3" v-html="slide?.description"></p>
+              <p class="lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-4 sm:line-clamp-3" v-html="slide?.description"></p>
             </div>
-            <div class="flex gap-3 md:mt-8 max-sm:flex-col">
-              <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
+            <div class="flex gap-3 mt-4 md:mt-8">
+              <a class="text-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
                  :href="formatUrl(slide.secondary_button.url)"
                  v-if="slide.secondary_button.show"
                  :target="slide.secondary_button.open_in_new_tab ? '_blank' : ''">
                 <span>{{ slide.secondary_button.label }}</span>
               </a>
-              <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50"
+              <a class=" flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-50"
                  :href="formatUrl(slide.primary_button.url)"
                  v-if="slide.primary_button.show"
                  :target="slide.primary_button.open_in_new_tab ? '_blank' : ''">

package/src/components/presenters/modules/BulletPoints.vue

@@ -3,11 +3,14 @@
     <div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
       <div class="pb-container my-[40px]"
            :class="{'flex gap-8 flex-col lg:flex-row': headerComponent?.featured_image, 'flex-col-reverse lg:flex-row-reverse justify-between': headerComponent?.revert}">
-        <img v-if="headerComponent?.featured_image"
-             :src="headerComponent?.featured_image"
-             class="lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
+        <div v-if="headerComponent?.featured_image"
              ref="leftColumn"
-             alt="Feature"/>
+             class="w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+        >
+            <img :src="headerComponent?.featured_image"
+                 class="w-full h-full object-cover max-lg:absolute inset-0"
+                 alt="Feature"/>
+        </div>
         <div v-if="headerComponent" class="h-fit flex flex-col gap-4 lg:gap-8" :class="{'xl:py-[48px]': headerComponent?.featured_image, '[&]:grid lg:grid-cols-2': section?.two_column}"
              ref="rightColumn">
           <div>
@@ -65,4 +68,4 @@ onMounted(() => {
     leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
   }
 });
-</script>
+</script>

package/src/components/presenters/modules/TwoColumnsImageContent.vue

@@ -52,9 +52,9 @@
               <img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
             </div>
           </div>
-          <div v-if="imageComponent" class="w-full md:w-[560px] flex">
+          <div v-if="imageComponent" class="w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]">
             <img :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
-                 class="rounded-br-[24px] rounded-tl-[24px] w-full object-cover" />
+                 class="w-full h-full object-cover max-lg:absolute inset-0" />
           </div>
         </div>
       </div>
@@ -107,4 +107,4 @@ const items = computed(() => {
   });
 });
 
-</script>
+</script>