@dcodegroup-au/page-builder 0.7.9 → 0.8.1

package/dist/page-builder.umd.js

@@ -451,10 +451,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_9$n = { class: "font-semibold text-gray-900" };
   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_12$e = { class: "flex flex-col gap-3" };
   const _hoisted_13$b = ["onClick"];
   const _hoisted_14$9 = ["onClick"];
-  const _hoisted_15$7 = { class: "text-xs text-gray-600" };
+  const _hoisted_15$8 = { class: "text-xs text-gray-600" };
   const _hoisted_16$5 = { class: "text-sm font-medium text-gray-900" };
   const _sfc_main$Q = {
     __name: "Items",
@@ -529,7 +529,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     ], 10, _hoisted_11$g)
                   ])
                 ]),
-                vue.createElementVNode("div", _hoisted_12$d, [
+                vue.createElementVNode("div", _hoisted_12$e, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dataRef.value.data, (item, index) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
                       class: vue.normalizeClass(["flex items-center gap-4 px-2 py-1 hover:bg-gray-100 rounded-lg", { "bg-gray-200 hover:bg-gray-200": openItemStates.value[index] }])
@@ -544,7 +544,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           class: "flex flex-1 flex-col cursor-pointer",
                           onClick: ($event) => edit(item, index)
                         }, [
-                          vue.createElementVNode("div", _hoisted_15$7, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
+                          vue.createElementVNode("div", _hoisted_15$8, vue.toDisplayString(vue.unref(singularize)(vue.unref(parseName)(vue.unref(type)))) + " #" + vue.toDisplayString(index + 1), 1),
                           vue.createElementVNode("div", _hoisted_16$5, vue.toDisplayString(item.title), 1)
                         ], 8, _hoisted_14$9),
                         vue.createVNode(_sfc_main$S, {
@@ -11704,7 +11704,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_9$m = ["href"];
   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 _hoisted_12$d = { 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 = {
     __name: "FileUpload",
     props: {
@@ -11825,7 +11825,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               ref_key: "dropzone",
               ref: dropzone2
             }, null, 512),
-            vue.createElementVNode("div", _hoisted_12$c, [
+            vue.createElementVNode("div", _hoisted_12$d, [
               vue.createElementVNode("div", null, [
                 vue.createVNode(vue.unref(UploadCloud), { class: "w-6 h-6" })
               ]),
@@ -45227,18 +45227,18 @@ ${escapeText(this.code(index, length))}
   const _hoisted_9$k = { class: "text-lg font-semibold text-gray-900" };
   const _hoisted_10$g = { class: "relative flex items-end" };
   const _hoisted_11$e = { class: "flex flex-col gap-6" };
-  const _hoisted_12$b = {
+  const _hoisted_12$c = {
     key: 0,
     class: "flex gap-4"
   };
   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 = {
+  const _hoisted_15$7 = {
     key: 1,
     class: "flex flex-col gap-1.5"
   };
   const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
     __name: "Links",
@@ -45367,7 +45367,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, [
+                    !((_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$c, [
                       (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(options, (option) => {
                         return vue.createElementVNode("label", _hoisted_13$a, [
                           vue.withDirectives(vue.createElementVNode("input", {
@@ -45384,7 +45384,7 @@ ${escapeText(this.code(index, length))}
                         ]);
                       }), 64))
                     ])) : vue.createCommentVNode("", true),
-                    !item.hasOwnProperty("content_type") || item.content_type === "content" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$6, [
+                    !item.hasOwnProperty("content_type") || item.content_type === "content" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$7, [
                       ["feature_items", "faqs", "pricing"].includes(componentData.value.type) ? (vue.openBlock(), vue.createBlock(_sfc_main$D, {
                         key: 0,
                         data: item
@@ -45419,7 +45419,7 @@ ${escapeText(this.code(index, length))}
                               maxlength: ((_b2 = componentData.value) == null ? void 0 : _b2.max_title) ?? 200,
                               rows: "4",
                               class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                            }, null, 8, _hoisted_17$3)), [
+                            }, null, 8, _hoisted_17$2)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true)
                           ];
@@ -45482,7 +45482,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_9$j = { class: "relative flex items-end" };
   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 _hoisted_12$b = ["onUpdate:modelValue"];
   const _sfc_main$B = {
     __name: "Logos",
     props: {
@@ -45584,7 +45584,7 @@ ${escapeText(this.code(index, length))}
                             type: "text",
                             placeholder: "Enter your url",
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_12$a), [
+                          }, null, 8, _hoisted_12$b), [
                             [vue.vModelText, item.url]
                           ])
                         ]),
@@ -45768,8 +45768,9 @@ ${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$e = { class: "flex flex-col gap-6" };
-  const _hoisted_11$c = { class: "flex flex-col gap-1.5" };
+  const _hoisted_10$e = ["onUpdate:modelValue"];
+  const _hoisted_11$c = { class: "flex flex-col gap-6" };
+  const _hoisted_12$a = { class: "flex flex-col gap-1.5" };
   const _sfc_main$y = {
     __name: "VideoGrid",
     props: {
@@ -45844,8 +45845,29 @@ ${escapeText(this.code(index, length))}
                       }, null, 8, ["onRemoveItem"])
                     ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_10$e, [
-                    vue.createElementVNode("div", _hoisted_11$c, [
+                  vue.createVNode(_sfc_main$P, {
+                    "is-vertical": "",
+                    field: "line.title",
+                    "label-text": "Youtube URL",
+                    class: "w-full",
+                    value: item.youtube_url
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.withDirectives(vue.createElementVNode("input", {
+                        "onUpdate:modelValue": ($event) => item.youtube_url = $event,
+                        name: "youtube_url.youtube_url",
+                        type: "text",
+                        placeholder: "Url",
+                        class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+                      }, null, 8, _hoisted_10$e), [
+                        [vue.vModelText, item.youtube_url]
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]),
+                  _cache[1] || (_cache[1] = vue.createElementVNode("p", null, "OR", -1)),
+                  vue.createElementVNode("div", _hoisted_11$c, [
+                    vue.createElementVNode("div", _hoisted_12$a, [
                       vue.createVNode(vue.unref(VFileUpload), {
                         name: "image",
                         type: "video",
@@ -46170,12 +46192,12 @@ ${escapeText(this.code(index, length))}
   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]" };
   const _hoisted_14$7 = { class: "flex h-full flex-1 flex-col mb-20" };
-  const _hoisted_15$5 = {
+  const _hoisted_15$6 = {
     key: 0,
     class: "mb-4 px-6 py-5 rounded-xl bg-gray-50"
   };
   const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
-  const _hoisted_17$2 = ["value"];
+  const _hoisted_17$1 = ["value"];
   const _hoisted_18$1 = {
     key: 1,
     class: "rounded-xl bg-gray-50 px-6 py-5"
@@ -46315,7 +46337,7 @@ ${escapeText(this.code(index, length))}
               }), 256))
             ]),
             vue.createElementVNode("div", _hoisted_14$7, [
-              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$5, [
+              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$6, [
                 _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
                 vue.createElementVNode("div", _hoisted_16$3, [
                   vue.createVNode(_sfc_main$P, {
@@ -46330,7 +46352,7 @@ ${escapeText(this.code(index, length))}
                         name: "url"
                       }, [
                         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.breadcrumbs, (b) => {
-                          return vue.openBlock(), vue.createElementBlock("option", { value: b }, vue.toDisplayString(b), 9, _hoisted_17$2);
+                          return vue.openBlock(), vue.createElementBlock("option", { value: b }, vue.toDisplayString(b), 9, _hoisted_17$1);
                         }), 256))
                       ], 512), [
                         [vue.vModelSelect, __props.modelValue.breadcrumb]
@@ -48458,7 +48480,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_12$7 = { class: "border-t border-gray-200 mt-4 pt-[17px] flex justify-between items-center" };
   const _hoisted_13$7 = ["href"];
   const _hoisted_14$6 = { class: "absolute max-sm:bottom-0 sm:top-[-65px] right-0 lg:right-4 flex gap-4" };
-  const _hoisted_15$4 = {
+  const _hoisted_15$5 = {
     key: 0,
     class: "flex sm:justify-center mb-6 lg:mb-10"
   };
@@ -48608,7 +48630,7 @@ ${escapeText(this.code(index, length))}
               vue.createVNode(vue.unref(ChevronRight), { class: "w-6 h-6" })
             ], 2)
           ]),
-          ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
+          ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$5, [
             vue.createElementVNode("a", {
               class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
               href: vue.unref(formatUrl)(__props.component.button.url),
@@ -48683,31 +48705,36 @@ ${escapeText(this.code(index, length))}
   const _hoisted_1$v = { class: "grid grid-cols-1 md:grid-cols-3 gap-6 w-full" };
   const _hoisted_2$f = {
     key: 0,
-    class: "relative group"
+    class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
+  };
+  const _hoisted_3$f = {
+    key: 0,
+    class: "w-full h-[281px] md:rounded-2xl"
   };
-  const _hoisted_3$f = ["onClick"];
   const _hoisted_4$f = ["src"];
-  const _hoisted_5$f = ["src"];
-  const _hoisted_6$f = {
+  const _hoisted_5$f = ["onClick"];
+  const _hoisted_6$f = ["src"];
+  const _hoisted_7$e = ["src"];
+  const _hoisted_8$d = {
     key: 2,
     class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4",
     alt: "No Available",
     src: _imports_0
   };
-  const _hoisted_7$e = { class: "flex flex-col gap-2 items-start text-left w-full" };
-  const _hoisted_8$d = {
+  const _hoisted_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
+  const _hoisted_10$9 = {
     key: 0,
     class: "flex gap-2"
   };
-  const _hoisted_9$d = ["href"];
-  const _hoisted_10$9 = { class: "flex justify-between" };
-  const _hoisted_11$8 = ["innerHTML"];
-  const _hoisted_12$6 = { class: "text-gray-500 text-sm mb-4" };
-  const _hoisted_13$6 = {
+  const _hoisted_11$8 = ["href"];
+  const _hoisted_12$6 = { class: "flex justify-between" };
+  const _hoisted_13$6 = ["innerHTML"];
+  const _hoisted_14$5 = { class: "text-gray-500 text-sm mb-4" };
+  const _hoisted_15$4 = {
     key: 0,
     class: "flex justify-center"
   };
-  const _hoisted_14$5 = ["href", "target"];
+  const _hoisted_16$1 = ["href", "target"];
   const _sfc_main$h = {
     __name: "CollectionGridPresenter",
     props: {
@@ -48744,6 +48771,13 @@ ${escapeText(this.code(index, length))}
           videoRefs.value[index] = el;
         }
       };
+      const getEmbedUrl = (item) => {
+        if (!item.youtube_url) return null;
+        const m = item.youtube_url.match(/(?:youtube\.com\/(?:.*v=|v\/|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
+        const id = m ? m[1] : null;
+        if (!id) return null;
+        return `https://www.youtube.com/embed/${id}`;
+      };
       return (_ctx, _cache) => {
         var _a2, _b2;
         return vue.openBlock(), vue.createElementBlock("div", {
@@ -48753,35 +48787,45 @@ ${escapeText(this.code(index, length))}
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (card, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
-                class: "card bg-white sm:p-0 px-4"
+                class: "card bg-white sm:p-0 px-4 w-full"
               }, [
                 __props.component.type === "video_grid" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
-                  vue.createElementVNode("video", {
-                    onClick: ($event) => togglePlayPause(index),
-                    ref_for: true,
-                    ref: (el) => setVideoRef(el, index),
-                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
-                    width: "640",
-                    height: "360",
-                    preload: "metadata"
-                  }, [
-                    vue.createElementVNode("source", {
-                      src: `${card.video}#t=2`
+                  (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$f, [
+                    vue.createElementVNode("iframe", {
+                      src: getEmbedUrl(card),
+                      frameborder: "0",
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowfullscreen: "",
+                      class: "w-full h-full"
                     }, null, 8, _hoisted_4$f)
-                  ], 8, _hoisted_3$f),
-                  !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
-                    key: 0,
-                    class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
-                    onClick: ($event) => togglePlayPause(index)
-                  }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+                  ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                    vue.createElementVNode("video", {
+                      onClick: ($event) => togglePlayPause(index),
+                      ref_for: true,
+                      ref: (el) => setVideoRef(el, index),
+                      class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                      width: "640",
+                      height: "360",
+                      preload: "metadata"
+                    }, [
+                      vue.createElementVNode("source", {
+                        src: `${card.video}#t=2`
+                      }, null, 8, _hoisted_6$f)
+                    ], 8, _hoisted_5$f),
+                    !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
+                      key: 0,
+                      class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
+                      onClick: ($event) => togglePlayPause(index)
+                    }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
+                  ], 64))
                 ])) : card.image ? (vue.openBlock(), vue.createElementBlock("img", {
                   key: 1,
                   src: card.image,
                   alt: "Card Image",
                   class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-                }, null, 8, _hoisted_5$f)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_6$f)),
-                vue.createElementVNode("div", _hoisted_7$e, [
-                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$d, [
+                }, null, 8, _hoisted_7$e)) : (vue.openBlock(), vue.createElementBlock("img", _hoisted_8$d)),
+                vue.createElementVNode("div", _hoisted_9$d, [
+                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$9, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(card.categories, (tag) => {
                       return vue.openBlock(), vue.createElementBlock("span", {
                         key: tag,
@@ -48800,20 +48844,20 @@ ${escapeText(this.code(index, length))}
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }, [
-                    vue.createElementVNode("div", _hoisted_10$9, [
+                    vue.createElementVNode("div", _hoisted_12$6, [
                       vue.createElementVNode("span", {
                         class: "w-5/6 leading-[28px]",
                         innerHTML: card.title
-                      }, null, 8, _hoisted_11$8),
+                      }, null, 8, _hoisted_13$6),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                     ])
-                  ], 8, _hoisted_9$d)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("p", _hoisted_12$6, vue.toDisplayString(card.dateTime), 1)
+                  ], 8, _hoisted_11$8)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("p", _hoisted_14$5, vue.toDisplayString(card.dateTime), 1)
                 ])
               ]);
             }), 128))
           ]),
-          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$6, [
+          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15$4, [
             vue.createElementVNode("a", {
               class: "border-brand-300 hover:border-brand-700 border text-brand-700 h-[44px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center font-semibold text-base",
               href: vue.unref(formatUrl)(vue.unref(button).url),
@@ -48821,13 +48865,13 @@ ${escapeText(this.code(index, length))}
             }, [
               vue.createTextVNode(vue.toDisplayString(vue.unref(button).title) + " ", 1),
               vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-            ], 8, _hoisted_14$5)
+            ], 8, _hoisted_16$1)
           ])) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
   };
-  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-b6625ed3"]]);
+  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
   const _hoisted_1$u = { class: "overflow-hidden" };
   const _sfc_main$g = {
     __name: "CollectionGrid",
@@ -48996,7 +49040,7 @@ ${escapeText(this.code(index, length))}
         return ((_a = component.value) == null ? void 0 : _a.button) || {};
       });
       vue.onMounted(() => {
-        if (leftColumn.value && rightColumn.value) {
+        if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
           rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
         }
       });
@@ -49017,7 +49061,11 @@ ${escapeText(this.code(index, length))}
         var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row", { "[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert, "justify-center": (_b = section.value) == null ? void 0 : _b.center, "md:!px-0 !ml-0 justify-end": (_c = section.value) == null ? void 0 : _c.align_left }])
+            class: vue.normalizeClass(["pb-container pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row", {
+              "[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10": (_a = section.value) == null ? void 0 : _a.revert,
+              "justify-center": (_b = section.value) == null ? void 0 : _b.center,
+              "md:!px-0 !ml-0 justify-end": (_c = section.value) == null ? void 0 : _c.align_left
+            }])
           }, [
             ((_d = component.value) == null ? void 0 : _d.title) || ((_e = component.value) == null ? void 0 : _e.paragraph) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
@@ -49043,9 +49091,9 @@ ${escapeText(this.code(index, length))}
             ], 2)) : vue.createCommentVNode("", true),
             ((_i = component.value) == null ? void 0 : _i.featured_image) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
-              class: "w-full min-w-[300px] max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden",
               ref_key: "rightColumn",
-              ref: rightColumn
+              ref: rightColumn,
+              class: "w-full lg:min-w-[300px] lg:max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden"
             }, [
               ((_j = component.value) == null ? void 0 : _j.source_type) === "video" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$d, [
                 vue.createElementVNode("video", {
@@ -49080,31 +49128,26 @@ ${escapeText(this.code(index, length))}
   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 = {
-    key: 1,
-    class: "rounded-xl md:rounded-3xl overflow-hidden relative"
-  };
-  const _hoisted_6$c = ["src", "alt"];
-  const _hoisted_7$c = ["innerHTML"];
-  const _hoisted_8$b = {
+  const _hoisted_5$c = ["src", "alt"];
+  const _hoisted_6$c = {
     key: 1,
     class: "my-[44px]"
   };
-  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 = {
+  const _hoisted_7$c = { class: "text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900" };
+  const _hoisted_8$b = ["innerHTML"];
+  const _hoisted_9$b = {
     key: 0,
     class: "max-w-[48px] min-w-[48px] w-full max-h-[48px] min-h-[48px] h-full bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center"
   };
-  const _hoisted_12$5 = { class: "font-semibold text-[20px] text-gray-900" };
-  const _hoisted_13$5 = ["innerHTML"];
-  const _hoisted_14$4 = ["href", "target"];
-  const _hoisted_15$3 = ["src"];
-  const _hoisted_16$1 = {
+  const _hoisted_10$8 = { class: "font-semibold text-[20px] text-gray-900" };
+  const _hoisted_11$7 = ["innerHTML"];
+  const _hoisted_12$5 = ["href", "target"];
+  const _hoisted_13$5 = ["src"];
+  const _hoisted_14$4 = {
     key: 0,
-    class: "w-[560px]"
+    class: "w-full md:w-[560px] flex"
   };
-  const _hoisted_17$1 = ["src", "alt"];
+  const _hoisted_15$3 = ["src", "alt"];
   const _sfc_main$d = {
     __name: "TwoColumnsImageContent",
     props: {
@@ -49160,34 +49203,29 @@ ${escapeText(this.code(index, length))}
                   innerHTML: paragraphComponent.value.paragraph
                 }, null, 8, _hoisted_4$c)
               ], 2)) : vue.createCommentVNode("", true),
-              imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$c, [
-                vue.createElementVNode("img", {
-                  src: imageComponent.value.featured_image,
-                  alt: imageComponent.value.caption,
-                  class: "w-full h-full object-cover"
-                }, null, 8, _hoisted_6$c),
-                vue.createElementVNode("p", {
-                  innerHTML: imageComponent.value.caption,
-                  class: "mt-2 text-[13px]"
-                }, null, 8, _hoisted_7$c)
-              ])) : vue.createCommentVNode("", true)
-            ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$b, [
+              imageComponent.value ? (vue.openBlock(), vue.createElementBlock("img", {
+                key: 1,
+                src: imageComponent.value.featured_image,
+                alt: imageComponent.value.caption,
+                class: "w-full rounded-xl"
+              }, null, 8, _hoisted_5$c)) : vue.createCommentVNode("", true)
+            ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$c, [
               headerComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: vue.normalizeClass(["w-full flex-col mb-6", { "text-center items-center flex": (_b = headerComponent.value) == null ? void 0 : _b.text_center }])
               }, [
-                vue.createElementVNode("h3", _hoisted_9$b, vue.toDisplayString(headerComponent.value.title), 1),
+                vue.createElementVNode("h3", _hoisted_7$c, vue.toDisplayString(headerComponent.value.title), 1),
                 ((_c = headerComponent.value) == null ? void 0 : _c.supporting_text) ? (vue.openBlock(), vue.createElementBlock("p", {
                   key: 0,
                   class: "text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]",
                   innerHTML: headerComponent.value.supporting_text
-                }, null, 8, _hoisted_10$8)) : vue.createCommentVNode("", true)
+                }, null, 8, _hoisted_8$b)) : vue.createCommentVNode("", true)
               ], 2)) : vue.createCommentVNode("", true),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(featureItemsComponent.value.hasOwnProperty("grid_columns") ? "" : "flex flex-col-reverse md:flex-row gap-8")
               }, [
                 vue.createElementVNode("div", {
-                  class: vue.normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 w-2/3"])
+                  class: vue.normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 lg:w-2/3"])
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item) => {
                     var _a2, _b2, _c2;
@@ -49198,20 +49236,20 @@ ${escapeText(this.code(index, length))}
                       }])
                     }, [
                       item.title ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                        (item == null ? void 0 : item.icon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$7, [
+                        (item == null ? void 0 : item.icon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$b, [
                           vue.createVNode(_sfc_main$H, {
                             icon: item.icon,
                             "icon-classes": "w-5 h-5 text-brand-600"
                           }, null, 8, ["icon"])
                         ])) : vue.createCommentVNode("", true),
                         vue.createElementVNode("div", {
-                          class: vue.normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
+                          class: vue.normalizeClass(["md:max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                         }, [
-                          vue.createElementVNode("h3", _hoisted_12$5, vue.toDisplayString(item.title), 1),
+                          vue.createElementVNode("h3", _hoisted_10$8, vue.toDisplayString(item.title), 1),
                           vue.createElementVNode("p", {
                             class: "mt-2 text-md font-normal text-gray-600 leading-[24px]",
                             innerHTML: item.supporting_text ?? item.description
-                          }, null, 8, _hoisted_13$5),
+                          }, null, 8, _hoisted_11$7),
                           ((_c2 = item == null ? void 0 : item.primary_button) == null ? void 0 : _c2.show) ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
                             class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
@@ -49220,23 +49258,23 @@ ${escapeText(this.code(index, length))}
                           }, [
                             vue.createTextVNode(vue.toDisplayString(item.primary_button.label) + " ", 1),
                             vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5" })
-                          ], 8, _hoisted_14$4)) : vue.createCommentVNode("", true)
+                          ], 8, _hoisted_12$5)) : vue.createCommentVNode("", true)
                         ], 2)
                       ], 64)) : (vue.openBlock(), vue.createElementBlock("img", {
                         key: 1,
                         src: item.image,
                         alt: "Feature Image",
                         class: "w-full h-full object-cover"
-                      }, null, 8, _hoisted_15$3))
+                      }, null, 8, _hoisted_13$5))
                     ], 2);
                   }), 256))
                 ], 2),
-                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, [
+                imageComponent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$4, [
                   vue.createElementVNode("img", {
                     src: imageComponent.value.featured_image,
                     alt: ((_d = imageComponent.value) == null ? void 0 : _d.caption) ?? "Image",
-                    class: "rounded-br-[24px] rounded-tl-[24px] w-full"
-                  }, null, 8, _hoisted_17$1)
+                    class: "rounded-br-[24px] rounded-tl-[24px] w-full object-cover"
+                  }, null, 8, _hoisted_15$3)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
             ]))
@@ -49595,7 +49633,7 @@ ${escapeText(this.code(index, length))}
         return section.value.components.filter((component) => component.type === "bullet_points");
       });
       vue.onMounted(() => {
-        if (leftColumn.value && rightColumn.value) {
+        if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
           leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
         }
       });
@@ -49611,7 +49649,7 @@ ${escapeText(this.code(index, length))}
               ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (vue.openBlock(), vue.createElementBlock("img", {
                 key: 0,
                 src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
-                class: "max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
+                class: "lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
                 ref_key: "leftColumn",
                 ref: leftColumn,
                 alt: "Feature"