@myissue/vue-website-page-builder 3.3.71 → 3.3.73

package/src/locales/ru.json

@@ -0,0 +1,86 @@
+{
+  "Reset Page": "Сбросить страницу",
+  "Global Page Styles": "Глобальные стили страницы",
+  "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.": "Попробуйте мощный Click & Drop Page Builder — разработанный для разработчиков и создателей, которые хотят полного контроля без лишних хлопот. Настраивайте макеты, шрифты и цвета. Редактируйте контент визуально в реальном времени. Добавляйте медиа, встраивайте видео с YouTube или экспортируйте все в виде чистого HTML. С адаптивным редактированием, локальным автосохранением, поддержкой Tailwind и даже интеграцией Unsplash, это все, что вам нужно — в одном бесшовном конструкторе. Создавайте потрясающие страницы за считанные минуты.",
+  "A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.": "Конструктор страниц, созданный для роста. Создавайте страницы вашего сайта с готовыми компонентами, которые полностью настраиваются и всегда адаптивны, разработаны для удовлетворения любых потребностей. Мощный конструктор страниц для растущих торговцев, брендов и агентств.",
+  "Everything you need. Break free from design limitations": "Все, что вам нужно. Освободитесь от ограничений дизайна",
+  "Bring your vision to life and create impressive pages using a click & drop Page Builder": "Воплотите свою мечту в жизнь и создавайте впечатляющие страницы с помощью конструктора страниц с функцией перетаскивания",
+  "The web builder for stunning pages. Enable users to design and publish modern pages at any scale. Build responsive pages like listings, jobs or blog posts and manage content easily using the free click & drop Page Builder. Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML.": "Веб-конструктор для потрясающих страниц. Позвольте пользователям разрабатывать и публиковать современные страницы любого масштаба. Создавайте адаптивные страницы, такие как списки, вакансии или блоги, и легко управляйте контентом с помощью бесплатного конструктора страниц Click & Drop. Разработано с использованием TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS и HTML.",
+  "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via": "Скачайте или установите наш мощный, гибкий и удобный бесплатный Vue 3 Page Builder через",
+  "Save": "Сохранить",
+  "Add new Components": "Добавить новые компоненты",
+  "Options": "Опции",
+  "Config Overview": "Обзор конфигурации",
+  "HTML Overview": "Обзор HTML",
+  "Delete Layout": "Удалить макет",
+  "avatar": "аватар",
+  "Publish": "Опубликовать",
+  "Add Components to Page": "Добавить компоненты на страницу",
+  "Close": "Закрыть",
+  "Helper Components": "Вспомогательные компоненты",
+  "Click to add": "Нажмите, чтобы добавить",
+  "component": "компонент",
+  "Layout Components": "Компоненты макета",
+  "Click to add component": "Нажмите, чтобы добавить компонент",
+  "Remove all Components": "Удалить все компоненты",
+  "Are you sure you want to remove all Components?": "Вы уверены, что хотите удалить все компоненты?",
+  "Styles": "Стили",
+  "Apply styles that affect the entire page. These settings include global font family, text color, background color, and other universal styles that apply to all sections.": "Примените стили, которые влияют на всю страницу. Эти настройки включают глобальный шрифт, цвет текста, цвет фона и другие универсальные стили, которые применяются ко всем разделам.",
+  "Update Page Styles": "Обновить стили страницы",
+  "Download HTML": "Скачать HTML",
+  "Export the entire page as a standalone HTML file. This includes all sections, content, and applied styles, making it ready for use or integration elsewhere.": "Экспортируйте всю страницу как автономный HTML-файл. Это включает все разделы, содержимое и примененные стили, делая его готовым к использованию или интеграции в другом месте.",
+  "Download HTML file": "Скачать HTML файл",
+  "Typographies": "Типографии",
+  "Font Appearance": "Внешний вид шрифта",
+  "Font Size": "Размер шрифта",
+  "Select": "Выбрать",
+  "Font size": "Размер шрифта",
+  "Font tablet size": "Размер шрифта для планшетов",
+  "Font small screens": "Размер шрифта для маленьких экранов",
+  "Font weight": "Толщина шрифта",
+  "Font family": "Семейство шрифтов",
+  "Font Style": "Стиль шрифта",
+  "Opacity & Transparency": "Непрозрачность и Прозрачность",
+  "Padding": "Отступ",
+  "Vertical Padding": "Вертикальный отступ",
+  "Horizontal Padding": "Горизонтальный отступ",
+  "Margin": "Поле",
+  "Vertical Margin": "Вертикальное поле",
+  "Horizontal Margin": "Горизонтальное поле",
+  "Border Radius": "Радиус границы",
+  "Global": "Глобальный",
+  "Specific": "Специфический",
+  "Border Radius top left": "Радиус границы сверху слева",
+  "Border Radius top right": "Радиус границы сверху справа",
+  "Border Radius bottom left": "Радиус границы снизу слева",
+  "Border Radius bottom right": "Радиус границы снизу справа",
+  "Border Style, Width & Color": "Стиль, ширина и цвет границы",
+  "Border": "Граница",
+  "Border Style": "Стиль границы",
+  "Border Width": "Ширина границы",
+  "Border Color": "Цвет границы",
+  "Transparent": "Прозрачный",
+  "Generated CSS": "Сгенерированный CSS",
+  "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.": "Это CSS, применяемый конструктором. Добавьте свой CSS и нажмите Enter, чтобы применить его к выбранному элементу.",
+  "Add your CSS.": "Добавьте свой CSS.",
+  "The pbx- prefix is added automatically.": "Префикс pbx- добавляется автоматически.",
+  "Type class": "Введите класс",
+  "Add": "Добавить",
+  "Inline Styles": "Встроенные стили",
+  "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.": "Это встроенные стили, применяемые конструктором. Добавьте свои стили и нажмите Enter, чтобы применить их к выбранному элементу.",
+  "Add your own style.": "Добавьте свой стиль.",
+  "property": "свойство",
+  "value": "значение",
+  "close": "закрыть",
+  "Editing": "Редактирование",
+  "Loading...": "Загрузка...",
+  "Background Color": "Цвет фона",
+  "Text Color": "Цвет текста",
+  "Default black": "Черный по умолчанию",
+  "Remove Component?": "Удалить компонент?",
+  "Are you sure you want to remove this Component?": "Вы уверены, что хотите удалить этот компонент?",
+  "Delete": "Удалить",
+  "Add to the bottom": "Добавить в конец",
+  "Preview": "Предварительный просмотр",
+  "Mobile": "Мобильный"
+}

