@dcodegroup-au/page-builder 0.8.1 → 0.8.3

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;
 }
@@ -1255,6 +1252,9 @@ select {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1388,8 +1388,8 @@ select {
 .rounded-\[20px\] {
   border-radius: 20px;
 }
-.rounded-\[6px\] {
-  border-radius: 6px;
+.rounded-\[24px\] {
+  border-radius: 24px;
 }
 .rounded-\[8px\] {
   border-radius: 8px;
@@ -1465,10 +1465,6 @@ select {
 .border-none {
   border-style: none;
 }
-.border-brand-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 176 200 / var(--tw-border-opacity, 1));
-}
 .border-brand-300 {
   --tw-border-opacity: 1;
   border-color: rgb(199 138 173 / var(--tw-border-opacity, 1));
@@ -1505,22 +1501,18 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.border-navy-100 {
+.border-gray-blue-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(169 184 198 / var(--tw-border-opacity, 1));
+  border-color: rgb(213 217 235 / var(--tw-border-opacity, 1));
 }
-.border-navy-200 {
+.border-navy-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(148 166 184 / var(--tw-border-opacity, 1));
+  border-color: rgb(169 184 198 / var(--tw-border-opacity, 1));
 }
 .border-navy-25 {
   --tw-border-opacity: 1;
   border-color: rgb(239 242 245 / var(--tw-border-opacity, 1));
 }
-.border-orange-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 219 175 / var(--tw-border-opacity, 1));
-}
 .border-transparent {
   border-color: transparent;
 }
@@ -1564,10 +1556,6 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(245 239 243 / var(--tw-bg-opacity, 1));
 }
-.bg-brand-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 222 231 / var(--tw-bg-opacity, 1));
-}
 .bg-brand-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(169 73 129 / var(--tw-bg-opacity, 1));
@@ -1600,6 +1588,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 249 252 / var(--tw-bg-opacity, 1));
+}
 .bg-navy-25 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 242 245 / var(--tw-bg-opacity, 1));
@@ -1620,10 +1612,6 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(32 62 90 / var(--tw-bg-opacity, 1));
 }
-.bg-orange-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 246 238 / var(--tw-bg-opacity, 1));
-}
 .bg-pale-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 245 244 / var(--tw-bg-opacity, 1));
@@ -1687,6 +1675,10 @@ select {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -2034,6 +2026,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
+.text-gray-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(54 63 114 / var(--tw-text-opacity, 1));
+}
 .text-navy-25 {
   --tw-text-opacity: 1;
   color: rgb(239 242 245 / var(--tw-text-opacity, 1));
@@ -2042,18 +2038,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(223 229 236 / var(--tw-text-opacity, 1));
 }
-.text-navy-700 {
-  --tw-text-opacity: 1;
-  color: rgb(40 77 112 / var(--tw-text-opacity, 1));
-}
 .text-navy-800 {
   --tw-text-opacity: 1;
   color: rgb(32 62 90 / var(--tw-text-opacity, 1));
 }
-.text-orange-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 56 21 / var(--tw-text-opacity, 1));
-}
 .text-success-500 {
   --tw-text-opacity: 1;
   color: rgb(23 178 106 / var(--tw-text-opacity, 1));
@@ -2956,6 +2944,10 @@ select {
 
 @media not all and (min-width: 1024px) {
 
+  .max-lg\:absolute {
+    position: absolute;
+  }
+
   .max-lg\:hidden {
     display: none;
   }
@@ -2975,6 +2967,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 +3019,6 @@ select {
     grid-template-columns: auto 20px;
   }
 
-  .max-sm\:flex-col {
-    flex-direction: column;
-  }
-
   .max-sm\:rounded-lg {
     border-radius: 0.5rem;
   }
@@ -3112,6 +3104,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 +3868,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 +3895,7 @@ select {
   -webkit-line-clamp: 4; /* Limit the text to 3 lines */
 }
 
-.card[data-v-77dcb437] {
+.card[data-v-aab1688f] {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/page-builder.es.js

@@ -45235,8 +45235,8 @@ const _hoisted_15$7 = {
   class: "flex flex-col gap-1.5"
 };
 const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
-const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
-const _hoisted_18$2 = { key: 2 };
+const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
+const _hoisted_18$3 = { key: 2 };
 const _sfc_main$C = {
   __name: "Links",
   props: {
@@ -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$2)), [
+                          }, null, 8, _hoisted_17$3)), [
                             [vModelText, item.title]
                           ]) : createCommentVNode("", true)
                         ];
@@ -45436,7 +45436,7 @@ const _sfc_main$C = {
                       sites: _ctx.sites,
                       forms: __props.forms
                     }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : createCommentVNode("", true)
-                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$2, [
+                  ])) : (openBlock(), createElementBlock("div", _hoisted_18$3, [
                     createVNode(_sfc_main$P, {
                       "is-vertical": "",
                       field: "image",
@@ -46194,8 +46194,8 @@ const _hoisted_15$6 = {
   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$1 = ["value"];
-const _hoisted_18$1 = {
+const _hoisted_17$2 = ["value"];
+const _hoisted_18$2 = {
   key: 1,
   class: "rounded-xl bg-gray-50 px-6 py-5"
 };
@@ -46349,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$1);
+                        return openBlock(), createElementBlock("option", { value: b }, toDisplayString(b), 9, _hoisted_17$2);
                       }), 256))
                     ], 512), [
                       [vModelSelect, __props.modelValue.breadcrumb]
@@ -46360,7 +46360,7 @@ const _sfc_main$t = {
                 _cache[2] || (_cache[2] = createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
               ])
             ])) : createCommentVNode("", true),
