@dcodegroup-au/page-builder 0.7.6 → 0.7.7

package/dist/page-builder.css

@@ -1051,9 +1051,6 @@ select {
 .max-h-\[196px\] {
   max-height: 196px;
 }
-.max-h-\[200px\] {
-  max-height: 200px;
-}
 .max-h-\[48px\] {
   max-height: 48px;
 }
@@ -1483,9 +1480,6 @@ select {
 .border-b {
   border-bottom-width: 1px;
 }
-.border-l-4 {
-  border-left-width: 4px;
-}
 .border-t {
   border-top-width: 1px;
 }
@@ -1546,6 +1540,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(148 166 184 / var(--tw-border-opacity, 1));
 }
+.border-navy-25 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 242 245 / var(--tw-border-opacity, 1));
+}
 .border-orange-200 {
   --tw-border-opacity: 1;
   border-color: rgb(249 219 175 / var(--tw-border-opacity, 1));
@@ -1689,9 +1687,6 @@ select {
 .p-1\.5 {
   padding: 0.375rem;
 }
-.p-16 {
-  padding: 4rem;
-}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1860,9 +1855,6 @@ select {
 .pl-3 {
   padding-left: 0.75rem;
 }
-.pl-4 {
-  padding-left: 1rem;
-}
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1936,9 +1928,6 @@ select {
 .text-\[32px\] {
   font-size: 32px;
 }
-.text-\[36px\] {
-  font-size: 36px;
-}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2805,6 +2794,14 @@ select {
 
 @media (min-width: 768px) {
 
+  .pb-container {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+}
+
+@media (min-width: 1024px) {
+
   .pb-container {
     padding-left: 120px;
     padding-right: 120px;
@@ -3042,17 +3039,55 @@ select {
 
 @media not all and (min-width: 640px) {
 
+  .max-sm\:hidden {
+    display: none;
+  }
+
+  .max-sm\:min-h-\[84px\] {
+    min-height: 84px;
+  }
+
+  .max-sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .max-sm\:grid-cols-\[auto_20px\] {
+    grid-template-columns: auto 20px;
+  }
+
   .max-sm\:flex-col {
     flex-direction: column;
   }
 
+  .max-sm\:rounded-lg {
+    border-radius: 0.5rem;
+  }
+
+  .max-sm\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  }
+
+  .max-sm\:p-3 {
+    padding: 0.75rem;
+  }
+
   .max-sm\:pb-4 {
     padding-bottom: 1rem;
   }
+
+  .max-sm\:text-gray-900 {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  }
 }
 
 @media (min-width: 640px) {
 
+  .sm\:mb-2 {
+    margin-bottom: 0.5rem;
+  }
+
   .sm\:mt-14 {
     margin-top: 3.5rem;
   }
@@ -3064,6 +3099,10 @@ select {
     -webkit-line-clamp: 3;
   }
 
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:h-\[240px\] {
     height: 240px;
   }
@@ -3080,6 +3119,14 @@ select {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .sm\:grid-cols-\[auto_240px\] {
+    grid-template-columns: auto 240px;
+  }
+
+  .sm\:border-l-4 {
+    border-left-width: 4px;
+  }
+
   .sm\:p-0 {
     padding: 0px;
   }
@@ -3094,9 +3141,33 @@ select {
     padding-right: 1rem;
   }
 
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .sm\:pl-4 {
+    padding-left: 1rem;
+  }
+
   .sm\:pt-10 {
     padding-top: 2.5rem;
   }
+
+  .sm\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .sm\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .sm\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -3121,14 +3192,6 @@ select {
     height: 806px;
   }
 
-  .md\:max-h-\[387px\] {
-    max-height: 387px;
-  }
-
-  .md\:w-1\/2 {
-    width: 50%;
-  }
-
   .md\:w-3\/4 {
     width: 75%;
   }
@@ -3281,6 +3344,10 @@ select {
     height: 872px;
   }
 
+  .lg\:max-h-\[387px\] {
+    max-height: 387px;
+  }
+
   .lg\:min-h-\[136px\] {
     min-height: 136px;
   }
@@ -3355,6 +3422,10 @@ select {
     border-bottom-left-radius: 48px;
   }
 
+  .lg\:p-16 {
+    padding: 4rem;
+  }
+
   .lg\:p-8 {
     padding: 2rem;
   }
@@ -3385,6 +3456,11 @@ select {
     padding-top: 164px;
   }
 
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .lg\:text-\[48px\] {
     font-size: 48px;
   }
@@ -3394,6 +3470,11 @@ select {
     line-height: 1.75rem;
   }
 
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .lg\:leading-\[60px\] {
     line-height: 60px;
   }
@@ -3786,12 +3867,12 @@ select {
 }
 }
 
-.fade-enter-active[data-v-ef885607], .fade-leave-active[data-v-ef885607] {
+.fade-enter-active[data-v-85226fd9], .fade-leave-active[data-v-85226fd9] {
     transition-property: opacity;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 300ms
 }
-.fade-enter-from[data-v-ef885607], .fade-leave-to[data-v-ef885607] {
+.fade-enter-from[data-v-85226fd9], .fade-leave-to[data-v-85226fd9] {
     opacity: 0
 }
 
@@ -3811,58 +3892,58 @@ select {
 }
 
 @media (min-width: 640px) {
-.link-card__columns--2[data-v-a7422ac9] {
+.link-card__columns--2[data-v-af7a1782] {
         grid-template-columns: repeat(2, minmax(0, 1fr))
 }
 }
 @media (min-width: 768px) {
-.link-card__columns--3[data-v-a7422ac9] {
+.link-card__columns--3[data-v-af7a1782] {
         grid-template-columns: repeat(3, minmax(0, 1fr))
 }
 }
 @media (min-width: 640px) {
-.link-card__columns--4[data-v-a7422ac9] {
+.link-card__columns--4[data-v-af7a1782] {
         grid-template-columns: repeat(2, minmax(0, 1fr))
 }
 }
 @media (min-width: 1024px) {
-.link-card__columns--4[data-v-a7422ac9] {
+.link-card__columns--4[data-v-af7a1782] {
         grid-template-columns: repeat(4, minmax(0, 1fr))
 }
 }
-.link-card__columns--with-featured-image[data-v-a7422ac9] {
+.link-card__columns--with-featured-image[data-v-af7a1782] {
     height: -moz-fit-content;
     height: fit-content
 }
-.link-card__columns--with-featured-image[data-v-a7422ac9] {
+.link-card__columns--with-featured-image[data-v-af7a1782] {
     flex-direction: column
 }
-.link-card__columns--with-featured-image.link-card__columns--2[data-v-a7422ac9] {
+.link-card__columns--with-featured-image.link-card__columns--2[data-v-af7a1782] {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 @media (min-width: 1024px) {
-.link-card__columns--with-featured-image.link-card__columns--2[data-v-a7422ac9] {
+.link-card__columns--with-featured-image.link-card__columns--2[data-v-af7a1782] {
         grid-template-columns: repeat(2, minmax(0, 1fr))
 }
 }
-.link-card__columns--with-featured-image.link-card__columns--3[data-v-a7422ac9] {
+.link-card__columns--with-featured-image.link-card__columns--3[data-v-af7a1782] {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 @media (min-width: 1280px) {
-.link-card__columns--with-featured-image.link-card__columns--3[data-v-a7422ac9] {
+.link-card__columns--with-featured-image.link-card__columns--3[data-v-af7a1782] {
         grid-template-columns: repeat(3, minmax(0, 1fr))
 }
 }
-.link-card__columns--with-featured-image.link-card__columns--4[data-v-a7422ac9] {
+.link-card__columns--with-featured-image.link-card__columns--4[data-v-af7a1782] {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
 @media (min-width: 1024px) {
-.link-card__columns--with-featured-image.link-card__columns--4[data-v-a7422ac9] {
+.link-card__columns--with-featured-image.link-card__columns--4[data-v-af7a1782] {
         grid-template-columns: repeat(2, minmax(0, 1fr))
 }
 }
 @media (min-width: 1280px) {
-.link-card__columns--with-featured-image.link-card__columns--4[data-v-a7422ac9] {
+.link-card__columns--with-featured-image.link-card__columns--4[data-v-af7a1782] {
         grid-template-columns: repeat(4, minmax(0, 1fr))
 }
 }

package/dist/page-builder.es.js

@@ -446,7 +446,7 @@ const _hoisted_6$r = { class: "flex flex-col gap-3" };
 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$b = ["onClick"];
@@ -512,7 +512,7 @@ const _sfc_main$Q = {
               createElementVNode("div", _hoisted_7$q, [
                 createElementVNode("div", _hoisted_8$o, [
                   createElementVNode("div", _hoisted_9$n, toDisplayString(unref(parseName)(unref(type))), 1),
-                  createElementVNode("div", _hoisted_10$i, "This " + toDisplayString(unref(singularize)(unref(type))) + " can contain up to " + toDisplayString(dataRef.value.max_items) + " " + toDisplayString(unref(parseName)(unref(type), false)), 1)
+                  createElementVNode("div", _hoisted_10$j, "This " + toDisplayString(unref(singularize)(unref(type))) + " can contain up to " + toDisplayString(dataRef.value.max_items) + " " + toDisplayString(unref(parseName)(unref(type), false)), 1)
                 ]),
                 createElementVNode("div", null, [
                   createElementVNode("button", {
@@ -11699,7 +11699,7 @@ const _hoisted_6$q = {
 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 = {
@@ -11805,7 +11805,7 @@ const _sfc_main$O = {
             target: "_blank",
             class: "link"
           }, [
-            createElementVNode("div", _hoisted_10$h, toDisplayString(file.value.file_name), 1)
+            createElementVNode("div", _hoisted_10$i, toDisplayString(file.value.file_name), 1)
           ], 8, _hoisted_9$m),
           createElementVNode("a", _hoisted_11$f, [
             createElementVNode("i", {
@@ -33924,7 +33924,7 @@ const _hoisted_6$o = { class: "text-sm font-medium text-gray-900" };
 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
@@ -34004,7 +34004,7 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign(__default__, {
               createElementVNode("p", _hoisted_6$o, [
                 icons2.value.length > 0 && search.value.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_7$n, " Search result ")) : icons2.value.length < 1 && search.value.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_8$l, " No search result ")) : search.value.length < 1 && icons2.value.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_9$l, " Frequently used icons ")) : createCommentVNode("", true)
               ]),
-              createElementVNode("div", _hoisted_10$g, [
+              createElementVNode("div", _hoisted_10$h, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(icons2.value, (icon) => {
                   return openBlock(), createBlock(_sfc_main$H, {
                     class: "cursor-pointer rounded p-1 hover:bg-gray-100",
@@ -45222,7 +45222,7 @@ const _hoisted_6$n = { class: "text-sm text-gray-600 mt-1" };
 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,
@@ -45357,7 +45357,7 @@ const _sfc_main$C = {
               }, [
                 createElementVNode("div", _hoisted_8$k, [
                   createElementVNode("div", _hoisted_9$k, " Item #" + toDisplayString(index + 1), 1),
-                  createElementVNode("div", _hoisted_10$f, [
+                  createElementVNode("div", _hoisted_10$g, [
                     createVNode(_sfc_main$S, {
                       onRemoveItem: ($event) => handleDeleteItem(index)
                     }, null, 8, ["onRemoveItem"])
@@ -45477,7 +45477,7 @@ const _hoisted_6$m = { class: "flex flex-col gap-3" };
 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 = {
@@ -45560,7 +45560,7 @@ const _sfc_main$B = {
                     }, null, 8, ["onRemoveItem"])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_10$e, [
+                createElementVNode("div", _hoisted_10$f, [
                   createElementVNode("div", _hoisted_11$d, [
                     createVNode(unref(VFileUpload), {
                       name: "image",
@@ -45765,7 +45765,7 @@ const _hoisted_6$k = { class: "flex flex-col gap-3" };
 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",
@@ -45841,7 +45841,7 @@ const _sfc_main$y = {
                     }, null, 8, ["onRemoveItem"])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_10$d, [
+                createElementVNode("div", _hoisted_10$e, [
                   createElementVNode("div", _hoisted_11$c, [
                     createVNode(unref(VFileUpload), {
                       name: "image",
@@ -46162,7 +46162,7 @@ const _hoisted_9$h = {
   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$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
@@ -46305,7 +46305,7 @@ const _sfc_main$t = {
                       createElementVNode("div", _hoisted_13$9, [
                         createVNode(unref(ChevronRight), { class: "h-5 w-5" })
                       ])
-                    ], 10, _hoisted_10$c);
+                    ], 10, _hoisted_10$d);
                   }), 256))
                 ])) : createCommentVNode("", true)
               ]);
@@ -47835,7 +47835,7 @@ const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-whi
 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$b = ["href", "target"];
+const _hoisted_10$c = ["href", "target"];
 const _hoisted_11$a = ["href", "target"];
 const _hoisted_12$8 = ["src"];
 const _hoisted_13$8 = {
@@ -47895,7 +47895,7 @@ const _sfc_main$s = {
                           target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                         }, [
                           createElementVNode("span", null, toDisplayString(slide.secondary_button.label), 1)
-                        ], 8, _hoisted_10$b)) : createCommentVNode("", true),
+                        ], 8, _hoisted_10$c)) : createCommentVNode("", true),
                         slide.primary_button.show ? (openBlock(), 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",
@@ -48014,15 +48014,15 @@ const _sfc_main$p = {
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e, _f, _g;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex flex-col sm:px-0 px-4", { "items-center": (_a = component.value) == null ? void 0 : _a.center }])
+        class: 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) ? (openBlock(), createElementBlock("p", {
           key: 0,
-          class: normalizeClass(["pb-4 text-4xl font-semibold text-white", { "!text-gray-900": (_c = component.value) == null ? void 0 : _c.dark }])
+          class: normalizeClass(["text-2xl sm:text-3xl lg:text-4xl font-semibold text-white", { "!text-gray-900": (_c = component.value) == null ? void 0 : _c.dark }])
         }, toDisplayString((_d = component.value) == null ? void 0 : _d.title), 3)) : createCommentVNode("", true),
         ((_e = component.value) == null ? void 0 : _e.supporting_text) ? (openBlock(), createElementBlock("p", {
           key: 1,
-          class: normalizeClass(["text-navy-25 text-xl font-normal leading-[30px]", { "!text-gray-600": (_f = component.value) == null ? void 0 : _f.dark }])
+          class: normalizeClass(["text-navy-25 text-sm sm:text-base lg:text-xl", { "!text-gray-600": (_f = component.value) == null ? void 0 : _f.dark }])
         }, toDisplayString((_g = component.value) == null ? void 0 : _g.supporting_text), 3)) : createCommentVNode("", true)
       ], 2);
     };
@@ -48118,20 +48118,21 @@ const _sfc_main$o = {
     };
   }
 };
-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 +48158,37 @@ const _sfc_main$n = {
       return openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("div", _hoisted_2$k, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(publicTabs.value, (item) => {
+            var _a, _b, _c, _d, _e, _f;
             return openBlock(), createElementBlock("div", {
               key: item.title
             }, [
               createElementVNode("div", {
-                class: 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: withModifiers(($event) => selectItem(item), ["prevent"])
+                class: 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)
               }, [
                 createElementVNode("div", _hoisted_4$i, [
+                  createElementVNode("div", {
+                    class: 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"])
+                  }, [
+                    createTextVNode(toDisplayString(item.title) + " ", 1),
+                    createVNode(unref(ArrowUpRight), { class: "sm:hidden" }),
+                    ((_b = (_a = selectedItem.value) == null ? void 0 : _a.primary_button) == null ? void 0 : _b.show) ? (openBlock(), 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)) : createCommentVNode("", true)
+                  ], 2),
                   createElementVNode("p", {
-                    class: 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"])
-                  }, toDisplayString(item.title), 3),
-                  createElementVNode("p", {
-                    class: 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: 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))
         ]),
-        createElementVNode("div", _hoisted_6$h, [
+        createElementVNode("div", _hoisted_7$g, [
           createVNode(Transition, {
             name: "fade",
             mode: "out-in"
@@ -48193,8 +48204,8 @@ const _sfc_main$n = {
                     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)) : (openBlock(), createElementBlock("img", _hoisted_8$f)),
+                    class: "rounded-[20px] md:rounded-[40px] object-contain lg:max-h-[387px] w-full"
+                  }, null, 8, _hoisted_8$f)) : (openBlock(), createElementBlock("img", _hoisted_9$f)),
                   ((_d = (_c = selectedItem.value) == null ? void 0 : _c.primary_button) == null ? void 0 : _d.show) ? (openBlock(), createElementBlock("a", {
                     key: 2,
                     class: "text-sm md:text-md font-semibold text-brand-600 flex items-center gap-2 mt-4",
@@ -48203,7 +48214,7 @@ const _sfc_main$n = {
                   }, [
                     createTextVNode(toDisplayString(((_j = (_i = selectedItem.value) == null ? void 0 : _i.primary_button) == null ? void 0 : _j.label) ?? "N/A") + " ", 1),
                     createVNode(unref(ArrowUpRight), { class: "w-4 h-4 md:w-5 md:h-5" })
-                  ], 8, _hoisted_9$f)) : createCommentVNode("", true)
+                  ], 8, _hoisted_10$b)) : createCommentVNode("", true)
                 ]))
               ];
             }),
@@ -48214,9 +48225,9 @@ const _sfc_main$n = {
     };
   }
 };
-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 +48939,7 @@ const _sfc_main$f = {
 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"];
@@ -49057,7 +49068,7 @@ const _hoisted_8$b = {
   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 +49229,7 @@ const _hoisted_3$b = {
   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 +49317,7 @@ const _hoisted_2$a = {
   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 +49422,7 @@ const _sfc_main$b = {
     };
   }
 };
-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 +49446,7 @@ const _hoisted_3$9 = {
   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 +49547,7 @@ const _hoisted_3$8 = {
   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 +49896,7 @@ const _hoisted_2$5 = {
   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 +50029,7 @@ const _sfc_main$5 = {
         createElementVNode("div", _hoisted_2$4, [
           createElementVNode("div", null, [
             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: toDisplayString(pricingComponent.value.title)
             }, null, 8, _hoisted_3$4),
             createElementVNode("div", _hoisted_4$4, [

package/dist/page-builder.umd.js

@@ -449,7 +449,7 @@ 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$b = ["onClick"];
@@ -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", {
@@ -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,7 +45225,7 @@ ${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,
@@ -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"])
@@ -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,7 +46165,7 @@ ${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$9 = { class: "flex items-center justify-between gap-3 px-[10px]" };
@@ -46308,7 +46308,7 @@ ${escapeText(this.code(index, length))}
                         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)
                 ]);
@@ -47838,7 +47838,7 @@ ${escapeText(this.code(index, length))}
   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$b = ["href", "target"];
+  const _hoisted_10$c = ["href", "target"];
   const _hoisted_11$a = ["href", "target"];
   const _hoisted_12$8 = ["src"];
   const _hoisted_13$8 = {
@@ -47898,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_10$b)) : 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",
@@ -48017,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);
       };
@@ -48121,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: {
@@ -48160,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"
@@ -48196,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",
@@ -48206,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)
                   ]))
                 ];
               }),
@@ -48217,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: {
@@ -48931,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"];
@@ -49060,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,
@@ -49221,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" };
@@ -49309,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 = {
@@ -49414,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",
@@ -49438,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 = {
@@ -49539,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" };
@@ -49888,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,
@@ -50021,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.6",
+  "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/VerticalTabPresenter.vue

@@ -1,23 +1,32 @@
 <template>
-  <div class="flex flex-col md:flex-row justify-center gap-4 items-stretch mt-6">
+  <div class="grid sm:grid-cols-[auto_240px] lg:grid-cols-2 justify-center gap-4 items-stretch mt-6 text-left">
     <!-- Left Column: Links -->
-    <div class="flex-1 w-full md:w-1/2 flex flex-col">
+    <div class="grid max-sm:grid-cols-2 gap-4">
       <div v-for="item in publicTabs" :key="item.title">
         <div
-            class="flex-col flex gap-1.5 cursor-pointer mb-4 group"
-            :class="{'border-l-4 border-brand-600': selectedItem === item, 'border-l-4  border-gray-100': selectedItem !== item}"
-            @click.prevent="selectItem(item)"
+            class="flex-col flex gap-1.5 cursor-pointer group"
+            :class="{'sm:border-l-4 border-brand-600': selectedItem === item, 'sm:border-l-4  border-navy-25': selectedItem !== item}"
+            @click="selectItem(item)"
         >
-          <div class="py-4 pl-4 md:pl-6">
-            <p
+          <div class="sm:py-4 sm:pl-4 md:pl-6">
+            <div
                 :class="{'text-gray-900': selectedItem === item, 'text-gray-600': selectedItem !== item}"
-                class="text-lg md:text-xl font-semibold mb-2 group-hover:text-gray-900"
+                class="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"
             >
               {{ item.title }}
-            </p>
+
+              <ArrowUpRight class="sm:hidden" />
+
+              <a v-if="selectedItem?.primary_button?.show"
+                 :target="selectedItem?.primary_button?.open_in_new_tab ? '_blank' : ''"
+                 :href="selectedItem?.primary_button?.url.startsWith('http') ? selectedItem.primary_button.url : `//${selectedItem.primary_button.url}`"
+                 class="absolute inset-0 sm:hidden z-10"
+              ></a>
+            </div>
             <p
                 :class="{'text-gray-700': selectedItem === item, 'text-gray-400': selectedItem !== item}"
-                class="text-sm md:text-md font-normal group-hover:text-gray-700"
+                class="max-sm:hidden text-sm md:text-md font-normal group-hover:text-gray-700"
                 v-html="item.description"
             >
             </p>
@@ -27,17 +36,17 @@
     </div>
 
     <!-- Right Column: Image and Button -->
-    <div class="flex-1 w-full md:w-1/2 bg-transparent flex flex-col items-center">
+    <div class="max-sm:hidden bg-transparent flex flex-col items-center">
       <transition name="fade" mode="out-in">
         <div class="flex flex-col items-center" :key="selectedItem?.title">
           <img
               v-if="selectedItem?.featured_image"
               :src="selectedItem.featured_image"
               alt="Selected Item Image"
-              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"/>
           <img
               v-else
-              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="@/assets/img/no_image_available.jpeg"
               alt="No Image Available">
           <a

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

@@ -2,7 +2,7 @@
   <div class="pb-container py-[40px] flex justify-center gap-[10%]">
     <div class="bg-pale-100 w-full rounded-[20px] p-8 gap-6 grid lg:grid-cols-2">
       <div>
-        <p class="text-[36px] font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
+        <p class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
         <div class="flex flex-col divide-y divide-gray-200 px-6 bg-white rounded-lg md:rounded-2xl overflow-hidden">
           <div v-for="(price, index) in pricingComponent.data"
                class="relative w-full py-6">

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

@@ -15,7 +15,7 @@
                  class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
               <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
             </div>
-            <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
             <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]"
                v-html="headerComponent.supporting_text"></p>
           </div>

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

@@ -4,7 +4,7 @@
     :class="{'justify-start md:!px-0 !ml-0': section?.align_left}">
       <div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full" :class="{'!max-w-full' : section?.align_left}">
         <div class="px-[40px] text-center mb-6 mx-auto" v-if="header">
-          <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
+          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ header.title }}</h3>
           <p v-if="header?.supporting_text"
              class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto"
              v-html="header.supporting_text"></p>

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

@@ -2,7 +2,7 @@
   <div class="link-card overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
     <div class="pb-container my-[40px]">
       <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
-        <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+        <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
         <div v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></div>
       </div>
       <div v-if="cardComponent" class="flex flex-col md:flex-row w-full" :class="{'gap-8': headerComponent?.featured_image}">

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

@@ -3,7 +3,7 @@
     <div class="pb-container bg-white py-[40px] flex flex-col lg:flex-row gap-8 xl:gap-[10%]">
       <div v-for="(header, index) in headerComponents" class="gap-4" :class="{'lg:w-1/2': section.two_columns}">
         <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="header">
-          <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
+          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ header.title }}</h3>
           <p v-if="header?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="header.supporting_text"></p>
         </div>
         <img v-if="header?.featured_image"

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

@@ -2,7 +2,7 @@
   <div class="overflow-hidden mt-4">
     <div class="pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row" :class="{'[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10': section?.revert, 'justify-center': section?.center, 'md:!px-0 !ml-0 justify-end': section?.align_left }">
       <div class="max-w-[800px] lg:py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title || component?.paragraph" ref="leftColumn">
-        <h3 class="text-[36px] text-gray-900 font-semibold" v-if="component?.title">
+        <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" v-if="component?.title">
           {{ component.title }}
         </h3>
         <div class="all-unset ql-editor">

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

@@ -2,7 +2,7 @@
   <div class="overflow-hidden">
     <div class="pb-container mt-[40px]">
       <div class="rounded-xl px-[40px] text-center mb-1 max-w-[1280px] mx-auto" v-if="headerComponent">
-        <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+        <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
         <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></p>
       </div>
       <div v-if="timelineComponent">

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

@@ -19,7 +19,7 @@
             class="w-full flex-col mb-6"
             :class="{'text-center items-center flex': headerComponent?.text_center}"
         >
-          <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ headerComponent.title }}</h3>
           <p v-if="headerComponent?.supporting_text"
              class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]"
              v-html="headerComponent.supporting_text"></p>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="pb-container">
-    <div class="max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-3xl md:rounded-[48px] p-16">
+    <div class="bg-navy-25 rounded-3xl md:rounded-[48px] py-6 px-4 lg:p-16 text-center">
       <div v-for="(component, index) in section.components">
         <component
             :is="currentComponent(component)"