@dcodegroup-au/page-builder 0.7.3 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/page-builder.css +146 -1232
  2. package/dist/page-builder.es.js +166 -167
  3. package/dist/page-builder.umd.js +166 -167
  4. package/example/src/App.vue +57 -56
  5. package/package.json +1 -1
  6. package/src/assets/css/style.css +4 -0
  7. package/src/components/presenters/components/LinkPresenter.vue +3 -3
  8. package/src/components/presenters/components/SliderPresenter.vue +4 -4
  9. package/src/components/presenters/modules/AccordionPricing.vue +1 -1
  10. package/src/components/presenters/modules/BulletPoints.vue +1 -1
  11. package/src/components/presenters/modules/Callout.vue +1 -1
  12. package/src/components/presenters/modules/CollectionCarousel.vue +2 -2
  13. package/src/components/presenters/modules/CollectionGrid.vue +1 -1
  14. package/src/components/presenters/modules/ContactUs.vue +9 -7
  15. package/src/components/presenters/modules/FAQ.vue +1 -1
  16. package/src/components/presenters/modules/HeroHeader.vue +2 -2
  17. package/src/components/presenters/modules/HorizontalTabs.vue +40 -42
  18. package/src/components/presenters/modules/LinkCard.vue +1 -1
  19. package/src/components/presenters/modules/LinkList.vue +1 -1
  20. package/src/components/presenters/modules/LogoCloud.vue +2 -2
  21. package/src/components/presenters/modules/Paragraph.vue +1 -1
  22. package/src/components/presenters/modules/QuickLinks.vue +1 -1
  23. package/src/components/presenters/modules/StandardHeader.vue +1 -2
  24. package/src/components/presenters/modules/TestimonialSlider.vue +3 -3
  25. package/src/components/presenters/modules/Timeline.vue +1 -1
  26. package/src/components/presenters/modules/TwoColumnsImageContent.vue +1 -1
  27. package/src/components/presenters/modules/VTabs.vue +1 -1
  28. package/example/.vscode/extensions.json +0 -3
