@dcodegroup-au/page-builder 0.7.5 → 0.7.7

package/dist/page-builder.umd.js

@@ -449,10 +449,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_7$q = { class: "flex justify-between" };
   const _hoisted_8$o = { class: "flex flex-col gap-1" };
   const _hoisted_9$n = { class: "font-semibold text-gray-900" };
-  const _hoisted_10$i = { class: "text-sm text-gray-600" };
+  const _hoisted_10$j = { class: "text-sm text-gray-600" };
   const _hoisted_11$g = ["disabled"];
   const _hoisted_12$d = { class: "flex flex-col gap-3" };
-  const _hoisted_13$a = ["onClick"];
+  const _hoisted_13$b = ["onClick"];
   const _hoisted_14$9 = ["onClick"];
   const _hoisted_15$7 = { class: "text-xs text-gray-600" };
   const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
@@ -515,7 +515,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 vue.createElementVNode("div", _hoisted_7$q, [
                   vue.createElementVNode("div", _hoisted_8$o, [
                     vue.createElementVNode("div", _hoisted_9$n, vue.toDisplayString(vue.unref(parseName)(vue.unref(type))), 1),
-                    vue.createElementVNode("div", _hoisted_10$i, "This " + vue.toDisplayString(vue.unref(singularize)(vue.unref(type))) + " can contain up to " + vue.toDisplayString(dataRef.value.max_items) + " " + vue.toDisplayString(vue.unref(parseName)(vue.unref(type), false)), 1)
+                    vue.createElementVNode("div", _hoisted_10$j, "This " + vue.toDisplayString(vue.unref(singularize)(vue.unref(type))) + " can contain up to " + vue.toDisplayString(dataRef.value.max_items) + " " + vue.toDisplayString(vue.unref(parseName)(vue.unref(type), false)), 1)
                   ]),
                   vue.createElementVNode("div", null, [
                     vue.createElementVNode("button", {
@@ -552,7 +552,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           "enable-edit": true,
                           onEditItem: ($event) => edit(item, index)
                         }, null, 8, ["onRemoveItem", "onEditItem"])
-                      ], 8, _hoisted_13$a)
+                      ], 8, _hoisted_13$b)
                     ], 2);
                   }), 256))
                 ])
@@ -11702,7 +11702,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_7$p = { class: "file-upload-preview" };
   const _hoisted_8$n = ["src", "title"];
   const _hoisted_9$m = ["href"];
-  const _hoisted_10$h = { class: "file-upload-title" };
+  const _hoisted_10$i = { class: "file-upload-title" };
   const _hoisted_11$f = { class: "file-upload-file-remove" };
   const _hoisted_12$c = { class: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 rounded-lg flex flex-col justify-center items-center w-full" };
   const _sfc_main$O = {
@@ -11808,7 +11808,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               target: "_blank",
               class: "link"
             }, [
-              vue.createElementVNode("div", _hoisted_10$h, vue.toDisplayString(file.value.file_name), 1)
+              vue.createElementVNode("div", _hoisted_10$i, vue.toDisplayString(file.value.file_name), 1)
             ], 8, _hoisted_9$m),
             vue.createElementVNode("a", _hoisted_11$f, [
               vue.createElementVNode("i", {
@@ -33927,7 +33927,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_7$n = { key: 0 };
   const _hoisted_8$l = { key: 1 };
   const _hoisted_9$l = { key: 2 };
-  const _hoisted_10$g = { class: "flex max-h-[196px] flex-wrap gap-1.5 overflow-y-auto" };
+  const _hoisted_10$h = { class: "flex max-h-[196px] flex-wrap gap-1.5 overflow-y-auto" };
   const __default__ = {
     directives: {
       clickOutside: useClickOutside
@@ -34007,7 +34007,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 vue.createElementVNode("p", _hoisted_6$o, [
                   icons2.value.length > 0 && search.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$n, " Search result ")) : icons2.value.length < 1 && search.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8$l, " No search result ")) : search.value.length < 1 && icons2.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_9$l, " Frequently used icons ")) : vue.createCommentVNode("", true)
                 ]),
