@myissue/vue-website-page-builder 3.0.18 → 3.0.19

package/src/index.ts

@@ -5,9 +5,15 @@ export { default as Preview } from './PageBuilder/Preview.vue'
 // Export stores
 export { usePageBuilderStateStore } from './stores/page-builder-state'
 export { useMediaLibraryStore } from './stores/media-library'
+export { useUserStore } from './stores/user'
 
-// Export PageBuilder composable/class
-export { default as PageBuilderComposable } from './composables/PageBuilder'
+export { default as PageBuilderClass } from './composables/PageBuilderClass'
+
+// Export composables
+export { usePageBuilderModal } from './composables/usePageBuilderModal'
+
+// Export types
+export type { PageBuilderUser, ComponentObject, ImageObject } from './types'
 
 // Export Pinia for convenience (same version as package uses)
 export { createPinia } from 'pinia'

package/src/stores/media-library.ts

@@ -1,15 +1,11 @@
 import { defineStore } from 'pinia'
+import type { ImageObject } from '@/types'
 
 interface MediaLibraryState {
   currentImage: ImageObject
   currentPreviewImage: string | null
 }
 
-interface ImageObject {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any
-}
-
 export const useMediaLibraryStore = defineStore('mediaLibrary', {
   state: (): MediaLibraryState => ({
     currentImage: {},

package/src/stores/page-builder-state.ts

@@ -1,21 +1,17 @@
 import { defineStore } from 'pinia'
+import { nextTick } from 'vue'
 import { vueFetch } from '@/composables/vueFetch'
-
-interface ComponentObject {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any
-}
-
-interface FetchedComponentsResponse {
-  components: ComponentObject[]
-  // Add other properties that might exist in the response
-  [key: string]: unknown
-}
+import type {
+  ComponentObject,
+  FetchedComponentsResponse,
+  SetPushComponentsPayload,
+  LoadComponentsData,
+} from '@/types'
 
 interface PageBuilderState {
+  pageBuilderLogo: string | null
   componentArrayAddMethod: string | null
   localStorageItemName: string | null
-  localStorageItemNameUpdate: string | null
   showModalTipTap: boolean
   menuRight: boolean
   borderStyle: string | null
@@ -53,21 +49,13 @@ interface PageBuilderState {
   fontMobile: string | null
   backgroundColor: string | null
   textColor: string | null
-  element: HTMLElement | null
+  element: (HTMLElement & { src?: string }) | null
   component: ComponentObject | null
   components: ComponentObject[]
   basePrimaryImage: string | null
   fetchedComponents: FetchedComponentsResponse | null
-}
-
-interface SetPushComponentsPayload {
-  componentArrayAddMethod?: string
-  component: ComponentObject
-}
-
-interface LoadComponentsData {
-  search_query?: string
-  page?: string | number
+  currentResourceData: { title: string; id: number } | null
+  updateOrCreate: string
 }
 
 // get components
@@ -81,9 +69,9 @@ const {
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
   state: (): PageBuilderState => ({
+    pageBuilderLogo: null,
     componentArrayAddMethod: null,
     localStorageItemName: null,
-    localStorageItemNameUpdate: null,
     showModalTipTap: false,
     menuRight: true,
     borderStyle: null,
@@ -126,17 +114,19 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     components: [],
     basePrimaryImage: null,
     fetchedComponents: null,
+    currentResourceData: null,
+    updateOrCreate: '',
   }),
   getters: {
+    getPageBuilderLogo(state: PageBuilderState): string | null {
+      return state.pageBuilderLogo
+    },
     getComponentArrayAddMethod(state: PageBuilderState): string | null {
       return state.componentArrayAddMethod
     },
     getLocalStorageItemName(state: PageBuilderState): string | null {
       return state.localStorageItemName
     },
-    getLocalStorageItemNameUpdate(state: PageBuilderState): string | null {
-      return state.localStorageItemNameUpdate
-    },
     getShowModalTipTap(state: PageBuilderState): boolean {
       return state.showModalTipTap
     },
@@ -276,17 +266,23 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getFetchedComponentsData(state: PageBuilderState): FetchedComponentsResponse | null {
       return state.fetchedComponents
     },
+    getCurrentResourceData(state: PageBuilderState): { title: string; id: number } | null {
+      return state.currentResourceData
+    },
+    getUpdateOrCreate(state: PageBuilderState): string {
+      return state.updateOrCreate
+    },
   },
   actions: {
+    setPageBuilderLogo(payload: string | null): void {
+      this.pageBuilderLogo = payload
+    },
     setComponentArrayAddMethod(payload: string | null): void {
       this.componentArrayAddMethod = payload
     },
     setLocalStorageItemName(payload: string | null): void {
       this.localStorageItemName = payload
     },
-    setLocalStorageItemNameUpdate(payload: string | null): void {
-      this.localStorageItemNameUpdate = payload
-    },
     setShowModalTipTap(payload: boolean): void {
       this.showModalTipTap = payload
     },
@@ -405,30 +401,44 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
       this.textColor = payload
     },
     setElement(payload: HTMLElement | null): void {
-      this.element = payload || null
+      this.element = {} as HTMLElement
+      nextTick(() => {
+        this.element = payload
+      })
     },
     setComponent(payload: ComponentObject | null): void {
+      console.log('setComponent called:', payload)
       if (!payload) {
         this.element = null
         this.component = null
-        // Note: pageBuilder.removeHoveredAndSelected(null) removed as pageBuilder is not available in store scope
         return
       }
-      this.component = payload || null
+      this.component = {} as ComponentObject
+      nextTick(() => {
+        this.component = payload
+      })
     },
+
     setComponents(payload: ComponentObject[] | null): void {
-      this.components = payload || []
+      this.components = {} as ComponentObject[]
+      nextTick(() => {
+        this.components = payload || []
+      })
     },
     setPushComponents(payload: SetPushComponentsPayload): void {
-      const method = payload.componentArrayAddMethod || 'push'
+      const method = payload.componentArrayAddMethod ?? 'push'
       if (method === 'push') {
         this.components.push(payload.component)
       } else if (method === 'unshift') {
         this.components.unshift(payload.component)
       }
     },
+
     setBasePrimaryImage(payload: string | null): void {
-      // Note: element manipulation removed as it should be handled by component logic
+      if (this.element) {
+        this.element.src = payload ?? undefined
+      }
+
       this.basePrimaryImage = payload
     },
     setCurrentLayoutPreview(payload: string): void {
@@ -457,5 +467,11 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
           : null,
       )
     },
+    setCurrentResourceData(payload: { title: string; id: number } | null): void {
+      this.currentResourceData = payload
+    },
+    setUpdateOrCreate(payload: string): void {
+      this.updateOrCreate = payload
+    },
   },
 })

package/src/stores/user.ts

@@ -1,23 +1,22 @@
 import { defineStore } from 'pinia'
+import type { UserSettings, User } from '@/types'
 
 interface UserState {
   isLoading: boolean
-  userSettings: Record<string, unknown> | null
-}
-
-interface UserSettings {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any
+  userSettings: UserSettings | null
+  currentUser: User | null
 }
 
 export const useUserStore = defineStore('user', {
   state: (): UserState => ({
     isLoading: false,
     userSettings: null,
+    currentUser: null,
   }),
   getters: {
     getIsLoading: (state: UserState): boolean => state.isLoading,
     getUserSettings: (state: UserState): UserSettings | null => state.userSettings,
+    getCurrentUser: (state: UserState): User | null => state.currentUser,
   },
   actions: {
     setIsLoading(payload: boolean): void {
@@ -26,5 +25,8 @@ export const useUserStore = defineStore('user', {
     setUserSettings(payload: UserSettings | null): void {
       this.userSettings = payload
     },
+    setCurrentUser(payload: User | null): void {
+      this.currentUser = payload
+    },
   },
 })

package/src/types/global.d.ts

@@ -1,49 +1,11 @@
-// Global type declarations for utility modules
-declare module '@/utils/builder/tailwaind-colors' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tailwindColors: any
-  export default tailwindColors
-}
-
-declare module '@/utils/builder/tailwind-opacities' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tailwindOpacities: any
-  export default tailwindOpacities
-}
-
-declare module '@/utils/builder/tailwind-font-sizes' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tailwindFontSizes: any
-  export default tailwindFontSizes
-}
-
-declare module '@/utils/builder/tailwind-font-styles' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tailwindFontStyles: any
-  export default tailwindFontStyles
-}
-
-declare module '@/utils/builder/tailwind-padding-margin' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tailwindPaddingAndMargin: any
-  export default tailwindPaddingAndMargin
-}
-
-declare module '@/utils/builder/tailwind-border-radius' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tailwindBorderRadius: any
-  export default tailwindBorderRadius
-}
-
-declare module '@/utils/builder/tailwind-border-style-width-color' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const tailwindBorderStyleWidthPlusColor: any
-  export default tailwindBorderStyleWidthPlusColor
-}
+// Global type declarations
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
+  const component: DefineComponent<
+    Record<string, unknown>,
+    Record<string, unknown>,
+    Record<string, unknown>
+  >
   export default component
 }

