@designcrowd/fe-shared-lib 1.5.29 → 1.5.30

package/package.json

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

package/public/css/tailwind-brandCrowd.css

@@ -946,9 +946,6 @@ video {
 .theme-brandCrowd .tw-w-96 {
   width: 24rem;
 }
-.theme-brandCrowd .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-brandCrowd .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-brandCrowd .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-brandCrowd .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-brandCrowd .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));
 }
+.theme-brandCrowd .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-brandCrowd .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-brandCrowd .tw-font-bold {
   font-weight: 700;
 }
-.theme-brandCrowd .tw-font-medium {
-  font-weight: 500;
-}
 .theme-brandCrowd .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 22 50 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(145 16 38 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(222 222 222 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(71 71 71 / var(--tw-bg-opacity));
 }
-.theme-brandCrowd .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(53 53 53 / var(--tw-bg-opacity));
-}
 .theme-brandCrowd .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(211 238 207 / var(--tw-bg-opacity));

package/public/css/tailwind-brandPage.css

@@ -946,9 +946,6 @@ video {
 .theme-brandPage .tw-w-96 {
   width: 24rem;
 }
-.theme-brandPage .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-brandPage .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-brandPage .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-brandPage .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-brandPage .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1304,6 +1298,10 @@ video {
 .theme-brandPage .tw-border-black\/10 {
   border-color: rgb(0 0 0 / 0.1);
 }
+.theme-brandPage .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-brandPage .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1701,9 +1699,6 @@ video {
 .theme-brandPage .tw-font-bold {
   font-weight: 700;
 }
-.theme-brandPage .tw-font-medium {
-  font-weight: 500;
-}
 .theme-brandPage .tw-font-normal {
   font-weight: 400;
 }
@@ -1867,10 +1862,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.theme-brandPage .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
-}
 .theme-brandPage .hover\:tw-text-grayscale-800:hover {
   --tw-text-opacity: 1;
   color: rgb(17 21 23 / var(--tw-text-opacity));

package/public/css/tailwind-crazyDomains.css

@@ -946,9 +946,6 @@ video {
 .theme-crazyDomains .tw-w-96 {
   width: 24rem;
 }
-.theme-crazyDomains .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-crazyDomains .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-crazyDomains .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-crazyDomains .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-crazyDomains .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));
 }
+.theme-crazyDomains .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-crazyDomains .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(240 240 245 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-crazyDomains .tw-font-bold {
   font-weight: 700;
 }
-.theme-crazyDomains .tw-font-medium {
-  font-weight: 500;
-}
 .theme-crazyDomains .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(235 238 243 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(199 204 207 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(89 138 38 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 103 28 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(218 218 218 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(58 58 58 / var(--tw-bg-opacity));
 }
-.theme-crazyDomains .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
-}
 .theme-crazyDomains .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 238 213 / var(--tw-bg-opacity));

package/public/css/tailwind-designCom.css

@@ -946,9 +946,6 @@ video {
 .theme-designCom .tw-w-96 {
   width: 24rem;
 }
-.theme-designCom .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-designCom .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-designCom .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-designCom .tw-rounded-lg {
-  border-radius: 0.75rem;
-}
 .theme-designCom .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
 }
+.theme-designCom .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 250 250 / var(--tw-border-opacity));
+}
 .theme-designCom .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(237 237 237 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-designCom .tw-font-bold {
   font-weight: 700;
 }
-.theme-designCom .tw-font-medium {
-  font-weight: 500;
-}
 .theme-designCom .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 209 209 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 53 148 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 236 236 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(49 49 49 / var(--tw-bg-opacity));
 }
-.theme-designCom .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 37 37 / var(--tw-bg-opacity));
-}
 .theme-designCom .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));

package/public/css/tailwind-designCrowd.css