-                vue.createElementVNode("div", _hoisted_10$g, [
+                vue.createElementVNode("div", _hoisted_10$h, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(icons2.value, (icon) => {
                     return vue.openBlock(), vue.createBlock(_sfc_main$H, {
                       class: "cursor-pointer rounded p-1 hover:bg-gray-100",
@@ -45225,13 +45225,13 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$m = { class: "flex flex-col gap-3" };
   const _hoisted_8$k = { class: "flex items-center justify-between" };
   const _hoisted_9$k = { class: "text-lg font-semibold text-gray-900" };
-  const _hoisted_10$f = { class: "relative flex items-end" };
+  const _hoisted_10$g = { class: "relative flex items-end" };
   const _hoisted_11$e = { class: "flex flex-col gap-6" };
   const _hoisted_12$b = {
     key: 0,
     class: "flex gap-4"
   };
-  const _hoisted_13$9 = { class: "flex items-center gap-2 cursor-pointer" };
+  const _hoisted_13$a = { class: "flex items-center gap-2 cursor-pointer" };
   const _hoisted_14$8 = ["name", "value", "onUpdate:modelValue", "onChange"];
   const _hoisted_15$6 = {
     key: 1,
@@ -45360,7 +45360,7 @@ ${escapeText(this.code(index, length))}
                 }, [
                   vue.createElementVNode("div", _hoisted_8$k, [
                     vue.createElementVNode("div", _hoisted_9$k, " Item #" + vue.toDisplayString(index + 1), 1),
-                    vue.createElementVNode("div", _hoisted_10$f, [
+                    vue.createElementVNode("div", _hoisted_10$g, [
                       vue.createVNode(_sfc_main$S, {
                         onRemoveItem: ($event) => handleDeleteItem(index)
                       }, null, 8, ["onRemoveItem"])
@@ -45369,7 +45369,7 @@ ${escapeText(this.code(index, length))}
                   vue.createElementVNode("div", _hoisted_11$e, [
                     !((_a2 = componentData.value) == null ? void 0 : _a2.hasOwnProperty("has_type_switcher")) || ((_b = componentData.value) == null ? void 0 : _b.has_type_switcher) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$b, [
                       (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (option) => {
-                        return vue.createElementVNode("label", _hoisted_13$9, [
+                        return vue.createElementVNode("label", _hoisted_13$a, [
                           vue.withDirectives(vue.createElementVNode("input", {
                             name: `content_type${index}`,
                             type: "radio",
@@ -45480,7 +45480,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$l = { class: "flex items-center justify-between" };
   const _hoisted_8$j = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_9$j = { class: "relative flex items-end" };
-  const _hoisted_10$e = { class: "flex flex-col gap-6" };
+  const _hoisted_10$f = { class: "flex flex-col gap-6" };
   const _hoisted_11$d = { class: "flex flex-col gap-1.5" };
   const _hoisted_12$a = ["onUpdate:modelValue"];
   const _sfc_main$B = {
@@ -45563,7 +45563,7 @@ ${escapeText(this.code(index, length))}
                       }, null, 8, ["onRemoveItem"])
                     ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_10$e, [
+                  vue.createElementVNode("div", _hoisted_10$f, [
                     vue.createElementVNode("div", _hoisted_11$d, [
                       vue.createVNode(vue.unref(VFileUpload), {
                         name: "image",
@@ -45768,7 +45768,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_7$j = { class: "flex items-center justify-between" };
   const _hoisted_8$i = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_9$i = { class: "relative flex items-end" };
-  const _hoisted_10$d = { class: "flex flex-col gap-6" };
+  const _hoisted_10$e = { class: "flex flex-col gap-6" };
   const _hoisted_11$c = { class: "flex flex-col gap-1.5" };
   const _sfc_main$y = {
     __name: "VideoGrid",
@@ -45844,7 +45844,7 @@ ${escapeText(this.code(index, length))}
                       }, null, 8, ["onRemoveItem"])
                     ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_10$d, [
+                  vue.createElementVNode("div", _hoisted_10$e, [
                     vue.createElementVNode("div", _hoisted_11$c, [
                       vue.createVNode(vue.unref(VFileUpload), {
                         name: "image",
@@ -46165,10 +46165,10 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "flex flex-col gap-2"
   };
-  const _hoisted_10$c = ["onClick"];
+  const _hoisted_10$d = ["onClick"];
   const _hoisted_11$b = { class: "flex flex-col" };
   const _hoisted_12$9 = { class: "text-sm font-medium text-gray-900" };
-  const _hoisted_13$8 = { class: "flex items-center justify-between gap-3 px-[10px]" };
+  const _hoisted_13$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
   const _hoisted_14$7 = { class: "flex h-full flex-1 flex-col mb-20" };
   const _hoisted_15$5 = {
     key: 0,
@@ -46305,10 +46305,10 @@ ${escapeText(this.code(index, length))}
                           _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "text-xs text-gray-600" }, "Sub-module", -1)),
                           vue.createElementVNode("div", _hoisted_12$9, vue.toDisplayString(component.name), 1)
                         ]),
-                        vue.createElementVNode("div", _hoisted_13$8, [
+                        vue.createElementVNode("div", _hoisted_13$9, [
                           vue.createVNode(vue.unref(ChevronRight), { class: "h-5 w-5" })
                         ])
-                      ], 10, _hoisted_10$c);
+                      ], 10, _hoisted_10$d);
                     }), 256))
                   ])) : vue.createCommentVNode("", true)
                 ]);
@@ -47829,20 +47829,21 @@ ${escapeText(this.code(index, length))}
       };
     }
   });
-  const _hoisted_1$M = { class: "flex h-[708px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl md:rounded-[48px] z-10" };
-  const _hoisted_2$m = { class: "lg:p-8 p-4 flex relative w-full" };
-  const _hoisted_3$j = { class: "lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative z-20" };
+  const _hoisted_1$M = { 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" };
+  const _hoisted_2$m = { class: "flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full" };
+  const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]" };
   const _hoisted_4$j = { class: "gap-2 flex z-10 mb-4" };
   const _hoisted_5$i = ["onClick"];
-  const _hoisted_6$i = { class: "lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
-  const _hoisted_7$h = ["innerHTML"];
-  const _hoisted_8$g = { class: "flex gap-3 mt-8 flex-col lg:flex-row" };
-  const _hoisted_9$g = ["href", "target"];
-  const _hoisted_10$b = ["href", "target"];
-  const _hoisted_11$a = ["src"];
-  const _hoisted_12$8 = {
+  const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
+  const _hoisted_7$h = { class: "max-md:flex-1" };
+  const _hoisted_8$g = ["innerHTML"];
+  const _hoisted_9$g = { class: "flex gap-3 md:mt-8 max-sm:flex-col" };
+  const _hoisted_10$c = ["href", "target"];
+  const _hoisted_11$a = ["href", "target"];
+  const _hoisted_12$8 = ["src"];
+  const _hoisted_13$8 = {
     key: 1,
-    class: "rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover",
+    class: "rounded-[20px] lg:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover",
     src: _imports_0
   };
   const _sfc_main$s = {
@@ -47883,11 +47884,13 @@ ${escapeText(this.code(index, length))}
                           }), 256)) : vue.createCommentVNode("", true)
                         ]),
                         vue.createElementVNode("h3", _hoisted_6$i, vue.toDisplayString(slide == null ? void 0 : slide.title), 1),
-                        vue.createElementVNode("p", {
-                          class: "text-lg font-normal text-navy-50",
-                          innerHTML: slide == null ? void 0 : slide.description
-                        }, null, 8, _hoisted_7$h),
-                        vue.createElementVNode("div", _hoisted_8$g, [
+                        vue.createElementVNode("div", _hoisted_7$h, [
+                          vue.createElementVNode("p", {
+                            class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                            innerHTML: slide == null ? void 0 : slide.description
+                          }, null, 8, _hoisted_8$g)
+                        ]),
+                        vue.createElementVNode("div", _hoisted_9$g, [
                           slide.secondary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
                             class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
@@ -47895,7 +47898,7 @@ ${escapeText(this.code(index, length))}
                             target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                           }, [
                             vue.createElementVNode("span", null, vue.toDisplayString(slide.secondary_button.label), 1)
-                          ], 8, _hoisted_9$g)) : vue.createCommentVNode("", true),
+                          ], 8, _hoisted_10$c)) : vue.createCommentVNode("", true),
                           slide.primary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 1,
                             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",
@@ -47904,17 +47907,17 @@ ${escapeText(this.code(index, length))}
                           }, [
                             vue.createTextVNode(vue.toDisplayString(slide.primary_button.label) + " ", 1),
                             vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-                          ], 8, _hoisted_10$b)) : vue.createCommentVNode("", true)
+                          ], 8, _hoisted_11$a)) : vue.createCommentVNode("", true)
                         ])
                       ]),
                       slide.featured_image ? (vue.openBlock(), vue.createElementBlock("img", {
                         key: 0,
                         src: slide.featured_image,
                         alt: "Slide Image",
-                        class: "rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"
-                      }, null, 8, _hoisted_11$a)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_12$8)),
-                      _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "absolute inset-0 lg:hidden z-10 p-4" }, [
-                        vue.createElementVNode("div", { class: "bg-black opacity-60 rounded-3xl md:rounded-[48px] h-full" })
+                        class: "rounded-[20px] lg:rounded-[48px] h-[200px] sm:h-[240px] md:h-[480px] lg:h-[674px] lg:max-w-[882px] lg:w-1/2 w-full object-cover"
+                      }, null, 8, _hoisted_12$8)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_13$8)),
+                      _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "max-lg:hidden absolute inset-0 lg:hidden z-10 p-4" }, [
+                        vue.createElementVNode("div", { class: "bg-black opacity-60 rounded-3xl lg:rounded-[48px] h-full" })
                       ], -1))
                     ])
                   ]),
