@designcrowd/library.brand-page 5.15.17-1 → 5.15.17-ast-previews

package/lib/src/{CreatedOnBrandCrowd-de-de-CmqEPo1y.js → CreatedOnBrandCrowd-de-de-DhqVq1R4.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-cH8A7qt0.js → CreatedOnBrandCrowd-en-us-gHKO7Euu.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-Bchs7pSq.js → CreatedOnBrandCrowd-es-es-BiqMA1-P.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-CiHoh2Wr.js → CreatedOnBrandCrowd-fr-ca-DeD80sNd.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-CiHoh2Wr.js → CreatedOnBrandCrowd-fr-fr-DeD80sNd.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-BFvxv5MP.js → CreatedOnBrandCrowd-pt-br-FYtTRyJj.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-BFvxv5MP.js → CreatedOnBrandCrowd-pt-pt-FYtTRyJj.js}

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

package/lib/src/{CreatedOnDcom-de-de-pwSHJCGT.js → CreatedOnDcom-de-de-DiyaqKgn.js}

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

package/lib/src/{CreatedOnDcom-en-us-B1KGPm73.js → CreatedOnDcom-en-us-BsH92alk.js}

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

package/lib/src/{CreatedOnDcom-es-es-B2duoIP2.js → CreatedOnDcom-es-es-DXv36XgZ.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-Ber32xnq.js → CreatedOnDcom-fr-ca-DwCGXfKv.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-CkT4FW56.js → CreatedOnDcom-fr-fr-zHQ4Y1xm.js}

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

package/lib/src/{CreatedOnDcom-pt-br-DGPKprIJ.js → CreatedOnDcom-pt-br-CZoYGQlg.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-Dt4sertb.js → CreatedOnDcom-pt-pt-BZOFxo9Q.js}

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

package/lib/src/brand-page/utils/migration/migration-07.js

