@designcrowd/fe-shared-lib 1.2.20 → 1.2.21

package/index.js

@@ -54,3 +54,7 @@ export { default as HashRouteModal } from './src/atoms/components/Modal/HashRout
 export { default as Select } from './src/atoms/components/Select/Select.vue';
 export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
 export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
+export { default as WebDesignSupportUpsell } from './src/atoms/components/Upsell/WebDesignSupport.vue';
+export { default as DigitalBusinessCardUpsell } from './src/atoms/components/Upsell/DigitalBusinessCard.vue';
+export { default as LinkInBioUpsell } from './src/atoms/components/Upsell/LinkInBio.vue';
+export { default as UpgradeWebsiteUpsell } from './src/atoms/components/Upsell/UpgradeWebsite.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -699,6 +699,9 @@ video {
 .theme-brandCrowd .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-brandCrowd .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-brandCrowd .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-brandCrowd .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-brandCrowd .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-brandCrowd .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-brandCrowd .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-brandCrowd .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-brandCrowd .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-brandCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-brandCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandCrowd .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  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));
+}
 .theme-brandCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 151 215 / var(--tw-text-opacity));
 }
+.theme-brandCrowd .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-brandCrowd .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-brandPage.css

@@ -699,6 +699,9 @@ video {
 .theme-brandPage .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-brandPage .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-brandPage .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-brandPage .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-brandPage .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-brandPage .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-brandPage .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-brandPage .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-brandPage .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1454,6 +1463,9 @@ video {
 .theme-brandPage .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandPage .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandPage .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1589,6 +1601,9 @@ video {
 .theme-brandPage .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandPage .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandPage .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1754,6 +1769,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandPage .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandPage .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1829,6 +1849,16 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandPage .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  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));
+}
+.theme-brandPage .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-brandPage .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-crazyDomains.css

@@ -699,6 +699,9 @@ video {
 .theme-crazyDomains .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-crazyDomains .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-crazyDomains .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-crazyDomains .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-crazyDomains .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-crazyDomains .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-crazyDomains .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-crazyDomains .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-crazyDomains .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-crazyDomains .tw-p-4 {
   padding: 1rem;
 }
+.theme-crazyDomains .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-crazyDomains .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-crazyDomains .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-crazyDomains .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-crazyDomains .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-crazyDomains .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-crazyDomains .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-crazyDomains .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  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));
+}
 .theme-crazyDomains .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 161 239 / var(--tw-text-opacity));
 }
+.theme-crazyDomains .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-crazyDomains .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-designCom.css

@@ -699,6 +699,9 @@ video {
 .theme-designCom .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-designCom .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-designCom .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-designCom .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-designCom .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-designCom .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-designCom .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-designCom .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-designCom .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-designCom .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCom .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCom .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-designCom .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCom .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCom .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCom .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCom .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCom .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  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));
+}
 .theme-designCom .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(63 89 246 / var(--tw-text-opacity));
 }
+.theme-designCom .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-designCom .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-designCrowd.css

@@ -699,6 +699,9 @@ video {
 .theme-designCrowd .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-designCrowd .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-designCrowd .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-designCrowd .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-designCrowd .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-designCrowd .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-designCrowd .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-designCrowd .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-designCrowd .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-designCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-designCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCrowd .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  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));
+}
 .theme-designCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(17 151 235 / var(--tw-text-opacity));
 }