@@ -47928,7 +47931,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-15563c74"]]);
+  const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-29ca6047"]]);
   const _hoisted_1$L = ["target", "href"];
   const _sfc_main$r = {
     __name: "LinkPresenter",
@@ -47944,7 +47947,7 @@ ${escapeText(this.code(index, length))}
       const isLinkGrid = component.value.type === "link_grid";
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]", { "bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-md:!pb-0 max-md:!pt-4": isLinkGrid }])
+          class: vue.normalizeClass(["flex flex-wrap justify-center lg:min-h-[136px] w-full relative rounded-b-3xl lg:rounded-b-[48px] bg-navy-600 -mt-6 lg:-mt-12 pt-12 sm:pt-10 md:pt-12 max-sm:pb-4 max-lg:pb-6 px-4 gap-8 lg:gap-y-2 lg:gap-x-[60px]", { "bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-lg:!pb-0 max-md:!pt-4": isLinkGrid }])
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(component.value.data, (link) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -47953,7 +47956,7 @@ ${escapeText(this.code(index, length))}
               vue.createElementVNode("a", {
                 target: link.open_in_new_tab ? "_blank" : "",
                 href: link.url.startsWith("http") ? link.url : `//${link.url}`,
-                class: vue.normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
+                class: vue.normalizeClass(["text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300", { "bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100": isLinkGrid }])
               }, [
                 vue.createElementVNode("span", null, vue.toDisplayString(link.title), 1),
                 vue.createVNode(vue.unref(ArrowUpRight), { class: "shrink-0 w-5 h-5" })
@@ -48014,15 +48017,15 @@ ${escapeText(this.code(index, length))}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d, _e, _f, _g;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-col sm:px-0 px-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
+          class: vue.normalizeClass(["flex flex-col gap-4 sm:px-0 px-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
         }, [
           ((_b = component.value) == null ? void 0 : _b.title) ? (vue.openBlock(), vue.createElementBlock("p", {
             key: 0,
-            class: vue.normalizeClass(["pb-4 text-4xl font-semibold text-white", { "!text-gray-900": (_c = component.value) == null ? void 0 : _c.dark }])
+            class: vue.normalizeClass(["text-2xl sm:text-3xl lg:text-4xl font-semibold text-white", { "!text-gray-900": (_c = component.value) == null ? void 0 : _c.dark }])
           }, vue.toDisplayString((_d = component.value) == null ? void 0 : _d.title), 3)) : vue.createCommentVNode("", true),
           ((_e = component.value) == null ? void 0 : _e.supporting_text) ? (vue.openBlock(), vue.createElementBlock("p", {
             key: 1,
-            class: vue.normalizeClass(["text-navy-25 text-xl font-normal leading-[30px]", { "!text-gray-600": (_f = component.value) == null ? void 0 : _f.dark }])
+            class: vue.normalizeClass(["text-navy-25 text-sm sm:text-base lg:text-xl", { "!text-gray-600": (_f = component.value) == null ? void 0 : _f.dark }])
           }, vue.toDisplayString((_g = component.value) == null ? void 0 : _g.supporting_text), 3)) : vue.createCommentVNode("", true)
         ], 2);
       };
@@ -48118,20 +48121,21 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const _hoisted_1$G = { class: "flex flex-col md:flex-row justify-center gap-4 items-stretch mt-6" };
-  const _hoisted_2$k = { class: "flex-1 w-full md:w-1/2 flex flex-col" };
+  const _hoisted_1$G = { class: "grid sm:grid-cols-[auto_240px] lg:grid-cols-2 justify-center gap-4 items-stretch mt-6 text-left" };
+  const _hoisted_2$k = { class: "grid max-sm:grid-cols-2 gap-4" };
   const _hoisted_3$i = ["onClick"];
-  const _hoisted_4$i = { class: "py-4 pl-4 md:pl-6" };
-  const _hoisted_5$h = ["innerHTML"];
-  const _hoisted_6$h = { class: "flex-1 w-full md:w-1/2 bg-transparent flex flex-col items-center" };
-  const _hoisted_7$g = ["src"];
-  const _hoisted_8$f = {
+  const _hoisted_4$i = { class: "sm:py-4 sm:pl-4 md:pl-6" };
+  const _hoisted_5$h = ["target", "href"];
+  const _hoisted_6$h = ["innerHTML"];
+  const _hoisted_7$g = { class: "max-sm:hidden bg-transparent flex flex-col items-center" };
+  const _hoisted_8$f = ["src"];
+  const _hoisted_9$f = {
     key: 1,
-    class: "rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full",
+    class: "rounded-[20px] md:rounded-[40px] object-contain lg:max-h-[387px] w-full",
     src: _imports_0,
     alt: "No Image Available"
   };
-  const _hoisted_9$f = ["target", "href"];
+  const _hoisted_10$b = ["target", "href"];
   const _sfc_main$n = {
     __name: "VerticalTabPresenter",
     props: {
@@ -48157,27 +48161,37 @@ ${escapeText(this.code(index, length))}
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
           vue.createElementVNode("div", _hoisted_2$k, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(publicTabs.value, (item) => {
+              var _a, _b, _c, _d, _e, _f;
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: item.title
               }, [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(["flex-col flex gap-1.5 cursor-pointer mb-4 group", { "border-l-4 border-brand-600": selectedItem.value === item, "border-l-4  border-gray-100": selectedItem.value !== item }]),
-                  onClick: vue.withModifiers(($event) => selectItem(item), ["prevent"])
+                  class: vue.normalizeClass(["flex-col flex gap-1.5 cursor-pointer group", { "sm:border-l-4 border-brand-600": selectedItem.value === item, "sm:border-l-4  border-navy-25": selectedItem.value !== item }]),
+                  onClick: ($event) => selectItem(item)
                 }, [
                   vue.createElementVNode("div", _hoisted_4$i, [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass([{ "text-gray-900": selectedItem.value === item, "text-gray-600": selectedItem.value !== item }, "max-sm:text-gray-900 max-sm:bg-white max-sm:p-3 max-sm:rounded-lg max-sm:min-h-[84px] text-sm relative sm:text-lg md:text-xl font-semibold sm:mb-2 group-hover:text-gray-900 grid max-sm:grid-cols-[auto_20px] gap-2"])
+                    }, [
+                      vue.createTextVNode(vue.toDisplayString(item.title) + " ", 1),
+                      vue.createVNode(vue.unref(ArrowUpRight), { class: "sm:hidden" }),
+                      ((_b = (_a = selectedItem.value) == null ? void 0 : _a.primary_button) == null ? void 0 : _b.show) ? (vue.openBlock(), vue.createElementBlock("a", {
+                        key: 0,
+                        target: ((_d = (_c = selectedItem.value) == null ? void 0 : _c.primary_button) == null ? void 0 : _d.open_in_new_tab) ? "_blank" : "",
+                        href: ((_f = (_e = selectedItem.value) == null ? void 0 : _e.primary_button) == null ? void 0 : _f.url.startsWith("http")) ? selectedItem.value.primary_button.url : `//${selectedItem.value.primary_button.url}`,
+                        class: "absolute inset-0 sm:hidden z-10"
+                      }, null, 8, _hoisted_5$h)) : vue.createCommentVNode("", true)
+                    ], 2),
                     vue.createElementVNode("p", {
-                      class: vue.normalizeClass([{ "text-gray-900": selectedItem.value === item, "text-gray-600": selectedItem.value !== item }, "text-lg md:text-xl font-semibold mb-2 group-hover:text-gray-900"])
-                    }, vue.toDisplayString(item.title), 3),
-                    vue.createElementVNode("p", {
-                      class: vue.normalizeClass([{ "text-gray-700": selectedItem.value === item, "text-gray-400": selectedItem.value !== item }, "text-sm md:text-md font-normal group-hover:text-gray-700"]),
+                      class: vue.normalizeClass([{ "text-gray-700": selectedItem.value === item, "text-gray-400": selectedItem.value !== item }, "max-sm:hidden text-sm md:text-md font-normal group-hover:text-gray-700"]),
                       innerHTML: item.description
-                    }, null, 10, _hoisted_5$h)
+                    }, null, 10, _hoisted_6$h)
                   ])
                 ], 10, _hoisted_3$i)
               ]);
             }), 128))
           ]),
