@designcrowd/library.brand-page 5.15.19 → 5.15.21-ast-previews

package/lib/src/{CreatedOnBrandCrowd-de-de-DD3ObRWo.js → CreatedOnBrandCrowd-de-de-B_xpayh-.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-D48JKE-R.js";
+import { _ as t } from "./lib-C-Ho4Aiu.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-CBplGQp6.js → CreatedOnBrandCrowd-en-us-vUtxwgjD.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-D48JKE-R.js";
+import { _ as t } from "./lib-C-Ho4Aiu.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-DJMz8f-I.js → CreatedOnBrandCrowd-es-es-F4XWuYlk.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-D48JKE-R.js";
+import { _ as t } from "./lib-C-Ho4Aiu.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-C_MmRu4G.js → CreatedOnBrandCrowd-fr-ca-Dp3p64Ng.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-D48JKE-R.js";
+import { _ as t } from "./lib-C-Ho4Aiu.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-C_MmRu4G.js → CreatedOnBrandCrowd-fr-fr-Dp3p64Ng.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-D48JKE-R.js";
+import { _ as t } from "./lib-C-Ho4Aiu.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-4T9iN569.js → CreatedOnBrandCrowd-pt-br-DbvlKcTH.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-D48JKE-R.js";
+import { _ as t } from "./lib-C-Ho4Aiu.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-4T9iN569.js → CreatedOnBrandCrowd-pt-pt-DbvlKcTH.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-D48JKE-R.js";
+import { _ as t } from "./lib-C-Ho4Aiu.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-CbNUacST.js → CreatedOnDcom-de-de-CI0CBxU6.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-D48JKE-R.js";
+import { _ as e } from "./lib-C-Ho4Aiu.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-CaEyyD87.js → CreatedOnDcom-en-us-BeidG_AF.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-D48JKE-R.js";
+import { _ as e } from "./lib-C-Ho4Aiu.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-DcV6ec9r.js → CreatedOnDcom-es-es-PGD92ujM.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-D48JKE-R.js";
+import { _ as e } from "./lib-C-Ho4Aiu.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-CtOjmVPg.js → CreatedOnDcom-fr-ca-DDW5qahq.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-D48JKE-R.js";
+import { _ as e } from "./lib-C-Ho4Aiu.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-RaSxMrZK.js → CreatedOnDcom-fr-fr-H9uwg24x.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-D48JKE-R.js";
+import { _ as e } from "./lib-C-Ho4Aiu.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-CtXTUBup.js → CreatedOnDcom-pt-br-DXzuBtQ6.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-D48JKE-R.js";
+import { _ as M } from "./lib-C-Ho4Aiu.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-BjH7kv4x.js → CreatedOnDcom-pt-pt-DPNC6h9-.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as H, openBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-D48JKE-R.js";
+import { _ as M } from "./lib-C-Ho4Aiu.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/utils/svg-shape.util.js

@@ -234,7 +234,13 @@ export const handleAttributes = (svgConfig, childElement) => {
     }
     let elementAttributeString = '';
     Object.keys(attributes).forEach((k) => {
-        elementAttributeString += ` ${k}="${attributes[k]}"`;
+        const value = attributes[k];
+        // Remove quotes from URL references to prevent malformed HTML
+        let escapedValue = value;
+        if (typeof value === 'string' && value.includes('url(')) {
+            escapedValue = value.replace(/"/g, '').replace(/'/g, '');
+        }
+        elementAttributeString += ` ${k}="${escapedValue}"`;
     });
     childElement.properties = attributes;
     return {

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/shape-fixture.js

@@ -12,6 +12,30 @@ export const SHAPES_RESPONSE = {
             isEnabledToAdmin: true,
             category: 'Badge',
         },
+        {
+            token: 'c8eeb978-b998-431b-9203-5a43f2f85bdf',
+            url: 'https://bcassetcdn.com/shapes/prod/c8eeb978-b998-431b-9203-5a43f2f85bdf.svg',
+            keepColor: false,
+            isEnabled: true,
+            isEnabledToAdmin: true,
+            category: 'Gradient',
+        },
+        {
+            token: '5d3f4e14-4f52-4a1a-85ec-8cd32f5ceae7',
+            url: 'https://bcassetcdn.com/shapes/prod/5d3f4e14-4f52-4a1a-85ec-8cd32f5ceae7.svg',
+            keepColor: false,
+            isEnabled: true,
+            isEnabledToAdmin: true,
+            category: 'Gradient',
+        },
+        {
+            token: '0031c50d-8940-4f50-a86e-04d191d4ec76',
+            url: 'https://bcassetcdn.com/shapes/prod/0031c50d-8940-4f50-a86e-04d191d4ec76.svg',
+            keepColor: false,
+            isEnabled: true,
+            isEnabledToAdmin: true,
+            category: 'Gradient',
+        },
         {
             token: '005d86ec-351b-4ac5-be07-17c8300d2022',
             url: 'https://bcassetcdn.com/shapes/prod/9ed5803f-c621-49fe-99ca-9c9b7c7b3050.svg',

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.d.ts

@@ -15,6 +15,8 @@ interface TemplatePreviewData {
     renderHeight: number;
     renderWidth: number;
     rootStyles: BrandPageCssStyle;
+    imageLoadError: boolean;
+    imageLoading: boolean;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     logoImage: {
@@ -61,6 +63,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {
     selectedTemplateId: import("vue").ComputedRef<string | false>;
+    isPrePurchase: import("vue").ComputedRef<boolean>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("../../stores").BrandPageMakerState, {
         contentErrorCount(): number;
         brandPageBaseUrl(): string;
@@ -186,6 +189,224 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         showStripeOnboardingModal(): Promise<void>;
         selectInitialCategories(payload: import("../../../shared/template-settings/models").InitialCategories): void;
     }>;
+    brandPageContainerStore: import("pinia").Store<"brandPageContainer", import("../../stores").BrandPageContainerState, {
+        brandPageContentTypes(): string[];
+        isAdmin(): boolean;
+        isPublished: (state: {
+            availableTaxes: any[];
+            brandPageBaseUrl: string;
+            baseFabricRenderUrl: string;
+            brandPageDescription: string;
+            brandPageDisplayName: string;
+            sensitiveContent: number;
+            brandPageSlug: string;
+            brandPageStatus: string;
+            brandPageToken: string | undefined;
+            brandPageTitle: string;
+            customDomain: {
+                id: string;
+                created: Date;
+                updated: Date;
+                brandPageToken: string;
+                domainName: string;
+                status: "active" | "pending" | "failed" | "renewFailed" | "deleted";
+                dnsConfigurationStatus: "request_expired" | "missing_expected_dns_records" | "invalid_multiple_dns_records_exist" | "unexpected_aaaa_record" | "completed";
+                triggerOrigin?: string | undefined;
+            } | null;
+            createCustomDomainErrorMessage: string | null;
+            customDomainConfig?: {
+                dns: {
+                    ipAddresses: string[];
+                };
+            } | undefined;
+            designDraftToken?: string | undefined;
+            designTemplateToken: string;
+            isCustomDomainEnabled: boolean;
+            isBrandPageSlugEditMode: boolean;
+            isPublishModalVisible: boolean;
+            isUpgradeModalVisible: boolean;
+            isPublishing: boolean;
+            isProduction: boolean;
+            isSellDomainNameEnabled: boolean;
+            isStripeOnboardingModalVisible: boolean;
+            isReactivationModal: boolean;
+            isPublishUpgradeModal: boolean;
+            isSaving: boolean;
+            backButtonLabel: string;
+            manageWebsiteDesignsUrl: string;
+            publishErrorMessage: string;
+            upgradeUrl: string;
+            reactivationUrl: string;
+            runtimeEnvironment: string;
+            selectedTaxId: number | undefined;
+            slug: string;
+            standalone: boolean;
+            triggerSaveSuccessMessage: boolean;
+            isDesignCom: boolean;
+            isPrePurchase: boolean;
+            makerFonts: any[];
+            eventButtonLocation?: string | undefined;
+            websiteUpsellModalViewModel?: any;
+            showPublishOptionModal?: boolean | undefined;
+            abTests: Record<string, string>;
+            isSubsequentPublish: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
+        isUserDraft: (state: {
+            availableTaxes: any[];
+            brandPageBaseUrl: string;
+            baseFabricRenderUrl: string;
+            brandPageDescription: string;
+            brandPageDisplayName: string;
+            sensitiveContent: number;
+            brandPageSlug: string;
+            brandPageStatus: string;
+            brandPageToken: string | undefined;
+            brandPageTitle: string;
+            customDomain: {
+                id: string;
+                created: Date;
+                updated: Date;
+                brandPageToken: string;
+                domainName: string;
+                status: "active" | "pending" | "failed" | "renewFailed" | "deleted";
+                dnsConfigurationStatus: "request_expired" | "missing_expected_dns_records" | "invalid_multiple_dns_records_exist" | "unexpected_aaaa_record" | "completed";
+                triggerOrigin?: string | undefined;
+            } | null;
+            createCustomDomainErrorMessage: string | null;
+            customDomainConfig?: {
+                dns: {
+                    ipAddresses: string[];
+                };
+            } | undefined;
+            designDraftToken?: string | undefined;
+            designTemplateToken: string;
+            isCustomDomainEnabled: boolean;
+            isBrandPageSlugEditMode: boolean;
+            isPublishModalVisible: boolean;
+            isUpgradeModalVisible: boolean;
+            isPublishing: boolean;
+            isProduction: boolean;
+            isSellDomainNameEnabled: boolean;
+            isStripeOnboardingModalVisible: boolean;
+            isReactivationModal: boolean;
+            isPublishUpgradeModal: boolean;
+            isSaving: boolean;
+            backButtonLabel: string;
+            manageWebsiteDesignsUrl: string;
+            publishErrorMessage: string;
+            upgradeUrl: string;
+            reactivationUrl: string;
+            runtimeEnvironment: string;
+            selectedTaxId: number | undefined;
+            slug: string;
+            standalone: boolean;
+            triggerSaveSuccessMessage: boolean;
+            isDesignCom: boolean;
+            isPrePurchase: boolean;
+            makerFonts: any[];
+            eventButtonLocation?: string | undefined;
+            websiteUpsellModalViewModel?: any;
+            showPublishOptionModal?: boolean | undefined;
+            abTests: Record<string, string>;
+            isSubsequentPublish: boolean;
+        } & import("pinia").PiniaCustomStateProperties<import("../../stores").BrandPageContainerState>) => boolean;
+    }, {
+        initialise(payload: import("../../stores/brandpage-container").InitialisePayload): void;
+        setDesignTemplateToken(payload: any): void;
+        setDesignDraftToken(payload: any): void;
+        setIsBrandPageSlugEditMode(payload: any): void;
+        setIsPublishing(payload: any): void;
+        setIsPublishModalVisible(payload: any): void;
+        setIsPublishUpgradeModal(payload: any): void;
+        setIsSaving(payload: any): void;
+        setIsUpgradeModalVisible(payload: any): void;
+        setPublishErrorMessage(payload: any): void;
+        setTriggerSaveSuccessMessage(payload: any): void;
+        setSlug(payload: any): void;
+        updateBrandPageMeta(payload: any): void;
+        updateBrandPageSensitiveContent(payload: any): void;
+        setLogoDraftToken(payload: {
+            logoDraftToken: string;
+        }): void;
+        setBackUrl(payload: any): void;
+        setIsStripeOnboardingModalVisible(payload: any): void;
+        setSelectedTaxId(payload: any): void;
+        setBrandPageCustomDomainConfig({ customDomainConfig }: {
+            customDomainConfig: any;
+        }): void;
+        setBrandPageCustomDomain(payload: {
+            customDomain: import("../../models").CustomDomainModel | null;
+        }): void;
+        setCreateCustomDomainErrorMessage(payload: any): void;
+        setBrandPageIsCustomDomainEnabled(payload: any): void;
+        setIsSubsequentPublish(payload: any): void;
+        clearPublishErrorMessage(): void;
+        closePublishModal(payload?: {
+            skipShowNextNotificationMessage?: boolean | undefined;
+        }): Promise<void>;
+        closeUpgradeModal(): Promise<void>;
+        endBrandPageSlugEditMode(): void;
+        publishBrandPage({ shouldPublish, slug }: {
+            shouldPublish: any;
+            slug: any;
+        }): Promise<false | {
+            success: boolean;
+            websiteUpsellModalViewModel: any;
+        }>;
+        publishBrandPageWithCustomDomainAsync({ shouldPublish, slug, domain, isPurchasedDomain, }: {
+            shouldPublish: any;
+            slug: any;
+            domain: any;
+            isPurchasedDomain: any;
+        }): Promise<boolean | undefined>;
+        checkWebsiteSlugAsync(slug: string): Promise<import("../../models/api.model").WebsiteSlugCheckResponse | null>;
+        redirectToLogoEditPage(logoEditUrl: string, locale: string): Promise<void>;
+        redirectToCreateNewDesignPage(): Promise<void>;
+        redirectToStripeOnboarding(): Promise<void>;
+        exportDesignAsync(): Promise<any>;
+        saveBrandPage(payload?: {
+            isPublish?: boolean | undefined;
+            eventButtonLocation?: string | undefined;
+        }): Promise<false | {
+            saved: boolean;
+            canPublish: boolean;
+            websiteUpsellModalViewModel: any;
+        }>;
+        saveAndPublishBrandPage(eventButtonLocation: string): Promise<void>;
+        saveTemplate(): Promise<void>;
+        setBrandPageStatus(status: any): Promise<void>;
+        showPublishModal(eventButtonLocation?: string | undefined, websiteUpsellModalViewModel?: any, isSubsequentPublish?: boolean | undefined): void;
+        showBrandPageSlugEditModal(eventButtonLocation: string): Promise<void>;
+        showUpgradeModalAndSaveAsync(): Promise<void>;
+        showStripeOnboardingModal(): void;
+        closeStripeOnboardingModal(): void;
+        showSaveSuccessMessage(): Promise<void>;
+        startBrandPageSlugEditMode(): void;
+        triggerLockedContentClickedEvent(contentType: string): Promise<void>;
+        unpublishBrandPage(): Promise<void>;
+        updateBrandPageSettings({ description, title }: {
+            description: any;
+            title: any;
+        }): Promise<void>;
+        updateSensitiveContent({ sensitiveContent }: {
+            sensitiveContent: any;
+        }): Promise<void>;
+        createBrandPageCustomDomain({ domainName }: {
+            domainName: any;
+        }): Promise<false | undefined>;
+        createBrandPageWithPurchasedDomain({ domainName }: {
+            domainName: any;
+        }): Promise<false | undefined>;
+        deleteBrandPageCustomDomain({ designDraftToken, customDomainId }: {
+            designDraftToken: any;
+            customDomainId: any;
+        }): Promise<void>;
+        refreshBrandPageCustomDomainConfig(): Promise<void>;
+        refreshBrandPageCustomDomain(): Promise<void>;
+        updateBrandPageIsCustomDomainEnabled({ isCustomDomainEnabled }: {
+            isCustomDomainEnabled: any;
+        }): Promise<void>;
+    }>;
 }, TemplatePreviewData, {
     context(): BrandPageContext;
     previewViewport(): string;
@@ -193,10 +414,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     innerContainerStyle(): BrandPageCssStyle;
     isPersonalisable(): boolean;
     cssVariablesStyle(): Record<string, string>;
+    previewImageUrl(): string;
 }, {
     onOverlayClicked(): void;
     onResize(): void;
     onSetPreviewStyles(styles: BrandPageCssStyle): void;
+    onImageError(): void;
+    onImageLoad(): void;
+    generatePreviewImageUrl(): string;
+    getPreviewBaseUrl(): string;
+    regeneratePreview(): void;
     updateViewModel(forceUpdate?: boolean): Promise<void>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "template-selected"[], "template-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     logoImage: {

package/lib/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.js

@@ -4,16 +4,19 @@ import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageMode
 import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
-import { useBrandPageMakerStore } from '../../stores';
+import { useBrandPageContainerStore, useBrandPageMakerStore, } from '../../stores';
 import { applyLogoImageBase64UrlToBrandPageTemplateModel, applyLogoImageToBrandPageTemplateModel, applyLogoTemplateImageToBrandPageTemplateModel, } from '../../../brand-page/utils/logo.util';
 const DEBOUNCE_IN_MS = 250;
 export default defineComponent({
     emits: ['template-selected'],
     setup() {
         const brandPageMakerStore = useBrandPageMakerStore();
+        const brandPageContainerStore = useBrandPageContainerStore();
         return {
             selectedTemplateId: computed(() => brandPageMakerStore.selectedTemplateId),
+            isPrePurchase: computed(() => brandPageContainerStore.isPrePurchase),
             brandPageMakerStore,
+            brandPageContainerStore,
         };
     },
     props: {
@@ -72,6 +75,8 @@ export default defineComponent({
             renderWidth: 400,
             rootStyles: {},
             viewModel: undefined,
+            imageLoadError: false,
+            imageLoading: true,
         };
         return data;
     },
@@ -145,16 +150,42 @@ export default defineComponent({
             });
             return cssVariables;
         },
+        previewImageUrl() {
+            return this.generatePreviewImageUrl();
+        },
     },
     watch: {
-        logoTheme: {
-            handler() {
+        template() {
+            if (this.isPrePurchase) {
                 this.updateViewModel();
+            }
+            else {
+                this.imageLoading = true;
+                this.regeneratePreview();
+            }
+        },
+        logoImage: {
+            handler() {
+                this.regeneratePreview();
             },
             deep: true,
         },
-        template() {
-            this.updateViewModel();
+        logoTemplateImage: {
+            handler() {
+                this.regeneratePreview();
+            },
+            deep: true,
+        },
+        logoTheme: {
+            handler() {
+                if (this.isPrePurchase) {
+                    this.updateViewModel();
+                }
+                else {
+                    this.regeneratePreview();
+                }
+            },
+            deep: true,
         },
     },
     created() {
@@ -195,7 +226,38 @@ export default defineComponent({
         onSetPreviewStyles(styles) {
             this.rootStyles = styles;
         },
+        onImageError() {
+            console.warn(`Failed to load preview image for template ${this.template.id}`);
+            this.imageLoadError = true;
+            this.imageLoading = false;
+        },
+        onImageLoad() {
+            this.imageLoadError = false;
+            this.imageLoading = false;
+        },
+        generatePreviewImageUrl() {
+            const baseUrl = this.getPreviewBaseUrl();
+            const logoDraftToken = this.logoImage?.logoDraftToken ||
+                '0B660926-D94A-4E29-99D1-F07E67AA6E49';
+            const deviceType = this.brandPageMakerStore.brandPageType === 'brandSite'
+                ? 'desktop'
+                : 'mobile';
+            return `${baseUrl}/preview/template/${this.template.id}/${logoDraftToken}?deviceType=${deviceType}`;
+        },
+        getPreviewBaseUrl() {
+            const domainSuffix = '.brand.page';
+            const envPrefix = window.location.hostname.split('.')[0];
+            return `https://preview-${envPrefix}${domainSuffix}`;
+        },
+        regeneratePreview() {
+            this.imageLoadError = false;
+            this.imageLoading = true;
+            this.$forceUpdate();
+        },
         async updateViewModel(forceUpdate = true) {
+            if (!this.isPrePurchase) {
+                return;
+            }
             let model = this.template.brandPageModel;
             if (this.logoImageBase64Url) {
                 model = applyLogoImageBase64UrlToBrandPageTemplateModel(model, this.logoImageBase64Url);

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

@@ -4996,7 +4996,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   border-radius: 0 !important;
 }
 
-@-webkit-keyframes slide-2647dcd6 {
+@-webkit-keyframes slide-37727356 {
 0% {
     -webkit-transform: translateX(-40%);
             transform: translateX(-40%);
@@ -5021,7 +5021,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
             transform: translateX(150%);
 }
 }
-@keyframes slide-2647dcd6 {
+@keyframes slide-37727356 {
 0% {
     -webkit-transform: translateX(-40%);
             transform: translateX(-40%);
@@ -5046,7 +5046,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
             transform: translateX(150%);
 }
 }
-.brand-page__footer[data-v-2647dcd6] {
+.brand-page__footer[data-v-37727356] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5054,7 +5054,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.brand-page__footer-link[data-v-2647dcd6] {
+.brand-page__footer-link[data-v-37727356] {
   display: block;
   border-radius: 0.25rem;
   padding: 0.75rem;
@@ -5062,37 +5062,37 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   -webkit-transition: background 0.2s ease-in-out;
   transition: background 0.2s ease-in-out;
 }
-.brand-page__footer-link[data-v-2647dcd6]:hover {
+.brand-page__footer-link[data-v-37727356]:hover {
   opacity: 0.9;
 }
-.icon-container[data-v-2647dcd6] {
+.icon-container[data-v-37727356] {
   width: 20px;
   overflow: hidden;
 }
-.icon-right[data-v-2647dcd6] {
+.icon-right[data-v-37727356] {
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  -webkit-animation-name: slide-2647dcd6;
-          animation-name: slide-2647dcd6;
+  -webkit-animation-name: slide-37727356;
+          animation-name: slide-37727356;
   -webkit-animation-duration: 3s;
           animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
 }
-.btn-dcom[data-v-2647dcd6] {
+.btn-dcom[data-v-37727356] {
   --tw-border-opacity: 1;
   --tw-bg-opacity: 1;
   border-color: rgb(63 89 246 / var(--tw-border-opacity));
   background-color: rgb(63 89 246 / var(--tw-bg-opacity));
   font-family: 'Inter', Lato, sans-serif;
 }
-.extra-height[data-v-2647dcd6] {
+.extra-height[data-v-37727356] {
   -webkit-transition: height 0.5s ease-in-out;
   transition: height 0.5s ease-in-out;
   width: 100%;
 }
-.btn-bc[data-v-2647dcd6] {
+.btn-bc[data-v-37727356] {
   font-family: Lato, Helvetica, sans-serif;
 }
 
@@ -8630,11 +8630,11 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.template-preview[data-v-c5fa6125] {
+.template-preview[data-v-072c3b9b] {
   position: relative;
   background-attachment: initial !important
 }
-.template-preview__overlay[data-v-c5fa6125] {
+.template-preview__overlay[data-v-072c3b9b] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8645,10 +8645,28 @@ input[type='number'][data-v-28a532b4] {
   cursor: pointer;
   opacity: 0
 }
-.template-preview__page[data-v-c5fa6125] {
+.template-preview__image-container[data-v-072c3b9b] {
+  pointer-events: none;
+  height: 100%;
+  width: 100%
+}
+.template-preview__image[data-v-072c3b9b] {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: fill;
+     object-fit: fill;
+  -webkit-transition: -webkit-filter 0.2s ease;
+  transition: -webkit-filter 0.2s ease;
+  transition: filter 0.2s ease;
+  transition: filter 0.2s ease, -webkit-filter 0.2s ease
+}
+.template-preview__page[data-v-072c3b9b] {
   pointer-events: none
 }
-.template-preview[data-v-c5fa6125] .c-shape-background {
+.template-preview[data-v-072c3b9b] .c-shape-background {
+  position: absolute
+}
+.template-preview__image[data-v-072c3b9b] .c-shape-background {
   position: absolute
 }