package/src/locales/zh-Hans.json

@@ -0,0 +1,86 @@
+{
+  "Reset Page": "重置页面",
+  "Global Page Styles": "全局页面样式",
+  "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.": "试试强大的Click & Drop Page Builder——专为希望完全控制而无需麻烦的开发者和创作者设计。自定义布局、字体和颜色。实时可视化编辑内容。添加媒体、嵌入YouTube视频或将所有内容导出为干净的HTML。凭借响应式编辑、本地自动保存、Tailwind支持，甚至Unsplash集成，它是您所需的一切——集成在一个无缝的构建器中。几分钟内构建令人惊叹的页面。",
+  "A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.": "为增长而设计的页面构建器。使用完全可定制且始终响应的现成组件构建您的网站页面，旨在满足所有需求。为不断发展的商家、品牌和代理商提供强大的页面构建器。",
+  "Everything you need. Break free from design limitations": "您需要的一切。突破设计限制",
+  "Bring your vision to life and create impressive pages using a click & drop Page Builder": "实现您的愿景，并使用点击和拖放页面构建器创建令人印象深刻的页面",
+  "The web builder for stunning pages. Enable users to design and publish modern pages at any scale. Build responsive pages like listings, jobs or blog posts and manage content easily using the free click & drop Page Builder. Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML.": "令人惊叹页面的网页构建器。使用户能够设计和发布任何规模的现代页面。创建响应式页面，例如列表、工作或博客文章，并使用免费的点击和拖放页面构建器轻松管理内容。使用 TypeScript、Vue 3、Composition API、Pinia、CSS、Tailwind CSS 和 HTML 开发。",
+  "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via": "通过下载或安装我们强大、灵活且易于使用的免费 Vue 3 页面构建器",
+  "Save": "保存",
+  "Add new Components": "添加新组件",
+  "Options": "选项",
+  "Config Overview": "配置概览",
+  "HTML Overview": "HTML概览",
+  "Delete Layout": "删除布局",
+  "avatar": "头像",
+  "Publish": "发布",
+  "Add Components to Page": "将组件添加到页面",
+  "Close": "关闭",
+  "Helper Components": "辅助组件",
+  "Click to add": "点击添加",
+  "component": "组件",
+  "Layout Components": "布局组件",
+  "Click to add component": "点击添加组件",
+  "Remove all Components": "删除所有组件",
+  "Are you sure you want to remove all Components?": "您确定要删除所有组件吗？",
+  "Styles": "样式",
+  "Apply styles that affect the entire page. These settings include global font family, text color, background color, and other universal styles that apply to all sections.": "应用影响整个页面的样式。这些设置包括全局字体系列、文本颜色、背景颜色和适用于所有部分的其他通用样式。",
+  "Update Page Styles": "更新页面样式",
+  "Download HTML": "下载HTML",
+  "Export the entire page as a standalone HTML file. This includes all sections, content, and applied styles, making it ready for use or integration elsewhere.": "将整个页面导出为独立的HTML文件。这包括所有部分、内容和应用的样式，使其可以随时使用或集成到其他地方。",
+  "Download HTML file": "下载HTML文件",
+  "Typographies": "排版",
+  "Font Appearance": "字体外观",
+  "Font Size": "字体大小",
+  "Select": "选择",
+  "Font size": "字体大小",
+  "Font tablet size": "平板字体大小",
+  "Font small screens": "小屏幕字体大小",
+  "Font weight": "字体粗细",
+  "Font family": "字体家族",
+  "Font Style": "字体样式",
+  "Opacity & Transparency": "不透明度和透明度",
+  "Padding": "内边距",
+  "Vertical Padding": "垂直内边距",
+  "Horizontal Padding": "水平内边距",
+  "Margin": "边距",
+  "Vertical Margin": "垂直边距",
+  "Horizontal Margin": "水平边距",
+  "Border Radius": "边框半径",
+  "Global": "全局",
+  "Specific": "具体",
+  "Border Radius top left": "边框半径 左上",
+  "Border Radius top right": "边框半径 右上",
+  "Border Radius bottom left": "边框半径 左下",
+  "Border Radius bottom right": "边框半径 右下",
+  "Border Style, Width & Color": "边框样式、宽度和颜色",
+  "Border": "边框",
+  "Border Style": "边框样式",
+  "Border Width": "边框宽度",
+  "Border Color": "边框颜色",
+  "Transparent": "透明",
+  "Generated CSS": "生成的CSS",
+  "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.": "这是构建器应用的CSS。添加您自己的CSS并按Enter将其应用于选定的元素。",
+  "Add your CSS.": "添加您的CSS。",
+  "The pbx- prefix is added automatically.": "pbx-前缀会自动添加。",
+  "Type class": "输入类",
+  "Add": "添加",
+  "Inline Styles": "内联样式",
+  "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.": "这些是构建器应用的内联样式。添加您自己的样式，然后按 Enter 将其应用于选定的元素。",
+  "Add your own style.": "添加您自己的样式。",
+  "property": "属性",
+  "value": "值",
+  "close": "关闭",
+  "Editing": "编辑",
+  "Loading...": "加载中...",
+  "Background Color": "背景颜色",
+  "Text Color": "文字颜色",
+  "Default black": "默认黑色",
+  "Remove Component?": "删除组件？",
+  "Are you sure you want to remove this Component?": "您确定要删除此组件吗？",
+  "Delete": "删除",
+  "Add to the bottom": "添加到底部",
+  "Preview": "预览",
+  "Mobile": "移动"
+}