-          vue.createElementVNode("div", _hoisted_6$h, [
+          vue.createElementVNode("div", _hoisted_7$g, [
             vue.createVNode(vue.Transition, {
               name: "fade",
               mode: "out-in"
@@ -48193,8 +48207,8 @@ ${escapeText(this.code(index, length))}
                       key: 0,
                       src: selectedItem.value.featured_image,
                       alt: "Selected Item Image",
-                      class: "rounded-[20px] md:rounded-[40px] object-contain max-h-[200px] md:max-h-[387px] w-full"
-                    }, null, 8, _hoisted_7$g)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_8$f)),
+                      class: "rounded-[20px] md:rounded-[40px] object-contain lg:max-h-[387px] w-full"
+                    }, null, 8, _hoisted_8$f)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_9$f)),
                     ((_d = (_c = selectedItem.value) == null ? void 0 : _c.primary_button) == null ? void 0 : _d.show) ? (vue.openBlock(), vue.createElementBlock("a", {
                       key: 2,
                       class: "text-sm md:text-md font-semibold text-brand-600 flex items-center gap-2 mt-4",
@@ -48203,7 +48217,7 @@ ${escapeText(this.code(index, length))}
                     }, [
                       vue.createTextVNode(vue.toDisplayString(((_j = (_i = selectedItem.value) == null ? void 0 : _i.primary_button) == null ? void 0 : _j.label) ?? "N/A") + " ", 1),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-4 h-4 md:w-5 md:h-5" })
-                    ], 8, _hoisted_9$f)) : vue.createCommentVNode("", true)
+                    ], 8, _hoisted_10$b)) : vue.createCommentVNode("", true)
                   ]))
                 ];
               }),
