@myissue/vue-website-page-builder 3.4.10 → 3.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.10",
+  "version": "3.4.12",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/App.vue

@@ -22,7 +22,6 @@ onMounted(async () => {
 
 <template>
   <div>
-    <Navbar></Navbar>
     <PageBuilderTest></PageBuilderTest>
     <Footer></Footer>
   </div>

package/src/Components/Homepage/Footer.vue

@@ -4,30 +4,29 @@ const version = __APP_VERSION__
 
 <template>
   <div
-    class="pbx-flex pbx-justify-between pbx-gap-2 pbx-bg-red-100 pbx-py-10 lg:pbx-px-12 pbx-px-4"
+    class="pbx-flex pbx-justify-between pbx-gap-2 lg:pbx-px-12 pbx-mx-2 pbx-py-3 pbx-border-t pbx-border-t-gray-900"
   >
-    <div>
-      <p class="pbx-myPrimaryParagraph">
-        <a
-          href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
-          target="_blank"
-          class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
-        >
-          Install via npm
-        </a>
-      </p>
-      <p class="pbx-myPrimaryParagraph pbx-mt-3">
-        <a
-          href="https://github.com/myissue-org/vue-website-page-builder"
-          target="_blank"
-          class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
-        >
-          View on GitHub
-        </a>
-      </p>
-    </div>
-    <p class="pbx-myPrimaryParagraph pbx-mt-3">
-      <span class="pbx-text-myPrimaryDarkGrayColor pbx-text-sm">{{ version }}</span>
+    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
+      <a
+        href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
+        target="_blank"
+        class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
+      >
+        Install via npm
+      </a>
+    </p>
+
+    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
+      <a
+        href="https://github.com/myissue-org/vue-website-page-builder"
+        target="_blank"
+        class="pbx-myPrimaryLink pbx-text-myPrimaryDarkGrayColor"
+      >
+        View on GitHub
+      </a>
+    </p>
+    <p class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-medium pbx-underline">
+      <span class="pbx-text-myPrimaryDarkGrayColor">{{ version }}</span>
     </p>
   </div>
 </template>

package/src/Components/PageBuilder/EditorMenu/Editables/HTMLEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { sharedPageBuilderStore } from '../../../../stores/shared-store'
 import ModalBuilder from '../../../../Components/Modals/ModalBuilder.vue'
 import EditorAccordion from '../EditorAccordion.vue'
@@ -18,7 +18,6 @@ const props = defineProps({
 })
 
 const getElement = computed(() => pageBuilderStateStore.getElement)
-const getComponents = computed(() => pageBuilderStateStore.getComponents)
 
 const elementHTML = computed(() => {
   if (!getElement.value || !(getElement.value instanceof HTMLElement)) {
@@ -32,26 +31,15 @@ const showModalHTMLEditor = ref(false)
 const editableHtml = ref('')
 const editableComponents = ref('')
 
-const handleShowHTMLEditor = () => {
+const handleShowHTMLEditor = async () => {
   showModalHTMLEditor.value = true
 
   if (!props.globalPage) {
     editableHtml.value = elementHTML.value
+    return
   }
 
-  if (props.globalPage) {
-    const compsHTMLString =
-      Array.isArray(getComponents.value) &&
-      getComponents.value
-        .map((comp) => {
-          return comp.html_code
-            .replace(/data-componentid="[^"]*"/g, '') // remove data-componentid
-            .replace(/\s{2,}/g, ' ') // optional: clean up excess spaces
-        })
-        .join('\n')
-
-    editableComponents.value = compsHTMLString
-  }
+  editableComponents.value = await pageBuilderService.generateHtmlFromComponents()
 }
 
 const handleCloseHTMLEditor = () => {

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

@@ -82,11 +82,12 @@ const openMainSettings = function () {
 const showHTMLSettings = ref(false)
 
 // handle slideover window
-const handleHTMLSettings = function () {
+const closeHTMLSettings = function () {
   showHTMLSettings.value = false
 }
 
-const openHTMLSettings = function () {
+const openHTMLSettings = async function () {
+  await pageBuilderService.generateHtmlFromComponents()
   showHTMLSettings.value = true
 }
 </script>
@@ -219,7 +220,7 @@ const openHTMLSettings = function () {
       maxWidth="5xl"
       :showModalBuilder="showHTMLSettings"
       :title="translate('Selected HTML')"
-      @closeMainModalBuilder="handleHTMLSettings"
+      @closeMainModalBuilder="closeHTMLSettings"
       minHeight=""
       maxHeight=""
     >

package/src/css/style.css

@@ -440,10 +440,6 @@
   width: 100%;
   cursor: pointer;
 }
-#page-builder-editor strong,
-#pagebuilder strong {
-  font-weight: 500;
-}
 
 .pbx-reorder-highlight {
   animation: pbx-reorder-flash 0.4s ease-in-out;
@@ -520,18 +516,9 @@
 #page-builder-editor ul,
 #pagebuilder ul {
   list-style: disc !important;
-  padding: 1rem 0 0 1rem;
+  padding: 1rem 0 0 1.4rem;
   margin-left: 1em;
-  line-height: 1.2;
-}
-
-#page-builder-editor ol,
-#page-builder-editor-editable-area ol,
-#page-builder-editor ul,
-#page-builder-editor-editable-area ul {
-  list-style: disc !important;
-  padding: 1rem 0 0 1rem;
-  line-height: 1.2;
+  line-height: 2rem;
 }
 
 .pbx-headless-dropdown {
@@ -593,9 +580,15 @@
   color: inherit;
   text-decoration: none;
 }
+
+#page-builder-editor strong,
+#pagebuilder strong {
+  font: inherit;
+  font-weight: 500;
+}
+
 #pagebuilder code,
 #pagebuilder pre,
-#pagebuilder strong,
 #pagebuilder em {
   font: inherit;
   font-weight: inherit;

package/src/services/PageBuilderService.ts

@@ -1599,6 +1599,29 @@ export class PageBuilderService {
             }
           }
         }
+      } else if (parentSection) {
+        // If the section is not empty, update its HTML content in the store
+        const componentId = parentSection.getAttribute('data-componentid')
+        if (componentId) {
+          const components = this.pageBuilderStateStore.getComponents
+          if (components) {
+            const componentIndex = components.findIndex(
+              (c: ComponentObject) => c.id === componentId,
+            )
+            if (componentIndex !== -1) {
+              const updatedComponent = {
+                ...components[componentIndex],
+                html_code: parentSection.outerHTML,
+              }
+              const newComponents = [
+                ...components.slice(0, componentIndex),
+                updatedComponent,
+                ...components.slice(componentIndex + 1),
+              ]
+              this.pageBuilderStateStore.setComponents(newComponents)
+            }
+          }
+        }
       }
     }
 
@@ -1888,7 +1911,7 @@ export class PageBuilderService {
    * Syncs the current DOM state of components to the in-memory store.
    * @private
    */
-  private syncDomToStoreOnly() {
+  public syncDomToStoreOnly() {
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -1906,6 +1929,30 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setComponents(componentsToSave)
   }
 
+  public async generateHtmlFromComponents(): Promise<string> {
+    this.syncDomToStoreOnly()
+    await nextTick()
+
+    const components = this.pageBuilderStateStore.getComponents
+
+    if (!Array.isArray(components)) {
+      return ''
+    }
+
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.addListenersToEditableElements()
+
+    return components
+      .map((comp) => {
+        return comp.html_code
+          .replace(/data-componentid="[^"]*"/g, '') // remove data-componentid
+          .replace(/\s{2,}/g, ' ') // optional: clean up excess spaces
+      })
+      .join('\n')
+  }
+
   /**
    * Saves the current DOM state of components to local storage.
    * @private
@@ -2166,6 +2213,15 @@ export class PageBuilderService {
     this.pageBuilderStateStore.setIsRestoring(false)
   }
 
+  public async returnLatestComponents() {
+    this.syncDomToStoreOnly()
+    // Wait for Vue to finish DOM updates before attaching event listeners. This ensure elements exist in the DOM.
+    await nextTick()
+    // Attach event listeners to all editable elements in the Builder
+    await this.addListenersToEditableElements()
+
+    return this.pageBuilderStateStore.getComponents
+  }
   /**
    * Gets the local storage key for the current resource.
    * @returns {string | null} The local storage key.
@@ -2444,6 +2500,14 @@ export class PageBuilderService {
     this.addHyperlinkToElement(hyperlinkEnable, urlInput || null, openHyperlinkInNewTab || false)
   }
 
+  public async addTheme(components: string): Promise<void> {
+    if (components) {
+      this.validateMountingHTML(components)
+      await this.mountComponentsToDOM(components)
+    }
+    await this.handleAutoSave()
+  }
+
   /**
    * Adds a new component to the page builder.
    * @param {ComponentObject} componentObject - The component to add.

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue'
 import componentHelpers from '../../utils/html-elements/componentHelpers'
 import components from '../../utils/html-elements/component'
+import themes from '../../utils/html-elements/themes'
 import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
 import type { ComponentObject } from '../../types'
 import { getPageBuilder } from '../../composables/builderInstance'
@@ -20,6 +21,9 @@ defineProps({
 
 const isLoading = ref(false)
 
+const selectedThemeSelection = ref('Components')
+
+const componentOrThemes = ['Components', 'Themes']
 const selectedCategory = ref('All')
 
 const categories = computed(() => {
@@ -34,9 +38,32 @@ const filteredComponents = computed(() => {
   return components[0].components.data.filter((comp) => comp.category === selectedCategory.value)
 })
 
+const selectedThemeCategory = ref('All')
+
+const themeCategories = computed(() => {
+  const allCategories = themes[0].themes.data.map((comp) => comp.category)
+  return ['All', ...new Set(allCategories)]
+})
+
+const filteredThemes = computed(() => {
+  if (selectedThemeCategory.value === 'All') {
+    return themes[0].themes.data
+  }
+  return themes[0].themes.data.filter((comp) => comp.category === selectedThemeCategory.value)
+})
+
 // Get modal close function
 const { closeAddComponentModal } = usePageBuilderModal()
 
+// Super simple component addition with professional modal closing!
+const handleDropTheme = async function (components: string) {
+  isLoading.value = true
+
+  await pageBuilderService.addTheme(components)
+  closeAddComponentModal()
+  isLoading.value = false
+}
+
 // Super simple component addition with professional modal closing!
 const handleDropComponent = async function (componentObject: ComponentObject) {
   isLoading.value = true
@@ -104,81 +131,151 @@ const convertToComponentObject = function (comp: any): ComponentObject {
       </div>
     </template>
     <div v-if="!isLoading">
-      <!-- Helper Components Section -->
-      <div class="pbx-mb-8">
-        <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
-        <div
-          class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
+      <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
+        <button
+          v-for="category in componentOrThemes"
+          :key="category"
+          @click="selectedThemeSelection = category"
+          class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
+          :class="[
+            selectedThemeSelection === category
+              ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
+              : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
+          ]"
         >
+          {{ translate(category) }}
+        </button>
+      </div>
+
+      <!-- theme is selected start -->
+      <template v-if="selectedThemeSelection === 'Themes'">
+        <div class="pbx-mb-8">
+          <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Themes') }}</h3>
+          <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
+            <button
+              v-for="category in themeCategories"
+              :key="category"
+              @click="selectedThemeCategory = category"
+              class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
+              :class="[
+                selectedThemeCategory === category
+                  ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
+                  : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
+              ]"
+            >
+              {{ translate(category) }}
+            </button>
+          </div>
+
           <div
-            v-for="helper in componentHelpers"
-            :key="helper.title"
-            class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
-            @click="handleDropComponent(helper)"
+            class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4 pbx-min-h-[96rem]"
           >
             <div
-              class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto"
+              v-for="theme in filteredThemes"
+              :key="theme.title"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-max-h-96"
+              @click="handleDropTheme(theme.html_code)"
             >
-              <div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
-              <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
-                {{ translate(helper.title) }}
-              </h4>
-            </div>
-            <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-              {{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
-              {{ translate('component') }}
+              <div
+                class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+              >
+                <!-- Use SVG preview instead of external images -->
+                <div
+                  class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
+                  v-html="theme.cover_image"
+                ></div>
+              </div>
+              <div class="pbx-p-3">
+                <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
+                  {{ translate(theme.title) }}
+                </h4>
+                <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+                  {{ translate('Click to add theme') }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
+      <!-- theme is selected end -->
 
-      <!-- Regular Components Section -->
-      <div class="pbx-px-2" v-if="customMediaComponent">
-        <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
-        <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
-          <button
-            v-for="category in categories"
-            :key="category"
-            @click="selectedCategory = category"
-            class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
-            :class="[
-              selectedCategory === category
-                ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
-                : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
-            ]"
+      <template v-if="selectedThemeSelection === 'Components'">
+        <!-- Helper Components Section -->
+        <div class="pbx-mb-8">
+          <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Helper Components') }}</h3>
+          <div
+            class="pbx-px-2 pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 lg:pbx-grid-cols-4 pbx-gap-4"
           >
-            {{ translate(category) }}
-          </button>
+            <div
+              v-for="helper in componentHelpers"
+              :key="helper.title"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-max-h-96 pbx-p-4"
+              @click="handleDropComponent(helper)"
+            >
+              <div
+                class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto"
+              >
+                <div v-if="false" class="pbx-mr-2" v-html="helper.icon"></div>
+                <h4 class="pbx-myPrimaryParagraph pbx-text-base pbx-font-medium">
+                  {{ translate(helper.title) }}
+                </h4>
+              </div>
+              <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+                {{ translate('Click to add') }} {{ helper.title.toLowerCase() }}
+                {{ translate('component') }}
+              </div>
+            </div>
+          </div>
         </div>
-        <div
-          class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4"
-        >
+
+        <!-- Regular Components Section -->
+        <div class="pbx-px-2" v-if="customMediaComponent">
+          <h3 class="pbx-myQuaternaryHeader pbx-mb-4">{{ translate('Layout Components') }}</h3>
+          <div class="pbx-mb-4 pbx-flex pbx-jusitify-left pbx-items-center pbx-gap-2">
+            <button
+              v-for="category in categories"
+              :key="category"
+              @click="selectedCategory = category"
+              class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
+              :class="[
+                selectedCategory === category
+                  ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
+                  : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
+              ]"
+            >
+              {{ translate(category) }}
+            </button>
+          </div>
           <div
-            v-for="comp in filteredComponents"
-            :key="comp.title"
-            class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
-            @click="handleDropComponent(convertToComponentObject(comp))"
+            class="pbx-grid pbx-grid-cols-1 sm:pbx-grid-cols-2 md:pbx-grid-cols-3 pbx-gap-4 pbx-pb-4 pbx-min-h-[96rem]"
           >
             <div
-              class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+              v-for="comp in filteredComponents"
+              :key="comp.title"
+              class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-max-h-96"
+              @click="handleDropComponent(convertToComponentObject(comp))"
             >
-              <!-- Use SVG preview instead of external images -->
               <div
-                class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
-                v-html="comp.cover_image"
-              ></div>
-            </div>
-            <div class="pbx-p-3">
-              <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
-                {{ translate(comp.title) }}
-              </h4>
-              <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
-                {{ translate('Click to add component') }}
+                class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-0 pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+              >
+                <!-- Use SVG preview instead of external images -->
+                <div
+                  class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
+                  v-html="comp.cover_image"
+                ></div>
+              </div>
+              <div class="pbx-p-3">
+                <h4 class="pbx-myPrimaryParagraph pbx-text-sm pbx-font-normal">
+                  {{ translate(comp.title) }}
+                </h4>
+                <div class="pbx-myPrimaryParagraph pbx-text-xs pbx-font-normal pbx-pt-2">
+                  {{ translate('Click to add component') }}
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
       <div>
         <button class="pbx-sr-only">Focusable fallback</button>
       </div>

package/src/tests/PageBuilderTest.vue

@@ -69,75 +69,14 @@ watch(currentTranslations, async () => {
 </script>
 
 <template>
-  <div>
-    <div class="pbx-myPrimaryWidthScreenModule pbx-bg-red-50 lg:pbx-block">
-      <div class="pbx-myPrimaryContentSection">
-        <h2 class="pbx-mySecondaryHeader">
-          {{
-            translate(
-              'Bring your vision to life and create impressive pages using a click & drop Page Builder',
-            )
-          }}
-        </h2>
-        <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          {{
-            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">
-            {{
-              translate(
-                'Download or install our powerful, flexible, and easy-to-use free Vue 3 Page Builder via',
-              )
-            }}
-            <br />
-            <strong> npm:</strong>
-            <a
-              class="pbx-text-myPrimaryLinkColor"
-              href="https://www.npmjs.com/package/@myissue/vue-website-page-builder"
-              target="_blank"
-            >
-              @myissue/vue-website-page-builder
-            </a>
-          </p>
-        </div>
-      </div>
-      <div class="lg:pbx-m-2 pbx-m-1">
-        <!--   :CustomBuilderComponents="DemoBuilderComponentsTest" -->
-        <PageBuilder
-          :CustomMediaLibraryComponent="DemoMediaLibraryComponentTest"
-          :showPublishButton="true"
-          @handlePublishPageBuilder="publishPageBuilder"
-        ></PageBuilder>
-      </div>
+  <div class="pbx-bg-white">
+    <div class="lg:pbx-p-2">
+      <!--   :CustomBuilderComponents="DemoBuilderComponentsTest" -->
+      <PageBuilder
+        :CustomMediaLibraryComponent="DemoMediaLibraryComponentTest"
+        :showPublishButton="true"
+        @handlePublishPageBuilder="publishPageBuilder"
+      ></PageBuilder>
     </div>
-
-    <FullWidthElement :descriptionArea="true" class="pbx-bg-gray-50">
-      <template #title>
-        {{ translate('Everything you need. Break free from design limitations') }}
-      </template>
-      <template #description>
-        <p class="pbx-myPrimaryParagraph pbx-font-normal">
-          {{
-            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>
-        <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>
 </template>