-            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$1, [
+            !unref(selected) ? (openBlock(), createElementBlock("div", _hoisted_18$2, [
               createVNode(Instructions)
             ])) : createCommentVNode("", true),
             (openBlock(), createBlock(resolveDynamicComponent(currentComponent.value), {
@@ -47848,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"];
@@ -47905,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" : ""
                         }, [
@@ -47920,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" : ""
                         }, [
@@ -47950,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",
@@ -48459,7 +48459,7 @@ const _hoisted_2$h = {
 const _hoisted_3$g = ["src"];
 const _hoisted_4$g = {
   key: 1,
-  class: "flex gap-2"
+  class: "flex gap-2 mb-2"
 };
 const _hoisted_5$g = { class: "mb-2" };
 const _hoisted_6$g = ["href"];
@@ -48568,7 +48568,7 @@ const _sfc_main$j = {
                     (openBlock(true), createElementBlock(Fragment, null, renderList(slide.tags, (tag) => {
                       return openBlock(), createElementBlock("span", {
                         key: tag,
-                        class: "bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
+                        class: "border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
                       }, toDisplayString(tag), 1);
                     }), 128))
                   ])) : createCommentVNode("", true),
@@ -48711,27 +48711,24 @@ const _hoisted_3$f = {
 const _hoisted_4$f = ["src"];
 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_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
-const _hoisted_10$9 = {
+const _hoisted_7$e = ["href"];
+const _hoisted_8$d = ["src"];
+const _hoisted_9$d = ["href"];
+const _hoisted_10$9 = { class: "flex flex-col gap-2 items-start text-left w-full" };
+const _hoisted_11$8 = {
   key: 0,
   class: "flex gap-2"
 };
-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 = {
+const _hoisted_12$6 = ["href"];
+const _hoisted_13$6 = ["href"];
+const _hoisted_14$5 = { class: "flex justify-between" };
+const _hoisted_15$4 = ["innerHTML"];
+const _hoisted_16$1 = { class: "text-gray-500 text-sm mb-4" };
+const _hoisted_17$1 = {
   key: 0,
   class: "flex justify-center"
 };
-const _hoisted_16$1 = ["href", "target"];
+const _hoisted_18$1 = ["href", "target"];
 const _sfc_main$h = {
   __name: "CollectionGridPresenter",
   props: {
@@ -48815,23 +48812,39 @@ const _sfc_main$h = {
                     onClick: ($event) => togglePlayPause(index)
                   }, null, 8, ["onClick"])) : createCommentVNode("", true)
                 ], 64))
-              ])) : card.image ? (openBlock(), createElementBlock("img", {
+              ])) : card.image ? (openBlock(), createElementBlock("a", {
                 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_7$e)) : (openBlock(), createElementBlock("img", _hoisted_8$d)),
-              createElementVNode("div", _hoisted_9$d, [
-                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_10$9, [
+                href: (card == null ? void 0 : card.link) ? unref(formatUrl)(card.link) : "javascript:void(0)",
+                class: "mb-4 w-full",
+                target: "_blank",
+                rel: "noopener noreferrer"
+              }, [
+                createElementVNode("img", {
+                  src: card.image,
+                  alt: "Card Image",
+                  class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
+                }, null, 8, _hoisted_8$d)
+              ], 8, _hoisted_7$e)) : (openBlock(), createElementBlock("a", {
+                key: 2,
+                href: (card == null ? void 0 : card.link) ? unref(formatUrl)(card.link) : "javascript:void(0)",
+                class: "mb-4 w-full",
+                target: "_blank",
+                rel: "noopener noreferrer"
+              }, _cache[0] || (_cache[0] = [
+                createElementVNode("img", {
+                  class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                  alt: "No Available",
+                  src: _imports_0
+                }, null, -1)
+              ]), 8, _hoisted_9$d)),
+              createElementVNode("div", _hoisted_10$9, [
+                card.categories && card.categories.length ? (openBlock(), createElementBlock("div", _hoisted_11$8, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(card.categories, (tag) => {
-                    return openBlock(), createElementBlock("span", {
+                    return openBlock(), createElementBlock("a", {
                       key: tag,
-                      class: normalizeClass(["border px-2 py-0.5 rounded-[6px] text-sm", {
-                        "bg-navy-50 border-navy-200 text-navy-700": tag.style === "navy",
-                        "bg-brand-50 border-brand-200 text-brand-700": tag.style === "brand",
-                        "bg-orange-50 border-orange-200 text-orange-700": tag.style === "orange"
-                      }])
-                    }, toDisplayString(tag.name), 3);
+                      href: tag.link ? unref(formatUrl)(tag.link) : "javascript:void(0)",
+                      class: normalizeClass(["border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md", tag.link ? "hover:bg-gray-200" : "cursor-default"])
+                    }, toDisplayString(tag.name), 11, _hoisted_12$6);
                   }), 128))
                 ])) : createCommentVNode("", true),
                 (card == null ? void 0 : card.link) ? (openBlock(), createElementBlock("a", {
@@ -48841,20 +48854,20 @@ const _sfc_main$h = {
                   target: "_blank",
                   rel: "noopener noreferrer"
                 }, [
-                  createElementVNode("div", _hoisted_12$6, [
+                  createElementVNode("div", _hoisted_14$5, [
                     createElementVNode("span", {
                       class: "w-5/6 leading-[28px]",
                       innerHTML: card.title
-                    }, null, 8, _hoisted_13$6),
+                    }, null, 8, _hoisted_15$4),
                     createVNode(unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                   ])
-                ], 8, _hoisted_11$8)) : createCommentVNode("", true),
-                createElementVNode("p", _hoisted_14$5, toDisplayString(card.dateTime), 1)
+                ], 8, _hoisted_13$6)) : createCommentVNode("", true),
+                createElementVNode("p", _hoisted_16$1, toDisplayString(card.dateTime), 1)
               ])
             ]);
           }), 128))
         ]),