+.theme-designCrowd .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-designCrowd .sm\:tw-absolute {
     position: absolute;

package/src/atoms/components/Modal/Modal.vue

@@ -15,7 +15,7 @@
       :class="[
         {
           'tw-w-full': !isImageMode,
-          'tw-p-4': !simple,
+          'tw-p-4': !removeHorizontalPadding && !simple,
           'tw-max-w-md': size === 'md',
           'tw-max-w-xl': size === 'xl',
           'tw-max-w-2xl': !size && !isImageMode,
@@ -91,6 +91,11 @@ export default {
       required: false,
       default: false,
     },
+    removeHorizontalPadding: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visible: {
       type: Boolean,
       required: false,

package/src/atoms/components/Upsell/DigitalBusinessCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ title }}
+    </h3>
+    <div class="tw-flex tw-justify-center tw-items-center">
+      <figure
+        class="tw-relative tw-block tw-overflow-hidden tw-max-h-full group-hover:tw-scale-105 tw-transition-all tw-h-full group-hover:tw-shadow tw-w-72"
+      >
+        <img :src="imageUrl" alt="" loading="lazy" class="tw-w-full tw-rounded-md tw-h-full" />
+      </figure>
+    </div>
+    <div class="tw-text-center tw-mb-5 tw-text-grayscale-600 tw-mt-2">
+      {{ subtitle }}
+    </div>
+    <div v-if="buttonUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button full-width variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('digitalBusinessCardTitle') || 'Create your digital business card';
+    },
+    subtitle() {
+      return (
+        upsellModalComponentsTr('digitalBusinessCardSubtitle') ||
+        'Launch a digital business card that drives connections and elevates your brand'
+      );
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/website-xsell-digital-business-card@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('getStartedLabel') || 'Get Started';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>

package/src/atoms/components/Upsell/LinkInBio.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ title }}
+    </h3>
+    <div class="tw-flex tw-justify-center tw-items-center">
+      <figure
+        class="tw-relative tw-block tw-overflow-hidden tw-max-h-full group-hover:tw-scale-105 tw-transition-all tw-h-full group-hover:tw-shadow tw-w-72"
+      >
+        <img :src="imageUrl" alt="" loading="lazy" class="tw-w-full tw-rounded-md tw-h-full" />
+      </figure>
+    </div>
+    <div class="tw-text-center tw-mb-5 tw-text-grayscale-600 tw-mt-2">
+      {{ subtitle }}
+    </div>
+    <div v-if="buttonUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button full-width variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('linkInBioTitle') || 'Create your Link in Bio';
+    },
+    subtitle() {
+      return (
+        upsellModalComponentsTr('linkInBioSubtitle') || 'Launch a link in bio that drives connections and elevates'
+      );
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/website-xsell-link-in-bio@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('getStartedLabel') || 'Get Started';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>

package/src/atoms/components/Upsell/UpgradeWebsite.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ title }}
+    </h3>
+    <div class="tw-flex tw-justify-center tw-items-center">
+      <figure
+        class="tw-relative tw-block tw-overflow-hidden tw-max-h-full group-hover:tw-scale-105 tw-transition-all tw-h-full group-hover:tw-shadow tw-w-72"
+      >
+        <img :src="imageUrl" alt="" loading="lazy" class="tw-w-full tw-rounded-md tw-h-full" />
+      </figure>
+    </div>
+    <div class="tw-text-center tw-mb-5 tw-text-grayscale-600 tw-mt-2">
+      {{ subtitle }}
+    </div>
+    <div v-if="buttonUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button full-width variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('upgradeWebsiteTitle') || 'Upgrade to premium website';
+    },
+    subtitle() {
+      return upsellModalComponentsTr('upgradeWebsiteSubtitle') || 'Unlock all advanced features for more flexibility';
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/onboarding-upsell-website@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('upgradeNowLabel') || 'Upgrade Now';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>

package/src/atoms/components/Upsell/WebDesignSupport.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-mb-2">
+      {{ title }}
+    </h3>
+    <div class="tw-flex tw-justify-center tw-items-center">
+      <figure
+        class="tw-relative tw-block tw-overflow-hidden tw-max-h-full group-hover:tw-scale-105 tw-transition-all tw-h-full group-hover:tw-shadow tw-w-72"
+      >
+        <img :src="imageUrl" alt="" loading="lazy" class="tw-w-full tw-rounded-md tw-h-full" />
+      </figure>
+    </div>
+    <div class="tw-text-center tw-mb-5 tw-text-grayscale-600 tw-mt-2">
+      {{ subtitle }}
+    </div>
+    <div v-if="buttonUrl" class="tw-flex tw-gap-4 tw-mt-5">
+      <Button full-width variant="primary" :label="buttonLabel" classes="tw-flex-1" @click="onClick" />
+    </div>
+  </div>
+</template>
+<script>
+import Button from '../../../atoms/components/Button/Button.vue';
+import { upsellModalComponentsTr, getCurrentLocale } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+  },
+  props: {
+    buttonUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return upsellModalComponentsTr('webSupportTitle') || 'Get Professional Web Design Support';
+    },
+    subtitle() {
+      return (
+        upsellModalComponentsTr('webSupportSubtitle') ||
+        'Our professional web design team will help you build and get the most out of your website'
+      );
+    },
+    imageUrl() {
+      const locale = getCurrentLocale().toLowerCase();
+      return `https://bcassetcdn.com/assets/images/modal/brandpage-design-support@2x.${locale}.png`;
+    },
+    buttonLabel() {
+      return upsellModalComponentsTr('webDesignButtonLabel') || 'Get Web Design Support';
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('on-button-click');
+
+      if (this.buttonUrl) {
+        window.location.href = this.buttonUrl;
+      }
+    },
+  },
+};
+</script>