@@ -946,9 +946,6 @@ video {
 .theme-designCrowd .tw-w-96 {
   width: 24rem;
 }
-.theme-designCrowd .tw-w-\[14rem\] {
-  width: 14rem;
-}
 .theme-designCrowd .tw-w-auto {
   width: auto;
 }
@@ -1213,9 +1210,6 @@ video {
 .theme-designCrowd .tw-rounded-full {
   border-radius: 9999px;
 }
-.theme-designCrowd .tw-rounded-lg {
-  border-radius: 0.5rem;
-}
 .theme-designCrowd .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1312,6 +1306,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
 }
+.theme-designCrowd .tw-border-grayscale-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .theme-designCrowd .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1853,9 +1851,6 @@ video {
 .theme-designCrowd .tw-font-bold {
   font-weight: 700;
 }
-.theme-designCrowd .tw-font-medium {
-  font-weight: 500;
-}
 .theme-designCrowd .tw-font-normal {
   font-weight: 400;
 }
@@ -2103,10 +2098,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-grayscale-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2131,10 +2122,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(10 91 141 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(223 226 230 / var(--tw-bg-opacity));
@@ -2151,10 +2138,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(74 87 103 / var(--tw-bg-opacity));
 }
-.theme-designCrowd .hover\:tw-bg-secondary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 65 77 / var(--tw-bg-opacity));
-}
 .theme-designCrowd .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(213 242 223 / var(--tw-bg-opacity));