-        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
+        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_17$1, [
           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),
@@ -48862,13 +48875,13 @@ const _sfc_main$h = {
           }, [
             createTextVNode(toDisplayString(unref(button).title) + " ", 1),
             createVNode(unref(ArrowUpRight), { class: "w-5 h-5" })
-          ], 8, _hoisted_16$1)
+          ], 8, _hoisted_18$1)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 };
-const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
+const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-aab1688f"]]);
 const _hoisted_1$u = { class: "overflow-hidden" };
 const _sfc_main$g = {
   __name: "CollectionGrid",
@@ -49142,7 +49155,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 = {
@@ -49270,7 +49283,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)
@@ -49643,14 +49656,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 }]),

package/dist/page-builder.umd.js

@@ -45238,8 +45238,8 @@ ${escapeText(this.code(index, length))}
     class: "flex flex-col gap-1.5"
   };
   const _hoisted_16$4 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_17$2 = ["onUpdate:modelValue", "maxlength"];
-  const _hoisted_18$2 = { key: 2 };
+  const _hoisted_17$3 = ["onUpdate:modelValue", "maxlength"];
+  const _hoisted_18$3 = { key: 2 };
   const _sfc_main$C = {
     __name: "Links",
     props: {
@@ -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$2)), [
+                            }, null, 8, _hoisted_17$3)), [
                               [vue.vModelText, item.title]
                             ]) : vue.createCommentVNode("", true)
                           ];