package/example/src/App.vue CHANGED
@@ -109,82 +109,83 @@ const breadcrumbs = [
109
109
 
110
110
  <template>
111
111
  <div>
112
- <div style="margin: 40px 0;">
113
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">About Us</h1>
112
+ <!-- <div style="margin: 40px 0;">-->
113
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">About Us</h1>-->
114
114
 
115
- <PageRender :page="AboutUs" />
116
- </div>
117
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
118
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advocary And Research</h1>
115
+ <!-- <PageRender :page="AboutUs" />-->
116
+ <!-- </div>-->
117
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
118
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advocary And Research</h1>-->
119
119
 
120
- <PageRender :page="AdvocaryAndResearch" />
121
- </div>
122
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
123
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Best Life</h1>
120
+ <!-- <PageRender :page="AdvocaryAndResearch" />-->
121
+ <!-- </div>-->
122
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
123
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Best Life</h1>-->
124
124
 
125
- <PageRender :page="BestLife" />
126
- </div>
125
+ <!-- <PageRender :page="BestLife" />-->
126
+ <!-- </div>-->
127
127
  <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
128
128
  <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Home</h1>
129
129
 
130
130
  <PageRender :page="Home" />
131
131
  </div>
132
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
133
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Commitment</h1>
132
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
133
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Commitment</h1>-->
134
134
 
135
- <PageRender :page="OurCommitment" />
136
- </div>
137
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
138
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our History</h1>
135
+ <!-- <PageRender :page="OurCommitment" />-->
136
+ <!-- </div>-->
137
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
138
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our History</h1>-->
139
139
 
140
- <PageRender :page="OurHistory" />
141
- </div>
142
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
143
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Partner With Us</h1>
140
+ <!-- <PageRender :page="OurHistory" />-->
141
+ <!-- </div>-->
142
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
143
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Partner With Us</h1>-->
144
144
 
145
- <PageRender :page="PartnerWithUs" />
146
- </div>
147
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
148
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Vectea 2024</h1>
145
+ <!-- <PageRender :page="PartnerWithUs" />-->
146
+ <!-- </div>-->
147
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
148
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Vectea 2024</h1>-->
149
149
 
150
- <PageRender :page="Vectea2024" />
151
- </div>
152
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
153
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advisory Services</h1>
150
+ <!-- <PageRender :page="Vectea2024" />-->
151
+ <!-- </div>-->
152
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
153
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advisory Services</h1>-->
154
154
 
155
- <PageRender :page="AdvisoryServices" />
156
- </div>
157
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
158
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Assessment Support Service</h1>
155
+ <!-- <PageRender :page="AdvisoryServices" />-->
156
+ <!-- </div>-->
157
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
158
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Assessment Support Service</h1>-->
159
159
 
160
- <PageRender :page="AssessmentSupportService" />
161
- </div>
162
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
163
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Child Safe Standard</h1>
160
+ <!-- <PageRender :page="AssessmentSupportService" />-->
161
+ <!-- </div>-->
162
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
163
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Child Safe Standard</h1>-->
164
164
 
165
- <PageRender :page="ChildSafeStandard" />
166
- </div>
167
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
168
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Landing Page</h1>
165
+ <!-- <PageRender :page="ChildSafeStandard" />-->
166
+ <!-- </div>-->
167
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
168
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Landing Page</h1>-->
169
169
 
170
- <PageRender :page="LandingPage" />
171
- </div>
172
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
173
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Groups</h1>
170
+ <!-- <PageRender :page="LandingPage" />-->
171
+ <!-- </div>-->
172
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
173
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Groups</h1>-->
174
174
 
175
- <PageRender :page="OurGroups" />
176
- </div>
177
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
178
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Vision</h1>
175
+ <!-- <PageRender :page="OurGroups" />-->
176
+ <!-- </div>-->
177
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
178
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Vision</h1>-->
179
179
 
180
- <PageRender :page="OurVision" />
181
- </div>
182
- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
183
- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">SAEW</h1>
180
+ <!-- <PageRender :page="OurVision" />-->
181
+ <!-- </div>-->
182
+ <!-- <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">-->
183
+ <!-- <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">SAEW</h1>-->
184
184
 
185
- <PageRender :page="SAEW" />
186
- </div>
185
+ <!-- <PageRender :page="SAEW" />-->
186
+ <!-- </div>-->
187
187
 
188
+ <!------------------------------------------|||---------------------------------------------->
188
189
 
189
190
  <!-- <div style="margin: 40px 0">-->
190
191
  <!-- <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>-->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dcodegroup-au/page-builder",
3
- "version": "0.7.3",
3
+ "version": "0.7.4",
4
4
  "exports": {
5
5
  ".": {
6
6
  "import": "./dist/page-builder.es.js"
package/src/assets/css/style.css CHANGED
@@ -107,4 +107,8 @@
107
107
  .ql-editor {
108
108
  @apply p-0 overflow-visible h-auto;
109
109
  }
110
+ }
111
+
112
+ .pb-container {
113
+ @apply max-w-[1640px] px-4 md:px-[120px] mx-auto w-full;
110
114
  }
package/src/components/presenters/components/LinkPresenter.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <div class="flex justify-center h-[136px] w-full relative rounded-b-[48px] bg-navy-600 -mt-12 gap-[60px]" :class="{'bg-transparent !justify-start flex-wrap mt-8 !h-auto !gap-4': isLinkGrid}">
3
- <div class="flex justify-center" :class="{'!block': isLinkGrid}" v-for="link in component.data">
2
+ <div class="flex flex-wrap justify-center min-h-[136px] w-full relative rounded-b-3xl md:rounded-b-[48px] bg-navy-600 -mt-12 pt-20 md:pt-12 max-md:pb-4 px-4 gap-y-2 gap-x-[60px]" :class="{'bg-transparent !justify-start mt-8 !h-auto !gap-4': isLinkGrid}">
3
+ <div class="flex justify-center items-center" :class="{'!block': isLinkGrid}" v-for="link in component.data">
4
4
  <a
5
5
  :target="link.open_in_new_tab ? '_blank' : ''"
6
6
  :href="link.url.startsWith('http') ? link.url : `//${link.url}`"
7
- class="text-white flex gap-1.5 items-center cursor-pointer mt-12 text-sm font-semibold hover:text-gray-300"
7
+ class="text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300 h-9"
8
8
  :class="{'bg-white border border-gray-300 rounded-full !text-gray-700 px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
9
9
  >
10
10
  <span>{{ link.title }}</span><ArrowUpRight class="w-5 h-5"></ArrowUpRight>
package/src/components/presenters/components/SliderPresenter.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="flex h-[872px] w-full bg-navy-800 relative rounded-3xl md:rounded-[48px] z-10">
2
+ <div class="flex h-[708px] lg:h-[872px] w-full bg-navy-800 relative rounded-3xl md:rounded-[48px] z-10">
3
3
  <Carousel :items-to-show="1" v-model="currentSlide" :autoplay="5000" class="carousel w-full" :wrap-around="true">
4
4
  <Slide v-for="(slide, index) in slides" :key="index">
5
5
  <div class="lg:p-8 p-4 flex relative w-full">
@@ -32,9 +32,9 @@
32
32
  v-if="slide.featured_image"
33
33
  :src="slide.featured_image"
34
34
  alt="Slide Image"
35
- class="rounded-[40px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
36
- <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">
37
- <div class="absolute inset-0 lg:hidden z-10 p-4"><div class="bg-black opacity-60 rounded-[40px] h-full"></div></div>
35
+ class="rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover"/>
36
+ <img v-else class="rounded-3xl md:rounded-[48px] h-[674px] max-w-[882px] lg:w-1/2 w-full object-cover" src="@/assets/img/no_image_available.jpeg">
37
+ <div class="absolute inset-0 lg:hidden z-10 p-4"><div class="bg-black opacity-60 rounded-3xl md:rounded-[48px] h-full"></div></div>
38
38
  </div>
39
39
  </Slide>
40
40
  </Carousel>
package/src/components/presenters/modules/AccordionPricing.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full py-[40px] flex justify-center gap-[10%] ">
2
+ <div class="pb-container py-[40px] flex justify-center gap-[10%]">
3
3
  <div class="bg-pale-100 w-full rounded-[20px] p-8 gap-6 grid lg:grid-cols-2">
4
4
  <div>
5
5
  <p class="text-[36px] font-semibold text-gray-900 mb-[48px]" v-text="pricingComponent.title"></p>
package/src/components/presenters/modules/BulletPoints.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
3
  <div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
4
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]"
4
+ <div class="pb-container my-[40px]"
5
5
  :class="{'flex gap-8 flex-col lg:flex-row': headerComponent?.featured_image, 'flex-col-reverse lg:flex-row-reverse justify-between': headerComponent?.revert}">
6
6
  <img v-if="headerComponent?.featured_image"
7
7
  :src="headerComponent?.featured_image"
package/src/components/presenters/modules/Callout.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-[40px]"
3
+ <div class="pb-container mt-[40px]"
4
4
  :class="{'flex gap-4 lg:gap-8 flex-col lg:flex-row': headerComponent?.featured_image}">
5
5
  <div class="lg:max-w-[33.3%] w-full sm:min-h-[320px]"
6
6
  v-if="(imageComponent && section?.acknowledgement_style)
package/src/components/presenters/modules/CollectionCarousel.vue CHANGED
@@ -1,11 +1,11 @@
1
1
  <template>
2
2
  <div class="overflow-hidden" :class="{'rounded-br-[48px] rounded-tl-[48px] bg-aqua-100': section?.has_background}">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
3
+ <div class="pb-container">
4
4
  <div class="max-md:mx-[30px] 1xl:mx-0 rounded-3xl md:rounded-[48px] pt-[40px]">
5
5
  <VHeaderPresenter :component="headerComponent" />
6
6
  </div>
7
7
  </div>
8
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full" :class="{'mt-0': !section?.has_background, 'mt-6': section?.has_background}">
8
+ <div class="pb-container" :class="{'mt-0': !section?.has_background, 'mt-6': section?.has_background}">
9
9
  <VCarousel :component="carouselComponent" :has-background="section?.has_background" />
10
10
  </div>
11
11
  </div>
package/src/components/presenters/modules/CollectionGrid.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-[40px]" :class="{'!pt-0': section.hasOwnProperty('padding_top') && !section?.padding_top}">
3
+ <div class="pb-container pt-[40px]" :class="{'!pt-0': section.hasOwnProperty('padding_top') && !section?.padding_top}">
4
4
  <template v-for="(component, index) in section.components" :key="index">
5
5
  <component
6
6
  :is="currentComponent(component)"
package/src/components/presenters/modules/ContactUs.vue CHANGED
@@ -1,8 +1,8 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px] flex justify-center">
3
+ <div class="pb-container my-[40px] flex justify-center">
4
4
  <div class="bg-gray-100 rounded-lg md:rounded-2xl flex justify-center w-full" v-if="headerComponent">
