@dcodegroup-au/page-builder 0.5.9 → 0.6.0

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

@@ -0,0 +1,161 @@
+<template>
+  <section class="px-6 mt-4 mb-36">
+    <div class="bg-navy-800 p-10 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>
+          <h2 class="text-5xl leading-10 mb-4 font-semibold text-white" v-text="headerComponent.title"></h2>
+          <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">
+          <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="{ 'bg-white !text-gray-700': active === membership.id }"
+          >
+            {{ membership.name }}
+          </button>
+        </nav>
+      </div>
+
+      <!-- Show image when none selected with transition -->
+      <div v-if="!active" class="flex justify-center pb-32">
+        <SelectType></SelectType>
+      </div>
+
+      <!-- Membership details with transition -->
+      <Transition name="fade" mode="out-in">
+        <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]"
+        >
+          <!-- Left section -->
+          <div class="w-2/5 px-8">
+            <div
+                :class="[
+                'p-8 rounded-[20px] text-left min-h-full',
+                activeMembership.theme === 'dark' ? 'bg-navy-25' : 'bg-brand-25'
+              ]"
+            >
+              <span
+                  :class="[
+                  'w-12 h-12 flex items-center justify-center rounded-full mb-4',
+                  activeMembership.theme === 'dark' ? 'bg-navy-100 text-navy-600' : 'bg-brand-100 text-brand-600'
+              ]"
+              >
+                <StarIcon class="w-5 h-5"></StarIcon>
+              </span>
+              <h3
+                  :class="[
+                  'text-4xl leading-10 font-semibold mb-4',
+                  activeMembership.theme === 'dark' ? 'text-navy-700' : 'text-brand-700'
+              ]"
+              >
+                {{ activeMembership.name }}
+              </h3>
+              <p class="leading-6 text-gray-600">{{ activeMembership.description }}</p>
+            </div>
+          </div>
+
+          <!-- Right section -->
+          <div class="w-3/5 px-8 flex flex-col justify-between">
+            <div class="mb-12">
+              <div class="flex space-x-6">
+                <div v-if="activeMembership.access" class="flex-1">
+                  <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.access.title }}</h4>
+                  <ul>
+                    <li
+                        v-for="(item, idx) in activeMembership.access.list"
+                        :key="`access-${activeMembership.id}-${idx}`"
+                        class="leading-6 flex items-top text-gray-600 mb-4"
+                    >
+                      <span class="flex items-center justify-center min-w-6 h-6 bg-success-100 text-success-500 rounded-full mr-3">
+                        <Check class="w-5 h-5"></Check>
+                      </span>
+                      {{ item }}
+                    </li>
+                  </ul>
+                </div>
+
+                <div v-if="activeMembership.excludes" class="flex-1">
+                  <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.excludes.title }}</h4>
+                  <ul>
+                    <li
+                        v-for="(item, idx) in activeMembership.excludes.list"
+                        :key="`excludes-${activeMembership.id}-${idx}`"
+                        class="leading-6 flex items-top text-gray-600 mb-4"
+                    >
+                      <span class="flex items-center justify-center min-w-6 h-6 bg-gray-100 rounded-full mr-3">
+                        <XIcon class="w-5 h-5"></XIcon>
+                      </span>
+                      {{ item }}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <!-- CTA Button -->
+            <a
+                :href="activeMembership.url"
+                class="py-3 px-6 rounded-full font-semibold flex items-center justify-center transition-colors"
+                :class="activeMembership.theme === 'dark'
+                ? 'bg-brand-800 text-white hover:bg-brand-700'
+                : 'bg-navy-600 text-white hover:bg-navy-500'"
+            >
+              {{ activeMembership.button.label }}
+              <span class="ml-2"><ArrowUpRight class="w-5 h-5"></ArrowUpRight></span>
+            </a>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import SelectType from '@/assets/svg/select-type.svg'
+import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg'
+import Check from '@/assets/img/icons/check.svg'
+import XIcon from '@/assets/img/icons/x.svg'
+import StarIcon from '@/assets/img/icons/stars-02.svg'
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+
+const headerComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "header");
+});
+
+const horizontalTabComponent = computed(() => {
+  return section.value.components.find((component) => component.type === "horizontal_tabs");
+});
+
+const active = ref('')
+
+const activeMembership = computed(() =>
+    horizontalTabComponent.value.data.find(m => m.id === active.value) || null
+)
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -2,10 +2,26 @@
   <div class="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': section.components[0]?.center, 'mb-[64px]': hasFeaturedImage}">
