@dcodegroup-au/page-builder 0.8.2 → 0.8.4

package/dist/page-builder.css

@@ -727,6 +727,9 @@ select {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-10 {
+  bottom: 2.5rem;
+}
 .bottom-\[40px\] {
   bottom: 40px;
 }
@@ -867,9 +870,6 @@ select {
 .mr-3 {
   margin-right: 0.75rem;
 }
-.mr-6 {
-  margin-right: 1.5rem;
-}
 .mr-\[40px\] {
   margin-right: 40px;
 }
@@ -1252,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;
 }
@@ -1270,6 +1273,9 @@ select {
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 .flex-row {
   flex-direction: row;
 }
@@ -1315,9 +1321,6 @@ select {
 .\!gap-4 {
   gap: 1rem !important;
 }
-.gap-0 {
-  gap: 0px;
-}
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1388,9 +1391,6 @@ select {
 .rounded-\[24px\] {
   border-radius: 24px;
 }
-.rounded-\[6px\] {
-  border-radius: 6px;
-}
 .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));
@@ -3164,6 +3152,14 @@ select {
     margin-top: 2rem;
   }
 
+  .md\:grid {
+    display: grid;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:h-5 {
     height: 1.25rem;
   }
@@ -3192,18 +3188,23 @@ select {
     max-width: 324px;
   }
 
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .md\:\!translate-x-0 {
+    --tw-translate-x: 0px !important;
+    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)) !important;
   }
 
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .md\:flex-row {
     flex-direction: row;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
   .md\:\!gap-8 {
     gap: 2rem !important;
   }
@@ -3247,6 +3248,11 @@ select {
     padding-right: 6rem;
   }
 
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -3907,7 +3913,7 @@ select {
   -webkit-line-clamp: 4; /* Limit the text to 3 lines */
 }
 
-.card[data-v-77dcb437] {
+.card[data-v-269a5876] {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/page-builder.es.js

@@ -45235,7 +45235,7 @@ 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_17$3 = ["onUpdate:modelValue", "maxlength"];
 const _hoisted_18$2 = { key: 2 };
 const _sfc_main$C = {
   __name: "Links",
@@ -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)
                         ];
@@ -46194,7 +46194,7 @@ 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_17$2 = ["value"];
 const _hoisted_18$1 = {
   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]
@@ -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"];
@@ -48545,13 +48545,13 @@ const _sfc_main$j = {
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$y, [
         createElementVNode("div", {
-          class: "slider-wrapper flex transition-transform duration-500 gap-0 mb-6",
+          class: "slider-wrapper flex transition-transform duration-500 gap-6 mb-6",
           style: normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
         }, [
           (openBlock(), createElementBlock(Fragment, null, renderList(slides, (slide, index) => {
             return createElementVNode("div", {
               key: index,
-              class: normalizeClass(["slider-item flex-shrink-0 mr-6 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
+              class: normalizeClass(["slider-item flex-shrink-0 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
             }, [
               createElementVNode("div", {
                 class: normalizeClass(["w-full p-4 rounded-lg md:rounded-2xl", { "bg-gray-50 h-full flex flex-col justify-between": !__props.hasBackground, "bg-white": __props.hasBackground }])
@@ -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),
@@ -48699,39 +48699,35 @@ function render$e(_ctx, _cache) {
   ]));
 }
 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 = {
+const _hoisted_1$v = {
   key: 0,
   class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
 };
-const _hoisted_3$f = {
+const _hoisted_2$f = {
   key: 0,
   class: "w-full h-[281px] md:rounded-2xl"
 };
-const _hoisted_4$f = ["src"];
-const _hoisted_5$f = ["onClick"];
-const _hoisted_6$f = ["src"];
+const _hoisted_3$f = ["src"];
+const _hoisted_4$f = ["onClick"];
+const _hoisted_5$f = ["src"];
+const _hoisted_6$f = ["href"];
 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_8$d = ["href"];
 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"
+  class: "flex gap-2 flex-wrap"
 };
 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 = { class: "flex justify-between" };
+const _hoisted_14$5 = ["innerHTML"];
+const _hoisted_15$4 = { class: "text-gray-500 text-sm mb-4" };
+const _hoisted_16$1 = {
   key: 0,
   class: "flex justify-center"
 };
-const _hoisted_16$1 = ["href", "target"];
+const _hoisted_17$1 = ["href", "target"];
 const _sfc_main$h = {
   __name: "CollectionGridPresenter",
   props: {
@@ -48743,6 +48739,37 @@ const _sfc_main$h = {
   setup(__props) {
     var _a, _b;
     const props = __props;
+    const currentSlide = ref(0);
+    const windowWidth = ref(480);
+    const slideWidth = ref(480);
+    onMounted(() => {
+      windowWidth.value = window.innerWidth;
+      slideWidth.value = windowWidth.value - 32;
+      window.addEventListener("resize", updateWidth);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", updateWidth);
+    });
+    const activeRightButton = computed(() => {
+      return currentSlide.value <= items.length - 2;
+    });
+    const activeLeftButton = computed(() => {
+      return currentSlide.value !== 0;
+    });
+    const updateWidth = () => {
+      windowWidth.value = window.innerWidth;
+      slideWidth.value = windowWidth.value - 32;
+    };
+    const nextSlide = () => {
+      if (currentSlide.value <= items.length - 2) {
+        currentSlide.value++;
+      }
+    };
+    const prevSlide = () => {
+      if (currentSlide.value > 0) {
+        currentSlide.value--;
+      }
+    };
     let items = [];
     if (props.component.type === "news_grid") {
       items = [...((_a = props.component.content) == null ? void 0 : _a.items) || []];
@@ -48776,25 +48803,28 @@ const _sfc_main$h = {
       return `https://www.youtube.com/embed/${id}`;
     };
     return (_ctx, _cache) => {
-      var _a2, _b2;
+      var _a2, _b2, _c;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["flex flex-col items-center gap-6 pb-[40px] pt-[24px]", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
+        class: normalizeClass(["flex flex-col items-start md:items-center gap-6 pb-[40px] pt-[24px] relative", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
       }, [
-        createElementVNode("div", _hoisted_1$v, [
+        createElementVNode("div", {
+          class: "flex md:grid grid-cols-3 gap-6 w-full transition-transform duration-500 md:!translate-x-0",
+          style: normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
+        }, [
           (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 w-full"
+              class: "card bg-white sm:p-0 md:px-4 w-full flex-shrink-0"
             }, [
-              __props.component.type === "video_grid" ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
-                (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (openBlock(), createElementBlock("div", _hoisted_3$f, [
+              __props.component.type === "video_grid" ? (openBlock(), createElementBlock("div", _hoisted_1$v, [
+                (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (openBlock(), createElementBlock("div", _hoisted_2$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)
+                  }, null, 8, _hoisted_3$f)
                 ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                   createElementVNode("video", {
                     onClick: ($event) => togglePlayPause(index),
@@ -48807,31 +48837,47 @@ const _sfc_main$h = {
                   }, [
                     createElementVNode("source", {
                       src: `${card.video}#t=2`
-                    }, null, 8, _hoisted_6$f)
-                  ], 8, _hoisted_5$f),
+                    }, null, 8, _hoisted_5$f)
+                  ], 8, _hoisted_4$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", {
+              ])) : 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)),
+                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_7$e)
+              ], 8, _hoisted_6$f)) : (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_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", {
+                    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_11$8);
                   }), 128))
                 ])) : createCommentVNode("", true),
                 (card == null ? void 0 : card.link) ? (openBlock(), createElementBlock("a", {
@@ -48841,20 +48887,36 @@ const _sfc_main$h = {
                   target: "_blank",
                   rel: "noopener noreferrer"
                 }, [
-                  createElementVNode("div", _hoisted_12$6, [
+                  createElementVNode("div", _hoisted_13$6, [
                     createElementVNode("span", {
                       class: "w-5/6 leading-[28px]",
                       innerHTML: card.title
-                    }, null, 8, _hoisted_13$6),
+                    }, null, 8, _hoisted_14$5),
                     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_12$6)) : createCommentVNode("", true),
+                createElementVNode("p", _hoisted_15$4, toDisplayString(card.dateTime), 1)
               ])
             ]);
           }), 128))
-        ]),
-        Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? (openBlock(), createElementBlock("div", _hoisted_15$4, [
+        ], 4),
+        createElementVNode("div", {
+          class: normalizeClass(["md:hidden absolute right-0 flex gap-4", Object.keys(unref(button)).length && ((_b2 = unref(button)) == null ? void 0 : _b2.show) ? "bottom-10" : "bottom-0"])
+        }, [
+          createElementVNode("button", {
+            onClick: prevSlide,
+            class: normalizeClass(["p-2.5 bg-aqua-100 text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-none": !activeLeftButton.value }])
+          }, [
+            createVNode(unref(ChevronLeft), { class: "w-6 h-6" })
+          ], 2),
+          createElementVNode("button", {
+            onClick: nextSlide,
+            class: normalizeClass(["p-2.5 bg-aqua-100 text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-auto": !activeRightButton.value }])
+          }, [
+            createVNode(unref(ChevronRight), { class: "w-6 h-6" })
+          ], 2)
+        ], 2),
+        Object.keys(unref(button)).length && ((_c = unref(button)) == null ? void 0 : _c.show) ? (openBlock(), createElementBlock("div", _hoisted_16$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 +48924,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_17$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-269a5876"]]);
 const _hoisted_1$u = { class: "overflow-hidden" };
 const _sfc_main$g = {
   __name: "CollectionGrid",

package/dist/page-builder.umd.js

@@ -45238,7 +45238,7 @@ ${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_17$3 = ["onUpdate:modelValue", "maxlength"];
   const _hoisted_18$2 = { key: 2 };
   const _sfc_main$C = {
     __name: "Links",
@@ -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)
                           ];
@@ -46197,7 +46197,7 @@ ${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_17$2 = ["value"];
   const _hoisted_18$1 = {
     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]
@@ -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"];
@@ -48548,13 +48548,13 @@ ${escapeText(this.code(index, length))}
         var _a2;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
           vue.createElementVNode("div", {
-            class: "slider-wrapper flex transition-transform duration-500 gap-0 mb-6",
+            class: "slider-wrapper flex transition-transform duration-500 gap-6 mb-6",
             style: vue.normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
           }, [
             (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(slides, (slide, index) => {
               return vue.createElementVNode("div", {
                 key: index,
-                class: vue.normalizeClass(["slider-item flex-shrink-0 mr-6 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
+                class: vue.normalizeClass(["slider-item flex-shrink-0 w-[480px] max-w-full", { "h-[318px]": !__props.hasBackground, "h-full": __props.hasBackground }])
               }, [
                 vue.createElementVNode("div", {
                   class: vue.normalizeClass(["w-full p-4 rounded-lg md:rounded-2xl", { "bg-gray-50 h-full flex flex-col justify-between": !__props.hasBackground, "bg-white": __props.hasBackground }])
@@ -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),
@@ -48702,39 +48702,35 @@ ${escapeText(this.code(index, length))}
     ]));
   }
   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 = {
+  const _hoisted_1$v = {
     key: 0,
     class: "relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden"
   };
-  const _hoisted_3$f = {
+  const _hoisted_2$f = {
     key: 0,
     class: "w-full h-[281px] md:rounded-2xl"
   };
-  const _hoisted_4$f = ["src"];
-  const _hoisted_5$f = ["onClick"];
-  const _hoisted_6$f = ["src"];
+  const _hoisted_3$f = ["src"];
+  const _hoisted_4$f = ["onClick"];
+  const _hoisted_5$f = ["src"];
+  const _hoisted_6$f = ["href"];
   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_8$d = ["href"];
   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"
+    class: "flex gap-2 flex-wrap"
   };
   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 = { class: "flex justify-between" };
+  const _hoisted_14$5 = ["innerHTML"];
+  const _hoisted_15$4 = { class: "text-gray-500 text-sm mb-4" };
+  const _hoisted_16$1 = {
     key: 0,
     class: "flex justify-center"
   };
-  const _hoisted_16$1 = ["href", "target"];
+  const _hoisted_17$1 = ["href", "target"];
   const _sfc_main$h = {
     __name: "CollectionGridPresenter",
     props: {
@@ -48746,6 +48742,37 @@ ${escapeText(this.code(index, length))}
     setup(__props) {
       var _a, _b;
       const props = __props;
+      const currentSlide = vue.ref(0);
+      const windowWidth = vue.ref(480);
+      const slideWidth = vue.ref(480);
+      vue.onMounted(() => {
+        windowWidth.value = window.innerWidth;
+        slideWidth.value = windowWidth.value - 32;
+        window.addEventListener("resize", updateWidth);
+      });
+      vue.onUnmounted(() => {
+        window.removeEventListener("resize", updateWidth);
+      });
+      const activeRightButton = vue.computed(() => {
+        return currentSlide.value <= items.length - 2;
+      });
+      const activeLeftButton = vue.computed(() => {
+        return currentSlide.value !== 0;
+      });
+      const updateWidth = () => {
+        windowWidth.value = window.innerWidth;
+        slideWidth.value = windowWidth.value - 32;
+      };
+      const nextSlide = () => {
+        if (currentSlide.value <= items.length - 2) {
+          currentSlide.value++;
+        }
+      };
+      const prevSlide = () => {
+        if (currentSlide.value > 0) {
+          currentSlide.value--;
+        }
+      };
       let items = [];
       if (props.component.type === "news_grid") {
         items = [...((_a = props.component.content) == null ? void 0 : _a.items) || []];
@@ -48779,25 +48806,28 @@ ${escapeText(this.code(index, length))}
         return `https://www.youtube.com/embed/${id}`;
       };
       return (_ctx, _cache) => {
-        var _a2, _b2;
+        var _a2, _b2, _c;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["flex flex-col items-center gap-6 pb-[40px] pt-[24px]", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
+          class: vue.normalizeClass(["flex flex-col items-start md:items-center gap-6 pb-[40px] pt-[24px] relative", { "!pt-0": __props.component.hasOwnProperty("padding_top") && !((_a2 = __props.component) == null ? void 0 : _a2.padding_top) }])
         }, [
-          vue.createElementVNode("div", _hoisted_1$v, [
+          vue.createElementVNode("div", {
+            class: "flex md:grid grid-cols-3 gap-6 w-full transition-transform duration-500 md:!translate-x-0",
+            style: vue.normalizeStyle({ transform: `translateX(-${currentSlide.value * ((windowWidth.value >= slideWidth.value ? slideWidth.value : windowWidth.value) + 24)}px)` })
+          }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (card, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
-                class: "card bg-white sm:p-0 px-4 w-full"
+                class: "card bg-white sm:p-0 md:px-4 w-full flex-shrink-0"
               }, [
-                __props.component.type === "video_grid" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
-                  (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$f, [
+                __props.component.type === "video_grid" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+                  (card == null ? void 0 : card.youtube_url) && getEmbedUrl(card) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
                     vue.createElementVNode("iframe", {
                       src: getEmbedUrl(card),
                       frameborder: "0",
                       allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                       allowfullscreen: "",
                       class: "w-full h-full"
-                    }, null, 8, _hoisted_4$f)
+                    }, null, 8, _hoisted_3$f)
                   ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                     vue.createElementVNode("video", {
                       onClick: ($event) => togglePlayPause(index),
@@ -48810,31 +48840,47 @@ ${escapeText(this.code(index, length))}
                     }, [
                       vue.createElementVNode("source", {
                         src: `${card.video}#t=2`
-                      }, null, 8, _hoisted_6$f)
-                    ], 8, _hoisted_5$f),
+                      }, null, 8, _hoisted_5$f)
+                    ], 8, _hoisted_4$f),
                     !isPlaying.value[index] ? (vue.openBlock(), vue.createBlock(vue.unref(PlayButton), {
                       key: 0,
                       class: "cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity",
                       onClick: ($event) => togglePlayPause(index)
                     }, null, 8, ["onClick"])) : vue.createCommentVNode("", true)
                   ], 64))
-                ])) : card.image ? (vue.openBlock(), vue.createElementBlock("img", {
+                ])) : 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)),
+                  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_7$e)
+                ], 8, _hoisted_6$f)) : (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_8$d)),
                 vue.createElementVNode("div", _hoisted_9$d, [
                   card.categories && card.categories.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$9, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(card.categories, (tag) => {
-                      return vue.openBlock(), vue.createElementBlock("span", {
+                      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_11$8);
                     }), 128))
                   ])) : vue.createCommentVNode("", true),
                   (card == null ? void 0 : card.link) ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -48844,20 +48890,36 @@ ${escapeText(this.code(index, length))}
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }, [
-                    vue.createElementVNode("div", _hoisted_12$6, [
+                    vue.createElementVNode("div", _hoisted_13$6, [
                       vue.createElementVNode("span", {
                         class: "w-5/6 leading-[28px]",
                         innerHTML: card.title
-                      }, null, 8, _hoisted_13$6),
+                      }, null, 8, _hoisted_14$5),
                       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_12$6)) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("p", _hoisted_15$4, 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, [
+          ], 4),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["md:hidden absolute right-0 flex gap-4", Object.keys(vue.unref(button)).length && ((_b2 = vue.unref(button)) == null ? void 0 : _b2.show) ? "bottom-10" : "bottom-0"])
+          }, [
+            vue.createElementVNode("button", {
+              onClick: prevSlide,
+              class: vue.normalizeClass(["p-2.5 bg-aqua-100 text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-none": !activeLeftButton.value }])
+            }, [
+              vue.createVNode(vue.unref(ChevronLeft), { class: "w-6 h-6" })
+            ], 2),
+            vue.createElementVNode("button", {
+              onClick: nextSlide,
+              class: vue.normalizeClass(["p-2.5 bg-aqua-100 text-navy-800 rounded-full opacity-100", { "opacity-50 pointer-events-auto": !activeRightButton.value }])
+            }, [
+              vue.createVNode(vue.unref(ChevronRight), { class: "w-6 h-6" })
+            ], 2)
+          ], 2),
+          Object.keys(vue.unref(button)).length && ((_c = vue.unref(button)) == null ? void 0 : _c.show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$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 +48927,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_17$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-269a5876"]]);
   const _hoisted_1$u = { class: "overflow-hidden" };
   const _sfc_main$g = {
     __name: "CollectionGrid",

package/package.json

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

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

@@ -2,13 +2,13 @@
   <div class="relative">
     <!-- Slider Wrapper -->
     <div
-        class="slider-wrapper flex transition-transform duration-500 gap-0 mb-6"
+        class="slider-wrapper flex transition-transform duration-500 gap-6 mb-6"
         :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= slideWidth ? slideWidth : windowWidth) + 24)}px)` }"
     >
       <div
           v-for="(slide, index) in slides"
           :key="index"
-          class="slider-item flex-shrink-0 mr-6 w-[480px] max-w-full"
+          class="slider-item flex-shrink-0 w-[480px] max-w-full"
           :class="{'h-[318px]': !hasBackground, 'h-full': hasBackground}"
       >
         <div class="w-full p-4 rounded-lg md:rounded-2xl" :class="{'bg-gray-50 h-full flex flex-col justify-between': !hasBackground, 'bg-white': hasBackground}">
@@ -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>
@@ -119,8 +119,8 @@ const props = defineProps({
 const currentSlide = ref(0); // Start at 0
 const itemsToShow = ref(4); // Number of items to show at a time
 const slides = [...props.component.content?.items || []];
-const windowWidth = ref(480)
-const slideWidth = ref(480)
+const windowWidth = ref(480);
+const slideWidth = ref(480);
 
 onMounted(() => {
   windowWidth.value = window.innerWidth

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

@@ -1,7 +1,9 @@
 <template>
-  <div class="flex flex-col items-center gap-6 pb-[40px] pt-[24px]" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
-      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 px-4 w-full">
+  <div class="flex flex-col items-start md:items-center gap-6 pb-[40px] pt-[24px] relative" :class="{'!pt-0': component.hasOwnProperty('padding_top') && !component?.padding_top}">
+    <div class="flex md:grid grid-cols-3 gap-6 w-full transition-transform duration-500 md:!translate-x-0"
+         :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= slideWidth ? slideWidth : windowWidth) + 24)}px)` }"
+    >
+      <div v-for="(card, index) in items" :key="index" class="card bg-white sm:p-0 md:px-4 w-full flex-shrink-0">
         <div v-if="component.type === 'video_grid'" class="relative group w-full object-cover rounded-lg md:rounded-2xl overflow-hidden">
           <div v-if="card?.youtube_url && getEmbedUrl(card)" class="w-full h-[281px] md:rounded-2xl">
             <iframe
@@ -31,27 +33,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
+          <div v-if="card.categories && card.categories.length" class="flex gap-2 flex-wrap">
+            <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"
@@ -69,6 +77,25 @@
         </div>
       </div>
     </div>
+    <!-- Control Buttons -->
+    <div class="md:hidden absolute right-0 flex gap-4"
+         :class="Object.keys(button).length && button?.show ? 'bottom-10' : 'bottom-0'"
+    >
+      <button
+        @click="prevSlide"
+        class="p-2.5 bg-aqua-100 text-navy-800 rounded-full opacity-100"
+        :class="{'opacity-50 pointer-events-none': !activeLeftButton}"
+      >
+        <ChevronLeft class="w-6 h-6" />
+      </button>
+      <button
+        @click="nextSlide"
+        class="p-2.5 bg-aqua-100 text-navy-800 rounded-full opacity-100"
+        :class="{'opacity-50 pointer-events-auto': !activeRightButton}"
+      >
+        <ChevronRight class="w-6 h-6" />
+      </button>
+    </div>
     <div v-if="Object.keys(button).length && button?.show" class="flex justify-center">
       <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"
@@ -83,7 +110,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import ChevronRight from "@/assets/img/icons/chevron-right.svg";
+import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
 import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 import PlayButton from "@/assets/svg/play.svg";
 import { formatUrl } from "@/components/helpers/common";
@@ -95,6 +124,47 @@ const props = defineProps({
   },
 });
 
+const currentSlide = ref(0);
+const windowWidth = ref(480);
+const slideWidth = ref(480);
+
+onMounted(() => {
+  windowWidth.value = window.innerWidth
+  slideWidth.value = windowWidth.value - 32;
+  window.addEventListener('resize', updateWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth)
+})
+
+const activeRightButton = computed(() => {
+  return currentSlide.value <= items.length - 2;
+})
+
+const activeLeftButton = computed(() => {
+  return currentSlide.value !== 0;
+})
+
+const updateWidth = () => {
+  windowWidth.value = window.innerWidth;
+  slideWidth.value = windowWidth.value - 32;
+}
+
+// Navigate to the next slide
+const nextSlide = () => {
+  if (currentSlide.value <= items.length - 2) {
+    currentSlide.value++;
+  }
+};
+
+// Navigate to the previous slide
+const prevSlide = () => {
+  if (currentSlide.value > 0) {
+    currentSlide.value--;
+  }
+};
+
 let items = [];
 if (props.component.type === 'news_grid') {
   items = [...props.component.content?.items || []];

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")],
 };