@dcodegroup-au/page-builder 0.5.3 → 0.5.5

package/example/src/App.vue

@@ -10,6 +10,7 @@ import {AdvisoryServices} from "./pages/AdvisoryService.js";
 import {PartnerWithUs} from "./pages/PartnerWithUs.js";
 import {OurGroups} from "./pages/OurGroups.js";
 import {Vectea2024} from "./pages/Vectea2024.js";
+import {AdvocaryAndResearch} from "./pages/AdvocaryAndResearch.js";
 
 const slide = {
   title: "About ELAA",
@@ -96,7 +97,7 @@ const breadcrumbs = [
     {{ JSON.stringify(Vectea2024) }}
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Render</h1>
-      <PageRender :page="Vectea2024"/>
+      <PageRender :page="AdvocaryAndResearch"/>
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>
@@ -112,7 +113,7 @@ const breadcrumbs = [
     </div>
     <div style="margin: 40px 0">
       <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>
-      <PageBuilder v-model="Vectea2024" :breadcrumbs="breadcrumbs"/>
+      <PageBuilder v-model="AdvocaryAndResearch" :breadcrumbs="breadcrumbs"/>
     </div>
   </div>
 </template>

package/example/src/pages/AdvocaryAndResearch.js

@@ -0,0 +1,337 @@
+export const AdvocaryAndResearch =
+  {
+  title: "Advocacy and Research",
+  sections: [
+    {
+      title: "Standard header",
+      type: "standard_header",
+      components: [
+        {
+          name: "Standard header",
+          type: "header",
+          title: "Advocacy & Research",
+          supporting_text_max_length: 500,
+          supporting_text: "The Victorian Early Childhood Teachers and Educators Agreement (VECTEA) is an enterprise agreement that applies to early childhood teachers and educators employed in kindergarten education programs in Victoria.",
+        },
+      ]
+    },
+    {
+      title: "Callout Section",
+      type: "callout",
+      components: [
+        {
+          name: "Callout Section",
+          type: "callout",
+          title: "Our Vision",
+          has_extra: true,
+          title_label: "Eyebrow heading",
+          supporting_text: "Excellence and equity in early childhood education and care",
+          supporting_text_label: "Message *",
+          supporting_text_max_length: 500,
+          featured_image: "https://beta-frontend.elaa.org.au/img/what-we-do/strategy.png"
+        },
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      has_background: true,
+      margin: true,
+      two_column: true,
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Addressing Section Challenges",
+          icon: "AlertCircle",
+          supporting_text: "ELAA has developed a grass roots understanding of the value and challenges presented by early childhood education. We share our members’ passion for delivering excellence in early learning to children before they commence school, and we help them to do this by providing professional support and resources on a wide range of matters including:",
+        },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          title: "Our key areas of focus are:",
+          max_items: 10,
+          has_type_switcher: false,
+          max_title: 500,
+          data: [
+            {
+              title: "Read more about our history 1",
+            },
+            {
+              title: "Read more about our history 2",
+            },
+            {
+              title: "Read more about our history 3",
+            },
+            {
+              title: "Read more about our history 4",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Bullet Points Section",
+      type: "bullet_points",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "Why Partner with ELAA?",
+          featured_image: "https://beta-frontend.elaa.org.au/img/what-we-do/advocacy-research.png",
+        },
+        {
+          name: "Bullet Points",
+          type: "bullet_points",
+          supportive_text: "This section can contain up to 10 items.",
+          has_type_switcher: false,
+          max_items: 10,
+          max_title: 500,
+          data: [
+            {
+              title: "We are uniquely placed to raise your business profile in the ECEC sector",
+            },
+            {
+              title: "Work with a values based peak body who are trusted by their members.",
+            },
+            {
+              title: "We actively work with our partners, developing flexible tailored approaches to maximise your return on investment.",
+            },
+            {
+              title: "We have a dedicated, largely female audience – and we know what works for them.",
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Collection carousel",
+      type: "collection_carousel",
+      has_background: false,
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: 'Our Submission',
+          dark: true,
+          supporting_text: null,
+        },
+        {
+          name: "Carousel",
+          type: "carousel",
+          button: {
+            title: 'View all submissions',
+            url: 'google.com', // external could be an url
+            type: 'external-page',
+            open_in_new_tab: true,
+          },
+          content: {
+            label: 'Content',
+            supportive_text: 'This carousel will be automatically populated with all upcoming events. This section will be hidden if there’s no upcoming events.',
+            items: [
+              {
+                type: 'submission',
+                title: 'Change Management – Drop in session',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector. This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'DE Regional Governance Training Session',
+                description: 'Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                button_title: 'Free',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Change Management – Drop in session 2',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 2',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 3',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+              {
+                type: 'submission',
+                title: 'Let’s start making sense of OHS: Safety – not child’s play 4',
+                description: 'This face to face event is specifically designed for those responsible for the management of OHS in early childhood services. Guidance on how to manage risks by addressing the most common hazards faced by the early childhood sector.',
+                primary_button: {
+                  icon: 'plus',
+                  title: 'Read submmission',
+                  url: 'google.com'
+                },
+                secondary_button: {
+                  title: 'Learn more',
+                  url: 'google.com'
+                },
+              },
+            ]
+          }
+        }
+      ]
+    },
+    {
+      title: "Link card section",
+      type: "link_card",
+      display: "vertical",
+      components: [
+        {
+          name: "Section header",
+          type: "header",
+          title: "ELAA Supports",
+          supporting_text: "Excellence and equity in early childhood education and care",
+        },
+        {
+          name: "Link cards",
+          type: "link_cards",
+          supportive_text: "Manage the link cards.",
+          max_items: 4,
+          data: [
+            {
+              title: "Read more about our history",
+              icon: "AlertCircle",
+              public: true,
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Join ELAA',
+                url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: false,
+              }
+            },
+            {
+              title: "Read more about our history",
+              public: true,
+              icon: 'AlignLeft01',
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Learn more',
+                url: '', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: true,
+              }
+            },
+            {
+              title: "Read more about our history",
+              public: true,
+              icon: 'AlignLeft01',
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Learn more',
+                url: '', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: true,
+              }
+            },
+            {
+              title: "Read more about our history",
+              public: true,
+              icon: 'AlignLeft01',
+              primary_button: {
+                show: true,
+                name: 'Button',
+                label: 'Email us',
+                url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
+                type: 'external-page',
+                open_in_new_tab: true,
+              }
+            },
+          ]
+        }
+      ]
+    },
+    {
+      title: "Quick links",
+      type: "quick_links",
+      as_cta: true,
+      components: [
+        {
+          type: "header",
+          title: 'Services',
+          supporting_text: 'Our knowledge and expertise of the early childhood sector enables ELAA to provide expert professional advice and support.',
+        },
+        {
+          name: "Link grid",
+          type: "link_grid",
+          supportive_text: "This section can contain up to 5 links.",
+          max_items: 5,
+          data: [
+            {
+              title: "Advisory Services",
+              url: '/admin', // external could be an url
+              type: 'site-content',
+              open_in_new_tab: true,
+            },
+          ]
+        }
+      ]
+    },
+  ]
+};

package/example/src/pages/Vectea2024.js

@@ -165,7 +165,7 @@ export const Vectea2024 =
         },
         {
           name: "FAQs",
-          type: "feature_items",
+          type: "faqs",
           supportive_text: "This section can contain up to 10 items.",
           has_type_switcher: false,
           max_items: 50,
@@ -174,12 +174,14 @@ export const Vectea2024 =
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "What is an enterprise agreement? Is this the same as an award?",
               supporting_text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quaerat sed minus maiores dolorem consectetur quibusdam harum itaque deserunt at eligendi qui illum praesentium odit sit, voluptates nobis expedita?",
             },
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "What is an enterprise agreement? Is this the same as an award?",
               supporting_text: "The last scheduled salary increase under VECTEA 2020, along with its corresponding agreements, was in April 2024. During the re-negotiation period, current salaries established under VECTEA 2020 will continue to be in effect. \n" +
                 "Future salary increases under a new VECTEA 2024 will take effect once the Fair Work Commission approves the new agreement.\n" +
@@ -188,12 +190,14 @@ export const Vectea2024 =
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "We actively work with our partners, developing flexible tailored approaches to maximise your return on investment.",
               supporting_text: "This section can contain up to 10 items.",
             },
             {
               has_extra: true,
               as_item: true,
+              is_editor: true,
               title: "We have a dedicated, largely female audience – and we know what works for them.",
               supporting_text: "This section can contain up to 10 items.",
             },

package/package.json

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

package/src/assets/svg/left_vector.svg

@@ -0,0 +1,3 @@
+<svg width="435" height="266" viewBox="0 0 435 266" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M201.971 -102.931C292.729 -67.7545 395.68 -30.0658 424.539 62.8945C454.76 160.245 410.669 267.688 339.758 340.914C276.809 405.918 180.85 413.635 90.5516 407.784C10.8181 402.617 -65.3177 373.252 -115.884 311.388C-166.322 249.681 -181.838 169.034 -168.875 90.3974C-154.991 6.17807 -120.61 -79.6055 -44.9217 -119.063C32.0201 -159.174 121.066 -134.289 201.971 -102.931Z" fill="#78BDB5"/>
+</svg>

package/src/components/PageBuilder.vue

@@ -139,6 +139,7 @@ const componentMaps = ref({
   timeline_items: markRaw(VItems),
   bullet_points: markRaw(VLinks),
   feature_items: markRaw(VLinks),
+  faqs: markRaw(VLinks),
   link_cards: markRaw(VItems),
   contact_us: markRaw(ContactUs),
 });

package/src/components/builders/Header.vue

@@ -42,7 +42,9 @@
           :value="dataRef.supporting_text"
           :limit="dataRef.supporting_text_max_length ?? 500"
       >
+        <QuillEditor v-if="dataRef?.is_editor" v-model="dataRef.supporting_text"/>
         <textarea
+            v-else
             v-model="dataRef.supporting_text"
             name="supporting_text"
             type="text"
@@ -88,6 +90,7 @@ import IconSelector from "@/components/common/IconSelector.vue";
 import InputWrapper from "@/components/common/InputWrapper.vue";
 import DefaultFileUpload from "@/components/common/FileUpload.vue";
 import VButton from "@/components/common/Button.vue";
+import QuillEditor from "@/components/common/QuillEditor.vue";
 
 // Inject the FileUpload component or fallback to the default one
 const VFileUpload = inject("VFileUpload", DefaultFileUpload);

package/src/components/builders/Links.vue

@@ -2,13 +2,31 @@
   <div class="rounded-xl bg-gray-50 px-6 py-5">
     <div class="flex justify-between pb-2">
       <div class="flex justify-between w-full py-1">
-        <div>
+        <div class="min-w-[50%] w-full">
           <p class="text-lg font-semibold text-gray-900">
             {{ componentData.name }}
           </p>
           <p class="text-sm text-gray-600 mt-1">
             {{ componentData.supportive_text }}
           </p>
+          <input-wrapper
+              v-if="componentData.hasOwnProperty('title')"
+              is-vertical
+              field="title"
+              label-text="Title *"
+              class="w-[50%] my-8"
+              :value="componentData.title"
+              :limit="100"
+          >
+            <input
+                v-model="componentData.title"
+                name="title"
+                type="text"
+                placeholder="Title"
+                :maxlength="100"
+                class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+            />
+          </input-wrapper>
         </div>
         <div>
           <a
@@ -52,7 +70,7 @@
             </label>
           </div>
           <div class="flex flex-col gap-1.5" v-if="!item.hasOwnProperty('content_type') || item.content_type === 'content'">
-            <Header v-if="isFeatureItem" :data="item"></Header>
+            <Header v-if="['feature_items', 'faqs'].includes(componentData.type)" :data="item"></Header>
             <input-wrapper
                 v-else
                 is-vertical
@@ -151,7 +169,7 @@ function addItem() {
   if (componentData.value.data?.length >= componentData.value.max_items) {
     return;
   }
-  componentData.value.data?.push(createLink({}, isBulletPoint.value, isFeatureItem.value));
+  componentData.value.data?.push(createLink({}, componentData.value.type));
 
   nextTick(() => {
     if (lastItemRef.value) {

package/src/components/helpers/pageBuilderFactory.js

@@ -43,8 +43,18 @@ export function createItem(overrides = {}, withSecondary = true, isTimeline = fa
   };
 }
 
-export function createLink(overrides = {}, isBulletPoint = false, isFeatureItem = false) {
-  if (isFeatureItem) {
+export function createLink(overrides = {}, type = null) {
+  if (type === 'faqs') {
+    return {
+      has_extra: true,
+      as_item: true,
+      is_editor: true,
+      title: "Item title",
+      supporting_text: "Enter your description here.",
+    }
+  }
+
+  if (type === 'feature_items') {
     return {
       has_extra: true,
       as_item: true,
@@ -54,7 +64,7 @@ export function createLink(overrides = {}, isBulletPoint = false, isFeatureItem
     }
   }
 
-  if (isBulletPoint) {
+  if (type === 'bullet_points') {
     return {
       title: "New link",
     };

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

@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-hidden">
-    <div :class="{'bg-gray-50 py-2' : section?.has_background}">
+    <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}">
         <img v-if="headerComponent?.featured_image"
@@ -8,17 +8,20 @@
              class="max-w-[480px] w-full object-cover rounded-[24px]"
              ref="leftColumn"
              alt="Feature"/>
-        <div v-if="headerComponent" class="h-fit" :class="{'py-[48px]': headerComponent?.featured_image}"
+        <div v-if="headerComponent" class="h-fit" :class="{'py-[48px]': headerComponent?.featured_image, 'grid grid-cols-2 gap-8': section?.two_column}"
              ref="rightColumn">
-          <div v-if="headerComponent?.icon"
-               class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
-            <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
+          <div>
+            <div v-if="headerComponent?.icon"
+                 class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
+              <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
+            </div>
+            <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
+            <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>
-          <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
-          <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 class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image}"
+          <div class="flex flex-col mt-8 gap-4" :class="{'!grid grid-cols-3' :!headerComponent?.featured_image && !section?.two_column}"
                v-if="bulletPointsComponent">
+            <p v-if="bulletPointsComponent?.title" v-text="bulletPointsComponent.title" class="font-semibold text-[20px]"></p>
             <div v-for="item in bulletPointsComponent.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/FAQ.vue

@@ -10,13 +10,15 @@
         </div>
         <div v-if="featureComponents[index]" class="flex flex-col divide-y gap-8">
           <div v-for="(link, index) in featureComponents[index].data"
-               class="relative bg-white p-2 w-full pt-6">
+               class="relative bg-white w-full pt-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">
               <span class="hover:underline" @click="toggle(index)">
                 {{ link.title }}
               </span>
-              <Plus v-if="!show[index]" class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Plus>
-              <Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
+              <span class="min-w-[24px]">
+                <Plus v-if="!show[index]" class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Plus>
+                <Minus v-else class="w-6 h-6 cursor-pointer text-gray-400 hover:text-gray-700" @click="toggle(index)"></Minus>
+              </span>
             </a>
             <p v-if="show[index]" class="mt-2 text-gray-600 leading-[24px]" v-html="link.supporting_text"></p>
           </div>
@@ -44,7 +46,7 @@ const headerComponents = computed(() => {
 });
 
 const featureComponents = computed(() => {
-  return section.value.components.filter((component) => component.type === "feature_items");
+  return section.value.components.filter((component) => component.type === "faqs");
 });
 
 featureComponents.value.forEach((value, index) => {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden" :class="{'bg-aqua-100': !section?.no_background}">
+  <div class="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>
@@ -22,7 +22,7 @@
             <h1 class="text-[20px] font-semibold text-gray-900">{{ data.title }}</h1>
             <div class="text-lg text-gray-600 mt-2 leading-[24px]" v-html="data.description"></div>
             <a
-                v-if="data?.primary_button.show"
+                v-if="data?.primary_button.show && data.primary_button.url"
                 class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"
                 :href="formatUrl(data.primary_button.url)"
                 :target="data.primary_button.open_in_new_tab ? '_blank' : ''">

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

@@ -1,19 +1,20 @@
 <template>
-  <div class="w-full bg-navy-800 py-10 relative lg:h-[336px]">
+  <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>
     <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
-      <div class="max-md:mx-[30px] 1xl:mx-0 relative z-10">
+      <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">
           <component
               :is="currentComponent(component)"
               :key="index"
               :component="component"
+              :class="{'flex !justify-center': section?.as_cta}"
           ></component>
         </div>
       </div>
     </div>
-
-    <HeaderVector class="absolute right-0 top-0"></HeaderVector>
-  </div>
+    <HeaderVector class="absolute right-0 top-0" v-if="!section?.as_cta"></HeaderVector>
+   </div>
 </template>
 
 <script setup>
@@ -21,6 +22,7 @@ import { ref, markRaw } from "vue";
 import VLinkPresenter from "@/components/presenters/components/LinkPresenter.vue";
 import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
 import HeaderVector from "@/assets/svg/header_right_vector.svg";
+import LeftVector from "@/assets/svg/left_vector.svg";
 
 const props = defineProps({
   section: {