-      <div class="bg-navy-50 rounded-[48px] relative pt-[164px] px-[120px]" :class="{'flex flex-col items-center text-center': section.components[0]?.text_center}">
-        <h3 class="text-[48px] font-semibold text-gray-900 w-full max-w-[800px] leading-[60px] tracking-[-1px]">{{ section.components[0].title }}</h3>
-        <h3 class="text-xl font-normal text-gray-600 mt-3 w-full max-w-[800px]" :class="{'pb-[100px]': !hasFeaturedImage}">{{ section.components[0].supporting_text }}</h3>
+         :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>
+        <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">
+          <a class="text-gray-700 text-base font-semibold border border-gray-300 px-6 py-2 rounded-full hover:border-gray-400"
+             :href="formatUrl(headerComponent.secondary_button.url)"
+             v-if="headerComponent.secondary_button.show"
+             :target="headerComponent.secondary_button.open_in_new_tab ? '_blank' : ''">
+            <span>{{ headerComponent.secondary_button.label }}</span>
+          </a>
+          <a class="hover:bg-brand-600 bg-brand-500 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-base"
+             :href="formatUrl(headerComponent.primary_button.url)"
+             v-if="headerComponent.primary_button.show"
+             :target="headerComponent.primary_button.open_in_new_tab ? '_blank' : ''">
+            {{ headerComponent.primary_button.label }}
+            <ArrowDownRight class="w-5 h-5" />
+          </a>
+        </div>
         <img
             v-if="hasFeaturedImage"
             :src="section.components[0]?.featured_image"
@@ -19,6 +35,8 @@
 
 <script setup>
 import {ref, computed} from "vue";
