@designcrowd/library.brand-page 5.16.3 → 5.16.4-abtest-1

package/lib/src/composables/useSnapshot.js

@@ -0,0 +1,74 @@
+import { ref } from 'vue';
+const HTML2CANVAS_CDN_URL = 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js';
+let html2canvasLoadPromise = null;
+/**
+ * Dynamically loads html2canvas from CDN if not already loaded
+ */
+function loadHtml2Canvas() {
+    // If already loaded, return immediately
+    if (typeof window.html2canvas !== 'undefined') {
+        return Promise.resolve();
+    }
+    // If already loading, return the existing promise
+    if (html2canvasLoadPromise) {
+        return html2canvasLoadPromise;
+    }
+    // Create new load promise
+    html2canvasLoadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = HTML2CANVAS_CDN_URL;
+        script.async = true;
+        script.onload = () => {
+            console.log('✅ html2canvas loaded successfully from CDN');
+            resolve();
+        };
+        script.onerror = () => {
+            console.error('❌ Failed to load html2canvas from CDN');
+            html2canvasLoadPromise = null; // Reset so we can retry
+            reject(new Error('Failed to load html2canvas'));
+        };
+        document.head.appendChild(script);
+    });
+    return html2canvasLoadPromise;
+}
+export function useSnapshot() {
+    const isCapturing = ref(false);
+    const lastSnapshot = ref(null);
+    const captureSnapshot = async (element) => {
+        if (!element) {
+            console.error('No element provided for snapshot');
+            return null;
+        }
+        isCapturing.value = true;
+        try {
+            // Dynamically load html2canvas if not already loaded
+            await loadHtml2Canvas();
+            // Double-check it's loaded
+            if (typeof window.html2canvas === 'undefined') {
+                throw new Error('html2canvas failed to load');
+            }
+            const canvas = await window.html2canvas(element, {
+                allowTaint: true,
+                useCORS: true,
+                scale: 0.5, // Reduce quality to decrease file size
+                logging: false,
+                backgroundColor: '#ffffff',
+            });
+            const base64Image = canvas.toDataURL('image/jpeg', 0.8); // Use JPEG with 80% quality for smaller size
+            lastSnapshot.value = base64Image;
+            return base64Image;
+        }
+        catch (error) {
+            console.error('Error capturing snapshot:', error);
+            return null;
+        }
+        finally {
+            isCapturing.value = false;
+        }
+    };
+    return {
+        captureSnapshot,
+        isCapturing,
+        lastSnapshot,
+    };
+}

package/lib/src/composables/useTranslate.d.ts

@@ -84,5 +84,6 @@ declare const confirmModalTr: (key: any, valuesToInterpolate?: {}) => any;
 declare const videoLibraryTr: (key: any) => any;
 declare const logoSwitchConfirmationModalTr: (key: any, valuesToInterpolate?: {}) => any;
 declare const logoTemplateSearchModalTr: (key: any, valuesToInterpolate?: {}) => any;
+declare const generateAiModalTr: (key: any, valuesToInterpolate?: {}) => any;
 declare const currentLocale: () => LocaleTypes;
-export { setLocaleAsync, getCurrentLocale, tr, currentLocale, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, uploadLogoModalTr, sensitiveContentModalTr, quickLinkBarTr, unsplashImageCategoriesTr, brandPageFooterTr, productTr, imageTr, mapTr, imagesSectionTr, imageGalleryTr, newPageModalTr, personalisationOverrideTr, paymentModalTr, mailingListTr, deletePageModalTr, requestPaymentStripeTr, productDetailModalTr, videoTr, bookingUrlFieldTr, confirmModalTr, videoLibraryTr, logoSwitchConfirmationModalTr, logoTemplateSearchModalTr, };
+export { setLocaleAsync, getCurrentLocale, tr, currentLocale, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, uploadLogoModalTr, sensitiveContentModalTr, quickLinkBarTr, unsplashImageCategoriesTr, brandPageFooterTr, productTr, imageTr, mapTr, imagesSectionTr, imageGalleryTr, newPageModalTr, personalisationOverrideTr, paymentModalTr, mailingListTr, deletePageModalTr, requestPaymentStripeTr, productDetailModalTr, videoTr, bookingUrlFieldTr, confirmModalTr, videoLibraryTr, logoSwitchConfirmationModalTr, logoTemplateSearchModalTr, generateAiModalTr, };

