@dcodegroup-au/page-builder 0.7.0 → 0.7.1

package/example/src/App.vue

@@ -6,7 +6,7 @@ import {OurVision} from "./pages/OurVision.js";
 import {OurCommitment} from "./pages/OurCommitment.js";
 import {OurHistory} from "./pages/OurHistory.js";
 import {ChildSafeStandard} from "./pages/ChildSafeStandard.js";
-import {AdvisoryServices} from "./pages/AdvisoryService.js";
+import {AdvisoryServices} from "./pages/AdvisoryServices.js";
 import {PartnerWithUs} from "./pages/PartnerWithUs.js";
 import {OurGroups} from "./pages/OurGroups.js";
 import {Vectea2024} from "./pages/Vectea2024.js";
@@ -109,26 +109,98 @@ const breadcrumbs = [
 
 <template>
   <div>
-    {{ JSON.stringify(LandingPage) }}
-    <div style="margin: 40px 0">
-      <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="LandingPage"/>
+    <div style="margin: 40px 0;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">About Us</h1>
+
+      <PageRender :page="AboutUs" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advocary And Research</h1>
+
+      <PageRender :page="AdvocaryAndResearch" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Best Life</h1>
+
+      <PageRender :page="BestLife" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Home</h1>
+
+      <PageRender :page="Home" />
     </div>
-    <div style="margin: 40px 0">
-      <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
-      <ItemEdit :item="slide" :sites="sites"/>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Commitment</h1>
+
+      <PageRender :page="OurCommitment" />
     </div>
-    <div style="margin: 40px 0">
-      <h1 style="margin-bottom: 20px; font-size: 50px;">Link Card Edit</h1>
-      <LinkCardEdit :item="linkCardItem" :sites="sites"/>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our History</h1>
+
+      <PageRender :page="OurHistory" />
     </div>
-    <div style="margin: 40px 0">
-      <h1 style="margin-bottom: 20px; font-size: 50px;">Vertical Tab Edit</h1>
-      <ItemEdit :item="tab" :sites="sites"/>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Partner With Us</h1>
+
+      <PageRender :page="PartnerWithUs" />
     </div>
-    <div style="margin: 40px 0">
-      <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="LandingPage" :breadcrumbs="breadcrumbs" :forms="forms" :sites="sites"/>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Vectea 2024</h1>
+
+      <PageRender :page="Vectea2024" />
     </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advisory Services</h1>
+
+      <PageRender :page="AdvisoryServices" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Assessment Support Service</h1>
+
+      <PageRender :page="AssessmentSupportService" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Child Safe Standard</h1>
+
+      <PageRender :page="ChildSafeStandard" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Landing Page</h1>
+
+      <PageRender :page="LandingPage" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Groups</h1>
+
+      <PageRender :page="OurGroups" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Vision</h1>
+
+      <PageRender :page="OurVision" />
+    </div>
+    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
+      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">SAEW</h1>
+
+      <PageRender :page="SAEW" />
+    </div>
+
+
+<!--    <div style="margin: 40px 0">-->
+<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>-->
+<!--      <ItemEdit :item="slide" :sites="sites"/>-->
+<!--    </div>-->
+<!--    <div style="margin: 40px 0">-->
+<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Link Card Edit</h1>-->
+<!--      <LinkCardEdit :item="linkCardItem" :sites="sites"/>-->
+<!--    </div>-->
+<!--    <div style="margin: 40px 0">-->
+<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Vertical Tab Edit</h1>-->
+<!--      <ItemEdit :item="tab" :sites="sites"/>-->
+<!--    </div>-->
+<!--    <div style="margin: 40px 0">-->
+<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>-->
+<!--      <PageBuilder v-model="LandingPage" :breadcrumbs="breadcrumbs" :forms="forms" :sites="sites"/>-->
+<!--    </div>-->
   </div>
 </template>

package/example/src/pages/AboutUs.js

@@ -79,7 +79,7 @@ export const AboutUs = {
           type: "header",
           title: "Support Services",
           icon: "AlertCircle",
-          featured_image: "https://beta.elaa.org.au/img/what-we-do/best-start-best-life/divided-01.jpg"
+          featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/untitled-design-30.png"
        },
         {
           name: "Bullet Points",

package/example/src/pages/OurCommitment.js

@@ -48,7 +48,7 @@ export const OurCommitment =
             title: 'Learn More',
             dark: true,
             supporting_text: 'Learn more about the Traditional owners of the land our members work on.',
-            featured_image: "https://dev.elaa.com/img/reconciliation/learn-more.png",
+            featured_image: "https://beta-public.elaa.org.au/fileman/Page Builder/inclusive-3cdps20221207npapproved.jpg",
           },
           {
             name: "Links",

package/example/src/pages/OurHistory.js

@@ -53,7 +53,7 @@ export const OurHistory = {
       "type": "header",
       "title": "Explore Further",
       "has_extra": true,
-      "featured_image": "https://dev.elaa.com/img/history/hesta-child-care.png",
+      "featured_image": "https://beta-public.elaa.org.au/fileman/Page Builder/kpv-launch-1990.jpg",
       "supporting_text": "Learn more about our history and past"
     }, {
       "data": [{

package/package.json

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

package/src/components/builders/Links.vue

@@ -151,7 +151,6 @@ const props = defineProps({
   }
 });
 
-console.log('Links', props);
 const options = [{value: 'content', label: 'Content'}, {value: 'image_only', label: 'Image Only'}];
 
 const componentData = ref(props.data.component);

package/src/components/common/LinkedTo.vue

@@ -48,8 +48,6 @@ const props = defineProps({
   options: { type: Array, required: false, default: ["site-content", "external-page", 'download', 'form'] },
 });
 
-console.log('LinkedTo', props);
-
 const toReadableWords = (input) => {
   return input
       .split('-') // Split the string by hyphens

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

@@ -3,15 +3,15 @@
     <!-- Slider Wrapper -->
     <div
         class="slider-wrapper flex transition-transform duration-500 gap-0 mb-6"
-        :style="{ transform: `translateX(-${currentSlide * (480 + 24)}px)` }"
+        :style="{ transform: `translateX(-${currentSlide * ((windowWidth >= 480 ? 480 : windowWidth) + 24)}px)` }"
     >
       <div
           v-for="(slide, index) in slides"
           :key="index"
-          class="slider-item flex-shrink-0 flex-1 mr-6 min-w-[480px]"
+          class="slider-item flex-shrink-0 mr-6 w-[480px] max-w-full"
           :class="{'h-[318px]': !hasBackground, 'h-full': hasBackground}"
       >
-        <div class="w-full p-4 rounded-[16px]" :class="{'bg-gray-50 h-full flex flex-col justify-between': !hasBackground, 'bg-white': 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}">
           <div>
             <div class="mb-4" v-if="slide.image">
               <img
@@ -91,7 +91,7 @@
 </template>
 
 <script setup>
-import { ref, inject } from "vue";
+import { ref, inject, onMounted, onUnmounted } from 'vue'
 import Clock from "@/assets/img/icons/clock.svg";
 import ChevronRight from "@/assets/img/icons/chevron-right.svg";
 import ChevronLeft from "@/assets/img/icons/chevron-left.svg";
@@ -117,6 +117,20 @@ const props = defineProps({
 const currentSlide = ref(0); // Start at 0
 const itemsToShow = 4; // Number of items to show at a time
 const slides = [...props.component.content?.items || []];
+const windowWidth = ref(480)
+
+onMounted(() => {
+  windowWidth.value = window.innerWidth
+  window.addEventListener('resize', updateWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWidth)
+})
+
+const updateWidth = () => {
+  windowWidth.value = window.innerWidth
+}
 
 // Navigate to the next slide
 const nextSlide = () => {

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

@@ -6,7 +6,7 @@
           <video
               @click="togglePlayPause(index)"
               :ref="(el) => setVideoRef(el, index)"
-              class="w-full h-[281px] object-cover rounded-[16px]"
+              class="w-full h-[281px] object-cover rounded-lg md:rounded-2xl"
               width="640"
               height="360"
               preload="metadata"
@@ -24,9 +24,9 @@
             v-else-if="card.image"
             :src="card.image"
             alt="Card Image"
-            class="w-full h-[281px] object-cover rounded-[16px] mb-4"
+            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-[16px] mb-4" alt="No Available" src="@/assets/img/no_image_available.jpeg">
+        <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">
         <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

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="flex h-[872px] w-full bg-navy-800 relative rounded-[48px] z-10">
+  <div class="flex h-[872px] w-full bg-navy-800 relative rounded-3xl md: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="lg:p-8 p-4 flex relative w-full">
-          <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative">
+          <div class="lg:w-1/2 lg:pl-8 lg:pr-16 pl-4 pr-8 flex flex-col lg:mt-[218px] mt-[100px] absolute top-0 left-5 lg:relative z-20">
             <div class="gap-2 flex z-10 mb-4">
               <a v-if="slides.length > 1"
                  v-for="(slide, index) in slides"
@@ -34,6 +34,7 @@
               alt="Slide Image"
               class="rounded-[40px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
           <img v-else class="rounded-[40px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover" src="@/assets/img/no_image_available.jpeg">
+          <div class="absolute inset-0 lg:hidden z-10 p-4"><div class="bg-black opacity-60 rounded-[40px] h-full"></div></div>
         </div>
       </Slide>
     </Carousel>

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

@@ -1,9 +1,9 @@
 <template>
-  <div class="max-w-[1640px] md:px-[120px] mx-auto w-full  py-[40px] flex justify-center gap-[10%] ">
-    <div class="bg-pale-100 flex w-full rounded-[20px] p-8 gap-6">
-      <div class="w-1/2">
+  <div class="max-w-[1640px] md:px-[120px] mx-auto w-full py-[40px] flex justify-center gap-[10%] ">
+    <div class="bg-pale-100 w-full rounded-[20px] p-8 gap-6 grid lg:grid-cols-2">
+      <div>
         <p class="text-[36px] font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
-        <div class="flex flex-col divide-y divide-gray-200 px-6 bg-white rounded-[16px] overflow-hidden">
+        <div class="flex flex-col divide-y divide-gray-200 px-6 bg-white rounded-lg md:rounded-2xl overflow-hidden">
           <div v-for="(price, index) in pricingComponent.data"
                class="relative w-full py-6">
             <a class="text-gray-900 cursor-pointer w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg">
@@ -24,7 +24,7 @@
           </div>
         </div>
       </div>
-      <div class="w-1/2 bg-white rounded-[16px] overflow-hidden flex flex-col items-center justify-center px-12">
+      <div class="bg-white rounded-lg md:rounded-2xl overflow-hidden flex flex-col items-center justify-center py-8 px-12">
         <div v-if="paragraphComponent">
           <p class="text-[32px] font-semibold text-gray-900" v-text="paragraphComponent.title"></p>
           <p class="text-[18px]text-gray-600 mt-2" v-html="paragraphComponent.paragraph"></p>

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

@@ -2,13 +2,13 @@
   <div class="overflow-hidden">
     <div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
       <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]"
-           :class="{'flex gap-8': headerComponent?.featured_image, 'flex-row-reverse justify-between': headerComponent?.revert}">
+           :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="max-w-[480px] w-full object-cover rounded-[24px]"
+             class="max-w-[480px] w-full object-cover rounded-xl md:rounded-3xl"
              ref="leftColumn"
              alt="Feature"/>
-        <div v-if="headerComponent" class="h-fit" :class="{'py-[48px]': headerComponent?.featured_image, 'grid grid-cols-2 gap-8': section?.two_column}"
+        <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>
             <div v-if="headerComponent?.icon"
@@ -19,10 +19,10 @@
             <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]"
                v-html="headerComponent.supporting_text"></p>
           </div>
-          <div v-for="bullet in bulletPointsComponents" class="mt-8">
+          <div v-for="bullet in bulletPointsComponents">
             <p v-if="bullet?.title" v-text="bullet.title" class="font-semibold text-[20px] mb-4"></p>
             <div class="flex flex-col gap-4"
-                 :class="{'!grid grid-cols-3' :!headerComponent?.featured_image && !section?.two_column}">
+                 :class="{'[&]:grid sm:grid-cols-2 lg:grid-cols-3' :!headerComponent?.featured_image && !section?.two_column}">
               <div v-for="item in bullet.data" class="flex">
                 <div
                     class="bg-gray-100 rounded-full w-[28px] h-[28px] flex items-center justify-center text-gray-500 mr-2">

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

@@ -1,22 +1,22 @@
 <template>
   <div class="overflow-hidden">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-[40px]"
-         :class="{'flex gap-8': headerComponent?.featured_image}">
-      <div class="max-w-[33.3%] w-full min-h-[320px]"
+         :class="{'flex gap-4 lg:gap-8 flex-col lg:flex-row': headerComponent?.featured_image}">
+      <div class="lg:max-w-[33.3%] w-full sm:min-h-[320px]"
            v-if="(imageComponent && section?.acknowledgement_style)
            || (headerComponent?.featured_image && !section?.acknowledgement_style)"
       >
         <img v-if="imageComponent && section?.acknowledgement_style"
              :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
-             class="w-[560px] object-cover rounded-[24px] h-full"/>
+             class="w-[560px] object-cover rounded-xl md:rounded-3xl h-full mx-auto"/>
         <img v-if="headerComponent?.featured_image && !section?.acknowledgement_style"
              :src="headerComponent?.featured_image"
-             class="w-[560px] object-cover rounded-[24px] h-full"
+             class="w-[560px] object-cover rounded-xl md:rounded-3xl h-full mx-auto"
              alt="Feature"/>
       </div>
 
       <div v-if="headerComponent"
-           class="rounded-[24px] flex items-center justify-center flex-col"
+           class="rounded-xl md:rounded-3xl flex items-center justify-center flex-col"
            :class="{
         'bg-pale-100 min-h-[320px] w-full': !headerComponent?.featured_image,
          'border border-brand-400 w-full py-8': headerComponent?.featured_image,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden" :class="{'rounded-br-[48px] rounded-tl-[48px] bg-aqua-100': section?.has_background}">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
-      <div class="max-md:mx-[30px] 1xl:mx-0 rounded-[48px] pt-[40px]">
+      <div class="max-md:mx-[30px] 1xl:mx-0 rounded-3xl md:rounded-[48px] pt-[40px]">
         <VHeaderPresenter :component="headerComponent" />
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px] flex justify-center">
-      <div class="bg-gray-100 rounded-[16px] flex justify-center w-full" v-if="headerComponent">
+      <div class="bg-gray-100 rounded-lg md:rounded-2xl flex justify-center w-full" v-if="headerComponent">
         <div class="flex items-center justify-center flex-col py-[40px] max-w-[820px]">
           <div class="flex justify-between relative w-[150px]">
             <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">

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

@@ -1,7 +1,8 @@
 <template>
   <div class="overflow-hidden">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex justify-center gap-[10%]">
-      <div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex justify-center gap-[10%]"
+    :class="{'justify-start md:!px-0 !ml-0': section?.align_left}">
+      <div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full" :class="{'!max-w-full' : section?.align_left}">
         <div class="px-[40px] text-center mb-6 mx-auto" v-if="header">
           <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
           <p v-if="header?.supporting_text"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
+  <div class="rounded-3xl md:rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
     <div v-for="(component, index) in section.components" class="md:px-[90px]">
       <component
           :is="currentComponent(component)"

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

@@ -1,6 +1,6 @@
 <template>
   <section class="px-6 mt-4 mb-36">
-    <div class="bg-navy-800 p-10 rounded-[48px]">
+    <div class="bg-navy-800 p-10 rounded-3xl md:rounded-[48px]">
       <div class="max-w-[51.25rem] text-center mx-auto">
         <article class="mb-10">
           <p class="leading-6 font-semibold text-yellow-100 mb-2" v-text="headerComponent.sub_title"></p>
@@ -8,12 +8,12 @@
           <p class="text-xl leading-8 text-gray-200" v-text="headerComponent.supporting_text"></p>
         </article>
 
-        <nav class="h-14 border border-white rounded-[48px] flex items-center justify-stretch px-1.5 space-x-1 mb-8">
+        <nav class="h-14 border border-white rounded-3xl md:rounded-[48px] flex items-center justify-stretch px-1.5 space-x-1 mb-8">
           <button
               v-for="membership in horizontalTabComponent.data"
               :key="membership.id"
               @click="active = membership.id"
-              class="h-11 rounded-[48px] flex-1 text-white transition-colors text-md font-semibold"
+              class="h-11 rounded-3xl md:rounded-[48px] flex-1 text-white transition-colors text-md font-semibold"
               :class="{ 'bg-white !text-gray-700': active === membership.id }"
           >
             {{ membership.name }}
@@ -31,7 +31,7 @@
         <div
             v-if="activeMembership"
             :key="activeMembership.id"
-            class="bg-white py-8 rounded-3xl shadow-sm border border-gray-200 flex max-w-[1400px] mx-auto -mb-[140px]"
+            class="bg-white py-8 rounded-xl md:rounded-3xl shadow-sm border border-gray-200 flex max-w-[1400px] mx-auto -mb-[140px]"
         >
           <!-- Left section -->
           <div class="w-2/5 px-8">

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

@@ -1,20 +1,22 @@
 <template>
-  <div class="overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
+  <div class="link-card overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]">
       <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
         <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
         <div v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></div>
       </div>
-      <div v-if="cardComponent" class="flex w-full" :class="{'gap-8': headerComponent?.featured_image}">
+      <div v-if="cardComponent" class="flex flex-col md:flex-row w-full" :class="{'gap-8': headerComponent?.featured_image}">
         <div class="w-full" ref="leftColumn" v-if="headerComponent?.featured_image">
           <img
                :src="headerComponent?.featured_image"
                class="rounded-br-[24px] rounded-tl-[24px] h-full w-full object-cover"
                alt="Feature"/>
         </div>
-        <div class="flex gap-8 w-full" ref="rightColumn" :class="{'flex-col h-fit': headerComponent?.featured_image}">
+        <div class="grid gap-8 w-full" ref="rightColumn"
+             :class="`${headerComponent?.featured_image ? 'link-card__columns--with-featured-image' : ''} ${'link-card__columns--'+ cardComponent.data.length}`"
+        >
           <div v-for="(data, index) in cardComponent.data"
-               class="relative bg-white p-8 rounded-[24px] w-full"
+               class="relative bg-white p-8 rounded-xl md:rounded-3xl w-full"
                :class="{'!bg-gray-50': section?.no_background}">
             <div v-if="data.icon" class="w-[48px] h-[48px] flex justify-center items-center rounded-[10px] text-white bg-aqua-900 mb-4">
               <IconComponent :icon="data.icon" icon-classes="w-5 h-5" :key="index"></IconComponent>
@@ -65,4 +67,36 @@ onMounted(() => {
     leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
   }
 });
-</script>
+</script>
+
+<style scoped>
+.link-card {
+  &__columns {
+    &--2 {
+      @apply sm:grid-cols-2;
+    }
+    &--3 {
+      @apply md:grid-cols-3;
+    }
+    &--4 {
+      @apply sm:grid-cols-2 lg:grid-cols-4;
+    }
+
+    &--with-featured-image {
+      @apply flex-col h-fit;
+
+      &.link-card__columns{
+        &--2 {
+          @apply grid-cols-1 lg:grid-cols-2;
+        }
+        &--3 {
+          @apply grid-cols-1 xl:grid-cols-3;
+        }
+        &--4 {
+          @apply grid-cols-1 lg:grid-cols-2 xl:grid-cols-4;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,17 +1,17 @@
 <template>
   <div class="overflow-hidden">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex gap-[10%]">
-      <div v-for="(header, index) in headerComponents" class="gap-4" :class="{'w-1/2': section.two_columns}">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex flex-col lg:flex-row gap-8 xl:gap-[10%]">
+      <div v-for="(header, index) in headerComponents" class="gap-4" :class="{'lg:w-1/2': section.two_columns}">
         <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="header">
           <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
           <p v-if="header?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="header.supporting_text"></p>
         </div>
         <img v-if="header?.featured_image"
              :src="header?.featured_image"
-             class="rounded-[24px] w-full h-[480px] object-cover mb-6"
+             class="rounded-xl md:rounded-3xl w-full h-[300px] lg:h-[480px] object-cover mb-6"
              alt="Feature"/>
         <div v-if="linkComponents[index]" class="flex w-full">
-          <div :class="{'grid grid-cols-2 gap-x-[100px]': !section.two_columns, 'flex flex-col gap-4 w-full': section.two_columns}">
+          <div :class="{'grid lg:grid-cols-2 gap-x-[100px]': !section.two_columns, 'flex flex-col gap-4 w-full': section.two_columns}">
             <div v-for="(link, index) in linkComponents[index].data" class="relative bg-white hover:bg-gray-100 p-2 rounded-lg w-full">
               <a
                   v-if="link.url"

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

@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden mt-4">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16 items-center" :class="{'flex-row-reverse mt-6 !mb-10': section?.revert, 'justify-center': section?.center }">
-      <div class="max-w-[800px] py-4" :class="{'!max-w-full w-full': section?.is_full_width, '!py-8': component?.featured_image }" v-if="component?.title || component?.paragraph" ref="leftColumn">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-8 lg:gap-16 items-center flex-col-reverse lg:flex-row" :class="{'[&]:flex-col [&]:lg:flex-row-reverse mt-6 !mb-10': section?.revert, 'justify-center': section?.center, 'md:!px-0 !ml-0 justify-end': section?.align_left }">
+      <div class="max-w-[800px] lg:py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title || component?.paragraph" ref="leftColumn">
         <h3 class="text-[36px] text-gray-900 font-semibold" v-if="component?.title">
           {{ component.title }}
         </h3>
@@ -14,7 +14,7 @@
           </div>
         </div>
       </div>
-      <div class="w-full max-w-[536px] rounded-[24px] overflow-hidden" v-if="component?.featured_image" ref="rightColumn">
+      <div class="w-full min-w-[300px] max-w-[536px] rounded-xl md:rounded-3xl overflow-hidden" v-if="component?.featured_image" ref="rightColumn">
         <div v-if="component?.source_type === 'video'" class="w-full h-full relative">
           <video
               @click="togglePlayPause"
@@ -30,7 +30,7 @@
               @click="togglePlayPause">
           </PlayButton>
         </div>
-        <img v-else :src="component?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-[24px]"/>
+        <img v-else :src="component?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-xl md:rounded-3xl"/>
       </div>
     </div>
   </div>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full bg-navy-800 py-10 relative lg:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
-    <LeftVector class="absolute left-0 top-0" v-if="section?.as_cta"></LeftVector>
+    <LeftVector class="absolute left-0 top-0 h-full max-w-full" v-if="section?.as_cta"></LeftVector>
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
       <div class="max-md:mx-[30px] 1xl:mx-0 relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
         <div v-for="(component, index) in section.components" class="w-full md:w-3/4">

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
+  <div class="rounded-3xl md:rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
     <div v-if="section.hasOwnProperty('components') > 0 && section.components.length > 0"
          class="md:px-[90px]"
          :class="{'flex flex-col items-center text-center': headerComponent?.center, 'mb-[64px]': hasFeaturedImage}">
-      <div class="bg-navy-50 rounded-[48px] relative pt-[164px] px-[120px]" :class="{'flex flex-col items-center text-center': headerComponent?.text_center}">
-        <h3 class="text-[48px] font-semibold text-gray-900 w-full max-w-[800px] leading-[60px] tracking-[-1px]">{{ headerComponent.title }}</h3>
+      <div class="bg-navy-50 rounded-3xl md:rounded-[48px] relative pt-16 md:pt-28 lg:pt-[164px] px-8 md:px-24 lg:px-[120px]" :class="{'flex flex-col items-center text-center': headerComponent?.text_center}">
+        <h3 class="text-4xl md:text-5xl lg:text-[48px] lg:leading-[60px] font-semibold text-gray-900 w-full max-w-[800px] tracking-[-1px]">{{ headerComponent.title }}</h3>
         <h3 class="text-xl font-normal text-gray-600 mt-3 w-full max-w-[800px]" :class="{'pb-[100px]': !hasFeaturedImage}">{{ headerComponent.supporting_text }}</h3>
         <div class="flex gap-3 mt-8 flex-col lg:flex-row"
              v-if="headerComponent?.secondary_button?.show || headerComponent?.primary_button?.show">
@@ -26,7 +26,7 @@
             v-if="hasFeaturedImage"
             :src="section.components[0]?.featured_image"
             alt="Card Image"
-            class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
+            class="w-full max-w-[1632px] h-[480px] object-cover rounded-3xl md:rounded-[48px] relative top-[64px]"
         />
       </div>
     </div>

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

@@ -10,17 +10,17 @@
               :key="index"
               class="w-full flex-shrink-0 py-10"
           >
-            <div class="flex space-x-16 max-w-[1640px] md:px-[120px] mx-auto w-full">
+            <div class="flex flex-col-reverse lg:flex-row gap-8 xl:gap-x-16 max-w-[1640px] md:px-[120px] mx-auto w-full">
               <article class="flex-1 flex flex-col justify-center gap-8">
               <span class="flex items-center gap-1">
                 <template v-for="star in 5">
                   <Star class="w-5 h-5 text-yellow-100"></Star>
                 </template>
               </span>
-                <h3 class="font-medium text-3xl leading-[38px]" v-html="feature.description"></h3>
+                <h3 class="font-medium text-2xl md:text-3xl md:leading-[38px]" v-html="feature.description"></h3>
                 <p class="text-gray-600">{{ feature.title }}</p>
               </article>
-              <div class="h-[480px] w-[560px]">
+              <div class="h-[480px] w-full md:w-[560px] lg:h-[300px] lg:w-[350px] xl:h-[480px] xl:w-[560px]">
                 <img
                     v-if="feature.featured_image"
                     :src="feature.featured_image"
@@ -39,7 +39,7 @@
 
         <!-- Controls -->
         <footer class="flex max-w-[1640px] md:px-[120px] mx-auto w-full gap-4 relative">
-          <div class="absolute bottom-[40px] left-[120px] w-full gap-4 flex">
+          <div class="absolute bottom-[40px] right-0 md:right-[120px] xl:left-[120px] gap-4 flex">
             <button
                 type="button"
                 @click="prevSlide"