diff --git a/client/landing/gutenboarding/available-designs-config.json b/client/landing/gutenboarding/available-designs-config.json index 3bec01d2d9cde..46478139c5565 100644 --- a/client/landing/gutenboarding/available-designs-config.json +++ b/client/landing/gutenboarding/available-designs-config.json @@ -320,6 +320,7 @@ "slug": "balan", "template": "balan", "theme": "mayland", + "preview": "static", "fonts": { "headings": "Rubik", "base": "Roboto" @@ -333,6 +334,7 @@ "slug": "pollard", "template": "pollard", "theme": "mayland", + "preview": "static", "fonts": { "headings": "Cabin", "base": "Raleway" diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx index ed48b7f096e64..62744a8d23a76 100644 --- a/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/design-selector/index.tsx @@ -94,7 +94,10 @@ const DesignSelector: React.FunctionComponent = () => { 'design-selector__image-frame', isEnabled( 'gutenboarding/landscape-preview' ) ? 'design-selector__landscape' - : 'design-selector__portrait' + : 'design-selector__portrait', + design.preview === 'static' + ? 'design-selector__static' + : 'design-selector__scrollable' ) } > { isEnabled( 'gutenboarding/mshot-preview' ) ? ( diff --git a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss index 8ab4cf79cac30..cdb7617da2641 100644 --- a/client/landing/gutenboarding/onboarding-block/design-selector/style.scss +++ b/client/landing/gutenboarding/onboarding-block/design-selector/style.scss @@ -133,7 +133,7 @@ transition: all 1s; } - img:hover { + &.design-selector__scrollable img:hover { margin-top: -100px; } } diff --git a/client/landing/gutenboarding/stores/onboard/types.ts b/client/landing/gutenboarding/stores/onboard/types.ts index 274b9934ecef0..9c7288f082d03 100644 --- a/client/landing/gutenboarding/stores/onboard/types.ts +++ b/client/landing/gutenboarding/stores/onboard/types.ts @@ -41,6 +41,7 @@ export interface Design { src: string; template: string; theme: string; + preview?: string; title: string; features: Array< DesignFeatures >; }