package/lib/src/composables/useTranslate.js

@@ -152,6 +152,7 @@ const confirmModalTr = (key, valuesToInterpolate = {}) => tr(`confirmModal.${key
 const videoLibraryTr = (key) => tr(`videoLibrary.${key}`);
 const logoSwitchConfirmationModalTr = (key, valuesToInterpolate = {}) => tr(`logoSwitchConfirmationModal.${key}`, valuesToInterpolate);
 const logoTemplateSearchModalTr = (key, valuesToInterpolate = {}) => tr(`logoTemplateSearchModal.${key}`, valuesToInterpolate);
+const generateAiModalTr = (key, valuesToInterpolate = {}) => tr(`aiModal.${key}`, valuesToInterpolate);
 const currentLocale = () => {
     const i18 = getI18NextInstance();
     const locale = i18.language;
@@ -160,4 +161,4 @@ const currentLocale = () => {
     }
     return fallbackLocale;
 };
-export { setLocaleAsync, getCurrentLocale, tr, currentLocale, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, uploadLogoModalTr, sensitiveContentModalTr, quickLinkBarTr, unsplashImageCategoriesTr, brandPageFooterTr, productTr, imageTr, mapTr, imagesSectionTr, imageGalleryTr, newPageModalTr, personalisationOverrideTr, paymentModalTr, mailingListTr, deletePageModalTr, requestPaymentStripeTr, productDetailModalTr, videoTr, bookingUrlFieldTr, confirmModalTr, videoLibraryTr, logoSwitchConfirmationModalTr, logoTemplateSearchModalTr, };
+export { setLocaleAsync, getCurrentLocale, tr, currentLocale, modelsTr, commonTr, actionBarTr, brandPageSettingsTr, colorPaletteTr, navigationTr, converterTr, backgroundSettingsTr, colorPickerTr, colorReplacementFieldTr, contentSettingsTr, formFieldsTr, genericTextInputTr, imageFieldTr, imagesFieldTr, linksFieldTr, logoSelectionSettingsTr, paymentConfigTr, replaceImageSettingTr, shapeFieldTr, testimonialItemsFieldTr, textFieldTr, textImageFieldTr, textItemsFieldTr, textStyleFieldTr, textAreaFieldTr, productConfigOptionTr, editLogoSettingsTr, myUploadSettingsTr, pageSettingsTr, pageSettingsSectionTr, templateSettingsTr, unsplashLibraryTr, seoSettingsTr, styleSettingsTr, sensitiveSettingTr, socialShareTr, cookieSettingTr, googleAnalyticsTr, colorFieldTr, validatorTr, constantsTr, layoutSwitcherTr, brandpageBackgroundSettingsTr, loginMessageTr, cookieTr, logoSelectionTr, googleAddressFieldTr, myDesignsTr, pageSettingTr, shapeLibraryTr, errorTr, dropzoneUploaderTr, shopTr, paymentTr, publishBrandPageModalWithStateTr, existingDomainModalTr, uploadLogoModalTr, sensitiveContentModalTr, quickLinkBarTr, unsplashImageCategoriesTr, brandPageFooterTr, productTr, imageTr, mapTr, imagesSectionTr, imageGalleryTr, newPageModalTr, personalisationOverrideTr, paymentModalTr, mailingListTr, deletePageModalTr, requestPaymentStripeTr, productDetailModalTr, videoTr, bookingUrlFieldTr, confirmModalTr, videoLibraryTr, logoSwitchConfirmationModalTr, logoTemplateSearchModalTr, generateAiModalTr, };

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -517,6 +517,9 @@ a.maker-anchor {
 .tw-mt-0 {
     margin-top: 0px
 }
+.tw-mt-0\.5 {
+    margin-top: 0.125rem
+}
 .tw-mt-1 {
     margin-top: 0.25rem
 }
@@ -769,12 +772,18 @@ a.maker-anchor {
 .tw-h-svh {
     height: 100svh
 }
+.tw-max-h-10 {
+    max-height: 2.5rem
+}
 .tw-max-h-36 {
     max-height: 9rem
 }
 .tw-max-h-56 {
     max-height: 14rem
 }
+.tw-max-h-64 {
+    max-height: 16rem
+}
 .tw-max-h-72 {
     max-height: 18rem
 }
@@ -1280,6 +1289,11 @@ a.maker-anchor {
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
             transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
+.tw--translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
 .tw--translate-x-2 {
     --tw-translate-x: -0.5rem;
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2043,6 +2057,9 @@ a.maker-anchor {
 .tw-rounded-full {
     border-radius: 9999px
 }
+.tw-rounded-lg {
+    border-radius: 0.5rem
+}
 .tw-rounded-md {
     border-radius: 0.375rem
 }
@@ -2156,6 +2173,10 @@ a.maker-anchor {
     --tw-border-opacity: 1;
     border-color: rgb(194 22 50 / var(--tw-border-opacity))
 }
+.tw-border-error-700 {
+    --tw-border-opacity: 1;
+    border-color: rgb(145 16 38 / var(--tw-border-opacity))
+}
 .tw-border-grayscale-100 {
     --tw-border-opacity: 1;
     border-color: rgb(255 255 255 / var(--tw-border-opacity))
@@ -2905,6 +2926,10 @@ a.maker-anchor {
     --tw-text-opacity: 1;
     color: rgb(242 27 63 / var(--tw-text-opacity))
 }
+.tw-text-error-600 {
+    --tw-text-opacity: 1;
+    color: rgb(194 22 50 / var(--tw-text-opacity))
+}
 .tw-text-error-700 {
     --tw-text-opacity: 1;
     color: rgb(145 16 38 / var(--tw-text-opacity))
@@ -3108,6 +3133,14 @@ a.maker-anchor {
     -webkit-transition-property: none;
     transition-property: none
 }
+.tw-transition-opacity {
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    -webkit-transition-duration: 150ms;
+            transition-duration: 150ms
+}
 .tw-transition-shadow {
     -webkit-transition-property: -webkit-box-shadow;
     transition-property: -webkit-box-shadow;
@@ -3252,6 +3285,10 @@ a.maker-anchor {
         --tw-text-opacity: 1;
         color: rgb(0 151 215 / var(--tw-text-opacity))
     }
+    .hover\:tw-text-info-700:hover {
+        --tw-text-opacity: 1;
+        color: rgb(0 91 129 / var(--tw-text-opacity))
+    }
     .hover\:tw-text-primary-500:hover {
         --tw-text-opacity: 1;
         color: rgb(242 27 63 / var(--tw-text-opacity))
@@ -3297,6 +3334,10 @@ a.maker-anchor {
     --tw-border-opacity: 1;
     border-color: rgb(194 22 50 / var(--tw-border-opacity))
 }
+.focus\:tw-border-error-700:focus {
+    --tw-border-opacity: 1;
+    border-color: rgb(145 16 38 / var(--tw-border-opacity))
+}
 .focus\:tw-border-grayscale-600:focus {
     --tw-border-opacity: 1;
     border-color: rgb(94 94 94 / var(--tw-border-opacity))
@@ -3328,6 +3369,9 @@ a.maker-anchor {
     .tw-group:hover .group-hover\:tw-underline {
         text-decoration-line: underline
     }
+    .tw-group:hover .group-hover\:tw-opacity-100 {
+        opacity: 1
+    }
 }
 @media (min-width: 640px) {
     .sm\:tw-absolute {
@@ -3373,6 +3417,9 @@ a.maker-anchor {
     .sm\:tw-h-auto {
         height: auto
     }
+    .sm\:tw-min-h-10 {
+        min-height: 2.5rem
+    }
     .sm\:tw-w-64 {
         width: 16rem
     }
@@ -3398,6 +3445,10 @@ a.maker-anchor {
         padding-left: 1rem;
         padding-right: 1rem
     }
+    .sm\:tw-text-3xl {
+        font-size: 1.875rem;
+        line-height: 2.25rem
+    }
 }
 @media (min-width: 768px) {
     .md\:tw-right-6 {
@@ -8439,7 +8490,97 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.testimonial-preview[data-v-037d5b71] {
+.c-modal-dcom[data-v-33680d77] {
+  background-color: #eceefe;
+  border: 1px solid #3247c5;
+}
+.c-modal-bc[data-v-33680d77] {
+  background-color: #cceaf7;
+  border: 1px solid #0097d7;
+}
+.typing-cursor[data-v-33680d77] {
+  display: inline-block;
+  -webkit-animation: blink-33680d77 1s step-end infinite;
+          animation: blink-33680d77 1s step-end infinite;
+  color: #3247c5;
+  font-weight: bold;
+  margin-left: 2px;
+}
+.prompt-textarea[data-v-33680d77] {
+  line-height: 1.5;
+  min-height: 4.5rem; /* Minimum 3 rows on mobile (1.5em * 3) */
+  max-height: calc(7.5em + 1rem); /* Maximum 5 rows */
+  color: rgb(96 96 96);
+  scrollbar-gutter: stable;
+  overflow-y: auto;
+}
+
+/* Desktop: smaller minimum height */
+@media (min-width: 640px) {
+.prompt-textarea[data-v-33680d77] {
+    min-height: 2.5rem; /* Single line on desktop */
+}
+}
+.prompt-textarea[data-v-33680d77]::-webkit-input-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]::-moz-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]:-ms-input-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]::-ms-input-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]::placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+
+/* Ensure border is visible when scrollbar appears */
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar {
+  width: 8px;
+}
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 2px;
+}
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar-thumb {
+  background: rgb(96 96 96 / 30%);
+  border-radius: 4px;
+}
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar-thumb:hover {
+  background: rgb(96 96 96 / 50%);
+}
+.text-grayscale[data-v-33680d77] {
+  color: rgb(96 96 96 / 50%);
+}
+.text-success[data-v-33680d77] {
+  --tw-text-opacity: 1;
+  color: rgb(29 134 13 / var(--tw-text-opacity));
+}
+@-webkit-keyframes blink-33680d77 {
+0%,
+  50% {
+    opacity: 1;
+}
+51%,
+  100% {
+    opacity: 0;
+}
+}
+@keyframes blink-33680d77 {
+0%,
+  50% {
+    opacity: 1;
+}
+51%,
+  100% {
+    opacity: 0;
+}
+}
+
+.testimonial-preview[data-v-a66d4bed] {
   overflow: hidden;
   text-overflow: ellipsis;
   max-height: 21px;
@@ -8451,7 +8592,7 @@ input[type='number'][data-v-28a532b4] {
           align-items: flex-start;
 }
 
-.text-item-preview[data-v-9aa75006] {
+.text-item-preview[data-v-7f11c2cf] {
   overflow: hidden;
   text-overflow: ellipsis;
   max-height: 21px;
@@ -8684,7 +8825,7 @@ input[type='number'][data-v-28a532b4] {
     margin-bottom: 1.5rem
 }
 
-.c-brand-page-maker[data-v-b762f3c1] {
+.c-brand-page-maker[data-v-9080d767] {
   --navigation-height-desktop: 64px;
   --navigation-height-mobile: 96px;
   --maker-height: 100vh;
@@ -8694,10 +8835,10 @@ input[type='number'][data-v-28a532b4] {
   height: calc(var(--maker-height) - var(--mobile-sidebar-bottom-height));
   padding-top: var(--navigation-height-mobile);
 }
-.c-brand-page-maker__inner[data-v-b762f3c1] {
+.c-brand-page-maker__inner[data-v-9080d767] {
   height: 100%;
 }
-.c-save-bar[data-v-b762f3c1] {
+.c-save-bar[data-v-9080d767] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8719,7 +8860,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-save-bar--visible[data-v-b762f3c1] {
+.c-save-bar--visible[data-v-9080d767] {
   visibility: visible !important;
   --tw-translate-y: 0px !important;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -8729,11 +8870,11 @@ input[type='number'][data-v-28a532b4] {
           transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (min-width: 1024px) {
-.c-brand-page-maker[data-v-b762f3c1] {
+.c-brand-page-maker[data-v-9080d767] {
     height: calc(var(--maker-height) - var(--navigation-height-desktop));
     padding-top: 0px;
 }
-.c-brand-page-maker__inner[data-v-b762f3c1] {
+.c-brand-page-maker__inner[data-v-9080d767] {
     height: 100%;
 }
 }

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -939,6 +939,9 @@ a.maker-anchor {
 .tw-mt-0 {
   margin-top: 0px;
 }
+.tw-mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .tw-mt-1 {
   margin-top: 0.25rem;
 }
@@ -1191,12 +1194,18 @@ a.maker-anchor {
 .tw-h-svh {
   height: 100svh;
 }
+.tw-max-h-10 {
+  max-height: 2.5rem;
+}
 .tw-max-h-36 {
   max-height: 9rem;
 }
 .tw-max-h-56 {
   max-height: 14rem;
 }
+.tw-max-h-64 {
+  max-height: 16rem;
+}
 .tw-max-h-72 {
   max-height: 18rem;
 }
@@ -1702,6 +1711,11 @@ a.maker-anchor {
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.tw--translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .tw--translate-x-2 {
   --tw-translate-x: -0.5rem;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2467,6 +2481,9 @@ a.maker-anchor {
 .tw-rounded-full {
   border-radius: 9999px;
 }
+.tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -3380,6 +3397,14 @@ a.maker-anchor {
   -webkit-transition-property: none;
   transition-property: none;
 }
+.tw-transition-opacity {
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
 .tw-transition-shadow {
   -webkit-transition-property: -webkit-box-shadow;
   transition-property: -webkit-box-shadow;
@@ -3532,6 +3557,10 @@ a.maker-anchor {
   .tw-group:hover .group-hover\:tw-underline {
     text-decoration-line: underline;
   }
+
+  .tw-group:hover .group-hover\:tw-opacity-100 {
+    opacity: 1;
+  }
 }
 @media (min-width: 640px) {
 
@@ -3592,6 +3621,10 @@ a.maker-anchor {
     height: auto;
   }
 
+  .sm\:tw-min-h-10 {
+    min-height: 2.5rem;
+  }
+
   .sm\:tw-w-64 {
     width: 16rem;
   }
@@ -3623,6 +3656,11 @@ a.maker-anchor {
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
+  .sm\:tw-text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
 }
 @media (min-width: 768px) {
 
@@ -8767,7 +8805,97 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.testimonial-preview[data-v-037d5b71] {
+.c-modal-dcom[data-v-33680d77] {
+  background-color: #eceefe;
+  border: 1px solid #3247c5;
+}
+.c-modal-bc[data-v-33680d77] {
+  background-color: #cceaf7;
+  border: 1px solid #0097d7;
+}
+.typing-cursor[data-v-33680d77] {
+  display: inline-block;
+  -webkit-animation: blink-33680d77 1s step-end infinite;
+          animation: blink-33680d77 1s step-end infinite;
+  color: #3247c5;
+  font-weight: bold;
+  margin-left: 2px;
+}
+.prompt-textarea[data-v-33680d77] {
+  line-height: 1.5;
+  min-height: 4.5rem; /* Minimum 3 rows on mobile (1.5em * 3) */
+  max-height: calc(7.5em + 1rem); /* Maximum 5 rows */
+  color: rgb(96 96 96);
+  scrollbar-gutter: stable;
+  overflow-y: auto;
+}
+
+/* Desktop: smaller minimum height */
+@media (min-width: 640px) {
+.prompt-textarea[data-v-33680d77] {
+    min-height: 2.5rem; /* Single line on desktop */
+}
+}
+.prompt-textarea[data-v-33680d77]::-webkit-input-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]::-moz-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]:-ms-input-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]::-ms-input-placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+.prompt-textarea[data-v-33680d77]::placeholder {
+  color: rgb(96 96 96 / 50%);
+}
+
+/* Ensure border is visible when scrollbar appears */
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar {
+  width: 8px;
+}
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 2px;
+}
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar-thumb {
+  background: rgb(96 96 96 / 30%);
+  border-radius: 4px;
+}
+.prompt-textarea[data-v-33680d77]::-webkit-scrollbar-thumb:hover {
+  background: rgb(96 96 96 / 50%);
+}
+.text-grayscale[data-v-33680d77] {
+  color: rgb(96 96 96 / 50%);
+}
+.text-success[data-v-33680d77] {
+  --tw-text-opacity: 1;
+  color: rgb(29 134 13 / var(--tw-text-opacity));
+}
+@-webkit-keyframes blink-33680d77 {
+0%,
+  50% {
+    opacity: 1;
+}
+51%,
+  100% {
+    opacity: 0;
+}
+}
+@keyframes blink-33680d77 {
+0%,
+  50% {
+    opacity: 1;
+}
+51%,
+  100% {
+    opacity: 0;
+}
+}
+
+.testimonial-preview[data-v-a66d4bed] {
   overflow: hidden;
   text-overflow: ellipsis;
   max-height: 21px;
@@ -8779,7 +8907,7 @@ input[type='number'][data-v-28a532b4] {
           align-items: flex-start;
 }
 
-.text-item-preview[data-v-9aa75006] {
+.text-item-preview[data-v-7f11c2cf] {
   overflow: hidden;
   text-overflow: ellipsis;
   max-height: 21px;
@@ -9012,7 +9140,7 @@ input[type='number'][data-v-28a532b4] {
     margin-bottom: 1.5rem
 }
 
-.c-brand-page-maker[data-v-b762f3c1] {
+.c-brand-page-maker[data-v-9080d767] {
   --navigation-height-desktop: 64px;
   --navigation-height-mobile: 96px;
   --maker-height: 100vh;
@@ -9022,10 +9150,10 @@ input[type='number'][data-v-28a532b4] {
   height: calc(var(--maker-height) - var(--mobile-sidebar-bottom-height));
   padding-top: var(--navigation-height-mobile);
 }
-.c-brand-page-maker__inner[data-v-b762f3c1] {
+.c-brand-page-maker__inner[data-v-9080d767] {
   height: 100%;
 }
-.c-save-bar[data-v-b762f3c1] {
+.c-save-bar[data-v-9080d767] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -9047,7 +9175,7 @@ input[type='number'][data-v-28a532b4] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-save-bar--visible[data-v-b762f3c1] {
+.c-save-bar--visible[data-v-9080d767] {
   visibility: visible !important;
   --tw-translate-y: 0px !important;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
@@ -9057,11 +9185,11 @@ input[type='number'][data-v-28a532b4] {
           transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (min-width: 1024px) {
-.c-brand-page-maker[data-v-b762f3c1] {
+.c-brand-page-maker[data-v-9080d767] {
     height: calc(var(--maker-height) - var(--navigation-height-desktop));
     padding-top: 0px;
 }
-.c-brand-page-maker__inner[data-v-b762f3c1] {
+.c-brand-page-maker__inner[data-v-9080d767] {
     height: 100%;
 }
 }