@@ -48214,9 +48228,9 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const VVerticalTabPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-ef885607"]]);
+  const VVerticalTabPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-85226fd9"]]);
   const _hoisted_1$F = { class: "pb-container" };
-  const _hoisted_2$j = { class: "max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-3xl md:rounded-[48px] p-16" };
+  const _hoisted_2$j = { class: "bg-navy-25 rounded-3xl md:rounded-[48px] py-6 px-4 lg:p-16 text-center" };
   const _sfc_main$m = {
     __name: "VTabs",
     props: {
@@ -48928,7 +48942,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_1$r = { class: "overflow-hidden mt-4" };
   const _hoisted_2$d = {
     key: 0,
-    class: "text-[36px] text-gray-900 font-semibold"
+    class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900"
   };
   const _hoisted_3$d = { class: "all-unset ql-editor" };
   const _hoisted_4$d = ["innerHTML"];
@@ -49044,7 +49058,7 @@ ${escapeText(this.code(index, length))}
     }
   };
   const _hoisted_1$q = { class: "overflow-hidden" };
-  const _hoisted_2$c = { class: "pb-container mt-4 px-4" };
+  const _hoisted_2$c = { class: "pb-container mt-4" };
   const _hoisted_3$c = { class: "text-[20px] text-gray-900 font-semibold" };
   const _hoisted_4$c = ["innerHTML"];
   const _hoisted_5$c = {
@@ -49057,7 +49071,7 @@ ${escapeText(this.code(index, length))}
     key: 1,
     class: "my-[44px]"
   };