5
- <div class="flex items-center justify-center flex-col py-[40px] max-w-[820px]">
5
+ <div class="flex items-center justify-center flex-col gap-4 py-[40px] px-4 max-w-[820px]">
6
6
  <div class="flex justify-between relative w-[150px]">
7
7
  <div class="w-[56px] h-[56px] border-[2px] border-white bg-gray-200 rounded-full flex justify-center items-center">
8
8
  <Phone class="w-6 h-6 text-gray-600"></Phone>
@@ -14,13 +14,15 @@
14
14
  <Email class="w-6 h-6 text-gray-600"></Email>
15
15
  </div>
16
16
  </div>
17
- <h3 class="text-[24px] text-gray-900 font-semibold mt-4">{{ headerComponent.title }}</h3>
18
- <p v-if="headerComponent?.supporting_text" class="text-[18px] font-normal mt-2 text-gray-600 leading-[30px] text-center" v-html="headerComponent.supporting_text"></p>
19
- <div class="flex gap-2">
17
+ <div class="flex flex-col gap-2 text-center">
18
+ <h3 class="text-[24px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
19
+ <p v-if="headerComponent?.supporting_text" class="text-[18px] font-normal text-gray-600 leading-[30px] text-center" v-html="headerComponent.supporting_text"></p>
20
+ </div>
21
+ <div class="flex justify-center gap-2 flex-wrap">
20
22
  <template v-for="item in contactUs.data">
