@myissue/vue-website-page-builder 3.3.65 → 3.3.67

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -156,7 +156,7 @@ const openHTMLSettings = function () {
         <!-- Component Start -->
         <div class="pbx-relative pbx-group">
           <button type="button" class="pbx-mySecondaryButton pbx-font-normal pbx-text-xs">
-            <span> Options </span>
+            <span> {{ $t('options.button') }} </span>
           </button>
           <div
             class="pbx-absolute pbx-left-0 -pbx-ml-16 -pbx-mt-2 pbx-flex pbx-flex-col pbx-gap-3 pbx-shadow-lg pbx-bg-white pbx-w-max pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-2xl pbx-transition-all pbx-duration-200 pbx-ease-out pbx-pt-4 pbx-pr-4 pbx-pb-4 pbx-pl-2 pbx-z-30 pbx-opacity-0 pbx-pointer-events-none pbx-translate-y-2 group-hover:pbx-opacity-100 group-hover:pbx-pointer-events-auto group-hover:pbx-translate-y-0"
@@ -172,7 +172,7 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              Config Overview
+              <span> {{ $t('options.configOverview') }} </span>
             </button>
             <!-- Main Settings End -->
 
@@ -182,7 +182,7 @@ const openHTMLSettings = function () {
               class="pbx-mySecondaryButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              HTML Overview
+              <span> {{ $t('options.htmlOverview') }} </span>
             </button>
             <!-- HTML Settings End -->
 
@@ -192,7 +192,7 @@ const openHTMLSettings = function () {
               class="pbx-myPrimaryDeleteButton pbx-text-xs pbx-font-normal"
               type="button"
             >
-              Delete Layout
+              <span> {{ $t('options.deleteLayout') }} </span>
             </button>
             <!-- Delete Layout End -->
           </div>

package/src/PageBuilder/PageBuilder.vue

@@ -13,6 +13,8 @@ import { useDebounce } from '../composables/useDebounce.ts'
 import DynamicModalBuilder from '../Components/Modals/DynamicModalBuilder.vue'
 import GlobalLoader from '../Components/Loaders/GlobalLoader.vue'
 import { getPageBuilder } from '../composables/builderInstance'
+import { useI18n } from 'vue-i18n'
+
 const pageBuilderService = getPageBuilder()
 /**
  * Props for PageBuilder component
@@ -149,6 +151,28 @@ const getHasLocalDraftForUpdate = computed(() => {
   return pageBuilderStateStore.getHasLocalDraftForUpdate
 })
 
+const { locale } = useI18n()
+
+watch(locale, (newLocale) => {
+  const config = pageBuilderStateStore.getPageBuilderConfig
+  if (config && config.userSettings && config.userSettings.language) {
+    // Update the store with a full config (if you want to update the store)
+    const updatedConfig = {
+      ...config,
+      userSettings: {
+        ...config.userSettings,
+        language: {
+          ...config.userSettings.language,
+          default: newLocale,
+        },
+      },
+    }
+
+    pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+    pageBuilderService.saveBuilderConfigToLocalStorage(updatedConfig)
+  }
+})
+
 watch(getHasLocalDraftForUpdate, (newVal) => {
   if (newVal) {
     handlerRumeEditingForUpdate()
@@ -539,7 +563,7 @@ onMounted(async () => {
                   ></span>
                 </span>
               </div>
-              <div>Save</div>
+              <div>{{ $t('button.save') }}</div>
             </button>
             <!-- Save End -->
 
@@ -582,7 +606,7 @@ onMounted(async () => {
                   </span>
                 </div>
                 <div class="lg:pbx-block pbx-hidden">
-                  <span> Reset Page </span>
+                  <span>{{ $t('button.resetPage') }}</span>
                 </div>
               </button>
             </template>
@@ -619,7 +643,9 @@ onMounted(async () => {
                 class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-border-gray-200"
               >
                 <span class="lg:pbx-block pbx-hidden">
-                  <div class="pbx-whitespace-nowrap pbx-cursor-pointer">Add new Components</div>
+                  <div class="pbx-whitespace-nowrap pbx-cursor-pointer">
+                    {{ $t('button.addComponents') }}
+                  </div>
                 </span>
                 <span
                   class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
@@ -698,10 +724,62 @@ onMounted(async () => {
                 }
               "
             >
-              Publish
+              {{ $t('button.publish') }}
             </button>
           </div>
         </template>
+        <!-- Select language -->
+        <template
+          v-if="
+            getPageBuilderConfig &&
+            getPageBuilderConfig.userSettings &&
+            getPageBuilderConfig.userSettings.language &&
+            !getPageBuilderConfig.userSettings.language.disableLanguageDropDown
+          "
+        >
+          <template
+            v-if="
+              getPageBuilderConfig &&
+              getPageBuilderConfig.userSettings &&
+              getPageBuilderConfig.userSettings.language
+            "
+          >
+            <div class="pbx-flex pbx-justify-center pbx-items-center pbx-ml-2">
+              <select
+                class="pbx-myPrimarySelect pbx-min-w-20 pbx-max-w-2pbx-min-w-20 pbx-w-max"
+                v-model="$i18n.locale"
+              >
+                <template
+                  v-if="
+                    Array.isArray(getPageBuilderConfig.userSettings.language.enable) &&
+                    getPageBuilderConfig.userSettings.language.enable.length >= 1
+                  "
+                >
+                  <template
+                    v-for="lang in pageBuilderService
+                      .availableLanguage()
+                      .filter((l) => getPageBuilderConfig.userSettings.language.enable.includes(l))"
+                    :key="lang"
+                  >
+                    <option :value="lang">{{ lang }}</option>
+                  </template>
+                </template>
+                <template
+                  v-if="
+                    !getPageBuilderConfig.userSettings.language.enable ||
+                    (Array.isArray(getPageBuilderConfig.userSettings.language.enable) &&
+                      getPageBuilderConfig.userSettings.language.enable.length === 0)
+                  "
+                >
+                  <template v-for="lang in pageBuilderService.availableLanguage()" :key="lang">
+                    <option :value="lang">{{ lang }}</option>
+                  </template>
+                </template>
+              </select>
+            </div>
+          </template>
+        </template>
+
         <template v-if="showCloseButton">
           <div class="pbx-ml-2">
             <button
@@ -854,7 +932,7 @@ onMounted(async () => {
           class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2 pbx-cursor-pointer"
         >
           <span class="lg:pbx-block pbx-hidden">
-            <div class="pbx-whitespace-nowrap">Add to the bottom</div>
+            <div class="pbx-whitespace-nowrap">{{ $t('button.addComponentsToBottom') }}</div>
           </span>
           <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
             <button

package/src/composables/builderInstance.ts

@@ -1,15 +1,16 @@
 // builderInstance.ts
 import { PageBuilderService } from '../services/PageBuilderService'
+import type { I18n } from 'vue-i18n'
 import { sharedPageBuilderStore } from '../stores/shared-store'
 
 // Singleton instance
 let instance: PageBuilderService | null = null
 
 // Used to create and store the single instance
-export function initPageBuilder(): PageBuilderService {
+export function initPageBuilder(i18n: I18n): PageBuilderService {
   if (!instance) {
     const pageBuilderStateStore = sharedPageBuilderStore
-    instance = new PageBuilderService(pageBuilderStateStore)
+    instance = new PageBuilderService(pageBuilderStateStore, i18n)
   }
   return instance
 }

package/src/i18n.ts

@@ -0,0 +1,28 @@
+import { createI18n } from 'vue-i18n'
+
+// Function to load all locale messages from JSON files
+async function loadLocaleMessages() {
+  const locales = import.meta.glob('./locales/*.json')
+  const messages: Record<string, object> = {}
+  for (const path in locales) {
+    const matched = path.match(/([A-Za-z0-9-_]+)\.json$/i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      const module = (await locales[path]()) as { default: object }
+      messages[locale] = module.default
+    }
+  }
+  return messages
+}
+
+// Use this in main.ts: const i18n = await setupI18n()
+export async function setupI18n() {
+  const messages = await loadLocaleMessages()
+  return createI18n({
+    legacy: false, // you must set `false`, to use Composition API
+    locale: 'en', // set locale
+    fallbackLocale: 'en', // set fallback locale
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    messages: messages as any, // typecast to satisfy vue-i18n
+  })
+}

package/src/locales/ar.json

@@ -0,0 +1,136 @@
+{
+  "language": "لغة",
+  "button": {
+    "addComponentsToBottom": "إضافة مكونات إلى الأسفل",
+    "publish": "نشر",
+    "addComponents": "إضافة مكونات جديدة",
+    "save": "حفظ",
+    "resetPage": "إعادة تعيين الصفحة"
+  },
+  "options": {
+    "button": "خيارات",
+    "configOverview": "نظرة عامة على الإعدادات",
+    "htmlOverview": "نظرة عامة على HTML",
+    "deleteLayout": "حذف التخطيط"
+  },
+  "features": {
+    "liveDragDropBuilder": {
+      "name": "منشئ السحب والإفلات المباشر",
+      "description": "انقر واسحب المحتوى على الصفحة وشاهد صفحاتك تنبض بالحياة. حوّل رؤيتك إلى واقع وأنشئ صفحات رائعة باستخدام منشئ الصفحات بالسحب والإفلات."
+    },
+    "trueVisualEditing": {
+      "name": "تحرير بصري حقيقي",
+      "description": "شاهد تغييراتك في الوقت الفعلي. عزز رؤيتك الإبداعية وأنشئ صفحات باستخدام منشئ صفحات بديهي. تخلص من قيود التصميم وحول أفكارك إلى واقع."
+    },
+    "features": {
+      "name": "الميزات",
+      "description": "السحب والإفلات، إعادة الترتيب، التحرير البصري الحقيقي، التحرير المتجاوب، تخصيص الخطوط، التراجع والإعادة، تحرير النص، مكتبة الوسائط، تكامل Unsplash، فيديوهات YouTube."
+    },
+    "technologies": {
+      "name": "التقنيات",
+      "description": "تم التطوير باستخدام TypeScript وVue 3 وComposition API وPinia وCSS وTailwind CSS وHTML."
+    },
+    "setBrandAndLinkColors": {
+      "name": "تعيين ألوان العلامة التجارية والروابط في مكان واحد",
+      "description": "أنماط عالمية للخطوط والتصاميم والألوان. عيّن ألوان العلامة التجارية والروابط مرة واحدة وطبقها بسهولة عبر المنصة بأكملها."
+    },
+    "mobileFirstApproach": {
+      "name": "نهج الجوال أولاً",
+      "description": "تم التطوير بنهج الجوال أولاً. يعمل منشئ الصفحات حتى على الهواتف المحمولة."
+    },
+    "mediaLibrary": {
+      "name": "مكتبة الوسائط",
+      "description": "مكتبة وسائط جميلة وسهلة الاستخدام تتيح لك تغيير الصور وتحديثها. يتضمن تكامل Unsplash."
+    },
+    "minimalIntuitiveDesign": {
+      "name": "تصميم بسيط وبديهي",
+      "description": "تصميم جميل وأنيق وبديهي. عزز تفاعل المستخدم مع تجربة بصرية مذهلة."
+    }
+  },
+  "branding": {
+    "mainHeader": "حوّل رؤيتك إلى واقع وأنشئ صفحات رائعة باستخدام منشئ الصفحات بالسحب والإفلات",
+    "description": "منشئ الصفحات للصفحات المذهلة. مكّن المستخدمين من تصميم ونشر صفحات حديثة بأي نطاق. أنشئ صفحات متجاوبة مثل القوائم أو الوظائف أو منشورات المدونة وأدر المحتوى بسهولة باستخدام منشئ الصفحات المجاني بالسحب والإفلات. تم التطوير باستخدام TypeScript وVue 3 وComposition API وPinia وCSS وTailwind CSS وHTML. قم بتنزيل أو تثبيت منشئ الصفحات المجاني والقوي والمرن وسهل الاستخدام لـ Vue 3.",
+    "downloadDescription": "قم بتنزيل أو تثبيت منشئ الصفحات المجاني والقوي والمرن وسهل الاستخدام لـ Vue 3 عبر"
+  },
+  "typography": {
+    "title": "الخطوط",
+    "appearance": "مظهر الخط",
+    "fontSize": "حجم الخط",
+    "fontTabletSize": "حجم الخط للأجهزة اللوحية",
+    "fontMobileSize": "الشاشات الصغيرة",
+    "fontWeight": "سُمك الخط",
+    "fontFamily": "عائلة الخط",
+    "fontStyle": "نمط الخط"
+  },
+  "opacity": {
+    "label": "الشفافية",
+    "transparent": "شفاف"
+  },
+  "backgroundOpacity": {
+    "label": "شفافية الخلفية",
+    "transparent": "شفاف"
+  },
+  "padding": {
+    "title": "الحشو",
+    "vertical": "الحشو العمودي",
+    "horizontal": "الحشو الأفقي",
+    "select": "اختر"
+  },
+  "margin": {
+    "title": "الهامش",
+    "vertical": "الهامش العمودي",
+    "horizontal": "الهامش الأفقي",
+    "select": "اختر"
+  },
+  "opacityEditor": {
+    "title": "الشفافية وعدم الشفافية"
+  },
+  "borderRadius": {
+    "title": "نصف قطر الحدود",
+    "global": "عام",
+    "specific": "محدد",
+    "label": "نصف قطر الحدود",
+    "topLeft": "نصف قطر الحدود العلوي الأيسر",
+    "topRight": "نصف قطر الحدود العلوي الأيمن",
+    "bottomLeft": "نصف قطر الحدود السفلي الأيسر",
+    "bottomRight": "نصف قطر الحدود السفلي الأيمن",
+    "select": "اختر"
+  },
+  "borders": {
+    "title": "نمط الحدود والعرض واللون",
+    "border": "الحدود",
+    "style": "نمط الحدود",
+    "width": "عرض الحدود",
+    "color": "لون الحدود",
+    "select": "اختر"
+  },
+  "classEditor": {
+    "title": "CSS المُولّد",
+    "info": "هذا هو CSS الذي يطبقه المنشئ. أضف CSS الخاص بك واضغط Enter لتطبيقه على العنصر المحدد.",
+    "add": "أضف CSS الخاص بك.",
+    "prefix": "يتم إضافة البادئة pbx- تلقائيًا.",
+    "placeholder": "اكتب الفئة",
+    "addButton": "إضافة"
+  },
+  "styleEditor": {
+    "title": "أنماط مضمنة",
+    "info": "هذه هي الأنماط المضمنة التي يطبقها المنشئ. أضف أنماطك الخاصة واضغط Enter لتطبيقها على العنصر المحدد.",
+    "add": "أضف نمطك الخاص.",
+    "propertyPlaceholder": "خاصية",
+    "valuePlaceholder": "قيمة",
+    "addButton": "إضافة"
+  },
+  "rightSidebar": {
+    "backgroundColorEditor": {
+      "label": "لون الخلفية",
+      "transparent": "شفاف"
+    },
+    "editing": "تحرير",
+    "globalPageStylesTitle": "أنماط الصفحة العامة",
+    "globalPageStylesDescription": "قم بتطبيق الأنماط التي تؤثر على الصفحة بأكملها. تتضمن هذه الإعدادات عائلة الخط العالمية، ولون النص، ولون الخلفية، والأنماط العامة الأخرى التي تنطبق على جميع الأقسام.",
+    "updatePageStyles": "تحديث أنماط الصفحة",
+    "downloadHtmlTitle": "تنزيل HTML",
+    "downloadHtmlDescription": "صدّر الصفحة بأكملها كملف HTML مستقل. يتضمن ذلك جميع الأقسام والمحتوى والأنماط المطبقة، مما يجعله جاهزًا للاستخدام أو الدمج في مكان آخر.",
+    "downloadHtmlButton": "تنزيل ملف HTML"
+  }
+}

package/src/locales/de.json

@@ -0,0 +1,136 @@
+{
+  "language": "Sprache",
+  "button": {
+    "addComponentsToBottom": "Komponenten unten hinzufügen",
+    "publish": "Veröffentlichen",
+    "addComponents": "Neue Komponenten hinzufügen",
+    "save": "Speichern",
+    "resetPage": "Seite zurücksetzen"
+  },
+  "options": {
+    "button": "Optionen",
+    "configOverview": "Konfigurationsübersicht",
+    "htmlOverview": "HTML-Übersicht",
+    "deleteLayout": "Layout löschen"
+  },
+  "features": {
+    "liveDragDropBuilder": {
+      "name": "Live Drag & Drop Builder",
+      "description": "Klicken und ziehen Sie Inhalte auf eine Seite und sehen Sie, wie Ihre Seiten zum Leben erwachen. Erwecken Sie Ihre Vision zum Leben und erstellen Sie beeindruckende Seiten mit einem Drag & Drop Page Builder."
+    },
+    "trueVisualEditing": {
+      "name": "Echtes visuelles Bearbeiten",
+      "description": "Sehen Sie Ihre Änderungen in Echtzeit. Erhöhen Sie Ihre kreative Vision und erstellen Sie Seiten mit einem intuitiven Page Builder. Brechen Sie Designgrenzen und setzen Sie Ihre Ideen um."
+    },
+    "features": {
+      "name": "Funktionen",
+      "description": "Drag & Drop, Umordnen, echtes visuelles Bearbeiten, responsives Bearbeiten, Schriftanpassung, Rückgängig & Wiederholen, Textbearbeitung, Medienbibliothek, Unsplash-Integration, YouTube-Videos."
+    },
+    "technologies": {
+      "name": "Technologien",
+      "description": "Entwickelt mit TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS und HTML."
+    },
+    "setBrandAndLinkColors": {
+      "name": "Marken- und Linkfarben an einem Ort festlegen",
+      "description": "Globale Stile für Schriftarten, Designs und Farben. Legen Sie Marken- und Linkfarben einmal fest und wenden Sie sie einfach auf der gesamten Plattform an."
+    },
+    "mobileFirstApproach": {
+      "name": "Mobile-First-Ansatz",
+      "description": "Entwickelt mit Mobile-First-Ansatz. Der Page Builder funktioniert sogar auf Mobiltelefonen."
+    },
+    "mediaLibrary": {
+      "name": "Medienbibliothek",
+      "description": "Eine schöne und benutzerfreundliche Medienbibliothek, mit der Sie Bilder ändern und aktualisieren können. Unsplash-Integration ist enthalten."
+    },
+    "minimalIntuitiveDesign": {
+      "name": "Minimales und intuitives Design",
+      "description": "Schönes, elegantes und intuitives Design. Steigern Sie das Nutzerengagement mit einer großartigen visuellen Erfahrung."
+    }
+  },
+  "branding": {
+    "mainHeader": "Erwecken Sie Ihre Vision zum Leben und erstellen Sie beeindruckende Seiten mit einem Drag & Drop Page Builder",
+    "description": "Der Web-Builder für beeindruckende Seiten. Ermöglichen Sie es Nutzern, moderne Seiten in jeder Größenordnung zu entwerfen und zu veröffentlichen. Erstellen Sie responsive Seiten wie Listen, Jobs oder Blogbeiträge und verwalten Sie Inhalte einfach mit dem kostenlosen Drag & Drop Page Builder. Entwickelt mit TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS und HTML. Laden Sie unseren leistungsstarken, flexiblen und einfach zu bedienenden kostenlosen Vue 3 Page Builder herunter oder installieren Sie ihn.",
+    "downloadDescription": "Laden Sie unseren leistungsstarken, flexiblen und einfach zu bedienenden kostenlosen Vue 3 Page Builder herunter oder installieren Sie ihn über"
+  },
+  "typography": {
+    "title": "Typografie",
+    "appearance": "Schriftbild",
+    "fontSize": "Schriftgröße",
+    "fontTabletSize": "Schriftgröße für Tablet",
+    "fontMobileSize": "Kleine Bildschirme",
+    "fontWeight": "Schriftstärke",
+    "fontFamily": "Schriftfamilie",
+    "fontStyle": "Schriftstil"
+  },
+  "opacity": {
+    "label": "Transparenz",
+    "transparent": "Transparent"
+  },
+  "backgroundOpacity": {
+    "label": "Hintergrundtransparenz",
+    "transparent": "Transparent"
+  },
+  "padding": {
+    "title": "Abstand innen",
+    "vertical": "Vertikaler Abstand innen",
+    "horizontal": "Horizontaler Abstand innen",
+    "select": "Auswählen"
+  },
+  "margin": {
+    "title": "Außenabstand",
+    "vertical": "Vertikaler Außenabstand",
+    "horizontal": "Horizontaler Außenabstand",
+    "select": "Auswählen"
+  },
+  "opacityEditor": {
+    "title": "Deckkraft & Transparenz"
+  },
+  "borderRadius": {
+    "title": "Rahmenradius",
+    "global": "Global",
+    "specific": "Spezifisch",
+    "label": "Rahmenradius",
+    "topLeft": "Rahmenradius oben links",
+    "topRight": "Rahmenradius oben rechts",
+    "bottomLeft": "Rahmenradius unten links",
+    "bottomRight": "Rahmenradius unten rechts",
+    "select": "Auswählen"
+  },
+  "borders": {
+    "title": "Rahmenstil, -breite & -farbe",
+    "border": "Rahmen",
+    "style": "Rahmenstil",
+    "width": "Rahmenbreite",
+    "color": "Rahmenfarbe",
+    "select": "Auswählen"
+  },
+  "classEditor": {
+    "title": "Generiertes CSS",
+    "info": "Dies ist das vom Builder angewendete CSS. Fügen Sie Ihr eigenes CSS hinzu und drücken Sie die Eingabetaste, um es auf das ausgewählte Element anzuwenden.",
+    "add": "Fügen Sie Ihr CSS hinzu.",
+    "prefix": "Das pbx- Präfix wird automatisch hinzugefügt.",
+    "placeholder": "Klasse eingeben",
+    "addButton": "Hinzufügen"
+  },
+  "styleEditor": {
+    "title": "Inline-Stile",
+    "info": "Dies sind die vom Builder angewendeten Inline-Stile. Fügen Sie Ihre eigenen Stile hinzu und drücken Sie die Eingabetaste, um sie auf das ausgewählte Element anzuwenden.",
+    "add": "Fügen Sie Ihren eigenen Stil hinzu.",
+    "propertyPlaceholder": "Eigenschaft",
+    "valuePlaceholder": "Wert",
+    "addButton": "Hinzufügen"
+  },
+  "rightSidebar": {
+    "backgroundColorEditor": {
+      "label": "Hintergrundfarbe",
+      "transparent": "Transparent"
+    },
+    "editing": "Bearbeiten",
+    "globalPageStylesTitle": "Globale Seitenstile",
+    "globalPageStylesDescription": "Wenden Sie Stile an, die die gesamte Seite betreffen. Diese Einstellungen umfassen globale Schriftfamilie, Textfarbe, Hintergrundfarbe und andere universelle Stile, die für alle Abschnitte gelten.",
+    "updatePageStyles": "Seitenstile aktualisieren",
+    "downloadHtmlTitle": "HTML herunterladen",
+    "downloadHtmlDescription": "Exportieren Sie die gesamte Seite als eigenständige HTML-Datei. Dies umfasst alle Abschnitte, Inhalte und angewendeten Stile und ist bereit zur Verwendung oder Integration an anderer Stelle.",
+    "downloadHtmlButton": "HTML-Datei herunterladen"
+  }
+}

package/src/locales/en.json

@@ -0,0 +1,136 @@
+{
+  "language": "Language",
+  "button": {
+    "addComponentsToBottom": "Add Components to the bottom",
+    "publish": "Publish",
+    "addComponents": "Add new Components",
+    "save": "Save",
+    "resetPage": "Reset Page"
+  },
+  "options": {
+    "button": "Options",
+    "configOverview": "Config Overview",
+    "htmlOverview": "HTML Overview",
+    "deleteLayout": "Delete Layout"
+  },
+  "features": {
+    "liveDragDropBuilder": {
+      "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"
+    },
+    "trueVisualEditing": {
+      "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."
+    },
+    "features": {
+      "name": "Features",
+      "description": "Click & Drop, Reordering, True Visual Editing, Responsive Editing, Font Customization, Undo & Redo, Text Editing, Media Library, Unsplash Integration, YouTube Videos."
+    },
+    "technologies": {
+      "name": "Technologies",
+      "description": "Developed with TypeScript, Vue 3, Composition API, Pinia, CSS, Tailwind CSS and HTML."
+    },
+    "setBrandAndLinkColors": {
+      "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."
+    },
+    "mobileFirstApproach": {
+      "name": "Mobile-First Approach",
+      "description": "Developed with Mobile-First approach. The Page Builder even works on mobile phones."
+    },
+    "mediaLibrary": {
+      "name": "Media Library",
+      "description": "A beautiful and user-friendly media library that allows you to change and update images. Unsplash Integration is included."
+    },
+    "minimalIntuitiveDesign": {
+      "name": "Minimal and Intuitive Design",
+      "description": "Beautiful, elegant and intuitive design. Enhance user engagement with amazing visual experience."
+    }
+  },
+  "branding": {
+    "mainHeader": "Bring your vision to life and create impressive pages using a click & drop Page Builder",
+    "description": "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. Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder.",
+    "downloadDescription": "Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via"
+  },
+  "typography": {
+    "title": "Typography",
+    "appearance": "Font Appearance",
+    "fontSize": "Font Size",
+    "fontTabletSize": "Font Tablet Size",
+    "fontMobileSize": "Font Small Screens",
+    "fontWeight": "Font Weight",
+    "fontFamily": "Font Family",
+    "fontStyle": "Font Style"
+  },
+  "opacity": {
+    "label": "Opacity",
+    "transparent": "Transparent"
+  },
+  "backgroundOpacity": {
+    "label": "Background Opacity",
+    "transparent": "Transparent"
+  },
+  "padding": {
+    "title": "Padding",
+    "vertical": "Vertical Padding",
+    "horizontal": "Horizontal Padding",
+    "select": "Select"
+  },
+  "margin": {
+    "title": "Margin",
+    "vertical": "Vertical Margin",
+    "horizontal": "Horizontal Margin",
+    "select": "Select"
+  },
+  "opacityEditor": {
+    "title": "Opacity & Transparency"
+  },
+  "borderRadius": {
+    "title": "Border Radius",
+    "global": "Global",
+    "specific": "Specific",
+    "label": "Border Radius",
+    "topLeft": "Border Radius top left",
+    "topRight": "Border Radius top right",
+    "bottomLeft": "Border Radius bottom left",
+    "bottomRight": "Border Radius bottom right",
+    "select": "Select"
+  },
+  "borders": {
+    "title": "Border Style, Width & Color",
+    "border": "Border",
+    "style": "Border Style",
+    "width": "Border Width",
+    "color": "Border Color",
+    "select": "Select"
+  },
+  "classEditor": {
+    "title": "Generated CSS",
+    "info": "This is the CSS applied by the builder. Add your own CSS and press Enter to apply it to the selected element.",
+    "add": "Add your CSS.",
+    "prefix": "The pbx- prefix is added automatically.",
+    "placeholder": "Type class",
+    "addButton": "Add"
+  },
+  "styleEditor": {
+    "title": "Inline Styles",
+    "info": "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.",
+    "add": "Add your own style.",
+    "propertyPlaceholder": "property",
+    "valuePlaceholder": "value",
+    "addButton": "Add"
+  },
+  "backgroundColorEditor": {
+    "label": "Background Color",
+    "transparent": "Transparent"
+  },
+  "rightSidebar": {
+    "editing": "Editing",
+    "globalPageStylesTitle": "Global Page Styles",
+    "globalPageStylesDescription": "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.",
+    "updatePageStyles": "Update Page Styles",
+    "downloadHtmlTitle": "Download HTML",
+    "downloadHtmlDescription": "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.",
+    "downloadHtmlButton": "Download HTML file"
+  }
+}