@@ -1,4 +1,4 @@
-import { BRAND_PAGE_TYPES, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, PageFooterDesktop, PageFooterMobile, PageHeaderDesktop, PageHeaderMobile, } from '../..';
+import { BRAND_PAGE_TYPES, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, } from '../..';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { calculateLogoDimensions } from '../logo.util';
 export const migration07 = async (migrationResult, options) => {

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

@@ -1,20 +1,17 @@
 /// <reference types="types/lodash-shims" />
 import type { PropType } from 'vue';
-import type { BrandPageContext, BrandPageViewModel, LogoImageModel, LogoTemplateImageModel, LogoTheme, UserPersonalisation } from '../../../brand-page';
+import type { BrandPageViewModel, LogoImageModel, LogoTemplateImageModel, LogoTheme, UserPersonalisation } from '../../../brand-page';
 import type { TemplateSettingsTemplate } from '../../../shared/template-settings/models';
 import type { DebounceHandle } from 'lodash.debounce';
-interface TemplatePreviewData {
-    containerStyle: BrandPageCssStyle;
+export interface TemplatePreviewData {
+    containerStyle: Record<string, string>;
     debouncedOnResize?: DebounceHandle;
     resizeObserver?: ResizeObserver;
-    viewModel?: BrandPageViewModel;
     resized: boolean;
     scale: number;
-    mobileRenderHeight: number;
-    desktopRenderHeight: number;
     renderHeight: number;
     renderWidth: number;
-    rootStyles: BrandPageCssStyle;
+    imageLoadError: boolean;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     logoImage: {
@@ -186,17 +183,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         selectInitialCategories(payload: import("../../../shared/template-settings/models").InitialCategories): void;
     }>;
 }, TemplatePreviewData, {
-    context(): BrandPageContext;
-    previewViewport(): string;
-    scaledContainerStyle(): BrandPageCssStyle;
-    innerContainerStyle(): BrandPageCssStyle;
+    scaledContainerStyle(): Record<string, string>;
+    innerContainerStyle(): Record<string, string>;
+    previewImageUrl(): string;
+    themeFilterStyle(): Record<string, string>;
     isPersonalisable(): boolean;
-    cssVariablesStyle(): Record<string, string>;
 }, {
     onOverlayClicked(): void;
     onResize(): void;
-    onSetPreviewStyles(styles: BrandPageCssStyle): void;
-    updateViewModel(forceUpdate?: boolean): Promise<void>;
+    onImageError(): void;
+    onImageLoad(): void;
+    generatePreviewImageUrl(): string;
+    getPreviewBaseUrl(): string;
+    regeneratePreview(): void;
+    generateFullViewModel(): Promise<BrandPageViewModel>;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "template-selected"[], "template-selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     logoImage: {
         type: PropType<LogoImageModel>;

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

@@ -1,7 +1,5 @@
 import { computed, defineComponent } from 'vue';
-import { BRAND_PAGE_TYPES, MEDIA_SIZES, VIEWPORTS } from '../../../brand-page';
 import { applyLogoThemeToBrandPageModel, applyUserPersonalisationToBrandPageModelAsync, getBrandPageViewModelFromBrandPageModel, } from '../../../brand-page/utils';
-import { STYLE_THEME_KEYS } from '../../../brand-page/constants';
 import debounce from 'lodash.debounce';
 import { MOBILE_HEIGHT, MOBILE_WIDTH } from '../../constants';
 import { useBrandPageMakerStore } from '../../stores';
@@ -66,51 +64,13 @@ export default defineComponent({
             debouncedOnResize: undefined,
             resized: false,
             scale: 1,
-            mobileRenderHeight: 650,
-            desktopRenderHeight: 900,
             renderHeight: 900,
             renderWidth: 400,
-            rootStyles: {},
-            viewModel: undefined,
+            imageLoadError: false,
         };
         return data;
     },
     computed: {
-        context() {
-            return {
-                isTemplate: true,
-                isPreview: true,
-                isProduction: true,
-                isDesignCom: false,
-                isServerRender: false,
-                brandPageSlug: '',
-                brandPageToken: this.viewModel?.brandPageToken,
-                runtimeEnvironment: '',
-                stripePublishableKey: undefined,
-                pageTitle: this.brandPageTitle,
-                pages: this.viewModel?.pages || [],
-                currentPageSlug: this.viewModel?.pages[0]?.slug || '',
-                customDomain: undefined,
-                brandPageType: this.viewModel?.brandPageType || BRAND_PAGE_TYPES.default,
-                isBrandPage: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.default,
-                isBrandPageOrIsBrandContact: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.default ||
-                    this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandContact,
-                isBrandSite: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandSite,
-                isBrandContact: this.viewModel?.brandPageType === BRAND_PAGE_TYPES.brandContact,
-                options: {
-                    disableNavigationSideMenu: true,
-                    mediaSizes: MEDIA_SIZES.sizeThumb,
-                },
-                isCapturingPreview: false,
-            };
-        },
-        previewViewport() {
-            if (!this.viewModel?.brandPageType ||
-                this.viewModel?.brandPageType === BRAND_PAGE_TYPES.default) {
-                return VIEWPORTS.mobile;
-            }
-            return VIEWPORTS.desktop;
-        },
         scaledContainerStyle() {
             return {
                 transform: 'scale(' + this.scale + ')',
@@ -121,44 +81,49 @@ export default defineComponent({
             return {
                 width: `${this.renderWidth}px`,
                 height: `${this.renderHeight}px`,
-                ...this.rootStyles,
-                backgroundAttachment: 'scroll',
                 position: 'relative',
             };
         },
-        isPersonalisable() {
-            return this.template.isPersonalisable || false;
+        previewImageUrl() {
+            return this.generatePreviewImageUrl();
         },
-        cssVariablesStyle() {
-            if (!this.logoTheme) {
+        themeFilterStyle() {
+            if (!this.logoTheme?.logoBackgroundColor?.hsl) {
                 return {};
             }
-            const cssVariables = {};
-            // Generate CSS variables for logo theme colors
-            Object.entries(STYLE_THEME_KEYS).forEach(([key, value]) => {
-                const themeColor = key.includes('Background')
-                    ? this.logoTheme.logoBackgroundColor
-                    : this.logoTheme.logoTextColor;
-                if (themeColor?.rgb) {
-                    cssVariables[`--${value}`] = themeColor.rgb;
-                }
-            });
-            return cssVariables;
+            const hue = this.logoTheme.logoBackgroundColor.hsl.h;
+            return {
+                filter: `hue-rotate(${hue}deg)`,
+            };
+        },
+        isPersonalisable() {
+            return this.template.isPersonalisable || false;
         },
     },
     watch: {
-        logoTheme: {
+        template() {
+            this.regeneratePreview();
+        },
+        logoImage: {
             handler() {
-                this.updateViewModel();
+                this.regeneratePreview();
             },
             deep: true,
         },
-        template() {
-            this.updateViewModel();
+        logoTemplateImage: {
+            handler() {
+                this.regeneratePreview();
+            },
+            deep: true,
+        },
+        logoTheme: {
+            handler() {
+                this.regeneratePreview();
+            },
+            deep: true,
         },
     },
     created() {
-        this.updateViewModel(false);
         this.debouncedOnResize = debounce(this.onResize, DEBOUNCE_IN_MS);
         this.$nextTick(() => {
             this.resized = true;
@@ -192,10 +157,34 @@ export default defineComponent({
             this.scale = container.clientWidth / this.renderWidth;
             this.containerStyle.height = `${this.renderHeight * this.scale}px`;
         },
-        onSetPreviewStyles(styles) {
-            this.rootStyles = styles;
+        onImageError() {
+            console.warn(`Failed to load preview image for template ${this.template.id}`);
+            this.imageLoadError = true;
+        },
+        onImageLoad() {
+            this.imageLoadError = false;
+        },
+        generatePreviewImageUrl() {
+            const baseUrl = this.getPreviewBaseUrl();
+            const logoDraftToken = this.logoImage?.logoDraftToken ||
+                '0B660926-D94A-4E29-99D1-F07E67AA6E49';
+            return `${baseUrl}/preview/template/${this.template.id}/${logoDraftToken}?deviceType=mobile`;
+        },
+        getPreviewBaseUrl() {
+            let domainSuffix = '.brand.page';
+            if (this.brandPageMakerStore.brandPageType === 'brandSite') {
+                domainSuffix = '.brand.site';
+            }
+            else if (this.brandPageMakerStore.brandPageType === 'brandContact') {
+                domainSuffix = '.brand.contact';
+            }
+            return `https://preview-${window.location.hostname}${domainSuffix}`;
         },
-        async updateViewModel(forceUpdate = true) {
+        regeneratePreview() {
+            this.imageLoadError = false;
+            this.$forceUpdate();
+        },
+        async generateFullViewModel() {
             let model = this.template.brandPageModel;
             if (this.logoImageBase64Url) {
                 model = applyLogoImageBase64UrlToBrandPageTemplateModel(model, this.logoImageBase64Url);
@@ -211,10 +200,7 @@ export default defineComponent({
                 model = result.model;
             }
             model = applyLogoThemeToBrandPageModel(this.logoTheme, model).model;
-            this.viewModel = await getBrandPageViewModelFromBrandPageModel(model, undefined, false);
-            if (forceUpdate) {
-                this.$forceUpdate();
-            }
+            return await getBrandPageViewModelFromBrandPageModel(model, undefined, false);
         },
     },
 });

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

@@ -7070,14 +7070,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-4eac537a] {
+.brand-page-root[data-v-d4cc0d12] {
   height: 100%;
 }
-.sortable[data-v-4eac537a] {
+.sortable[data-v-d4cc0d12] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-4eac537a] {
+.brand-page[data-v-d4cc0d12] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7089,7 +7089,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-4eac537a] {
+.brand-page__inner--default[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7101,16 +7101,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-4eac537a] {
+.brand-page__inner--desktop[data-v-d4cc0d12] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-4eac537a] {
+.brand-site__header[data-v-d4cc0d12] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-4eac537a] {
+.brand-page__header[data-v-d4cc0d12] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-4eac537a] {
+.brand-page__content--default[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7127,7 +7127,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-4eac537a] {
+.brand-page__content--desktop[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7143,15 +7143,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-4eac537a] {
+.brand-page__content--inner[data-v-d4cc0d12] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-4eac537a] {
+.brand-page__content--inner--brandsite[data-v-d4cc0d12] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-4eac537a] {
+.brand-page__content--outline-selected[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7159,20 +7159,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-4eac537a] {
+.brand-page__content--outline-footer-selected[data-v-d4cc0d12] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -8630,11 +8630,11 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.template-preview[data-v-c5fa6125] {
+.template-preview[data-v-6be0a701] {
   position: relative;
   background-attachment: initial !important
 }
-.template-preview__overlay[data-v-c5fa6125] {
+.template-preview__overlay[data-v-6be0a701] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8645,11 +8645,20 @@ input[type='number'][data-v-28a532b4] {
   cursor: pointer;
   opacity: 0
 }
-.template-preview__page[data-v-c5fa6125] {
-  pointer-events: none
+.template-preview__image-container[data-v-6be0a701] {
+  pointer-events: none;
+  height: 100%;
+  width: 100%
 }
-.template-preview[data-v-c5fa6125] .c-shape-background {
-  position: absolute
+.template-preview__image[data-v-6be0a701] {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -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
 }
 
 .section[data-v-0512603c] {

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

@@ -7398,14 +7398,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-4eac537a] {
+.brand-page-root[data-v-d4cc0d12] {
   height: 100%;
 }
-.sortable[data-v-4eac537a] {
+.sortable[data-v-d4cc0d12] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-4eac537a] {
+.brand-page[data-v-d4cc0d12] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7417,7 +7417,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-4eac537a] {
+.brand-page__inner--default[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7429,16 +7429,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-4eac537a] {
+.brand-page__inner--desktop[data-v-d4cc0d12] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-4eac537a] {
+.brand-site__header[data-v-d4cc0d12] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-4eac537a] {
+.brand-page__header[data-v-d4cc0d12] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-4eac537a] {
+.brand-page__content--default[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7455,7 +7455,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-4eac537a] {
+.brand-page__content--desktop[data-v-d4cc0d12] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7471,15 +7471,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-4eac537a] {
+.brand-page__content--inner[data-v-d4cc0d12] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-4eac537a] {
+.brand-page__content--inner--brandsite[data-v-d4cc0d12] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-4eac537a] {
+.brand-page__content--outline-selected[data-v-d4cc0d12] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7487,20 +7487,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-4eac537a] {
+.brand-page__content--outline-footer-selected[data-v-d4cc0d12] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-4eac537a] {
+.brand-page__content--inner--full-width[data-v-d4cc0d12] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -8958,11 +8958,11 @@ input[type='number'][data-v-28a532b4] {
 }
 }
 
-.template-preview[data-v-c5fa6125] {
+.template-preview[data-v-6be0a701] {
   position: relative;
   background-attachment: initial !important
 }
-.template-preview__overlay[data-v-c5fa6125] {
+.template-preview__overlay[data-v-6be0a701] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -8973,11 +8973,20 @@ input[type='number'][data-v-28a532b4] {
   cursor: pointer;
   opacity: 0
 }
-.template-preview__page[data-v-c5fa6125] {
-  pointer-events: none
+.template-preview__image-container[data-v-6be0a701] {
+  pointer-events: none;
+  height: 100%;
+  width: 100%
 }
-.template-preview[data-v-c5fa6125] .c-shape-background {
-  position: absolute
+.template-preview__image[data-v-6be0a701] {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -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
 }
 
 .section[data-v-0512603c] {