21
23
  <a
22
24
  v-if="item?.show"
23
- class="inline-flex gap-1.5 items-center font-semibold text-base mt-4 px-5 py-2.5 rounded-full"
25
+ class="inline-flex gap-1.5 items-center font-semibold text-base px-5 py-2.5 rounded-full"
24
26
  :class="{'text-brand-700 hover:bg-white border border-brand-300': item.type === 'phone', 'text-white bg-brand-600 hover:bg-brand-800': item.type === 'email'}"
25
27
  :href="`${item.type === 'email' ? 'mailto:' : 'tel:'} ${item.address}`">
26
28
  {{ item.label }}
@@ -54,4 +56,4 @@ const headerComponent = computed(() => {
54
56
  const contactUs = computed(() => {
55
57
  return section.value.components.find((component) => component.type === "contact_us");
56
58
  });
57
- </script>
59
+ </script>
package/src/components/presenters/modules/FAQ.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full bg-white py-[40px] flex justify-center gap-[10%]"
3
+ <div class="pb-container bg-white py-[40px] flex justify-center gap-[10%]"
4
4
  :class="{'justify-start md:!px-0 !ml-0': section?.align_left}">
5
5
  <div v-for="(header, index) in headerComponents" class="gap-4 max-w-[800px] w-full" :class="{'!max-w-full' : section?.align_left}">
6
6
  <div class="px-[40px] text-center mb-6 mx-auto" v-if="header">
package/src/components/presenters/modules/HeroHeader.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
- <div class="rounded-3xl md:rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
3
- <div v-for="(component, index) in section.components" class="md:px-[90px]">
2
+ <div class="rounded-3xl md:rounded-[48px] 1xl:max-w-[1872px] mx-auto w-full sm:px-4 md:px-6">
3
+ <div v-for="(component, index) in section.components">
4
4
  <component
5
5
  :is="currentComponent(component)"
6
6
  :key="index"
package/src/components/presenters/modules/HorizontalTabs.vue CHANGED
@@ -1,19 +1,19 @@
1
1
  <template>
2
- <section class="px-6 mt-4 mb-36">
3
- <div class="bg-navy-800 p-10 rounded-3xl md:rounded-[48px]">
2
+ <section class="md:px-6 mt-4 mb-36">
3
+ <div class="bg-navy-800 py-10 px-4 md:px-10 rounded-3xl md:rounded-[48px]">
4
4
  <div class="max-w-[51.25rem] text-center mx-auto">
5
5
  <article class="mb-10">
6
6
  <p class="leading-6 font-semibold text-yellow-100 mb-2" v-text="headerComponent.sub_title"></p>
7
- <h2 class="text-5xl leading-10 mb-4 font-semibold text-white" v-text="headerComponent.title"></h2>
8
- <p class="text-xl leading-8 text-gray-200" v-text="headerComponent.supporting_text"></p>
7
+ <h2 class="text-3xl md:text-5xl mb-4 font-semibold text-white" v-text="headerComponent.title"></h2>
8
+ <p class="text-lg md:text-xl md:leading-8 text-gray-200" v-text="headerComponent.supporting_text"></p>
9
9
  </article>
10
10
 
11
- <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">
11
+ <nav class="mx-auto flex items-center justify-center flex-col md:flex-row gap-1 border border-white rounded-xl md:rounded-[60px] p-1.5 mb-8">
12
12
  <button
13
13
  v-for="membership in horizontalTabComponent.data"
14
14
  :key="membership.id"
15
15
  @click="active = membership.id"
16
- class="h-11 rounded-3xl md:rounded-[48px] flex-1 text-white transition-colors text-md font-semibold"
16
+ class="flex-1 rounded-full text-center font-semibold flex justify-center items-center gap-1 py-2.5 px-3 cursor-pointer text-white transition-colors text-base max-md:w-full"
17
17
  :class="{ 'bg-white !text-gray-700': active === membership.id }"
18
18
  >
19
19
  {{ membership.name }}
@@ -22,7 +22,7 @@
22
22
  </div>
23
23
 
24
24
  <!-- Show image when none selected with transition -->
25
- <div v-if="!active" class="flex justify-center pb-32">
25
+ <div v-if="!active" class="flex justify-center pb-16 lg:pb-32">
26
26
  <SelectType></SelectType>
27
27
  </div>
28
28
 
@@ -31,10 +31,10 @@
31
31
  <div
32
32
  v-if="activeMembership"
33
33
  :key="activeMembership.id"
34
- class="bg-white py-8 rounded-xl md:rounded-3xl shadow-sm border border-gray-200 flex max-w-[1400px] mx-auto -mb-[140px]"
34
+ class="bg-white p-4 md:!p-8 rounded-xl md:rounded-3xl shadow-sm border border-gray-200 flex max-lg:flex-col gap-4 md:!gap-8 max-w-[1400px] mx-auto -mb-[140px]"
35
35
  >
36
36
  <!-- Left section -->
37
- <div class="w-2/5 px-8">
37
+ <div class="lg:w-2/5">
38
38
  <div
39
39
  :class="[
40
40
  'p-8 rounded-[20px] text-left min-h-full',
@@ -62,40 +62,38 @@
62
62
  </div>
63
63
 
64
64
  <!-- Right section -->
65
- <div class="w-3/5 px-8 flex flex-col justify-between">
66
- <div class="mb-12">
67
- <div class="flex space-x-6">
68
- <div v-if="activeMembership.access" class="flex-1">
69
- <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.access.title }}</h4>
70
- <ul>
71
- <li
72
- v-for="(item, idx) in activeMembership.access.list"
73
- :key="`access-${activeMembership.id}-${idx}`"
74
- class="leading-6 flex items-top text-gray-600 mb-4"
75
- >
76
- <span class="flex items-center justify-center min-w-6 h-6 bg-success-100 text-success-500 rounded-full mr-3">
77
- <Check class="w-5 h-5"></Check>
78
- </span>
79
- {{ item }}
80
- </li>
81
- </ul>
82
- </div>
65
+ <div class="lg:w-3/5 flex flex-col gap-12 justify-between">
66
+ <div class="flex max-md:flex-col gap-6">
67
+ <div v-if="activeMembership.access" class="flex-1">
68
+ <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.access.title }}</h4>
69
+ <ul>
70
+ <li
71
+ v-for="(item, idx) in activeMembership.access.list"
72
+ :key="`access-${activeMembership.id}-${idx}`"
73
+ class="leading-6 flex items-top text-gray-600 mb-4"
74
+ >
75
+ <span class="flex items-center justify-center min-w-6 h-6 bg-success-100 text-success-500 rounded-full mr-3">
76
+ <Check class="w-5 h-5"></Check>
77
+ </span>
78
+ {{ item }}
79
+ </li>
80
+ </ul>
81
+ </div>
83
82
 
