@dcodegroup-au/page-builder 0.8.0 → 0.8.2

package/dist/page-builder.css

@@ -894,6 +894,9 @@ select {
 .mt-6 {
   margin-top: 1.5rem;
 }
+.mt-7 {
+  margin-top: 1.75rem;
+}
 .mt-8 {
   margin-top: 2rem;
 }
@@ -915,12 +918,6 @@ select {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
-.line-clamp-6 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 6;
-}
 .\!block {
   display: block !important;
 }
@@ -1020,12 +1017,12 @@ select {
 .h-\[48px\] {
   height: 48px;
 }
+.h-\[494px\] {
+  height: 494px;
+}
 .h-\[56px\] {
   height: 56px;
 }
-.h-\[614px\] {
-  height: 614px;
-}
 .h-\[674px\] {
   height: 674px;
 }
@@ -1388,6 +1385,9 @@ select {
 .rounded-\[20px\] {
   border-radius: 20px;
 }
+.rounded-\[24px\] {
+  border-radius: 24px;
+}
 .rounded-\[6px\] {
   border-radius: 6px;
 }
@@ -2956,6 +2956,10 @@ select {
 
 @media not all and (min-width: 1024px) {
 
+  .max-lg\:absolute {
+    position: absolute;
+  }
+
   .max-lg\:hidden {
     display: none;
   }
@@ -2975,6 +2979,10 @@ select {
   .max-lg\:pb-6 {
     padding-bottom: 1.5rem;
   }
+
+  .max-lg\:pt-\[55\%\] {
+    padding-top: 55%;
+  }
 }
 
 @media not all and (min-width: 768px) {
@@ -3023,10 +3031,6 @@ select {
     grid-template-columns: auto 20px;
   }
 
-  .max-sm\:flex-col {
-    flex-direction: column;
-  }
-
   .max-sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -3112,6 +3116,11 @@ select {
     padding-right: 1rem;
   }
 
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .sm\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -3871,12 +3880,12 @@ select {
 }
 
 
-.carousel[data-v-29ca6047] {
+.carousel[data-v-37e27419] {
   margin: 1rem 0;
   flex-direction: column;
 }
 @media not all and (min-width: 1024px) {
-[data-v-29ca6047] .carousel__slide {
+[data-v-37e27419] .carousel__slide {
     flex-direction: column;
 }
 }
@@ -3898,7 +3907,7 @@ select {
   -webkit-line-clamp: 4; /* Limit the text to 3 lines */
 }
 
-.card[data-v-b6625ed3] {
+.card[data-v-77dcb437] {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/page-builder.es.js

@@ -448,11 +448,11 @@ 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_16$4 = { class: "text-sm font-medium text-gray-900" };
+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",
   props: {
@@ -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,8 +541,8 @@ 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_16$4, toDisplayString(item.title), 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, {
                         onRemoveItem: ($event) => handleDeleteItem(index),
@@ -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,17 +45224,17 @@ 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$3 = ["onUpdate:modelValue", "maxlength"];
+const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_18$2 = { key: 2 };
 const _sfc_main$C = {
@@ -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
@@ -45405,7 +45405,7 @@ const _sfc_main$C = {
                             placeholder: "Title",
                             maxlength: ((_a3 = componentData.value) == null ? void 0 : _a3.max_title) ?? 200,
                             class: "border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
-                          }, null, 8, _hoisted_16$3)), [
+                          }, null, 8, _hoisted_16$4)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true),
                           isBulletPoint.value ? withDirectives((openBlock(), createElementBlock("textarea", {
@@ -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,11 +46189,11 @@ 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$2 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
+const _hoisted_16$3 = { class: "flex flex-col gap-1 pt-6 text-gray-600" };
 const _hoisted_17$1 = ["value"];
 const _hoisted_18$1 = {
   key: 1,
@@ -46312,9 +46334,9 @@ 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$2, [
+              createElementVNode("div", _hoisted_16$3, [
                 createVNode(_sfc_main$P, {
                   field: "breadcrumb",
                   "label-text": "Breadcrumb section",
@@ -47826,15 +47848,15 @@ const Slide = defineComponent({
     };
   }
 });
-const _hoisted_1$M = { class: "flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10" };
+const _hoisted_1$M = { class: "flex h-[494px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-[24px] lg:rounded-[48px] z-10" };
 const _hoisted_2$m = { class: "flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full" };
-const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]" };
+const _hoisted_3$j = { class: "flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-7 sm:mt-14 lg:mt-[218px]" };
 const _hoisted_4$j = { class: "gap-2 flex z-10 mb-4" };
 const _hoisted_5$i = ["onClick"];
 const _hoisted_6$i = { class: "text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]" };
 const _hoisted_7$h = { class: "max-md:flex-1" };
 const _hoisted_8$g = ["innerHTML"];
-const _hoisted_9$g = { class: "flex gap-3 md:mt-8 max-sm:flex-col" };
+const _hoisted_9$g = { class: "flex gap-3 mt-4 md:mt-8" };
 const _hoisted_10$c = ["href", "target"];
 const _hoisted_11$a = ["href", "target"];
 const _hoisted_12$8 = ["src"];
@@ -47883,14 +47905,14 @@ const _sfc_main$s = {
                       createElementVNode("h3", _hoisted_6$i, toDisplayString(slide == null ? void 0 : slide.title), 1),
                       createElementVNode("div", _hoisted_7$h, [
                         createElementVNode("p", {
-                          class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                          class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-4 sm:line-clamp-3",
                           innerHTML: slide == null ? void 0 : slide.description
                         }, null, 8, _hoisted_8$g)
                       ]),
                       createElementVNode("div", _hoisted_9$g, [
                         slide.secondary_button.show ? (openBlock(), createElementBlock("a", {
                           key: 0,
-                          class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
+                          class: "text-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
                           href: unref(formatUrl)(slide.secondary_button.url),
                           target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                         }, [
@@ -47898,7 +47920,7 @@ const _sfc_main$s = {
                         ], 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",
+                          class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-4 sm:px-6 py-2 rounded-full hover:bg-navy-50",
                           href: unref(formatUrl)(slide.primary_button.url),
                           target: slide.primary_button.open_in_new_tab ? "_blank" : ""
                         }, [
@@ -47928,7 +47950,7 @@ const _sfc_main$s = {
     };
   }
 };
-const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-29ca6047"]]);
+const VSliderPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-37e27419"]]);
 const _hoisted_1$L = ["target", "href"];
 const _sfc_main$r = {
   __name: "LinkPresenter",
@@ -48455,11 +48477,11 @@ 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"
 };
-const _hoisted_16$1 = ["href", "target"];
+const _hoisted_16$2 = ["href", "target"];
 const _sfc_main$j = {
   __name: "CarouselPresenter",
   props: {
@@ -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),
@@ -48613,7 +48635,7 @@ const _sfc_main$j = {
           }, [
             createTextVNode(toDisplayString(__props.component.button.title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_16$1)
+          ], 8, _hoisted_16$2)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -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",
@@ -49098,7 +49142,7 @@ const _hoisted_12$5 = ["href", "target"];
 const _hoisted_13$5 = ["src"];
 const _hoisted_14$4 = {
   key: 0,
-  class: "w-full md:w-[560px] flex"
+  class: "w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]"
 };
 const _hoisted_15$3 = ["src", "alt"];
 const _sfc_main$d = {
@@ -49226,7 +49270,7 @@ const _sfc_main$d = {
                 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 object-cover"
+                  class: "w-full h-full object-cover max-lg:absolute inset-0"
                 }, null, 8, _hoisted_15$3)
               ])) : createCommentVNode("", true)
             ], 2)
@@ -49599,14 +49643,18 @@ const _sfc_main$9 = {
           createElementVNode("div", {
             class: normalizeClass(["pb-container my-[40px]", { "flex gap-8 flex-col lg:flex-row": (_c = headerComponent.value) == null ? void 0 : _c.featured_image, "flex-col-reverse lg:flex-row-reverse justify-between": (_d = headerComponent.value) == null ? void 0 : _d.revert }])
           }, [
-            ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (openBlock(), createElementBlock("img", {
+            ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (openBlock(), createElementBlock("div", {
               key: 0,
-              src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
-              class: "lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl",
               ref_key: "leftColumn",
               ref: leftColumn,
-              alt: "Feature"
-            }, null, 8, _hoisted_2$8)) : createCommentVNode("", true),
+              class: "w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+            }, [
+              createElementVNode("img", {
+                src: (_f = headerComponent.value) == null ? void 0 : _f.featured_image,
+                class: "w-full h-full object-cover max-lg:absolute inset-0",
+                alt: "Feature"
+              }, null, 8, _hoisted_2$8)
+            ], 512)) : createCommentVNode("", true),
             headerComponent.value ? (openBlock(), createElementBlock("div", {
               key: 1,
               class: normalizeClass(["h-fit flex flex-col gap-4 lg:gap-8", { "xl:py-[48px]": (_g = headerComponent.value) == null ? void 0 : _g.featured_image, "[&]:grid lg:grid-cols-2": (_h = section.value) == null ? void 0 : _h.two_column }]),