+import {formatUrl} from "@/components/helpers/common";
+import ArrowDownRight from "@/assets/img/icons/arrow-down-right.svg";
 
 const props = defineProps({
   section: {
@@ -28,6 +46,9 @@ const props = defineProps({
 });
 
 const section = ref(props.section);
+const headerComponent = computed(() => {
+  return section.value?.components[0];
+});
 const hasFeaturedImage = computed(() => {
   return section.value?.components[0]?.hasOwnProperty('featured_image');
 });

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

@@ -0,0 +1,88 @@
+<template>
+  <section>
+    <div class="relative overflow-hidden bg-gray-50">
+        <div
+            class="flex w-full transition-transform duration-500 ease-in-out"
+            :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
+        >
+          <div
+              v-for="(feature, index) in slides.data"
+              :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">
+              <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-9">{{ feature.title }}</h3>
+                <p class="text-gray-600" v-html="feature.description"></p>
+              </article>
+              <div class="w-[30rem]">
+                <img
+                    v-if="feature.featured_image"
+                    :src="feature.featured_image"
+                    alt="Audience smiling"
+                    class="rounded-tl-3xl rounded-br-3xl"
+                />
+                <img
+                    v-else
+                    class="rounded-tl-3xl rounded-br-3xl"
+                    src="@/assets/img/no_image_available.jpeg"
+                    alt="No Image Available">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Controls -->
+        <footer class="flex max-w-[1640px] md:px-[120px] mx-auto w-full gap-4 absolute bottom-10 left-20">
+          <button
+              type="button"
+              @click="prevSlide"
+              class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
+          >
+            <ArrowLeft class="w-6 h-6 text-gray-500"></ArrowLeft>
+          </button>
+          <button
+              type="button"
+              @click="nextSlide"
+              class="w-12 h-12 border border-gray-200 rounded-full flex items-center justify-center bg-gray-50"
+          >
+            <ArrowRight class="w-6 h-6 text-gray-500"></ArrowRight>
+          </button>
+        </footer>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import {ref, computed} from 'vue'
+import ArrowLeft from '@/assets/img/icons/arrow-left.svg'
+import ArrowRight from '@/assets/img/icons/arrow-right.svg'
+import Star from '@/assets/img/icons/star.svg'
+
+const props = defineProps({
+  section: {
+    required: true,
+    type: Object,
+  },
+});
+
+const section = ref(props.section);
+const slides = computed(() => {
+  return section.value.components.find((component) => component.type === "testimonial_slider");
+});
+
+const currentIndex = ref(0)
+
+function nextSlide() {
+  currentIndex.value = (currentIndex.value + 1) % slides.value?.data?.length
+}
+
+function prevSlide() {
+  currentIndex.value = (currentIndex.value - 1 + slides.value?.data?.length) % slides.value?.data?.length
+}
+</script>

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

@@ -15,11 +15,11 @@
         <div
             v-if="headerComponent"
             class="w-full flex-col mb-6"
-            :class="{'text-center': headerComponent?.text_center}"
+            :class="{'text-center items-center flex': headerComponent?.text_center}"
         >
           <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
           <p v-if="headerComponent?.supporting_text"
-             class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px]"
+             class="text-[20px] font-normal mt-4 text-gray-600 leading-[30px] max-w-[800px]"
              v-html="headerComponent.supporting_text"></p>
         </div>
         <div :class="featureItemsComponent.hasOwnProperty('grid_columns') ? '' : 'flex flex-row gap-8'">
@@ -39,6 +39,14 @@
                 <div class="max-w-[324px]" :class="{'max-w-full': featureItemsComponent?.has_background}">
                   <h3 class="font-semibold text-[20px] text-gray-900">{{ item.title }}</h3>
                   <p class="mt-2 text-md font-normal text-gray-600 leading-[24px]">{{ item.supporting_text }}</p>
+                  <a
+                      v-if="item?.primary_button?.show && item?.primary_button?.url"
+                      class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"
+                      :href="formatUrl(item.primary_button.url)"
+                      :target="item.primary_button.open_in_new_tab ? '_blank' : ''">
+                    {{ item.primary_button.label }}
+                    <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
+                  </a>
                 </div>
               </template>
               <img v-else :src="item.image" alt="Feature Image" class="w-full h-full object-cover"/>
@@ -57,6 +65,8 @@
 <script setup>
 import IconComponent from "@/components/common/Icon.vue";
 import {ref, computed, onMounted} from "vue";
+import {formatUrl} from "@/components/helpers/common";
+import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 
 const props = defineProps({
   section: {
@@ -79,7 +89,12 @@ const imageComponent = computed(() => {
   return section.value.components.find((component) => component.type === "image_block");
 });
 const featureItemsComponent = computed(() => {
-  return section.value.components.find((component) => component.type === "feature_items");
+  let c = section.value.components.find((component) => component.type === "feature_items");
+  if (!c) {
+    return section.value.components.find((component) => component.type === "link_cards")
+  }
+
+  return c;
 });
 
 onMounted(() => {

package/tailwind.config.js

@@ -50,7 +50,9 @@ module.exports = {
         },
         success: {
           50: 'rgba(236, 253, 243, 1)',
+          100: '#DCFAE6',
           200: 'rgba(171, 239, 198, 1)',
+          500: '#17B26A',
           700: 'rgba(6, 118, 71, 1)',
         },
         error: {
@@ -74,6 +76,9 @@ module.exports = {
           500: 'rgba(247, 144, 9, 1)',
           700: 'rgba(181, 71, 8, 1)',
         },
+        yellow: {
+          100: '#DAAA00',
+        }
       },
     },
   },