package/src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="tw-relative tw-flex tw-items-center tw-justify-center tw-w-24 tw-h-24">
+    <!-- Central AI core -->
+    <div class="tw-absolute tw-w-12 tw-h-12 tw-rounded-full tw-bg-gradient-to-r tw-from-blue-500 tw-to-purple-600 tw-animate-pulse"></div>
+
+    <!-- Orbiting sparkles -->
+    <div
+      v-for="(frame, index) in frames"
+      :key="`sparkle-${index}`"
+      :class="[
+        'tw-absolute tw-w-2 tw-h-2 tw-rounded-full tw-transition-all tw-duration-300',
+        currentFrame === index ? 'tw-opacity-100 tw-scale-125' : 'tw-opacity-40 tw-scale-75',
+        getSparkleColor(index),
+        getSparklePosition(index)
+      ]"
+      :style="getSparkleStyle(index)"
+    ></div>
+
+    <!-- Pulsing rings -->
+    <div class="tw-absolute tw-w-16 tw-h-16 tw-rounded-full tw-border tw-border-blue-200 tw-animate-ping tw-opacity-30"></div>
+    <div class="tw-absolute tw-w-20 tw-h-20 tw-rounded-full tw-border tw-border-purple-200 tw-animate-ping tw-animation-delay-75 tw-opacity-20"></div>
+
+    <!-- Screen reader text -->
+    <span class="tw-sr-only">{{ alt }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiPoweredLoader',
+  props: {
+    interval: {
+      type: Number,
+      default: 150,
+    },
+    alt: {
+      type: String,
+      default: 'loading',
+    },
+  },
+  data() {
+    return {
+      currentFrame: 0,
+      frames: 8, // Number of sparkles
+      animationInterval: null,
+    };
+  },
+  mounted() {
+    this.startAnimation();
+  },
+  beforeUnmount() {
+    this.stopAnimation();
+  },
+  methods: {
+    startAnimation() {
+      this.animationInterval = setInterval(() => {
+        this.currentFrame = (this.currentFrame + 1) % this.frames;
+      }, this.interval);
+    },
+    stopAnimation() {
+      if (this.animationInterval) {
+        clearInterval(this.animationInterval);
+        this.animationInterval = null;
+      }
+    },
+    getSparkleColor(index) {
+      const colors = [
+        'tw-bg-blue-400',
+        'tw-bg-purple-400',
+        'tw-bg-indigo-400',
+        'tw-bg-cyan-400',
+        'tw-bg-blue-300',
+        'tw-bg-purple-300',
+        'tw-bg-indigo-300',
+        'tw-bg-cyan-300',
+      ];
+      return colors[index % colors.length];
+    },
+    getSparklePosition(index) {
+      // Position sparkles in a circle around the center
+      const angle = (index / this.frames) * 2 * Math.PI;
+      const radius = 35; // Distance from center
+      const x = Math.cos(angle) * radius;
+      const y = Math.sin(angle) * radius;
+
+      return {
+        transform: `translate(${x}px, ${y}px)`,
+      };
+    },
+    getSparkleStyle(index) {
+      const angle = (index / this.frames) * 2 * Math.PI;
+      const radius = 35;
+      const x = Math.cos(angle) * radius;
+      const y = Math.sin(angle) * radius;
+
+      return {
+        transform: `translate(${x}px, ${y}px)`,
+        animationDelay: `${index * (this.interval / this.frames)}ms`,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+@keyframes sparkle-glow {
+  0%, 100% {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+.tw-animate-sparkle {
+  animation: sparkle-glow 1s ease-in-out infinite;
+}
+
+@keyframes gentle-rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ai-loader-container {
+  animation: gentle-rotation 4s linear infinite;
+}
+
+/* Custom animation delays for staggered effect */
+.tw-animation-delay-75 {
+  animation-delay: 75ms;
+}
+
+.tw-animation-delay-150 {
+  animation-delay: 150ms;
+}
+
+.tw-animation-delay-225 {
+  animation-delay: 225ms;
+}
+</style>

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploader.vue

@@ -1,5 +1,8 @@
 <template>
-  <LogoUploadingLoader :loading-text="uploadYourLogoTr('uploadingAndConverting')" />
+  <LogoUploadingLoader
+    :loading-text="uploadYourLogoTr('uploadingAndConverting')"
+    :is-ai-powered="isAiPowered"
+  />
 </template>
 <script>
 import brandCrowdClient from '../../clients/brand-crowd-api.client';
@@ -28,6 +31,10 @@ export default {
       type: String,
       required: true,
     },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     return {

package/src/experiences/components/UploadYourLogoOnBoarding/LogoUploadingLoader.vue

@@ -1,22 +1,39 @@
 <template>
   <div class="tw-pt-12 tw-pb-16 tw-flex tw-flex-col tw-items-center tw-justify-center">
+    <!-- AI-powered sparkle animation -->
+    <div v-if="isAiPowered" class="tw-mb-8">
+      <AiPoweredLoader alt="AI-powered loading" />
+    </div>
+
+    <!-- Traditional GIF loader -->
     <img
+      v-else
       src="https://dcstatic.com/images/brandcrowd/on-boarding/loading/preloader-1-d1cc0b885f.gif"
       alt="Loading"
       class="tw-block tw-mb-8"
     />
+
     <p class="tw-text-black tw-text-2xl tw-font-bold tw-text-center">
       {{ loadingText }}
     </p>
   </div>
 </template>
 <script>
+import AiPoweredLoader from '../../../atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
+
 export default {
+  components: {
+    AiPoweredLoader,
+  },
   props: {
     loadingText: {
       type: String,
       required: true,
     },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

package/src/experiences/components/UploadYourLogoOnBoarding/UploadYourLogoOnBoarding.vue

@@ -22,6 +22,7 @@
           :logo-file="logoFile"
           :custom-upload-data="customUploadData"
           :event-category="eventCategory"
+          :is-ai-powered="isAiPowered"
           @on-upload-success="onUploadSuccess"
           @on-upload-error="onUploadError"
         />
@@ -71,7 +72,11 @@
           @on-logo-file-change="onLogoFileChange"
         />
 
-        <LogoUploadingLoader v-if="isCurrentlySaving" :loading-text="uploadYourLogoTr('generatingDesigns')" />
+        <LogoUploadingLoader
+          v-if="isCurrentlySaving"
+          :loading-text="uploadYourLogoTr('generatingDesigns')"
+          :is-ai-powered="isAiPowered"
+        />
 
         <LogoUploadExitConfirmation
           v-if="isAttemptingToExit && currentStep > 1"
@@ -133,6 +138,10 @@ export default {
       required: false,
       default: undefined,
     },
+    isAiPowered: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     return {

package/.storybook-static/assets/Auth-BEjq1pFf.css

@@ -1 +0,0 @@
-.email-input[data-v-cce70fef]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.password-input[data-v-cce70fef]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-cce70fef]{padding-left:2.5rem!important}.email-input[data-v-91cb4060]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-91cb4060]{padding-left:2.5rem!important}.password-input[data-v-524c1521]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-524c1521]{padding-left:2.5rem!important}