package/src/types/index.ts

@@ -0,0 +1,169 @@
+// Central type definitions for the Vue Page Builder project
+
+// Component and Image interfaces
+export interface ComponentObject {
+  id: string | number | null
+  html_code: string
+  title: string
+}
+
+export interface ImageObject {
+  src: string
+}
+
+// Store interfaces for better type safety
+export interface PageBuilderStateStore {
+  getTextAreaVueModel: string | null
+  LocalStorageItemName: string | null
+  getHyberlinkEnable: boolean
+  getComponents: ComponentObject[] | null
+  getComponent: ComponentObject | null
+  getElement: HTMLElement | null
+  getNextSibling: HTMLElement | null
+  getParentElement: HTMLElement | null
+  getRestoredElement: string | null
+  getComponentArrayAddMethod: string | null
+  getFontBase: string | null
+  getFontDesktop: string | null
+  getFontTablet: string | null
+  getFontMobile: string | null
+  getUpdateOrCreate: string
+  getCurrentResourceData: { title: string; id: number } | null
+  setElement: (element: HTMLElement | null) => void
+  setMenuRight: (value: boolean) => void
+  setComponent: (component: ComponentObject | null) => void
+  setComponents: (components: ComponentObject[] | null) => void
+  setComponentArrayAddMethod: (method: string) => void
+  setCurrentClasses: (classes: string[] | ArrayLike<string>) => void
+  setClass: (className: string) => void
+  removeClass: (className: string) => void
+  setParentElement: (element: HTMLElement | Node | null) => void
+  setRestoredElement: (html: string | null) => void
+  setNextSibling: (element: HTMLElement | Node | null) => void
+  setTextAreaVueModel: (html: string | null) => void
+  setFontBase: (size: string | null) => void
+  setFontDesktop: (size: string | null) => void
+  setFontTablet: (size: string | null) => void
+  setFontMobile: (size: string | null) => void
+  setBasePrimaryImage: (url: string | null) => void
+  setCurrentLayoutPreview: (html: string) => void
+  setHyperlinkError: (error: string | null) => void
+  setHyperlinkMessage: (message: string | null) => void
+  setElementContainsHyperlink: (contains: boolean) => void
+  setHyberlinkEnable: (enable: boolean) => void
+  setHyperlinkInput: (input: string) => void
+  setOpenHyperlinkInNewTab: (newTab: boolean) => void
+  setHyperlinkAbility: (ability: boolean) => void
+  setPushComponents: (payload: SetPushComponentsPayload) => void
+  setLocalStorageItemName: (name: string | null) => void
+  setUpdateOrCreate: (mode: string) => void
+  setCurrentResourceData: (data: { title: string; id: number } | null) => void
+  setFontWeight: (weight: string) => void
+  setFontFamily: (family: string) => void
+  setFontStyle: (style: string) => void
+  setFontVerticalPadding: (padding: string) => void
+  setFontHorizontalPadding: (padding: string) => void
+  setFontVerticalMargin: (margin: string) => void
+  setFontHorizontalMargin: (margin: string) => void
+  setBorderStyle: (style: string) => void
+  setBorderWidth: (width: string) => void
+  setBorderColor: (color: string) => void
+  setBorderRadiusGlobal: (radius: string) => void
+  setBorderRadiusTopLeft: (radius: string) => void
+  setBorderRadiusTopRight: (radius: string) => void
+  setBorderRadiusBottomleft: (radius: string) => void
+  setBorderRadiusBottomRight: (radius: string) => void
+  setBackgroundColor: (color: string) => void
+  setTextColor: (color: string) => void
+  setBackgroundOpacity: (opacity: string) => void
+  setOpacity: (opacity: string) => void
+  [key: string]: unknown
+}
+
+export interface MediaLibraryStore {
+  getCurrentImage: ImageObject | null
+  setCurrentImage: (image: ImageObject) => void
+  getCurrentPreviewImage: string | null
+  setCurrentPreviewImage: (url: string | null) => void
+}
+
+// User interfaces
+export interface User {
+  name: string
+}
+
+// Specific user interface for page builder usage
+export interface PageBuilderUser {
+  name: string
+}
+
+// User settings interface
+export interface UserSettings {
+  theme?: 'light' | 'dark' | 'auto'
+  language?: string
+  notifications?: boolean
+  autoSave?: boolean
+  [key: string]: unknown
+}
+
+// Tailwind utility interfaces
+export interface TailwindColors {
+  backgroundColorVariables: string[]
+  textColorVariables: string[]
+}
+
+export interface TailwindOpacities {
+  opacities: string[]
+  backgroundOpacities: string[]
+}
+
+export interface TailwindFontSizes {
+  fontBase: string[]
+  fontDesktop: string[]
+  fontTablet: string[]
+  fontMobile: string[]
+}
+
+export interface TailwindFontStyles {
+  fontStyles: string[]
+}
+
+export interface TailwindPaddingAndMargin {
+  paddingAndMargin: string[]
+}
+
+export interface TailwindBorderRadius {
+  borderRadius: string[]
+}
+
+export interface TailwindBorderStyleWidthColor {
+  borderStyles: string[]
+  borderWidths: string[]
+  borderColors: string[]
+}
+
+// Utility types
+export type TimerHandle = ReturnType<typeof setTimeout>
+export type MutationObserver = globalThis.MutationObserver
+
+// Fetch response interfaces
+export interface FetchedComponentsResponse {
+  components: ComponentObject[]
+  pagination?: {
+    current_page: number
+    last_page: number
+    per_page: number
+    total: number
+  }
+  [key: string]: unknown
+}
+
+export interface SetPushComponentsPayload {
+  componentArrayAddMethod?: string
+  component: ComponentObject
+}
+
+export interface LoadComponentsData {
+  search_query?: string
+  page?: string | number
+}