84
- <div v-if="activeMembership.excludes && activeMembership.excludes?.list?.length" class="flex-1">
85
- <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.excludes.title }}</h4>
86
- <ul>
87
- <li
88
- v-for="(item, idx) in activeMembership.excludes.list"
89
- :key="`excludes-${activeMembership.id}-${idx}`"
90
- class="leading-6 flex items-top text-gray-600 mb-4"
91
- >
92
- <span class="flex items-center justify-center min-w-6 h-6 bg-gray-100 rounded-full mr-3">
93
- <XIcon class="w-5 h-5"></XIcon>
94
- </span>
95
- {{ item }}
96
- </li>
97
- </ul>
98
- </div>
83
+ <div v-if="activeMembership.excludes && activeMembership.excludes?.list?.length" class="flex-1">
84
+ <h4 class="font-bold text-gray-900 leading-6 mb-6">{{ activeMembership.excludes.title }}</h4>
85
+ <ul>
86
+ <li
87
+ v-for="(item, idx) in activeMembership.excludes.list"
88
+ :key="`excludes-${activeMembership.id}-${idx}`"
89
+ class="leading-6 flex items-top text-gray-600 mb-4"
90
+ >
91
+ <span class="flex items-center justify-center min-w-6 h-6 bg-gray-100 rounded-full mr-3">
92
+ <XIcon class="w-5 h-5"></XIcon>
93
+ </span>
94
+ {{ item }}
95
+ </li>
96
+ </ul>
99
97
  </div>