@@ -45439,7 +45439,7 @@ ${escapeText(this.code(index, length))}
                         sites: _ctx.sites,
                         forms: __props.forms
                       }, null, 8, ["name", "type", "onUpdate:type", "url", "onUpdate:url", "openInNewTab", "onUpdate:openInNewTab", "sites", "forms"])) : vue.createCommentVNode("", true)
-                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
+                    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$3, [
                       vue.createVNode(_sfc_main$P, {
                         "is-vertical": "",
                         field: "image",
@@ -46197,8 +46197,8 @@ ${escapeText(this.code(index, length))}
     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$1 = ["value"];
-  const _hoisted_18$1 = {
+  const _hoisted_17$2 = ["value"];
+  const _hoisted_18$2 = {
     key: 1,
     class: "rounded-xl bg-gray-50 px-6 py-5"
   };
@@ -46352,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$1);
+                          return vue.openBlock(), vue.createElementBlock("option", { value: b }, vue.toDisplayString(b), 9, _hoisted_17$2);
                         }), 256))
                       ], 512), [
                         [vue.vModelSelect, __props.modelValue.breadcrumb]
@@ -46363,7 +46363,7 @@ ${escapeText(this.code(index, length))}
                   _cache[2] || (_cache[2] = vue.createElementVNode("p", null, "This sets the section name shown in the breadcrumb (e.g. Home / Who We Are / Page). Leave blank to skip the section.", -1))
                 ])
               ])) : vue.createCommentVNode("", true),
-              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$1, [
+              !vue.unref(selected) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_18$2, [
                 vue.createVNode(Instructions)
               ])) : vue.createCommentVNode("", true),
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(currentComponent.value), {
@@ -47851,15 +47851,15 @@ ${escapeText(this.code(index, length))}
       };
     }
   });
-  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"];
@@ -47908,14 +47908,14 @@ ${escapeText(this.code(index, length))}
                         vue.createElementVNode("h3", _hoisted_6$i, vue.toDisplayString(slide == null ? void 0 : slide.title), 1),
                         vue.createElementVNode("div", _hoisted_7$h, [
                           vue.createElementVNode("p", {
-                            class: "lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3",
+                            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)
                         ]),
                         vue.createElementVNode("div", _hoisted_9$g, [
                           slide.secondary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
-                            class: "text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60",
+                            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: vue.unref(formatUrl)(slide.secondary_button.url),
                             target: slide.secondary_button.open_in_new_tab ? "_blank" : ""
                           }, [
@@ -47923,7 +47923,7 @@ ${escapeText(this.code(index, length))}
                           ], 8, _hoisted_10$c)) : vue.createCommentVNode("", true),
                           slide.primary_button.show ? (vue.openBlock(), vue.createElementBlock("a", {
                             key: 1,
-                            class: "flex items-center gap-2 text-navy-800 bg-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-50",
+                            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: vue.unref(formatUrl)(slide.primary_button.url),
                             target: slide.primary_button.open_in_new_tab ? "_blank" : ""
                           }, [
@@ -47953,7 +47953,7 @@ ${escapeText(this.code(index, length))}
       };
     }
   };
-  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",
@@ -48462,7 +48462,7 @@ ${escapeText(this.code(index, length))}
   const _hoisted_3$g = ["src"];
   const _hoisted_4$g = {
     key: 1,
-    class: "flex gap-2"
+    class: "flex gap-2 mb-2"
   };
   const _hoisted_5$g = { class: "mb-2" };
   const _hoisted_6$g = ["href"];
@@ -48571,7 +48571,7 @@ ${escapeText(this.code(index, length))}
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(slide.tags, (tag) => {
                         return vue.openBlock(), vue.createElementBlock("span", {
                           key: tag,
-                          class: "bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
+                          class: "border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
                         }, vue.toDisplayString(tag), 1);
                       }), 128))
                     ])) : vue.createCommentVNode("", true),
@@ -48714,27 +48714,24 @@ ${escapeText(this.code(index, length))}
   const _hoisted_4$f = ["src"];
   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_9$d = { class: "flex flex-col gap-2 items-start text-left w-full" };
