Polish boursecu UX: branding logos, home price stats, assets, and desktop footer.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.vue

@@ -27,10 +27,13 @@
         </template>
         <div class="self-center splash_appear_fade_in">
           <img
-            :src="getProjectLoginLogo(config?.config?.avatar)"
-            :class="hasCustomLoginLogoLayout()
-              ? 'w-[80vw] max-w-[320px] h-auto object-contain'
-              : 'h-[20vh] object-contain'"
+            :src="getProjectSplashLogo(config?.config?.avatar)"
+            :class="isBoursecuProject()
+              ? 'w-[min(72vw,280px)] h-auto object-contain'
+              : hasCustomLoginLogoLayout()
+                ? 'w-[80vw] max-w-[320px] h-auto object-contain'
+                : 'h-[20vh] object-contain'"
+            alt=""
           >
         </div>
         <div class="fixed w-full bottom-5 home_appear_fade_in_up">
@@ -90,20 +93,16 @@
     </div>
   </div>
   <div
-    v-if="!showSplash"
-    class="app-credit-footer flex bg-white justify-center text-[9px]"
+    v-if="!showSplash && !isDesktop"
+    class="app-credit-footer app-credit-footer--mobile"
   >
-    <a
-      href="https://montzar.ir"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="flex items-center gap-1 text-inherit no-underline"
-    >
-      <div class="flex justify-center py-1 items-center">
-        <div>توسعه و طراحی توسط</div>
-        <img src="/logo-montzar.png" alt="" class="h-3" />
-      </div>
-    </a>
+    <AppCreditLink variant="mobile" />
+  </div>
+  <div
+    v-if="!showSplash && showDesktopFloatingCredit"
+    class="app-credit-footer app-credit-footer--desktop-float"
+  >
+    <AppCreditLink variant="float" />
   </div>
 </template>
 
@@ -118,19 +117,28 @@ import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
 import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import {useConfigStore} from "@/store/configStore";
-import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject, resetAppSurfaceBackground} from "@/utils/config";
+import {getProjectFontFamily, getProjectSplashBackground, getProjectSplashLogo, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject, resetAppSurfaceBackground} from "@/utils/config";
 import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
 import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
-import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
+import { useApplyDesktopLayoutClass, useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import {
   buildSupportMessengerUrl,
   loadSupportMessengerFromSettings,
   supportMessengerSettings,
 } from '@/utils/supportMessenger'
-import {useDraggableFloatingButton} from '@/utils/useDraggableFloatingButton'
+import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
+import AppCreditLink from '@/components/AppCreditLink.vue'
+import { useRoute } from 'vue-router'
 
 useApplyDesktopLayoutClass()
 
+const isDesktop = useDesktopBreakpoint()
+const route = useRoute()
+const showDesktopFloatingCredit = computed(() => {
+  if (!isDesktop.value) return false
+  return route.name === 'login' || !!route.meta.hideMenu
+})
+
 const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
 const config = useConfigStore()
 const splashIndicator = computed(() => h(LoadingOutlined, {
@@ -310,16 +318,106 @@ function update() {
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: 1000000;
+  box-sizing: content-box;
+}
+
+.app-credit-footer--mobile {
   width: 100%;
   max-width: 426px;
   margin-left: auto;
   margin-right: auto;
-  z-index: 1000000;
   min-height: var(--app-credit-bar-inner);
   padding-bottom: var(--app-safe-bottom);
-  box-sizing: content-box;
   background: #fff;
   box-shadow: 0 -2px 4px -2px #0000001a;
+  display: flex;
+  justify-content: center;
+  font-size: 9px;
+}
+
+.app-credit-footer--desktop-float {
+  left: auto;
+  right: 20px;
+  bottom: 16px;
+  width: auto;
+}
+
+.app-credit-link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &__text {
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  &__logo {
+    width: auto;
+    object-fit: contain;
+  }
+
+  &--mobile {
+    gap: 4px;
+    padding: 4px 0;
+    color: inherit;
+
+    .app-credit-link__logo {
+      height: 12px;
+    }
+  }
+
+  &--sidebar {
+    flex-direction: column;
+    gap: 6px;
+    padding: 4px;
+    color: #9ca3af;
+    font-size: 10px;
+
+    .app-credit-link__logo {
+      height: 15px;
+      opacity: 0.85;
+    }
+  }
+
+  &--float {
+    gap: 6px;
+    padding: 7px 14px;
+    font-size: 10px;
+    color: #6b7280;
+    background: #fff;
+    border-radius: 999px;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
+
+    .app-credit-link__logo {
+      height: 13px;
+    }
+  }
+}
+
+html.project-boursecu {
+  .app-credit-link--sidebar {
+    color: rgba(255, 255, 255, 0.5);
+
+    .app-credit-link__logo {
+      filter: brightness(1.15);
+      opacity: 0.75;
+    }
+  }
+
+  .app-credit-link--float {
+    background: var(--App-brand-nav, #133050);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.65);
+  }
 }
 
 .updateButton .van-dialog__confirm .van-button__text {