-  const _hoisted_9$b = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_9$b = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_10$8 = ["innerHTML"];
   const _hoisted_11$7 = {
     key: 0,
@@ -49218,7 +49232,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "rounded-xl px-[40px] text-center mb-1 max-w-[1280px] mx-auto"
   };
-  const _hoisted_4$b = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_4$b = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_5$b = ["innerHTML"];
   const _hoisted_6$b = { key: 1 };
   const _hoisted_7$b = { class: "mt-4" };
@@ -49306,7 +49320,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto"
   };
-  const _hoisted_3$a = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_3$a = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_4$a = ["innerHTML"];
   const _hoisted_5$a = ["src"];
   const _hoisted_6$a = {
@@ -49411,7 +49425,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  const LinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-a7422ac9"]]);
+  const LinkCard = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-af7a1782"]]);
   const _hoisted_1$n = {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -49435,7 +49449,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto"
   };
-  const _hoisted_4$9 = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_4$9 = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_5$9 = ["innerHTML"];
   const _hoisted_6$9 = ["src"];
   const _hoisted_7$9 = {
@@ -49536,7 +49550,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
   };
-  const _hoisted_4$8 = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_4$8 = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_5$8 = ["innerHTML"];
   const _hoisted_6$8 = ["textContent"];
   const _hoisted_7$8 = { class: "flex" };
@@ -49885,7 +49899,7 @@ ${escapeText(this.code(index, length))}
     key: 0,
     class: "px-[40px] text-center mb-6 mx-auto"
   };