-  const _hoisted_10$9 = {
+  const _hoisted_7$e = ["href"];
+  const _hoisted_8$d = ["src"];
+  const _hoisted_9$d = ["href"];
+  const _hoisted_10$9 = { class: "flex flex-col gap-2 items-start text-left w-full" };
+  const _hoisted_11$8 = {
     key: 0,
     class: "flex gap-2"
   };
-  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 = {
+  const _hoisted_12$6 = ["href"];
+  const _hoisted_13$6 = ["href"];
+  const _hoisted_14$5 = { class: "flex justify-between" };
+  const _hoisted_15$4 = ["innerHTML"];
+  const _hoisted_16$1 = { class: "text-gray-500 text-sm mb-4" };
+  const _hoisted_17$1 = {
     key: 0,
     class: "flex justify-center"
   };
-  const _hoisted_16$1 = ["href", "target"];
+  const _hoisted_18$1 = ["href", "target"];
   const _sfc_main$h = {
     __name: "CollectionGridPresenter",
     props: {
@@ -48818,23 +48815,39 @@ ${escapeText(this.code(index, length))}
                       onClick: ($event) => togglePlayPause(index)
                     }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
                   ], 64))
-                ])) : card.image ? (vue.openBlock(), vue.createElementBlock("img", {
+                ])) : card.image ? (vue.openBlock(), vue.createElementBlock("a", {
                   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_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, [
+                  href: (card == null ? void 0 : card.link) ? vue.unref(formatUrl)(card.link) : "javascript:void(0)",
+                  class: "mb-4 w-full",
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                }, [
+                  vue.createElementVNode("img", {
+                    src: card.image,
+                    alt: "Card Image",
+                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
+                  }, null, 8, _hoisted_8$d)
+                ], 8, _hoisted_7$e)) : (vue.openBlock(), vue.createElementBlock("a", {
+                  key: 2,
+                  href: (card == null ? void 0 : card.link) ? vue.unref(formatUrl)(card.link) : "javascript:void(0)",
+                  class: "mb-4 w-full",
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                }, _cache[0] || (_cache[0] = [
+                  vue.createElementVNode("img", {
+                    class: "w-full h-[281px] object-cover rounded-lg md:rounded-2xl",
+                    alt: "No Available",
+                    src: _imports_0
+                  }, null, -1)
+                ]), 8, _hoisted_9$d)),
+                vue.createElementVNode("div", _hoisted_10$9, [
+                  card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$8, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(card.categories, (tag) => {
-                      return vue.openBlock(), vue.createElementBlock("span", {
+                      return vue.openBlock(), vue.createElementBlock("a", {
                         key: tag,
-                        class: vue.normalizeClass(["border px-2 py-0.5 rounded-[6px] text-sm", {
-                          "bg-navy-50 border-navy-200 text-navy-700": tag.style === "navy",
-                          "bg-brand-50 border-brand-200 text-brand-700": tag.style === "brand",
-                          "bg-orange-50 border-orange-200 text-orange-700": tag.style === "orange"
-                        }])
-                      }, vue.toDisplayString(tag.name), 3);
+                        href: tag.link ? vue.unref(formatUrl)(tag.link) : "javascript:void(0)",
+                        class: vue.normalizeClass(["border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md", tag.link ? "hover:bg-gray-200" : "cursor-default"])
+                      }, vue.toDisplayString(tag.name), 11, _hoisted_12$6);
                     }), 128))
                   ])) : vue.createCommentVNode("", true),
                   (card == null ? void 0 : card.link) ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -48844,20 +48857,20 @@ ${escapeText(this.code(index, length))}
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }, [
-                    vue.createElementVNode("div", _hoisted_12$6, [
+                    vue.createElementVNode("div", _hoisted_14$5, [
                       vue.createElementVNode("span", {
                         class: "w-5/6 leading-[28px]",
                         innerHTML: card.title
-                      }, null, 8, _hoisted_13$6),
+                      }, null, 8, _hoisted_15$4),
                       vue.createVNode(vue.unref(ArrowUpRight), { class: "w-5 h-5 mt-1" })
                     ])
-                  ], 8, _hoisted_11$8)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("p", _hoisted_14$5, vue.toDisplayString(card.dateTime), 1)
+                  ], 8, _hoisted_13$6)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("p", _hoisted_16$1, 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_15$4, [
+          Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, [
             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),
@@ -48865,13 +48878,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_16$1)
+            ], 8, _hoisted_18$1)
           ])) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
   };
