@dcodegroup-au/page-builder 0.7.9 → 0.8.1

package/dist/page-builder.es.js

@@ -448,10 +448,10 @@ const _hoisted_8$o = { class: "flex flex-col gap-1" };
 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",
@@ -526,7 +526,7 @@ const _sfc_main$Q = {
                   ], 10, _hoisted_11$g)
                 ])
               ]),
-              createElementVNode("div", _hoisted_12$d, [
+              createElementVNode("div", _hoisted_12$e, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(dataRef.value.data, (item, index) => {
                   return openBlock(), createElementBlock("div", {
                     class: 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] }])
@@ -541,7 +541,7 @@ const _sfc_main$Q = {
                         class: "flex flex-1 flex-col cursor-pointer",
                         onClick: ($event) => edit(item, index)
                       }, [
-                        createElementVNode("div", _hoisted_15$7, toDisplayString(unref(singularize)(unref(parseName)(unref(type)))) + " #" + toDisplayString(index + 1), 1),
+                        createElementVNode("div", _hoisted_15$8, toDisplayString(unref(singularize)(unref(parseName)(unref(type)))) + " #" + toDisplayString(index + 1), 1),
                         createElementVNode("div", _hoisted_16$5, toDisplayString(item.title), 1)
                       ], 8, _hoisted_14$9),
                       createVNode(_sfc_main$S, {
@@ -11701,7 +11701,7 @@ const _hoisted_8$n = ["src", "title"];
 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: {
@@ -11822,7 +11822,7 @@ const _sfc_main$O = {
             ref_key: "dropzone",
             ref: dropzone2
           }, null, 512),
-          createElementVNode("div", _hoisted_12$c, [
+          createElementVNode("div", _hoisted_12$d, [
             createElementVNode("div", null, [
               createVNode(unref(UploadCloud), { class: "w-6 h-6" })
             ]),
@@ -45224,18 +45224,18 @@ 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$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",
@@ -45364,7 +45364,7 @@ const _sfc_main$C = {
                   ])
                 ]),
                 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) ? (openBlock(), 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) ? (openBlock(), createElementBlock("div", _hoisted_12$c, [
                     (openBlock(), createElementBlock(Fragment, null, renderList(options, (option) => {
                       return createElementVNode("label", _hoisted_13$a, [
                         withDirectives(createElementVNode("input", {
@@ -45381,7 +45381,7 @@ const _sfc_main$C = {
                       ]);
                     }), 64))
                   ])) : createCommentVNode("", true),
-                  !item.hasOwnProperty("content_type") || item.content_type === "content" ? (openBlock(), createElementBlock("div", _hoisted_15$6, [
+                  !item.hasOwnProperty("content_type") || item.content_type === "content" ? (openBlock(), createElementBlock("div", _hoisted_15$7, [
                     ["feature_items", "faqs", "pricing"].includes(componentData.value.type) ? (openBlock(), createBlock(_sfc_main$D, {
                       key: 0,
                       data: item
@@ -45416,7 +45416,7 @@ const _sfc_main$C = {
                             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)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true)
                         ];
@@ -45479,7 +45479,7 @@ const _hoisted_8$j = { class: "text-lg font-semibold text-gray-900" };
 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: {
@@ -45581,7 +45581,7 @@ const _sfc_main$B = {
                           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), [
                           [vModelText, item.url]
                         ])
                       ]),
@@ -45765,8 +45765,9 @@ 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$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: {
@@ -45841,8 +45842,29 @@ const _sfc_main$y = {
                     }, null, 8, ["onRemoveItem"])
                   ])
                 ]),
-                createElementVNode("div", _hoisted_10$e, [
-                  createElementVNode("div", _hoisted_11$c, [
+                createVNode(_sfc_main$P, {
+                  "is-vertical": "",
+                  field: "line.title",
+                  "label-text": "Youtube URL",
+                  class: "w-full",
+                  value: item.youtube_url
+                }, {
+                  default: withCtx(() => [
+                    withDirectives(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), [
+                      [vModelText, item.youtube_url]
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["value"]),
+                _cache[1] || (_cache[1] = createElementVNode("p", null, "OR", -1)),
+                createElementVNode("div", _hoisted_11$c, [
+                  createElementVNode("div", _hoisted_12$a, [
                     createVNode(unref(VFileUpload), {
                       name: "image",
                       type: "video",
@@ -46167,12 +46189,12 @@ 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]" };
 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"
@@ -46312,7 +46334,7 @@ const _sfc_main$t = {
             }), 256))
           ]),
           createElementVNode("div", _hoisted_14$7, [
-            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_15$5, [
+            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_15$6, [
               _cache[3] || (_cache[3] = createElementVNode("div", { class: "text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200" }, "Settings", -1)),
               createElementVNode("div", _hoisted_16$3, [
                 createVNode(_sfc_main$P, {
@@ -46327,7 +46349,7 @@ const _sfc_main$t = {
                       name: "url"
                     }, [
                       (openBlock(true), createElementBlock(Fragment, null, renderList(__props.breadcrumbs, (b) => {
-                        return openBlock(), createElementBlock("option", { value: b }, toDisplayString(b), 9, _hoisted_17$2);
+                        return openBlock(), createElementBlock("option", { value: b }, toDisplayString(b), 9, _hoisted_17$1);
                       }), 256))
                     ], 512), [
                       [vModelSelect, __props.modelValue.breadcrumb]
@@ -48455,7 +48477,7 @@ const _hoisted_11$9 = ["innerHTML"];
 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"
 };
@@ -48605,7 +48627,7 @@ const _sfc_main$j = {
             createVNode(unref(ChevronRight), { class: "w-6 h-6" })
           ], 2)
         ]),
-        ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
+        ((_a2 = __props.component) == null ? void 0 : _a2.button) ? (openBlock(), createElementBlock("div", _hoisted_15$5, [
           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: unref(formatUrl)(__props.component.button.url),
@@ -48680,31 +48702,36 @@ const PlayButton = { render: render$e };
 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: {
@@ -48741,6 +48768,13 @@ const _sfc_main$h = {
         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 openBlock(), createElementBlock("div", {
@@ -48750,35 +48784,45 @@ const _sfc_main$h = {
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(items), (card, index) => {
             return openBlock(), 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" ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
-                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"
-                }, [
-                  createElementVNode("source", {
-                    src: `${card.video}#t=2`
+                (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (openBlock(), createElementBlock("div", _hoisted_3$f, [
+                  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] ? (openBlock(), createBlock(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"])) : createCommentVNode("", true)
+                ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  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"
+                  }, [
+                    createElementVNode("source", {
+                      src: `${card.video}#t=2`
+                    }, null, 8, _hoisted_6$f)
+                  ], 8, _hoisted_5$f),
+                  !isPlaying.value[index] ? (openBlock(), createBlock(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"])) : createCommentVNode("", true)
+                ], 64))
               ])) : card.image ? (openBlock(), 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)) : (openBlock(), createElementBlock("img", _hoisted_6$f)),
-              createElementVNode("div", _hoisted_7$e, [
-                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_8$d, [
+              }, null, 8, _hoisted_7$e)) : (openBlock(), createElementBlock("img", _hoisted_8$d)),
+              createElementVNode("div", _hoisted_9$d, [
+                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_10$9, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(card.categories, (tag) => {
                     return openBlock(), createElementBlock("span", {
                       key: tag,
@@ -48797,20 +48841,20 @@ const _sfc_main$h = {
                   target: "_blank",
                   rel: "noopener noreferrer"
                 }, [
-                  createElementVNode("div", _hoisted_10$9, [
+                  createElementVNode("div", _hoisted_12$6, [
                     createElementVNode("span", {
                       class: "w-5/6 leading-[28px]",
                       innerHTML: card.title
-                    }, null, 8, _hoisted_11$8),
+                    }, null, 8, _hoisted_13$6),
                     createVNode(unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                   ])
-                ], 8, _hoisted_9$d)) : createCommentVNode("", true),
-                createElementVNode("p", _hoisted_12$6, toDisplayString(card.dateTime), 1)
+                ], 8, _hoisted_11$8)) : createCommentVNode("", true),
+                createElementVNode("p", _hoisted_14$5, toDisplayString(card.dateTime), 1)
               ])
             ]);
           }), 128))
         ]),
-        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_13$6, [
+        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
           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: unref(formatUrl)(unref(button).url),
@@ -48818,13 +48862,13 @@ const _sfc_main$h = {
           }, [
             createTextVNode(toDisplayString(unref(button).title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_14$5)
+          ], 8, _hoisted_16$1)
         ])) : 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",
@@ -48993,7 +49037,7 @@ const _sfc_main$e = {
       return ((_a = component.value) == null ? void 0 : _a.button) || {};
     });
     onMounted(() => {
-      if (leftColumn.value && rightColumn.value) {
+      if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
         rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
       }
     });
@@ -49014,7 +49058,11 @@ const _sfc_main$e = {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       return openBlock(), createElementBlock("div", _hoisted_1$r, [
         createElementVNode("div", {
-          class: 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: 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) ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -49040,9 +49088,9 @@ const _sfc_main$e = {
           ], 2)) : createCommentVNode("", true),
           ((_i = component.value) == null ? void 0 : _i.featured_image) ? (openBlock(), 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" ? (openBlock(), createElementBlock("div", _hoisted_7$d, [
               createElementVNode("video", {
@@ -49077,31 +49125,26 @@ const _hoisted_1$q = { class: "overflow-hidden" };
 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: {
@@ -49157,34 +49200,29 @@ const _sfc_main$d = {
                 innerHTML: paragraphComponent.value.paragraph
               }, null, 8, _hoisted_4$c)
             ], 2)) : createCommentVNode("", true),
-            imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
-              createElementVNode("img", {
-                src: imageComponent.value.featured_image,
-                alt: imageComponent.value.caption,
-                class: "w-full h-full object-cover"
-              }, null, 8, _hoisted_6$c),
-              createElementVNode("p", {
-                innerHTML: imageComponent.value.caption,
-                class: "mt-2 text-[13px]"
-              }, null, 8, _hoisted_7$c)
-            ])) : createCommentVNode("", true)
-          ], 4)) : (openBlock(), createElementBlock("div", _hoisted_8$b, [
+            imageComponent.value ? (openBlock(), createElementBlock("img", {
+              key: 1,
+              src: imageComponent.value.featured_image,
+              alt: imageComponent.value.caption,
+              class: "w-full rounded-xl"
+            }, null, 8, _hoisted_5$c)) : createCommentVNode("", true)
+          ], 4)) : (openBlock(), createElementBlock("div", _hoisted_6$c, [
             headerComponent.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass(["w-full flex-col mb-6", { "text-center items-center flex": (_b = headerComponent.value) == null ? void 0 : _b.text_center }])
             }, [
-              createElementVNode("h3", _hoisted_9$b, toDisplayString(headerComponent.value.title), 1),
+              createElementVNode("h3", _hoisted_7$c, toDisplayString(headerComponent.value.title), 1),
               ((_c = headerComponent.value) == null ? void 0 : _c.supporting_text) ? (openBlock(), 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)) : createCommentVNode("", true)
+              }, null, 8, _hoisted_8$b)) : createCommentVNode("", true)
             ], 2)) : createCommentVNode("", true),
             createElementVNode("div", {
               class: normalizeClass(featureItemsComponent.value.hasOwnProperty("grid_columns") ? "" : "flex flex-col-reverse md:flex-row gap-8")
             }, [
               createElementVNode("div", {
-                class: normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 w-2/3"])
+                class: normalizeClass(["grid gap-8", featureItemsComponent.value.hasOwnProperty("grid_columns") ? `md:grid-cols-${featureItemsComponent.value.grid_columns}` : "lg:grid-cols-2 lg:w-2/3"])
               }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
                   var _a2, _b2, _c2;
@@ -49195,20 +49233,20 @@ const _sfc_main$d = {
                     }])
                   }, [
                     item.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      (item == null ? void 0 : item.icon) ? (openBlock(), createElementBlock("div", _hoisted_11$7, [
+                      (item == null ? void 0 : item.icon) ? (openBlock(), createElementBlock("div", _hoisted_9$b, [
                         createVNode(_sfc_main$H, {
                           icon: item.icon,
                           "icon-classes": "w-5 h-5 text-brand-600"
                         }, null, 8, ["icon"])
                       ])) : createCommentVNode("", true),
                       createElementVNode("div", {
-                        class: normalizeClass(["max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
+                        class: normalizeClass(["md:max-w-[324px] ql-editor", { "max-w-full": (_b2 = featureItemsComponent.value) == null ? void 0 : _b2.has_background }])
                       }, [
-                        createElementVNode("h3", _hoisted_12$5, toDisplayString(item.title), 1),
+                        createElementVNode("h3", _hoisted_10$8, toDisplayString(item.title), 1),
                         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) ? (openBlock(), createElementBlock("a", {
                           key: 0,
                           class: "cursor-pointer text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4",
@@ -49217,23 +49255,23 @@ const _sfc_main$d = {
                         }, [
                           createTextVNode(toDisplayString(item.primary_button.label) + " ", 1),
                           createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-                        ], 8, _hoisted_14$4)) : createCommentVNode("", true)
+                        ], 8, _hoisted_12$5)) : createCommentVNode("", true)
                       ], 2)
                     ], 64)) : (openBlock(), 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 ? (openBlock(), createElementBlock("div", _hoisted_16$1, [
+              imageComponent.value ? (openBlock(), createElementBlock("div", _hoisted_14$4, [
                 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)
               ])) : createCommentVNode("", true)
             ], 2)
           ]))
@@ -49592,7 +49630,7 @@ const _sfc_main$9 = {
       return section.value.components.filter((component) => component.type === "bullet_points");
     });
     onMounted(() => {
-      if (leftColumn.value && rightColumn.value) {
+      if (leftColumn.value && rightColumn.value && window.innerWidth >= 1024) {
         leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
       }
     });
@@ -49608,7 +49646,7 @@ const _sfc_main$9 = {
             ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (openBlock(), 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"