-  const _hoisted_3$5 = { class: "text-[36px] text-gray-900 font-semibold" };
+  const _hoisted_3$5 = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
   const _hoisted_4$5 = ["innerHTML"];
   const _hoisted_5$5 = {
     key: 1,
@@ -50018,7 +50032,7 @@ ${escapeText(this.code(index, length))}
           vue.createElementVNode("div", _hoisted_2$4, [
             vue.createElementVNode("div", null, [
               vue.createElementVNode("p", {
-                class: "text-[36px] font-semibold text-gray-900 mb-[48px]",
+                class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 mb-[48px]",
                 textContent: vue.toDisplayString(pricingComponent.value.title)
               }, null, 8, _hoisted_3$4),
               vue.createElementVNode("div", _hoisted_4$4, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcodegroup-au/page-builder",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "exports": {
     ".": {
       "import": "./dist/page-builder.es.js"

package/src/assets/css/style.css

@@ -110,5 +110,5 @@
 }
 
 .pb-container {
-    @apply max-w-[1640px] px-4 md:px-[120px] mx-auto w-full;
+    @apply max-w-[1640px] px-4 md:px-16 lg:px-[120px] mx-auto w-full;
 }

package/src/components/presenters/components/HeaderPresenter.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="flex flex-col sm:px-0 px-4" :class="{'items-center': component?.center}">
+  <div class="flex flex-col gap-4 sm:px-0 px-4" :class="{'items-center': component?.center}">
     <p
         v-if="component?.title"
-        class="pb-4 text-4xl font-semibold text-white"
+        class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-white"
         :class="{'!text-gray-900': component?.dark}"
     >{{ component?.title }}</p>
     <p
         v-if="component?.supporting_text"
-        class="text-navy-25 text-xl font-normal leading-[30px]"
+        class="text-navy-25 text-sm sm:text-base lg:text-xl"
         :class="{'!text-gray-600': component?.dark}"
     >
       {{ component?.supporting_text }}</p>

package/src/components/presenters/components/LinkPresenter.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]" :class="{'bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-md:!pb-0 max-md:!pt-4': isLinkGrid}">
+  <div class="flex flex-wrap justify-center lg:min-h-[136px] w-full relative rounded-b-3xl lg:rounded-b-[48px] bg-navy-600
+              -mt-6 lg:-mt-12 pt-12 sm:pt-10 md:pt-12 max-sm:pb-4 max-lg:pb-6 px-4 gap-8 lg:gap-y-2 lg:gap-x-[60px]"
+       :class="{'bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-lg:!pb-0 max-md:!pt-4': isLinkGrid}"
+  >
     <div class="flex justify-center items-center max-w-full" :class="{'!block': isLinkGrid}" v-for="link in component.data">
       <a
           :target="link.open_in_new_tab ? '_blank' : ''"
           :href="link.url.startsWith('http') ? link.url : `//${link.url}`"
-          class="text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9"
+          class="text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300"
           :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
       >
         <span>{{ link.title }}</span><ArrowUpRight class="shrink-0 w-5 h-5"></ArrowUpRight>

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

@@ -1,18 +1,20 @@
 <template>
-  <div class="flex h-[708px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl md:rounded-[48px] z-10">
+  <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">
     <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="lg:p-8 p-4 flex relative w-full">
-          <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative z-20">
+        <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="gap-2 flex z-10 mb-4">
               <a v-if="slides.length > 1"
                  v-for="(slide, index) in slides"
                  @click="currentSlide = index" class="w-4 h-1 bg-navy-400 rounded-full cursor-pointer" :class="{'!w-12 !bg-white' : currentSlide === index}"
               ></a>
             </div>
-            <h3 class="lg:text-[48px] text-[40px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
-            <p class="text-lg font-normal text-navy-50" v-html="slide?.description"></p>
-            <div class="flex gap-3 mt-8 flex-col lg:flex-row">
+            <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>
+            </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"
                  :href="formatUrl(slide.secondary_button.url)"
                  v-if="slide.secondary_button.show"
@@ -32,9 +34,9 @@
               v-if="slide.featured_image"
               :src="slide.featured_image"
               alt="Slide Image"
-              class="rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
-          <img v-else class="rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover" src="@/assets/img/no_image_available.jpeg">
-          <div class="absolute inset-0 lg:hidden z-10 p-4"><div class="bg-black opacity-60 rounded-3xl md:rounded-[48px] h-full"></div></div>
+              class="rounded-[20px] lg:rounded-[48px] h-[200px] sm:h-[240px] md:h-[480px] lg:h-[674px] lg:max-w-[882px] lg:w-1/2 w-full object-cover"/>
+          <img v-else class="rounded-[20px] lg:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover" src="@/assets/img/no_image_available.jpeg">
+          <div class="max-lg:hidden absolute inset-0 lg:hidden z-10 p-4"><div class="bg-black opacity-60 rounded-3xl lg:rounded-[48px] h-full"></div></div>
         </div>
       </Slide>
     </Carousel>
@@ -63,5 +65,10 @@ const slides = componentData.value.data.filter((o) => o.public);
 <style scoped>
 .carousel {
   margin: 1rem 0;
+  flex-direction: column;
+}
+
+:deep(.carousel__slide) {
+  @apply max-lg:flex-col;
 }
 </style>