package/src/utils/html-elements/component.ts

@@ -0,0 +1,88 @@
+interface ComponentData {
+  title: string
+  html_code: string
+  cover_image: string
+}
+
+interface Components {
+  components: {
+    data: ComponentData[]
+  }
+}
+
+const component: Components[] = [
+  {
+    components: {
+      data: [
+        {
+          title: 'Single Image',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div></div></div>\n</section>',
+          cover_image: '/page-builder/image.png',
+        },
+        {
+          title: '2 vertical images',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div>   </div> </div> </div>\n</section>',
+          cover_image: '/page-builder/two-vertical-images.png',
+        },
+        {
+          title: '2 images',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
+          cover_image: '/page-builder/3-images.png',
+        },
+        {
+          title: '3 images',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
+          cover_image: '/page-builder/2-images.png',
+        },
+        {
+          title: '6 Images Grid',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div class="grid grid-cols-2 md:grid-cols-3 myPrimaryGap">\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n<div>\n<img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="image">\n</div>\n\n</div>\n</div>\n</div>\n</section>',
+          cover_image: '/page-builder/6-images.png',
+        },
+        {
+          title: 'Two Images With Right Text Top',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl">\n<div class="myPrimaryGap lg:flex lg:justify-center"><div class="flex-1 py-2">\n<div class="grid myPrimaryGap grid-cols-1 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div>   </div> </div>\n\n<div class="flex-1 py-2"> <div class="break-words py-2"><p><strong>Title</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div></div> \n</div></div></div>\n</section>',
+          cover_image: '/page-builder/2-images-text-top.png',
+        },
+        {
+          title: '3 Vertical Images',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider">  </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-[9/16] smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"></div></div> </div></div>\n</section>',
+          cover_image: '/page-builder/3-vertical-images.png',
+        },
+        {
+          title: 'Link Button',
+          html_code:
+            '<section>\n<div class="w-full md:pt-2 md:pb-2 pt-4 pb-4 lg:px-4 px-2">\n<div class="mx-auto max-w-7xl">\n<div id="linktree" class="border-2 border-gray-600 flex items-centre justify-start rounded-md font-medium text-black">\n<p>\n<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.example.com">Link to landing page</a>\n</p>\n</div>\n</div>\n</div>\n</section>',
+          cover_image: '/page-builder/image.png',
+        },
+        {
+          title: '4 Images With Text',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"><div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> </div> </div> </div>\n</section>',
+          cover_image: '/page-builder/4-images-text.png',
+        },
+        {
+          title: '3 Images With Text',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div>  </div> </div> </div>\n</section>',
+          cover_image: '/page-builder/3-images-text.png',
+        },
+        {
+          title: '2 Images With Text',
+          html_code:
+            '<section>\n<div class="w-full md:pt-12 md:pb-12 pt-4 pb-4 lg:px-4 px-2"><div class="mx-auto max-w-7xl"><div class="myPrimaryGap grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-2"> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div> <div class="flex-1 py-2"> <img class="object-cover w-full object-top aspect-square smooth-transition" src="/page-builder/placeholder.jpg" alt="provider"> <div class="break-words py-2"><p>Layouts and visual.</p><p>Ullamcorper dignissim cras tincidunt.</p></div> </div>   </div> </div> </div>\n</section>',
+          cover_image: '/page-builder/2-images-text.png',
+        },
+      ],
+    },
+  },
+]
+
+export default component