100
98
  </div>
101
99
 
package/src/components/presenters/modules/LinkCard.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="link-card overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]">
3
+ <div class="pb-container my-[40px]">
4
4
  <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
5
5
  <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
6
6
  <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>
package/src/components/presenters/modules/LinkList.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <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%]">
3
+ <div class="pb-container bg-white py-[40px] flex flex-col lg:flex-row gap-8 xl:gap-[10%]">
4
4
  <div v-for="(header, index) in headerComponents" class="gap-4" :class="{'lg:w-1/2': section.two_columns}">
5
5
  <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="header">
6
6
  <h3 class="text-[36px] text-gray-900 font-semibold">{{ header.title }}</h3>
package/src/components/presenters/modules/LogoCloud.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
- <div class="w-full relative">
3
- <div class="1xl:max-w-[1824px] mx-auto relative flex justify-center items-center"
2
+ <div class="w-full relative max-md:px-4">
3
+ <div class="1xl:max-w-[1872px] mx-auto w-full sm:px-4 md:px-6 relative flex justify-center items-center"
4
4
  :class="{'py-8': isHorizontal, 'flex-col py-6': !isHorizontal}">
5
5
  <div v-for="(component, index) in section.components">
6
6
  <p v-if="component?.type === 'header' && component?.supporting_text"