package/src/main.ts

@@ -1,15 +1,14 @@
 import './css/dev-global.css'
-import './css/app.css'
-import { initPageBuilder } from './composables/builderInstance'
+import './css/style.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
-
-initPageBuilder()
+import { pageBuilder } from './plugin'
 
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(pageBuilder)
 
 app.mount('#app')

package/src/plugin.ts

@@ -0,0 +1,16 @@
+// src/plugin.ts
+import type { App } from 'vue';
+import { PageBuilderService } from './services/PageBuilderService';
+import { sharedPageBuilderStore } from './stores/shared-store';
+import { setBuilderInstance } from './composables/builderInstance';
+
+export const pageBuilder = {
+  install: (app: App): void => {
+    if (!app.config.globalProperties.$pageBuilder) {
+      const pageBuilderStateStore = sharedPageBuilderStore;
+      const instance = new PageBuilderService(pageBuilderStateStore);
+      setBuilderInstance(instance);
+      app.config.globalProperties.$pageBuilder = instance;
+    }
+  },
+};

package/src/services/PageBuilderService.ts

@@ -129,6 +129,10 @@ export class PageBuilderService {
   public availableLanguage(): AvailableLanguage[] {
     return AVAILABLE_LANGUAGES
   }
+
+  public changeLanguage(lang: string) {
+    this.pageBuilderStateStore.setCurrentLanguage(lang)
+  }
   // Deselect any selected or hovered elements in the builder UI
   async clearHtmlSelection(): Promise<void> {
     this.pageBuilderStateStore.setComponent(null)
@@ -264,6 +268,55 @@ export class PageBuilderService {
     return
   }
 
+  private ensureLanguage(config: PageBuilderConfig): void {
+    // Set default language config if missing, empty, or language missing/empty
+    const defaultLang = 'en'
+    const defaultEnable = ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'] as const
+
+    let needsDefault = false
+    const userSettings = config.userSettings
+    const language = userSettings && userSettings.language
+
+    if (!userSettings || isEmptyObject(userSettings)) {
+      needsDefault = true
+    } else if (!language || isEmptyObject(language)) {
+      needsDefault = true
+    }
+
+    if (needsDefault) {
+      const updatedLanguage = {
+        ...config,
+        userSettings: {
+          ...userSettings,
+          language: {
+            default: defaultLang,
+            enable: defaultEnable as typeof defaultEnable,
+          },
+        },
+      } as const
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedLanguage)
+      return
+    }
+
+    // Ensure default is in enable array
+    if (language && Array.isArray(language.enable) && language.default) {
+      if (!language.enable.includes(language.default)) {
+        const updatedEnable = [...language.enable, language.default]
+        const updatedLanguage = {
+          ...config,
+          userSettings: {
+            ...userSettings,
+            language: {
+              ...language,
+              enable: updatedEnable,
+            },
+          },
+        } as const
+        this.pageBuilderStateStore.setPageBuilderConfig(updatedLanguage)
+      }
+    }
+  }
+
   private validateConfig(config: PageBuilderConfig): void {
     const defaultConfigValues = {
       updateOrCreate: {
@@ -280,6 +333,15 @@ export class PageBuilderService {
     if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
       this.ensureUpdateOrCreateConfig(config)
     }
+
+    this.ensureLanguage(config)
+  }
+
+  public saveUserSettingsStorage(newLang: string) {
+    localStorage.setItem(
+      'userSettingsPageBuilder',
+      JSON.stringify({ userSettings: { lang: newLang } }),
+    )
   }
 
   /**
@@ -422,7 +484,7 @@ export class PageBuilderService {
         if (localStorageData && this.isPageBuilderMissingOnStart) {
           console.log('8888:', internalPageBuilderCall)
           await this.completeMountProcess(JSON.stringify(this.pendingMountComponents), true)
-          await delay(3000)
+          await delay(400)
           this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
           this.pendingMountComponents = null
           return
@@ -799,33 +861,10 @@ export class PageBuilderService {
 
   public handleManualSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
-
-    // Check if config is set
-    if (passedConfig && passedConfig.userSettings) {
-      //
-      //
-      // Enabled auto save
-      if (
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          !passedConfig.userSettings.autoSave) ||
-        (typeof passedConfig.userSettings.autoSave === 'boolean' &&
-          passedConfig.userSettings.autoSave)
-      ) {
-        this.pageBuilderStateStore.setIsSaving(true)
-        this.saveDomComponentsToLocalStorage()
-        await delay(400)
-
-        this.pageBuilderStateStore.setIsSaving(false)
-      }
-    }
-    if (passedConfig && !passedConfig.userSettings) {
-      this.pageBuilderStateStore.setIsSaving(true)
-      this.saveDomComponentsToLocalStorage()
-      await delay(400)
-
-      this.pageBuilderStateStore.setIsSaving(false)
-    }
+    this.pageBuilderStateStore.setIsSaving(true)
+    this.saveDomComponentsToLocalStorage()
+    await delay(400)
+    this.pageBuilderStateStore.setIsSaving(false)
   }
 
   public cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {

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

@@ -67,7 +67,7 @@ interface PageBuilderState {
   hasLocalDraftForUpdate: boolean
   isResumeEditing: boolean
   isRestoring: boolean
-  currentLanguage: string
+  currentLanguage: string | null
 }
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
@@ -130,7 +130,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     hasLocalDraftForUpdate: false,
     isResumeEditing: false,
     isRestoring: false,
-    currentLanguage: 'en',
+    currentLanguage: null,
   }),
   getters: {
     // Core Page Builder Getters
@@ -286,7 +286,7 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getHasLocalDraftForUpdate: (state: PageBuilderState): boolean => state.hasLocalDraftForUpdate,
     getIsLoadingResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
     getIsRestoring: (state: PageBuilderState): boolean => state.isRestoring,
-    getCurrentLanguage: (state: PageBuilderState): string => state.currentLanguage,
+    getCurrentLanguage: (state: PageBuilderState): string | null => state.currentLanguage,
   },
   actions: {
     setComponentArrayAddMethod(payload: string | null): void {

package/src/tests/PageBuilderTest.vue

@@ -6,50 +6,10 @@ import DemoBuilderComponentsTest from '../tests/TestComponents/DemoBuilderCompon
 import { onMounted } from 'vue'
 import componentsArray from '../tests/componentsArray.test.json'
 import { getPageBuilder } from '../composables/builderInstance'
-const pageBuilderService = getPageBuilder()
+import { useTranslations } from '../composables/useTranslations'
 
-const features = [
-  {
-    name: 'Live Drag & Drop Builder',
-    description:
-      'Click & Drop content on a page and watch your pages come to life. Bring your vision to life and create impressive pages using a click & drop Page Builder',
-  },
-  {
-    name: 'True Visual Editing',
-    description:
-      'See your changes in real-time as you make them. Elevate your creative vision and create pages using an intuitive click & drop page builder. Break free from design limitations and turn your visions into reality.',
-  },
-  {
-    name: 'Features',
-    description:
-      'Click & Drop, Reordering, True Visual Editing, Responsive Editing, Font Customization, Undo & Redo, Text Editing, Media Library, Unsplash Integration, YouTube Videos.',
-  },
-  {
-    name: 'Technologies',
-    description:
-      'Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML.',
-  },
-  {
-    name: 'Set Brand and Link Colors one place',
-    description:
-      'Global Styles for fonts, designs, & colors. Set Brand and Link Colors once and apply them across the entire Platform with ease.',
-  },
-  {
-    name: 'Mobile-First Approach',
-    description:
-      'Developed with Mobile-First approach. The Page Builder even works on mobile phones.',
-  },
-  {
-    name: 'Media Library',
-    description:
-      'A beautiful and user-friendly media library that allows you to change and update images. Unsplash Integration is included.',
-  },
-  {
-    name: 'Minimal and Intuitive Design',
-    description:
-      'Beautiful, elegant and intuitive design. Enhance user engagement with amazing visual experience.',
-  },
-]
+const pageBuilderService = getPageBuilder()
+const { translate } = useTranslations()
 
 const publishPageBuilder = function () {}
 
@@ -81,18 +41,22 @@ const configPageBuilder = {
   userSettings: {
     theme: 'light',
     language: {
-      default: 'en',
-      disable: ['fr', 'es'],
+      default: 'zh-Hans',
+      enable: ['en', 'zh-Hans', 'fr', 'ja', 'ru', 'es', 'pt', 'de', 'ar', 'hi'],
+      disableLanguageDropDown: false,
     },
+    autoSave: true,
   },
+
   settings: {
     brandColor: '#DB93B0',
   },
-  pageSettings,
+  pageSettings: pageSettings,
 } as const
 
 onMounted(async () => {
-  const result = await pageBuilderService.startBuilder(configPageBuilder, components)
+  // const result = await pageBuilderService.startBuilder(configPageBuilder, components)
+  const result = await pageBuilderService.startBuilder(configPageBuilder)
   console.log('Page Builder inspect the result for message, status, or error::', result)
 })
 </script>
@@ -102,19 +66,27 @@ onMounted(async () => {
     <div class="pbx-myPrimaryWidthScreenModule pbx-bg-red-50 lg:pbx-block">
       <div class="pbx-myPrimaryContentSection">
         <h2 class="pbx-mySecondaryHeader">
-          Bring your vision to life and create impressive pages using a click & drop Page Builder
+          {{
+            translate(
+              'Bring your vision to life and create impressive pages using a click & drop Page Builder',
+            )
+          }}
         </h2>
         <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          The web builder for stunning pages. Enable users to design and publish modern pages at any
-          scale. Build responsive pages like listings, jobs or blog posts and manage content easily
-          using the free click & drop Page Builder. Developed with TypeScript, Vue 3, Composition
-          API, Pinia, CSS, Tailwind CSS and HTML.
-
+          {{
+            translate(
+              'The web builder for stunning pages. Enable users to design and publish modern pages at any scale. Build responsive pages like listings, jobs or blog posts and manage content easily using the free click & drop Page Builder. Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML.',
+            )
+          }}
           <br />
         </p>
         <div class="pbx-mt-4">
           <p class="pbx-myPrimaryParagraph pbx-font-normal">
-            Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via
+            {{
+              translate(
+                'Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via',
+              )
+            }}
             <br />
             <strong> npm:</strong>
             <a
@@ -138,34 +110,26 @@ onMounted(async () => {
     </div>
 
     <FullWidthElement :descriptionArea="true" class="pbx-bg-gray-50">
-      <template #title>Everything you need. Break free from design limitations </template>
+      <template #title>
+        {{ translate('Everything you need. Break free from design limitations') }}
+      </template>
       <template #description>
         <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          A Page Builder designed for growth. Build your website pages with ready-made components
-          that are fully customizable and always responsive, designed to fit every need. A powerful
-          Page Builder for growing merchants, brands, and agencies.
+          {{
+            translate(
+              'A Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies.',
+            )
+          }}
         </p>
       </template>
       <template #content>
-        <div
-          class="pbx-grid pbx-grid-cols-1 pbx-gap-8 sm:pbx-grid-cols-2 md:pbx-grid-cols-2 lg:pbx-grid-cols-4 pbx-mt-8"
-        >
-          <div
-            v-for="feature in features"
-            :key="feature.name"
-            class="pbx-bg-red-200 pbx-bg-opacity-20 hover:pbx-bg-opacity-10 pbx-w-full lg:pbx-min-h-[20rem] pbx-min-h-[12rem] pbx-relative pbx-col-span-1 pbx-flex pbx-flex-col pbx-text-center pbx-rounded-lg pbx-shadow-sm pbx-outline pbx-outline-2 pbx-outline-offset-8 pbx-outline-yellow-400"
-          >
-            <div
-              class="pbx-bg-black/0 pbx-absolute pbx-top-0 pbx-left-0 pbx-w-full pbx-h-full pbx-rounded-lg"
-            ></div>
-            <div class="pbx-px-2 pbx-pt-8 pbx-absolute pbx-top-0 pbx-w-full">
-              <p class="pbx-myTertiaryHeader">{{ feature.name }}</p>
-              <p class="pbx-myPrimaryParagraph pbx-font-medium pbx-drop-shadow-sm">
-                {{ feature.description }}
-              </p>
-            </div>
-          </div>
-        </div>
+        <p class="pbx-myPrimaryParagraph pbx-font-normal">
+          {{
+            translate(
+              "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.",
+            )
+          }}
+        </p>
       </template>
     </FullWidthElement>
   </div>

package/src/types/index.ts

@@ -229,7 +229,7 @@ export interface PageBuilderConfig {
     theme?: 'light' | 'dark' | 'auto'
     language?: {
       default: 'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi'
-      disable?: ReadonlyArray<
+      enable?: ReadonlyArray<
         'en' | 'zh-Hans' | 'fr' | 'ja' | 'ru' | 'es' | 'pt' | 'de' | 'ar' | 'hi'
       >
     }

package/src/utils/builder/html-doc-declaration-with-components.ts

@@ -1,4 +1,4 @@
-import tailwindCSS from '../../css/app.css?inline'
+import tailwindCSS from '../../css/style.css?inline'
 
 const fullHTMLContent = function (HTML: string): string {
   return `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${tailwindCSS}</style></head><body>${HTML}</body></html>`