-  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-77dcb437"]]);
+  const CollectionGridPresenter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-aab1688f"]]);
   const _hoisted_1$u = { class: "overflow-hidden" };
   const _sfc_main$g = {
     __name: "CollectionGrid",
@@ -49145,7 +49158,7 @@ ${escapeText(this.code(index, length))}
   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 = {
@@ -49273,7 +49286,7 @@ ${escapeText(this.code(index, length))}
                   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 object-cover"
+                    class: "w-full h-full object-cover max-lg:absolute inset-0"
                   }, null, 8, _hoisted_15$3)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
@@ -49646,14 +49659,18 @@ ${escapeText(this.code(index, length))}
             vue.createElementVNode("div", {
               class: vue.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) ? (vue.openBlock(), vue.createElementBlock("img", {
+              ((_e = headerComponent.value) == null ? void 0 : _e.featured_image) ? (vue.openBlock(), vue.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)) : vue.createCommentVNode("", true),
+                class: "w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+              }, [
+                vue.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)) : vue.createCommentVNode("", true),
               headerComponent.value ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 1,
                 class: vue.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 }]),

package/example/src/pages/AboutUs.js

@@ -79,7 +79,7 @@ export const AboutUs = {
           type: "header",
           title: "Support Services",
           icon: "AlertCircle",
-          featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/untitled-design-30.png"
+          featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/kinglakeselects-final-02684.jpg"
        },
         {
           name: "Bullet Points",
@@ -127,4 +127,4 @@ export const AboutUs = {
       ]
     },
   ]
-};
+};

package/package.json

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

package/src/components/presenters/components/CarouselPresenter.vue

@@ -20,11 +20,11 @@
                   class="rounded-[8px] h-[220px] w-full object-cover"
               />
             </div>
-            <div v-if="slide.tags && slide.tags.length" class="flex gap-2">
+            <div v-if="slide.tags && slide.tags.length" class="flex gap-2 mb-2">
               <span
                   v-for="tag in slide.tags"
                   :key="tag"
-                  class="bg-navy-50 border border-navy-200 text-navy-700 px-2 py-0.5 rounded-[6px] text-sm"
+                  class="border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
               >
                 {{ tag }}
               </span>

package/src/components/presenters/components/CollectionGridPresenter.vue

@@ -31,27 +31,33 @@
             </PlayButton>
           </template>
         </div>
-        <img
-            v-else-if="card.image"
-            :src="card.image"
-            alt="Card Image"
-            class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4"
-        />
-        <img v-else class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl mb-4" alt="No Available" src="@/assets/img/no_image_available.jpeg">
+        <a v-else-if="card.image"
+           :href="card?.link ? formatUrl(card.link) : 'javascript:void(0)'"
+           class="mb-4 w-full"
+           target="_blank"
+           rel="noopener noreferrer"
+        >
+          <img :src="card.image" alt="Card Image" class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl" />
+        </a>
+        <a v-else
+           :href="card?.link ? formatUrl(card.link) : 'javascript:void(0)'"
+           class="mb-4 w-full"
+           target="_blank"
+           rel="noopener noreferrer"
+        >
+          <img class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl" alt="No Available" src="@/assets/img/no_image_available.jpeg">
+        </a>
         <div class="flex flex-col gap-2 items-start text-left w-full">
           <div v-if="card.categories && card.categories.length" class="flex gap-2">
-            <span
+            <a
                 v-for="tag in card.categories"
                 :key="tag"
-                class="border px-2 py-0.5 rounded-[6px] text-sm"
-                :class="{
-                'bg-navy-50 border-navy-200 text-navy-700': tag.style === 'navy',
-                'bg-brand-50 border-brand-200 text-brand-700': tag.style === 'brand',
-                'bg-orange-50 border-orange-200 text-orange-700': tag.style === 'orange',
-              }"
+                :href="tag.link ? formatUrl(tag.link) : 'javascript:void(0)'"
+                class="border py-0.5 px-1.5 text-xs font-medium bg-gray-blue-50 border-gray-blue-200 text-gray-blue-700 rounded-md"
+                :class="tag.link ? 'hover:bg-gray-200' : 'cursor-default'"
             >
               {{ tag.name }}