package/src/components/presenters/modules/Paragraph.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden mt-4">
3
- <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 }">
3
+ <div class="pb-container 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 }">
4
4
  <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">
5
5
  <h3 class="text-[36px] text-gray-900 font-semibold" v-if="component?.title">
6
6
  {{ component.title }}
package/src/components/presenters/modules/QuickLinks.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="w-full bg-navy-800 py-10 relative lg:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
2
+ <div class="w-full bg-navy-800 max-md:px-4 py-10 relative lg:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
3
3
  <LeftVector class="absolute left-0 top-0 h-full max-w-full" v-if="section?.as_cta"></LeftVector>
4
4
  <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
5
5
  <div class="max-md:mx-[30px] 1xl:mx-0 relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
package/src/components/presenters/modules/StandardHeader.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <template>
2
- <div class="rounded-3xl md:rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
2
+ <div class="rounded-3xl md:rounded-[48px] 1xl:max-w-[1872px] mx-auto w-full sm:px-4 md:px-6">
3
3
  <div v-if="section.hasOwnProperty('components') > 0 && section.components.length > 0"
4
- class="md:px-[90px]"
5
4
  :class="{'flex flex-col items-center text-center': headerComponent?.center, 'mb-[64px]': hasFeaturedImage}">
6
5
  <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}">
7
6
  <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>
package/src/components/presenters/modules/TestimonialSlider.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <section>
3
- <div class="relative overflow-hidden bg-gray-50">
3
+ <div class="relative overflow-hidden bg-gray-50 max-md:px-4">
4
4
  <div
5
5
  class="flex w-full transition-transform duration-500 ease-in-out"
6
6
  :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
@@ -10,7 +10,7 @@
10
10
  :key="index"
11
11
  class="w-full flex-shrink-0 py-10"
12
12
  >
13
- <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">
13
+ <div class="pb-container flex flex-col-reverse lg:flex-row gap-8 xl:gap-x-16">
14
14
  <article class="flex-1 flex flex-col justify-center gap-8">
15
15
  <span class="flex items-center gap-1">
16
16
  <template v-for="star in 5">
@@ -38,7 +38,7 @@
38
38
  </div>
39
39
 
40
40
  <!-- Controls -->
41
- <footer class="flex max-w-[1640px] md:px-[120px] mx-auto w-full gap-4 relative">
41
+ <footer class="pb-container flex gap-4 relative">
42
42
  <div class="absolute bottom-[40px] right-0 md:right-[120px] xl:left-[120px] gap-4 flex">
43
43
  <button
44
44
  type="button"
package/src/components/presenters/modules/Timeline.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-[40px]">
3
+ <div class="pb-container mt-[40px]">
4
4
  <div class="rounded-xl px-[40px] text-center mb-1 max-w-[1280px] mx-auto" v-if="headerComponent">
5
5
  <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
6
6
  <p 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"></p>
package/src/components/presenters/modules/TwoColumnsImageContent.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div class="overflow-hidden">
3
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full mt-4 px-4">
3
+ <div class="pb-container mt-4 px-4">
4
4
  <div class="grid gap-1.5 lg:gap-4"
5
5
  :style="innerWidth >= 1024 ? 'grid-template-columns: 33% auto;' : ''"
6
6
  v-if="paragraphComponent">
package/src/components/presenters/modules/VTabs.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
2
+ <div class="pb-container">
3
3
  <div class="max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-3xl md:rounded-[48px] p-16">
4
4
  <div v-for="(component, index) in section.components">
5
5
  <component
package/example/.vscode/extensions.json DELETED
@@ -1,3 +0,0 @@
1
- {
2
- "recommendations": ["Vue.volar"]
3
- }