-            </span>
+            </a>
           </div>
           <a
               v-if="card?.link"

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex h-[614px] sm:h-[550px] md:h-[806px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl lg:rounded-[48px] z-10">
+  <div 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">
     <Carousel :items-to-show="1" v-model="currentSlide" :autoplay="5000" class="carousel w-full" :wrap-around="true">
       <Slide v-for="(slide, index) in slides" :key="index">
         <div class="flex-1 lg:p-8 px-4 lg:py-4 flex max-lg:flex-col-reverse relative w-full">
-          <div class="flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-8 sm:mt-14 lg:mt-[218px]">
+          <div class="flex-1 lg:w-1/2 lg:pl-8 lg:pr-16 flex flex-col mt-7 sm:mt-14 lg:mt-[218px]">
             <div class="gap-2 flex z-10 mb-4">
               <a v-if="slides.length > 1"
                  v-for="(slide, index) in slides"
@@ -12,16 +12,16 @@
             </div>
             <h3 class="text-[30px] lg:text-[48px] font-semibold text-white mb-3 lg:leading-normal leading-[48px]">{{ slide?.title }}</h3>
             <div class="max-md:flex-1">
-              <p class="lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-6 sm:line-clamp-3" v-html="slide?.description"></p>
+              <p class="lg:text-lg font-normal text-navy-50 overflow-hidden line-clamp-4 sm:line-clamp-3" v-html="slide?.description"></p>
             </div>
-            <div class="flex gap-3 md:mt-8 max-sm:flex-col">
-              <a class="text-white text-base font-semibold border border-white px-6 py-2 rounded-full hover:bg-navy-800 hover:opacity-60"
+            <div class="flex gap-3 mt-4 md:mt-8">
+              <a 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="formatUrl(slide.secondary_button.url)"
                  v-if="slide.secondary_button.show"
                  :target="slide.secondary_button.open_in_new_tab ? '_blank' : ''">
                 <span>{{ slide.secondary_button.label }}</span>
               </a>
-              <a 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"
+              <a 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="formatUrl(slide.primary_button.url)"
                  v-if="slide.primary_button.show"
                  :target="slide.primary_button.open_in_new_tab ? '_blank' : ''">

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

@@ -3,11 +3,14 @@
     <div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
       <div class="pb-container my-[40px]"
            :class="{'flex gap-8 flex-col lg:flex-row': headerComponent?.featured_image, 'flex-col-reverse lg:flex-row-reverse justify-between': headerComponent?.revert}">
-        <img v-if="headerComponent?.featured_image"
-             :src="headerComponent?.featured_image"
-             class="lg:max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
+        <div v-if="headerComponent?.featured_image"
              ref="leftColumn"
-             alt="Feature"/>
+             class="w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
+        >
+            <img :src="headerComponent?.featured_image"
+                 class="w-full h-full object-cover max-lg:absolute inset-0"
+                 alt="Feature"/>
+        </div>
         <div v-if="headerComponent" class="h-fit flex flex-col gap-4 lg:gap-8" :class="{'xl:py-[48px]': headerComponent?.featured_image, '[&]:grid lg:grid-cols-2': section?.two_column}"
              ref="rightColumn">
           <div>
@@ -65,4 +68,4 @@ onMounted(() => {
     leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
   }
 });
-</script>
+</script>

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

@@ -52,9 +52,9 @@
               <img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
             </div>
           </div>
-          <div v-if="imageComponent" class="w-full md:w-[560px] flex">
+          <div v-if="imageComponent" class="w-full md:w-[560px] rounded-br-[24px] rounded-tl-[24px] overflow-hidden relative max-lg:pt-[55%]">
             <img :src="imageComponent.featured_image" :alt="imageComponent?.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" />
           </div>
         </div>
       </div>
@@ -107,4 +107,4 @@ const items = computed(() => {
   });
 });
 
-</script>
+</script>

package/tailwind.config.js

@@ -78,12 +78,26 @@ module.exports = {
         },
         yellow: {
           100: '#DAAA00',
-        }
+        },
+        "gray-blue": {
+          25: "#FCFCFD",
+          50: "#F8F9FC",
+          100: "#EAECF5",
+          200: "#D5D9EB",
+          300: "#B3B8DB",
+          400: "#717BBC",
+          500: "#4E5BA6",
+          600: "#3E4784",
+          700: "#363F72",
+          800: "#293056",
+          900: "#101323",
+          950: "#0D0F1C",
+        },
       },
     },
   },
   safelist: [
-    "md:grid-cols-2",
+    "md:grid-cols-2", "bg-gray-blue-50", "border-gray-blue-200", "text-gray-blue-700"
   ],
   plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
 };