diff --git a/src/App.vue b/src/App.vue
index a4c76f4..6735d88 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,28 +23,44 @@
           </router-view>
 
         </div>
-        <div v-else class="flex bottom-0 wrap-fix top-0 bg-white z-1000000000000 justify-center">
-          <div class="top-0 wrap-fix h-1/3 w-screen flex">
-            <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover"/>
-            <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
-          </div>
-          <div class="wrap-fix bottom-0 h-1/3 w-screen">
-            <img
-                :src="img_bottomGradiant"
-                alt=""
-                class="absolute z-10 w-screen h-full object-cover"
-            />
-            <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
-          </div>
+        <div
+          v-else
+          class="flex bottom-0 wrap-fix top-0 z-1000000000000 justify-center"
+          :style="{ backgroundColor: getProjectSplashBackground() }"
+        >
+          <template v-if="!isBoursecuProject()">
+            <div class="top-0 wrap-fix h-1/3 w-screen flex">
+              <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover"/>
+              <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
+            </div>
+            <div class="wrap-fix bottom-0 h-1/3 w-screen">
+              <img
+                  :src="img_bottomGradiant"
+                  alt=""
+                  class="absolute z-10 w-screen h-full object-cover"
+              />
+              <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
+            </div>
+          </template>
           <div class="self-center splash_appear_fade_in">
-            <img :src="config?.config?.avatar" class="h-[20vh]">
+            <img
+              :src="getProjectLoginLogo(config?.config?.avatar)"
+              :class="isBoursecuProject()
+                ? 'w-[80vw] max-w-[320px] h-auto object-contain'
+                : 'h-[20vh] object-contain'"
+            >
 
           </div>
           <div class="fixed w-full bottom-5 home_appear_fade_in_up">
-            <div class="text-center text-xs">نسخه: {{ pkg.version }}</div>
+            <div
+              class="text-center text-xs"
+              :class="isBoursecuProject() ? 'text-white' : ''"
+            >
+              نسخه: {{ pkg.version }}
+            </div>
           </div>
           <div class="absolute bottom-10">
-            <a-spin :indicator="indicator" size="small"/>
+            <a-spin :indicator="splashIndicator" size="small"/>
           </div>
         </div>
       </transition>
@@ -107,17 +123,19 @@ 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, isBoursecuProject} from "@/utils/config";
 import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
 import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
 
 const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
 const config = useConfigStore()
-const indicator = h(LoadingOutlined, {
+const splashIndicator = computed(() => h(LoadingOutlined, {
   style: {
-    fontSize: '24px'
+    fontSize: '24px',
+    color: isBoursecuProject() ? '#ffffff' : undefined,
   },
   spin: true
-})
+}))
 const showSplash = ref(true)
 const popVisible = ref(false)
 
@@ -130,6 +148,7 @@ const antTheme = computed(() => {
       colorLink: config.config.color,
       colorLinkActive: config.config.color,
       colorLinkHover: config.config.color,
+      fontFamily: getProjectFontFamily(),
     },
   }
 })
diff --git a/src/assets/css/fonts.less b/src/assets/css/fonts.less
index 2615ae1..3b28872 100644
--- a/src/assets/css/fonts.less
+++ b/src/assets/css/fonts.less
@@ -42,3 +42,45 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'dana';
+  src: url("../fonts/Dana/Dana-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'dana';
+  src: url("../fonts/Dana/Dana-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'dana';
+  src: url("../fonts/Dana/Dana-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'dana';
+  src: url("../fonts/Dana/Dana-DemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'dana';
+  src: url("../fonts/Dana/Dana-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'dana';
+  src: url("../fonts/Dana/Dana-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+}
+
diff --git a/src/assets/css/main.less b/src/assets/css/main.less
index 0e3a115..504e09b 100644
--- a/src/assets/css/main.less
+++ b/src/assets/css/main.less
@@ -7,10 +7,27 @@ html {
 }
 
 body {
-  font-family: @prefixCls-font-family !important;
+  font-family: var(--App-font-family) !important;
   background-color: @prefixCls-background-color !important;
   //color:#555 !important;
 }
+
+html.font-dana,
+html.font-dana body,
+html.font-dana .ant-btn,
+html.font-dana .ant-input,
+html.font-dana .ant-select,
+html.font-dana .ant-form,
+html.font-dana .ant-table,
+html.font-dana .ant-modal,
+html.font-dana .ant-drawer,
+html.font-dana .ant-picker,
+html.font-dana .van-button,
+html.font-dana .van-dialog,
+html.font-dana .van-tabbar,
+html.font-dana .van-nav-bar {
+  font-family: var(--App-font-family) !important;
+}
 body {
   color-scheme: only light;
   @apply flex justify-center relative;
diff --git a/src/assets/css/var.less b/src/assets/css/var.less
index d742695..9aca3ca 100644
--- a/src/assets/css/var.less
+++ b/src/assets/css/var.less
@@ -10,4 +10,5 @@
   --App-primary-color: #0A1B37;
   --App-secondary-color: #e0be7f;
   --App-background-color: #ffffff;
+  --App-font-family: 'iran-sans', sans-serif;
 }
\ No newline at end of file
diff --git a/src/assets/fonts/Dana/Dana-Black.ttf b/src/assets/fonts/Dana/Dana-Black.ttf
new file mode 100644
index 0000000..09128c5
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-Black.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-Bold.ttf b/src/assets/fonts/Dana/Dana-Bold.ttf
new file mode 100644
index 0000000..57013c7
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-Bold.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-DemiBold.ttf b/src/assets/fonts/Dana/Dana-DemiBold.ttf
new file mode 100644
index 0000000..1c7d1de
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-DemiBold.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-ExtraBold.ttf b/src/assets/fonts/Dana/Dana-ExtraBold.ttf
new file mode 100644
index 0000000..32aa27b
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-ExtraBold.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-ExtraLight.ttf b/src/assets/fonts/Dana/Dana-ExtraLight.ttf
new file mode 100644
index 0000000..435016f
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-ExtraLight.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-Light.ttf b/src/assets/fonts/Dana/Dana-Light.ttf
new file mode 100644
index 0000000..6ab3d11
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-Light.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-Medium.ttf b/src/assets/fonts/Dana/Dana-Medium.ttf
new file mode 100644
index 0000000..75fda24
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-Medium.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-Regular.ttf b/src/assets/fonts/Dana/Dana-Regular.ttf
new file mode 100644
index 0000000..93200a1
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-Regular.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-Thin.ttf b/src/assets/fonts/Dana/Dana-Thin.ttf
new file mode 100644
index 0000000..a958703
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-Thin.ttf differ
diff --git a/src/assets/fonts/Dana/Dana-UltraBold.ttf b/src/assets/fonts/Dana/Dana-UltraBold.ttf
new file mode 100644
index 0000000..c5bd1b2
Binary files /dev/null and b/src/assets/fonts/Dana/Dana-UltraBold.ttf differ
diff --git a/src/assets/img/boursemes_logofull.png b/src/assets/img/boursemes_logofull.png
new file mode 100644
index 0000000..e6a4be8
Binary files /dev/null and b/src/assets/img/boursemes_logofull.png differ
diff --git a/src/main.ts b/src/main.ts
index 696dcfc..b9fef2a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,7 +15,7 @@ import VueLazyLoad from 'vue3-lazyload'
 import { getMe } from '@/api/me'
 import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
 import { useAuthStore } from '@/store/useAuthStore'
-import {getConfigApp} from "@/utils/config";
+import {applyProjectFont, getConfigApp} from "@/utils/config";
 
 
 const app = createApp(App)
@@ -192,6 +192,8 @@ app.mount('#app')
 // }
 
 nextTick(() => {
+  applyProjectFont()
+
   const color = window.__APP_CONFIG__?.user?.color
   const secondary_color = window.__APP_CONFIG__?.user?.secondary_color
 
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 5a7135b..3c5197b 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,3 +1,4 @@
+import boursecuLogo from '@/assets/img/boursemes_logofull.png'
 
 export function getConfigApp(key: string) {
   const config = window.__APP_CONFIG__ ? window.__APP_CONFIG__.user:{}
@@ -7,3 +8,81 @@ export function getConfigApp(key: string) {
   }
   return null
 }
+
+export function isBoursecuProject() {
+  return getConfigApp('name') === 'boursecu'
+}
+
+export function getProjectLoginLogo(avatar?: string | null) {
+  if (isBoursecuProject()) {
+    return boursecuLogo
+  }
+  return avatar ?? getConfigApp('avatar')
+}
+
+export function getProjectLoginTaglineLines() {
+  if (!isBoursecuProject()) {
+    return null
+  }
+
+  return [
+    'بورس مس',
+    'مرجع هوشمند معاملات و سرمایه‌گذاری در صنعت مس',
+  ]
+}
+
+export function getProjectSplashBackground() {
+  return isBoursecuProject() ? '#133050' : '#ffffff'
+}
+
+export function getProjectFontFamily() {
+  return getConfigApp('name') === 'boursecu' ? "'dana', sans-serif" : "'iran-sans', sans-serif"
+}
+
+export function applyProjectFont() {
+  document.documentElement.style.setProperty('--App-font-family', getProjectFontFamily())
+  if (getConfigApp('name') === 'boursecu') {
+    document.documentElement.classList.add('font-dana')
+  }
+}
+
+export function getReferralShareTitle(projectName?: string | null) {
+  return projectName ?? getConfigApp('name_fa') ?? getConfigApp('name') ?? 'طلا'
+}
+
+export function getReferralShareText(options: {
+  userName?: string | null
+  projectName?: string | null
+  referralId?: string | number | null
+}) {
+  const userName = options.userName ?? ''
+  const referralId = options.referralId ?? ''
+  const link = `${window.location.hostname}/login?id=${referralId}`
+  const marketText = options.projectName
+    ? `بازار طلای ${options.projectName}`
+    : 'بازار طلا'
+
+  if (isBoursecuProject()) {
+    return `مس؛ فلز آینده جهان
+
+⭐️ امروز در آینده مس سرمایه‌گذاری کن؛ ثمره آن را در سال‌های پیش رو برداشت کن!
+
+رشد صنایع انرژی پاک، خودروهای برقی و زیرساخت‌های نوین، تقاضا برای مس را در سال‌های آینده افزایش خواهد داد.
+
+با سرمایه‌گذاری تدریجی و مستمر در بازار مس، از رشد بلندمدت یکی از مهم‌ترین فلزات استراتژیک جهان بهره‌مند شوید.
+
+این دعوت‌نامه از طرف «${userName}» برای شما ارسال شده است تا شما نیز از فرصت‌های سرمایه‌گذاری در بورس مس جا نمانید.
+
+برای مشاهده قیمت‌ها، تحلیل بازار و تکمیل ثبت‌نام، روی لینک زیر کلیک کنید
+
+${link}`
+  }
+
+  return `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
+با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
+
+این دعوت نامه از طرف "${userName}" عزیز برای شما ارسال شده تا شما هم از ${marketText} جا نمونید.
+روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
+
+${link}`
+}
diff --git a/src/views/base/about/aboutContent.ts b/src/views/base/about/aboutContent.ts
new file mode 100644
index 0000000..6ea80d4
--- /dev/null
+++ b/src/views/base/about/aboutContent.ts
@@ -0,0 +1,68 @@
+export interface AboutSection {
+  title?: string
+  paragraphs?: string[]
+  items?: string[]
+}
+
+export function getAboutSections(nameProject: string, isBoursecu: boolean): AboutSection[] {
+  if (isBoursecu) {
+    return [
+      {
+        title: 'درباره بورس مس',
+        paragraphs: [
+          'بورس مس یک پلتفرم تخصصی برای تسهیل معاملات، کشف قیمت، تبادل اطلاعات و ایجاد ارتباط مستقیم میان فعالان زنجیره ارزش مس است. ما با هدف شفاف‌سازی بازار، کاهش واسطه‌های غیرضروری و افزایش دسترسی به اطلاعات معتبر، بستری هوشمند و امن را برای خریداران، فروشندگان، تولیدکنندگان، بازرگانان و سرمایه‌گذاران فراهم کرده‌ایم.',
+          'در بازاری که اطلاعات پراکنده، عدم شفافیت قیمت‌ها و دشواری دسترسی به تأمین‌کنندگان معتبر از مهم‌ترین چالش‌ها محسوب می‌شود، بورس مس تلاش می‌کند با بهره‌گیری از فناوری‌های نوین، فرآیند معامله و سرمایه‌گذاری در صنعت مس را ساده‌تر، سریع‌تر و قابل اعتمادتر کند.',
+          'ما باور داریم که مس، فلز آینده جهان است؛ فلزی که نقش کلیدی در توسعه زیرساخت‌ها، انرژی‌های تجدیدپذیر، خودروهای برقی، صنایع الکترونیک و رشد اقتصادی ایفا می‌کند. از این رو، ایجاد یک اکوسیستم تخصصی برای فعالان این صنعت را مأموریت اصلی خود می‌دانیم.',
+        ],
+      },
+      {
+        title: 'چشم‌انداز ما',
+        paragraphs: [
+          'تبدیل شدن به معتبرترین مرجع دیجیتال معاملات، اطلاعات بازار و خدمات تخصصی صنعت مس در ایران و منطقه.',
+        ],
+      },
+      {
+        title: 'مأموریت ما',
+        items: [
+          'افزایش شفافیت در بازار مس',
+          'تسهیل ارتباط میان خریداران و فروشندگان',
+          'فراهم‌سازی دسترسی به قیمت‌ها و اطلاعات معتبر بازار',
+          'توسعه ابزارهای نوین سرمایه‌گذاری و معامله',
+          'حمایت از رشد تجارت داخلی و بین‌المللی محصولات مسی',
+        ],
+      },
+      {
+        title: 'ارزش‌های ما',
+        items: ['شفافیت', 'اعتماد', 'نوآوری', 'مسئولیت‌پذیری', 'توسعه پایدار'],
+      },
+      {
+        paragraphs: [
+          'بورس مس تنها یک پلتفرم معاملاتی نیست؛ بلکه بستری برای شکل‌گیری شبکه‌ای قدرتمند از فعالان صنعت مس است که با همکاری، دانش و اعتماد متقابل، آینده‌ای روشن‌تر برای این صنعت استراتژیک رقم می‌زنند.',
+        ],
+      },
+    ]
+  }
+
+  return [
+    {
+      paragraphs: [
+        'طلا علاوه بر کاربرد در ساخت زیورآلات، از دوران کهن به عنوان یک فلز ارزشمند و دارایی مقاوم در برابر تورم شناخته می‌شود، به طوری که سرمایه‌گذاران حرفه‌ای همواره بخشی از سبد سرمایه‌گذاری‌شان را به طلا اختصاص می‌دهند.',
+      ],
+    },
+    {
+      paragraphs: [
+        `با وجود گسترش فناوری‌های نوین در همه حوزه‌ها، ما در شرکت پخش طلای حاجی ابوالفتح با تلفیق تجربه سنتی خود در بازار طلا و با دانش تخصصی خود و با بهره‌گیری از سوابق موفق قبلی در حوزه فینتک، اقدام به ایجاد ${nameProject} نمودیم.`,
+      ],
+    },
+    {
+      paragraphs: [
+        `مهم‌ترین ارزش پیشنهادی ${nameProject}، امکان پس انداز تدریجی طلا با سرمایه‌های خرد و بدون پرداخت هزینه‌های جانبی است و در این راستا ${nameProject} تمام تلاش خود را نموده است تا از ابتدای سال 1401 با رونمایی محصول اولیه، برای همه افراد با هر سطحی از دارایی، بستری امن و مطمئن ایجاد نماید.`,
+      ],
+    },
+    {
+      paragraphs: [
+        `علاوه بر این ${nameProject} به عنوان یک واحد فناور از سال 1403 با رونمایی نسخه کاملا آنلاین و نرم افزاری وارد فاز جدیدی از خرید و فروش طلای آب شده، شده است.`,
+      ],
+    },
+  ]
+}
diff --git a/src/views/base/about/index.vue b/src/views/base/about/index.vue
index bb26bc1..1cfcfc1 100644
--- a/src/views/base/about/index.vue
+++ b/src/views/base/about/index.vue
@@ -13,29 +13,28 @@
       <div class="text-justify text-base z-200000 relative">
         <div class="px-10">
 <!--          <img :src="logoFull" class="mb-20 mt-5" />-->
-          <div class="overflow-y-auto h-65vh">
+          <div class="overflow-y-auto h-65vh pb-20">
             <div class="bg-primary text-white rounded-[12px] p-4 text-xs leading-5">
-              <div class="w-full h-1px my-3 bg-tertiary"></div>
-              <div>
-                طلا علاوه بر کاربرد در ساخت زیورآلات، از دوران کهن به عنوان یک فلز ارزشمند و دارایی
-                مقاوم در برابر تورم شناخته می‌شود، به طوری که سرمایه‌گذاران حرفه‌ای همواره بخشی از
-                سبد سرمایه‌گذاری‌شان را به طلا اختصاص می‌دهند.
-              </div>
-              <div class="mt-3">
-                با وجود گسترش فناوری‌های نوین در همه حوزه‌ها، ما در شرکت پخش طلای حاجی ابوالفتح با
-                تلفیق تجربه سنتی خود در بازار طلا و با دانش تخصصی خود و با بهره‌گیری از سوابق موفق
-                قبلی در حوزه فینتک، اقدام به ایجاد {{ nameProject }} نمودیم.
-              </div>
-              <div class="mt-3">
-                مهم‌ترین ارزش پیشنهادی  {{ nameProject }}، امکان پس انداز تدریجی طلا با سرمایه‌های خرد و بدون
-                پرداخت هزینه‌های جانبی است و در این راستا {{ nameProject }} تمام تلاش خود را نموده است تا از
-                ابتدای سال 1401 با رونمایی محصول اولیه، برای همه افراد با هر سطحی از دارایی، بستری
-                امن و مطمئن ایجاد نماید.
-              </div>
-              <div class="mt-3">
-                علاوه بر این  {{ nameProject }} به عنوان یک واحد فناور از سال 1403 با رونمایی نسخه کاملا آنلاین
-                و نرم افزاری وارد فاز جدیدی از خرید و فروش طلای آب شده، شده است.
-              </div>
+              <template v-for="(section, sectionIndex) in aboutSections" :key="sectionIndex">
+                <div v-if="sectionIndex > 0" class="w-full h-1px my-3 bg-tertiary"></div>
+                <div v-if="section.title" class="font-bold text-sm mb-2">
+                  {{ section.title }}
+                </div>
+                <div
+                  v-for="(paragraph, paragraphIndex) in section.paragraphs ?? []"
+                  :key="`paragraph-${sectionIndex}-${paragraphIndex}`"
+                  :class="paragraphIndex > 0 ? 'mt-3' : ''"
+                >
+                  {{ paragraph }}
+                </div>
+                <div
+                  v-for="(item, itemIndex) in section.items ?? []"
+                  :key="`item-${sectionIndex}-${itemIndex}`"
+                  class="mt-2"
+                >
+                  • {{ item }}
+                </div>
+              </template>
               <div class="w-full h-1px my-3 bg-tertiary"></div>
             </div>
           </div>
@@ -63,7 +62,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, computed } from 'vue'
 import img from '@/assets/img/user_ly1.svg'
 import gr_bottom from './assets/img/gr_bottom_white.svg'
 import { loading } from '@/utils'
@@ -79,6 +78,8 @@ import { message } from 'ant-design-vue'
 import { updateMe } from '@/api/me'
 import { useUserStore } from '@/store/userStore'
 import {useConfigStore} from "@/store/configStore";
+import {getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
+import { getAboutSections } from './aboutContent'
 
 const config=useConfigStore()
 
@@ -95,6 +96,7 @@ const userFormState = ref<User>({
 const formRef = ref<FormInstance>()
 const userStore = useUserStore()
 const nameProject= useConfigStore().config.name_fa
+const aboutSections = computed(() => getAboutSections(nameProject, isBoursecuProject()))
 
 // const editPassVisible = ref<boolean>(false)
 const editPassVisible = ref<boolean>(false)
@@ -112,20 +114,15 @@ function copyCode() {
 }
 
 function shareCode() {
-  // nextTick(() => {
-  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
-
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای ${nameProject} جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  const val = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    projectName: nameProject,
+    referralId: userStore.userInfo?.referral_id,
+  })
   navigator.share({
-    title: nameProject,
+    title: getReferralShareTitle(nameProject),
     text: val
   })
-  // message.info('کد رونوشت شد')
-  // })
 }
 
 const resetData = () => {
diff --git a/src/views/base/earnMoney/index.vue b/src/views/base/earnMoney/index.vue
index f5ddd31..16a1bf7 100644
--- a/src/views/base/earnMoney/index.vue
+++ b/src/views/base/earnMoney/index.vue
@@ -93,6 +93,8 @@ import { getEarnMoney } from '@/api/earnMoney'
 import EarnCard from '@/views/base/earnMoney/components/EarnCard.vue'
 import TransactionCard from '@/views/base/transactions/components/Item.vue'
 import GiftCard from '@/views/base/earnMoney/components/GiftCard.vue'
+import {useConfigStore} from "@/store/configStore";
+import {getReferralShareText, getReferralShareTitle} from "@/utils/config";
 
 const data = ref<EarnMoney>()
 
@@ -114,20 +116,15 @@ function copyCode() {
 }
 
 function shareCode() {
-  // nextTick(() => {
-  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
-
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای ${nameProject} جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  const val = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    projectName: nameProject,
+    referralId: userStore.userInfo?.referral_id,
+  })
   navigator.share({
-    title: nameProject,
+    title: getReferralShareTitle(nameProject),
     text: val
   })
-  // message.info('کد رونوشت شد')
-  // })
 }
 
 async function earnMoney() {
diff --git a/src/views/base/home/components/CurrentPrice.vue b/src/views/base/home/components/CurrentPrice.vue
index 2fc32d4..5e2075a 100644
--- a/src/views/base/home/components/CurrentPrice.vue
+++ b/src/views/base/home/components/CurrentPrice.vue
@@ -20,7 +20,7 @@
         <Vue3Odometer
             :value="displayGoldVal"
             class="o-text !text-xl font-bold"
-            style="font-family: iran-sans; direction: ltr"
+            style="font-family: var(--App-font-family); direction: ltr"
         />
         ریال
       </div>
diff --git a/src/views/base/home/components/PriceChart.vue b/src/views/base/home/components/PriceChart.vue
index a54b74e..3dfaadb 100644
--- a/src/views/base/home/components/PriceChart.vue
+++ b/src/views/base/home/components/PriceChart.vue
@@ -22,6 +22,7 @@
 import { ref, computed } from 'vue'
 import { useConfigStore } from '@/store/configStore'
 import {usePrice} from "@/utils/usePrice";
+import {getProjectFontFamily} from "@/utils/config";
 
 const props = defineProps<{
   priceChartSeries: any[]
@@ -38,7 +39,10 @@ const toPersianNumber = (num: number) => {
   return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
 }
 
-const chartOptions = computed(() => ({
+const chartOptions = computed(() => {
+  const fontFamily = getProjectFontFamily()
+
+  return {
   chart: {
     id: 'نوسانات قیمت',
     type: 'area',
@@ -55,7 +59,7 @@ const chartOptions = computed(() => ({
     enabled: false,
     // formatter: (val) => toPersianNumber(val),
     style: {
-      fontFamily: '\'IranSans\', sans-serif'
+      fontFamily
     }
   },
   yaxis: {
@@ -63,7 +67,7 @@ const chartOptions = computed(() => ({
     show: false,
     labels: {
       formatter: (val: number) => toPersianNumber(usePrice(val)),
-      style: { fontSize: '13px', fontFamily: "'IranSans', sans-serif" }
+      style: { fontSize: '13px', fontFamily }
     }
   },
   xaxis: {
@@ -84,7 +88,7 @@ const chartOptions = computed(() => ({
       }
     },
     formatter: (val: number) => toPersianNumber(usePrice(val)),
-    style: { fontFamily: "'IranSans', sans-serif" }
+    style: { fontFamily }
   },
   colors: [config.config.color],
   fill: {
@@ -96,7 +100,8 @@ const chartOptions = computed(() => ({
       stops: [0, 100]
     }
   }
-}))
+  }
+})
 
 const handleUpdate = (timeline: string) => {
   emit('updateData', timeline)
diff --git a/src/views/base/home/components/ReferralSection.vue b/src/views/base/home/components/ReferralSection.vue
index b03caec..5799cc2 100644
--- a/src/views/base/home/components/ReferralSection.vue
+++ b/src/views/base/home/components/ReferralSection.vue
@@ -38,19 +38,17 @@
 import { useUserStore } from '@/store/userStore'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import { message } from 'ant-design-vue'
+import { getReferralShareText, getReferralShareTitle } from '@/utils/config'
 
 const userStore = useUserStore()
 
 const shareCode = () => {
-  const text = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
+  const text = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    referralId: userStore.userInfo?.referral_id,
+  })
 
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلا جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
-
-  navigator.share({ title: 'طلا', text })
+  navigator.share({ title: getReferralShareTitle(), text })
 }
 
 const copyCode = () => {
diff --git a/src/views/base/home/components/ShareModal.vue b/src/views/base/home/components/ShareModal.vue
index c7a44d5..f1198f5 100644
--- a/src/views/base/home/components/ShareModal.vue
+++ b/src/views/base/home/components/ShareModal.vue
@@ -40,6 +40,7 @@ import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import { message } from 'ant-design-vue'
 import { useUserStore } from '@/store/userStore'
+import { getReferralShareText, getReferralShareTitle } from '@/utils/config'
 
 const props = defineProps<{
   show: boolean
@@ -58,15 +59,12 @@ const visible = computed({
 })
 
 const shareCode = () => {
-  const text = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
+  const text = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    referralId: props.referralId,
+  })
 
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلا جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${props.referralId}`
-
-  navigator.share({ title: 'طلا', text })
+  navigator.share({ title: getReferralShareTitle(), text })
 }
 
 const copyCode = () => {
diff --git a/src/views/base/home/index.vue b/src/views/base/home/index.vue
index 4cccb41..80008d8 100644
--- a/src/views/base/home/index.vue
+++ b/src/views/base/home/index.vue
@@ -111,6 +111,7 @@ import ShareModal from './components/ShareModal.vue'
 import {useBanners} from './composables/useBanners'
 import {usePriceChart} from './composables/usePriceChart'
 import {useUserFunds} from './composables/useUserFunds'
+import {getReferralShareText, getReferralShareTitle} from '@/utils/config'
 
 // Stores
 const userStore = useUserStore()
@@ -176,16 +177,17 @@ const mainActions = computed(() => [
 
 // Methods
 async function shareCode() {
-  const text = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
-
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای ${configStore.config.name} جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  const text = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    projectName: configStore.config.name,
+    referralId: userStore.userInfo?.referral_id,
+  })
 
   try {
-    await navigator.share({title: configStore.config.name, text})
+    await navigator.share({
+      title: getReferralShareTitle(configStore.config.name),
+      text,
+    })
   } catch {
     copyCode()
   }
diff --git a/src/views/base/home/index_old3.vue b/src/views/base/home/index_old3.vue
index d393bf5..86090b2 100644
--- a/src/views/base/home/index_old3.vue
+++ b/src/views/base/home/index_old3.vue
@@ -625,7 +625,7 @@ import 'swiper/css/pagination'
 import {getConstByKey} from '@/api/const'
 import type {IBenefits} from "@/models/banner";
 import BasicModal from "@/components/BasicPacks/BasicModal.vue";
-import {getConfigApp} from "@/utils/config";
+import {getConfigApp, getReferralShareText, getReferralShareTitle} from "@/utils/config";
 import BasicButton from "@/components/BasicPacks/BasicButton.vue";
 
 const bannerSwiperModules = [Autoplay, Pagination]
@@ -651,20 +651,15 @@ const showShare = ref<boolean>(false)
 const TextBanner = ref<string>('')
 
 function shareCode() {
-  // nextTick(() => {
-  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
-
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای  ${nameProject} جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  const val = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    projectName: nameProject,
+    referralId: userStore.userInfo?.referral_id,
+  })
   navigator.share({
-    title: nameProject,
+    title: getReferralShareTitle(nameProject),
     text: val
   })
-  // message.info('کد رونوشت شد')
-  // })
 }
 
 function copyCode() {
diff --git a/src/views/base/index.vue b/src/views/base/index.vue
index b5ac859..1a26ca1 100644
--- a/src/views/base/index.vue
+++ b/src/views/base/index.vue
@@ -97,7 +97,11 @@
         <div class="main_in" @click="setRoute('buyProduct')">
           <div
             class="circle_in"
-            :class="getConfigApp('name') === 'goldenramin' ? 'is-goldenramin-nav-logo' : 'text-white'"
+            :class="isBoursecuNavLogo
+              ? 'is-boursecu-nav-logo'
+              : isWhiteNavLogo
+                ? 'is-white-nav-logo'
+                : 'text-white'"
           >
             <div class="circle_into" @click="popVisible = !popVisible">
               <div v-if="getConfigApp('name')=='garoosi'"
@@ -151,7 +155,7 @@ import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import type {Transaction} from '@/models/transaction'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import {useConfigStore} from "@/store/configStore";
-import {getConfigApp} from "@/utils/config";
+import {getConfigApp, isBoursecuProject} from "@/utils/config";
 
 /*onMounted(async () => {
   const c = await document.getElementById("canvas1");
@@ -168,6 +172,9 @@ const currentRoute = computed(() => router.currentRoute.value.name)
 const hideMenu = computed(() => !!router.currentRoute.value.meta.hideMenu)
 const config = useConfigStore()
 const popVisible = ref(false)
+const whiteNavLogoProjects = ['goldenramin']
+const isWhiteNavLogo = computed(() => whiteNavLogoProjects.includes(getConfigApp('name')))
+const isBoursecuNavLogo = computed(() => isBoursecuProject())
 
 function setNavColor(val: string) {
   if (currentRoute.value === val) {
@@ -268,13 +275,21 @@ function setRoute(val: string) {
       }
     }
 
-    /* فقط goldenramin: فقط دایرهٔ داخلی سفید؛ حلقهٔ بیرونی همان primary می‌ماند */
-    .circle_in.is-goldenramin-nav-logo {
+    /* goldenramin: فقط دایرهٔ داخلی سفید؛ حلقهٔ بیرونی همان primary می‌ماند */
+    .circle_in.is-white-nav-logo {
       .circle_into {
         background: #fff !important;
         border-color: rgba(0, 0, 0, 0.08);
       }
     }
+
+    /* boursecu: دایرهٔ داخلی با رنگ برند */
+    .circle_in.is-boursecu-nav-logo {
+      .circle_into {
+        background: #133050 !important;
+        border-color: #fff;
+      }
+    }
   }
 
   .main {
diff --git a/src/views/base/rules/index.vue b/src/views/base/rules/index.vue
index d73698d..21db618 100644
--- a/src/views/base/rules/index.vue
+++ b/src/views/base/rules/index.vue
@@ -20,136 +20,29 @@
               class="mt-5 text-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4"
             >
               <div class="font-bold text-sm text-primary">
-                قوانین و مقررات معاملات طلا در بستر {{  nameProject }}
+                {{ rulesTitle }}
               </div>
               <div class="w-full h-1px my-3 bg-secondary"></div>
-              <div class="mt-5 text-xs leading-5">
-                • کاربران موظفند قبل از ثبت‌ نام، تمامی مفاد این تعهدنامه را مطالعه نموده و صرفاً در
-                صورت پذیرش آن اقدام به ثبت‌نام نمایند.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • کاربران {{  nameProject }} می‌پذیرند که کلیه‌ی فعالیت‌های آن‌ها در {{ nameProject }}، در چارچوب قوانین
-                جمهوری اسلامی ایران بوده و هیچ گونه فعالیتی خارج از این چارچوب انجام نخواهد شد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • احراز هویت برای استفاده از خدمات {{  nameProject }} ضروری بوده و کاربران موظفند اطلاعات صحیح
-                خود را بارگذاری نمایند؛ بدیهی است در صورت وجود هرگونه تخلف در احراز هویت، مسئولیت به
-                عهده‌ی فرد متخلف بوده و {{  nameProject }} حق توقف ارائه خدمات به کاربر مذکور و ارجاع موارد
-                تخلف به مراجع ذی‌صلاح را خواهد داشت.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • {{  nameProject }}خود را ملزم به حفظ اطلاعات شخصی کاربران در چارچوب قوانین قضایی کشور
-                می‌داند.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • کاربران {{  nameProject }}  تعهد می‌دهند که از قرار دادن حساب خود در اختیار دیگران خودداری
-                نمایند. از خدمات سایت، تنها برای حساب شخصی خود استفاده نموده و مسئولیت استفاده از
-                خدمات {{  nameProject }} برای فردی دیگر، به عهده کاربر خواهد بود. شماره حساب اعلام شده به سایت
-                باید متعلق به کاربر بوده و کاربران مجاز به دادن شماره حساب متعلق به اشخاص دیگر
-                نیستند.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • کاربران می‌پذیرند در صورت تشخیص کارشناسان پشتیبانی، جهت حفظ امنیت دارایی حساب
-                کاربری‌شان با اطلاع قبلی نسبت به برقراری تماس تصویری با تیم پشتیبان همکاری نمایند.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • هرگونه سهل‌انگاری کاربران در حفظ اطلاعات شخصی و امنیتی از جمله: رمز عبور کاربر،
-                سرقت گوشی کاربر، سرقت کارت ملی و مدارک شناسایی کاربر، سپردن مدارک شخصی و موبایل به
-                فرد ثالث و ... به عهده‌ی شخص کاربر بوده و {{ nameProject }} هیچ گونه مسئولیتی در این موارد
-                نخواهد داشت.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • اکیداً توصیه می‌شود از رمز عبوری پیچیده، امن و همچنین کد شناسایی دو عاملی استفاده
-                شود.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • {{  nameProject }} این اطمینان را می‌دهد که دارایی‌های کاربران را نزد خود به امانت و به
-                بهترین شکل و با بالاترین استانداردهای امنیتی ممکن حفظ نماید؛ در صورت بروز هرگونه
-                مشکل امنیتی، {{ nameProject }} متعهد به جبران خسارت خواهد بود.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • به عنوان پلتفرم معاملات برخط فلزات گران‌بها، هیچ‌گونه مسئولیتی در قبال تصمیمات
-                اقتصادی فی مابین کاربران و سود و زیان حاصل از آن بر عهده {{ nameProject }} نمی‌باشد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • {{  nameProject }} حق اصلاح و تغییر قوانین و مقررات ذکر شده در این صفحه را چه به صورت کلی و
-                چه به صورت جزئی دارد و نسخه نهایی را در این صفحه در معرض دید قرار می‌دهد. استفاده از
-                خدمات {{  nameProject }} پس از اعمال تغییرات، به معنای پذیرش همه تغییرات می‌باشد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • از لحظه خرید کاربران تا زمان تحویل طلای خریداری شده، مسئولیت حفظ و نگهداری اصل طلا
-                بر عهده {{  nameProject }} می‌باشد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • کاربران {{  nameProject }} اذعان می‌دارند که از ریسک‌های اقتصادی مربوط به سرمایه‌گذاری در
-                حوزه طلا مطلع بوده و با علم بر این موضوع اقدام به تبادل و سرمایه‌گذاری می‌کنند.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • {{  nameProject }} متعهد می‌شود در حد توان از حریم شخصی شما محافظت کند و در این راستا،
-                تکنولوژی مورد نیاز در سایت و پلتفرم را برای هر چه مطمئن‌تر و امن‌تر شدن استفاده شما،
-                توسعه دهد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • در صورت بروز نوسان شدید در قیمت طلا و هرگونه رویداد برهم‌زننده نظم حاکم بر بازار
-                طلا، {{  nameProject }} می‌تواند برای خرید و فروش طلا توسط کاربر سقف تعیین کند تا دو طرف متضرر
-                نشوند.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • {{ nameProject }} مجاز است بدون اطلاع قبلی و به صلاح‌دید شخصی نسبت به توقف سفارش‌گیری جدید،
-                معاملات (از جمله سفارش‌های باز) را متوقف کند؛ بدیهی است که کلیه سفارش‌های تکمیل‌شده
-                قبل از توقف سفارش‌گیری، پردازش و تحویل داده خواهد شد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • در صورت بروز هرگونه اختلال در اینترنت و خدمات زیرساخت به دلایل حاکمیتی، هیچ‌گونه
-                مسئولیتی به عهده {{ nameProject }} نمی‌باشد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • درخواست برداشت ریال از حساب کاربری در سریع‌ترین زمان ممکن پس از ثبت، بررسی خواهد
-                شد. زمان واریز پول به حساب کاربران بر اساس محدودیت‌های انتقال وجه بین بانکی، متفاوت
-                خواهد بود. برای اطلاعات بیشتر، به قوانین انتقال وجه بین بانکی (پایا، ساتنا) مراجعه
-                فرمایید.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • کاربر می‌پذیرد که به جز در موارد مورد تعهد، حق هیچ‌گونه داعیه، طلب و شکایت از
-                سایت، مدیران، کارمندان و افراد مرتبط با این سایت را نخواهد داشت.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • اگر کاربر تحت هر عنوان اشتباهاً یا من غیر حق، وجوهی را به حساب کاربر منظور یا در
-                محاسبات خود هر نوع اشتباهی نماید، {{ nameProject }} هر زمان مجاز و مختار است راساً و مستقلاً و
-                بدون انجام هیچ‌گونه تشریفات اداری و قضایی و دریافت اجازه کتبی از متعهد (صاحب حساب)
-                در رفع اشتباه و برداشت از حساب‌های وی اقدام نماید و تشخیص نسبت به وقوع اشتباه یا
-                پرداخت بدون حق و لزوم برداشت از حساب معتبر خواهد بود و کاربر حق هرگونه اعتراض و
-                ادعایی را در خصوص نحوه عملکرد {{ nameProject }} از هر جهت از خود ساقط می‌نماید.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • در صورت بروز هرگونه مشکل یا ابهام در هر یک از معاملات (مانند دستکاری قیمت، اختلال
-                در وب‌سرویس‌ها، انجام معامله خارج از دامنه نوسان و ...)، {{ nameProject }} حق دارد مستقلاً آن
-                معامله را ابطال کرده و دارایی‌های هر یک از طرفین را به حساب خودشان عودت دهد. بدیهی
-                است در صورتی که اشکال از سمت {{ nameProject }}  باشد، شرکت موظف خواهد بود که جبران خسارت نماید
-                و در غیر این صورت، کاربر حق هرگونه اعتراض و ادعایی در خصوص نحوه عملکرد از هر جهت را
-                از خود ساقط می‌نماید.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • در صورت فوت یا حجر کاربر، {{ nameProject }} پیرو قوانین جمهوری اسلامی ایران می‌باشد. کاربر
-                با علم و اطلاع از مقررات این بند نسبت به افتتاح حساب کاربری در {{ nameProject }}  اقدام نموده و
-                کاربر، اشخاص ثالث، ورثه یا قائم‌مقام قانونی ایشان حق اعتراض و یا ادعایی در آینده در
-                این خصوص نخواهند داشت.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • هزینه خدمات و کارمزد تراکنش‌های مالی انجام شده در مطابق با توضیحات ارائه شده در
-                صفحه راهنمای استفاده از {{ nameProject }} می‌باشد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • تمامی علائم تجاری، طرح‌های گرافیکی، رابط کاربری، رابط بصری، عکس، لوگو، کدهای
-                نرم‌افزار، ساختار، نحوه بیان، تنظیم مطالب و محتوای موجود در {{ nameProject }} و شبکه‌های متعلق
-                به {{ nameProject }} و به‌طور کلی، سایر حقوق و امتیازات مربوطه منحصراً در مالکیت {{ nameProject }}
-                می‌باشد و هیچ شخصی حق استفاده از آن را بدون رضایت {{ nameProject }} ندارد.
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • اگر هر یک از مفاد این موافقت‌نامه بر اساس هر قانون لازم‌الاجرا، نامعتبر یا غیرقابل
-                اجرا تشخیص داده شود، این امر بر اعتبار هیچ ماده دیگری تأثیری نخواهد داشت و بقیه
-                مقررات اجرا می‌شود.
+              <div
+                v-for="(rule, index) in rulesItems"
+                :key="`rule-${index}`"
+                class="mt-5 text-xs leading-5"
+              >
+                {{ rule }}
               </div>
+              <template v-if="supplementaryRulesTitle">
+                <div class="w-full h-1px my-3 bg-secondary"></div>
+                <div class="font-bold text-sm text-primary">
+                  {{ supplementaryRulesTitle }}
+                </div>
+                <div
+                  v-for="(rule, index) in supplementaryRulesItems"
+                  :key="`supplementary-${index}`"
+                  class="mt-5 text-xs leading-5"
+                >
+                  {{ rule }}
+                </div>
+              </template>
             </div>
 
           </div>
@@ -177,7 +70,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, computed } from 'vue'
 import img from '@/assets/img/user_ly1.svg'
 // import gr_bottom from './assets/img/gr_bottom_white.svg'
 import { loading } from '@/utils'
@@ -194,6 +87,13 @@ import { updateMe } from '@/api/me'
 import { useUserStore } from '@/store/userStore'
 import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
 import {useConfigStore} from "../../../store/configStore";
+import {getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
+import {
+  getRulesItems,
+  getRulesTitle,
+  getSupplementaryRulesItems,
+  getSupplementaryRulesTitle,
+} from './rulesContent'
 const config=useConfigStore()
 const userFormState = ref<User>({
   fname: '',
@@ -208,6 +108,11 @@ const userFormState = ref<User>({
 const formRef = ref<FormInstance>()
 const userStore = useUserStore()
 const nameProject= useConfigStore().config.name_fa
+const isBoursecu = computed(() => isBoursecuProject())
+const rulesTitle = computed(() => getRulesTitle(nameProject, isBoursecu.value))
+const rulesItems = computed(() => getRulesItems(nameProject, isBoursecu.value))
+const supplementaryRulesTitle = computed(() => getSupplementaryRulesTitle(isBoursecu.value))
+const supplementaryRulesItems = computed(() => getSupplementaryRulesItems(nameProject, isBoursecu.value))
 // const editPassVisible = ref<boolean>(false)
 const editPassVisible = ref<boolean>(false)
 
@@ -224,20 +129,15 @@ function copyCode() {
 }
 
 function shareCode() {
-  // nextTick(() => {
-  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
-
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای   ${nameProject}   جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  const val = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    projectName: nameProject,
+    referralId: userStore.userInfo?.referral_id,
+  })
   navigator.share({
-    title:  nameProject ,
+    title: getReferralShareTitle(nameProject),
     text: val
   })
-  // message.info('کد رونوشت شد')
-  // })
 }
 
 const resetData = () => {
diff --git a/src/views/base/rules/permissions/permissions.vue b/src/views/base/rules/permissions/permissions.vue
index 8c61484..54e4331 100644
--- a/src/views/base/rules/permissions/permissions.vue
+++ b/src/views/base/rules/permissions/permissions.vue
@@ -54,6 +54,7 @@ import { message } from 'ant-design-vue'
 import { updateMe } from '@/api/me'
 import { useUserStore } from '@/store/userStore'
 import {useConfigStore} from "@/store/configStore";
+import {getReferralShareText, getReferralShareTitle} from "@/utils/config";
 
 const config=useConfigStore()
 
@@ -87,20 +88,15 @@ function copyCode() {
 }
 
 function shareCode() {
-  // nextTick(() => {
-  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
-
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای  ${nameProject} جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  const val = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    projectName: nameProject,
+    referralId: userStore.userInfo?.referral_id,
+  })
   navigator.share({
-    title: nameProject,
+    title: getReferralShareTitle(nameProject),
     text: val
   })
-  // message.info('کد رونوشت شد')
-  // })
 }
 
 const resetData = () => {
diff --git a/src/views/base/rules/rulesContent.ts b/src/views/base/rules/rulesContent.ts
new file mode 100644
index 0000000..9fbf144
--- /dev/null
+++ b/src/views/base/rules/rulesContent.ts
@@ -0,0 +1,74 @@
+function replaceGoldWithCopper(text: string) {
+  return text.replace(/طلا/g, 'مس')
+}
+
+export function getRulesTitle(nameProject: string, isBoursecu: boolean) {
+  if (isBoursecu) {
+    return `قوانین و مقررات معاملات مس در بستر ${nameProject}`
+  }
+  return `قوانین و مقررات معاملات طلا در بستر ${nameProject}`
+}
+
+export function getRulesItems(nameProject: string, isBoursecu: boolean) {
+  const items = [
+    `• کاربران موظفند قبل از ثبت‌ نام، تمامی مفاد این تعهدنامه را مطالعه نموده و صرفاً در صورت پذیرش آن اقدام به ثبت‌نام نمایند.`,
+    `• کاربران ${nameProject} می‌پذیرند که کلیه‌ی فعالیت‌های آن‌ها در ${nameProject}، در چارچوب قوانین جمهوری اسلامی ایران بوده و هیچ گونه فعالیتی خارج از این چارچوب انجام نخواهد شد.`,
+    `• احراز هویت برای استفاده از خدمات ${nameProject} ضروری بوده و کاربران موظفند اطلاعات صحیح خود را بارگذاری نمایند؛ بدیهی است در صورت وجود هرگونه تخلف در احراز هویت، مسئولیت به عهده‌ی فرد متخلف بوده و ${nameProject} حق توقف ارائه خدمات به کاربر مذکور و ارجاع موارد تخلف به مراجع ذی‌صلاح را خواهد داشت.`,
+    `• ${nameProject} خود را ملزم به حفظ اطلاعات شخصی کاربران در چارچوب قوانین قضایی کشور می‌داند.`,
+    `• کاربران ${nameProject} تعهد می‌دهند که از قرار دادن حساب خود در اختیار دیگران خودداری نمایند. از خدمات سایت، تنها برای حساب شخصی خود استفاده نموده و مسئولیت استفاده از خدمات ${nameProject} برای فردی دیگر، به عهده کاربر خواهد بود. شماره حساب اعلام شده به سایت باید متعلق به کاربر بوده و کاربران مجاز به دادن شماره حساب متعلق به اشخاص دیگر نیستند.`,
+    `• کاربران می‌پذیرند در صورت تشخیص کارشناسان پشتیبانی، جهت حفظ امنیت دارایی حساب کاربری‌شان با اطلاع قبلی نسبت به برقراری تماس تصویری با تیم پشتیبان همکاری نمایند.`,
+    `• هرگونه سهل‌انگاری کاربران در حفظ اطلاعات شخصی و امنیتی از جمله: رمز عبور کاربر، سرقت گوشی کاربر، سرقت کارت ملی و مدارک شناسایی کاربر، سپردن مدارک شخصی و موبایل به فرد ثالث و ... به عهده‌ی شخص کاربر بوده و ${nameProject} هیچ گونه مسئولیتی در این موارد نخواهد داشت.`,
+    `• اکیداً توصیه می‌شود از رمز عبوری پیچیده، امن و همچنین کد شناسایی دو عاملی استفاده شود.`,
+    `• ${nameProject} این اطمینان را می‌دهد که دارایی‌های کاربران را نزد خود به امانت و به بهترین شکل و با بالاترین استانداردهای امنیتی ممکن حفظ نماید؛ در صورت بروز هرگونه مشکل امنیتی، ${nameProject} متعهد به جبران خسارت خواهد بود.`,
+    `• به عنوان پلتفرم معاملات برخط فلزات گران‌بها، هیچ‌گونه مسئولیتی در قبال تصمیمات اقتصادی فی مابین کاربران و سود و زیان حاصل از آن بر عهده ${nameProject} نمی‌باشد.`,
+    `• ${nameProject} حق اصلاح و تغییر قوانین و مقررات ذکر شده در این صفحه را چه به صورت کلی و چه به صورت جزئی دارد و نسخه نهایی را در این صفحه در معرض دید قرار می‌دهد. استفاده از خدمات ${nameProject} پس از اعمال تغییرات، به معنای پذیرش همه تغییرات می‌باشد.`,
+    `• از لحظه خرید کاربران تا زمان تحویل طلای خریداری شده، مسئولیت حفظ و نگهداری اصل طلا بر عهده ${nameProject} می‌باشد.`,
+    `• کاربران ${nameProject} اذعان می‌دارند که از ریسک‌های اقتصادی مربوط به سرمایه‌گذاری در حوزه طلا مطلع بوده و با علم بر این موضوع اقدام به تبادل و سرمایه‌گذاری می‌کنند.`,
+    `• ${nameProject} متعهد می‌شود در حد توان از حریم شخصی شما محافظت کند و در این راستا، تکنولوژی مورد نیاز در سایت و پلتفرم را برای هر چه مطمئن‌تر و امن‌تر شدن استفاده شما، توسعه دهد.`,
+    `• در صورت بروز نوسان شدید در قیمت طلا و هرگونه رویداد برهم‌زننده نظم حاکم بر بازار طلا، ${nameProject} می‌تواند برای خرید و فروش طلا توسط کاربر سقف تعیین کند تا دو طرف متضرر نشوند.`,
+    `• ${nameProject} مجاز است بدون اطلاع قبلی و به صلاح‌دید شخصی نسبت به توقف سفارش‌گیری جدید، معاملات (از جمله سفارش‌های باز) را متوقف کند؛ بدیهی است که کلیه سفارش‌های تکمیل‌شده قبل از توقف سفارش‌گیری، پردازش و تحویل داده خواهد شد.`,
+    `• در صورت بروز هرگونه اختلال در اینترنت و خدمات زیرساخت به دلایل حاکمیتی، هیچ‌گونه مسئولیتی به عهده ${nameProject} نمی‌باشد.`,
+    `• درخواست برداشت ریال از حساب کاربری در سریع‌ترین زمان ممکن پس از ثبت، بررسی خواهد شد. زمان واریز پول به حساب کاربران بر اساس محدودیت‌های انتقال وجه بین بانکی، متفاوت خواهد بود. برای اطلاعات بیشتر، به قوانین انتقال وجه بین بانکی (پایا، ساتنا) مراجعه فرمایید.`,
+    `• کاربر می‌پذیرد که به جز در موارد مورد تعهد، حق هیچ‌گونه داعیه، طلب و شکایت از سایت، مدیران، کارمندان و افراد مرتبط با این سایت را نخواهد داشت.`,
+    `• اگر کاربر تحت هر عنوان اشتباهاً یا من غیر حق، وجوهی را به حساب کاربر منظور یا در محاسبات خود هر نوع اشتباهی نماید، ${nameProject} هر زمان مجاز و مختار است راساً و مستقلاً و بدون انجام هیچ‌گونه تشریفات اداری و قضایی و دریافت اجازه کتبی از متعهد (صاحب حساب) در رفع اشتباه و برداشت از حساب‌های وی اقدام نماید و تشخیص نسبت به وقوع اشتباه یا پرداخت بدون حق و لزوم برداشت از حساب معتبر خواهد بود و کاربر حق هرگونه اعتراض و ادعایی را در خصوص نحوه عملکرد ${nameProject} از هر جهت از خود ساقط می‌نماید.`,
+    `• در صورت بروز هرگونه مشکل یا ابهام در هر یک از معاملات (مانند دستکاری قیمت، اختلال در وب‌سرویس‌ها، انجام معامله خارج از دامنه نوسان و ...)، ${nameProject} حق دارد مستقلاً آن معامله را ابطال کرده و دارایی‌های هر یک از طرفین را به حساب خودشان عودت دهد. بدیهی است در صورتی که اشکال از سمت ${nameProject} باشد، شرکت موظف خواهد بود که جبران خسارت نماید و در غیر این صورت، کاربر حق هرگونه اعتراض و ادعایی در خصوص نحوه عملکرد از هر جهت را از خود ساقط می‌نماید.`,
+    `• در صورت فوت یا حجر کاربر، ${nameProject} پیرو قوانین جمهوری اسلامی ایران می‌باشد. کاربر با علم و اطلاع از مقررات این بند نسبت به افتتاح حساب کاربری در ${nameProject} اقدام نموده و کاربر، اشخاص ثالث، ورثه یا قائم‌مقام قانونی ایشان حق اعتراض و یا ادعایی در آینده در این خصوص نخواهند داشت.`,
+    `• هزینه خدمات و کارمزد تراکنش‌های مالی انجام شده در مطابق با توضیحات ارائه شده در صفحه راهنمای استفاده از ${nameProject} می‌باشد.`,
+    `• تمامی علائم تجاری، طرح‌های گرافیکی، رابط کاربری، رابط بصری، عکس، لوگو، کدهای نرم‌افزار، ساختار، نحوه بیان، تنظیم مطالب و محتوای موجود در ${nameProject} و شبکه‌های متعلق به ${nameProject} و به‌طور کلی، سایر حقوق و امتیازات مربوطه منحصراً در مالکیت ${nameProject} می‌باشد و هیچ شخصی حق استفاده از آن را بدون رضایت ${nameProject} ندارد.`,
+    `• اگر هر یک از مفاد این موافقت‌نامه بر اساس هر قانون لازم‌الاجرا، نامعتبر یا غیرقابل اجرا تشخیص داده شود، این امر بر اعتبار هیچ ماده دیگری تأثیری نخواهد داشت و بقیه مقررات اجرا می‌شود.`,
+  ]
+
+  if (!isBoursecu) {
+    return items
+  }
+
+  const boursecuItems = items.map(replaceGoldWithCopper)
+
+  boursecuItems[11] = `• از لحظه خرید کاربران تا زمان تحویل مس خریداری شده، مسئولیت حفظ و نگهداری آن بر عهده ${nameProject} می‌باشد. در معاملات دارای تحویل فیزیکی، خریدار موظف است در مهلت تعیین‌شده نسبت به دریافت کالا اقدام نماید. هزینه‌های حمل، بارگیری، بیمه و سایر هزینه‌های جانبی مطابق شرایط هر معامله تعیین خواهد شد.`
+
+  boursecuItems[12] = `• کاربران ${nameProject} اذعان می‌دارند که قیمت مس تابع شرایط بازارهای داخلی و بین‌المللی بوده و از ریسک‌های اقتصادی مربوط به سرمایه‌گذاری در حوزه مس مطلع بوده و با علم بر این موضوع اقدام به تبادل و سرمایه‌گذاری می‌کنند. ${nameProject} هیچ‌گونه تضمینی نسبت به سودآوری سرمایه‌گذاری ارائه نمی‌کند.`
+
+  boursecuItems[16] = `• در شرایط فورس ماژور از جمله جنگ، تحریم، اختلال گسترده در زیرساخت‌های ارتباطی، بلایای طبیعی، تصمیمات حاکمیتی و سایر شرایط خارج از کنترل، ${nameProject} مسئولیتی نسبت به تأخیر یا عدم امکان ارائه خدمات نخواهد داشت.`
+
+  boursecuItems[20] = `• کاربران ${nameProject} متعهد می‌شوند از بستر ${nameProject} برای معاملات صوری، دستکاری قیمت، تبانی، پولشویی، ارائه اطلاعات خلاف واقع یا هرگونه فعالیت غیرقانونی استفاده ننمایند. در صورت بروز هرگونه مشکل یا ابهام در هر یک از معاملات (مانند دستکاری قیمت، اختلال در وب‌سرویس‌ها، انجام معامله خارج از دامنه نوسان و ...)، ${nameProject} حق دارد مستقلاً آن معامله را ابطال کرده و دارایی‌های هر یک از طرفین را به حساب خودشان عودت دهد. بدیهی است در صورتی که اشکال از سمت ${nameProject} باشد، شرکت موظف خواهد بود که جبران خسارت نماید و در غیر این صورت، کاربر حق هرگونه اعتراض و ادعایی در خصوص نحوه عملکرد از هر جهت را از خود ساقط می‌نماید.`
+
+  return boursecuItems
+}
+
+export function getSupplementaryRulesTitle(isBoursecu: boolean) {
+  return isBoursecu ? 'مقررات تکمیلی معاملات مس' : null
+}
+
+export function getSupplementaryRulesItems(nameProject: string, isBoursecu: boolean) {
+  if (!isBoursecu) {
+    return []
+  }
+
+  return [
+    `• کلیه فروشندگان موظف‌اند مشخصات فنی، آنالیز شیمیایی، استاندارد تولید، وزن و سایر ویژگی‌های کالا را به‌صورت صحیح و کامل اعلام نمایند. مسئولیت صحت اطلاعات ارائه‌شده بر عهده فروشنده است.`,
+    `• در صورت اختلاف در کیفیت، وزن یا مشخصات فنی کالا، مرجع داوری و کارشناسی مورد تأیید ${nameProject} ملاک رسیدگی خواهد بود.`,
+    `• ${nameProject} مجاز است در راستای اجرای قوانین مبارزه با پولشویی، تأمین مالی تروریسم و سایر مقررات حاکم، اطلاعات تکمیلی از کاربران درخواست نموده و در صورت لزوم نسبت به محدودسازی یا تعلیق حساب کاربری اقدام نماید.`,
+    `• تمامی سوابق ثبت‌شده در سامانه شامل سفارش‌ها، معاملات، پیام‌های سیستمی، لاگ‌های امنیتی و اطلاعات ثبت‌شده در پایگاه داده، به‌عنوان مستندات معتبر بین طرفین قابل استناد خواهد بود.`,
+    `• ${nameProject} حق تعلیق یا مسدودسازی حساب کاربران متخلف را بدون ایجاد حق مطالبه خسارت برای کاربر محفوظ می‌دارد.`,
+  ]
+}
diff --git a/src/views/base/user/index.vue b/src/views/base/user/index.vue
index 8c2f902..2de93f9 100644
--- a/src/views/base/user/index.vue
+++ b/src/views/base/user/index.vue
@@ -290,7 +290,7 @@ import { updateMe, updatePass } from '@/api/me'
 import { useUserStore } from '@/store/userStore'
 import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
 import { useConfigStore } from '@/store/configStore'
-import { getConfigApp } from '../../../utils/config'
+import { getConfigApp, getReferralShareText, getReferralShareTitle } from '../../../utils/config'
 
 const userFormState = ref<User>({
   fname: '',
@@ -353,20 +353,15 @@ const isLegal = computed(() => {
 })
 
 function shareCode() {
-  // nextTick(() => {
-  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
-با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
-
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای  ${nameProject} جا نمونید.
-روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
-
-${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  const val = getReferralShareText({
+    userName: userStore.userInfo?.name,
+    projectName: nameProject,
+    referralId: userStore.userInfo?.referral_id,
+  })
   navigator.share({
-    title: nameProject,
+    title: getReferralShareTitle(nameProject),
     text: val
   })
-  // message.info('کد رونوشت شد')
-  // })
 }
 
 const resetData = () => {
diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index fe062a8..1158bd1 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -1,6 +1,27 @@
 <template>
   <div class="w-full  flex flex-col">
-    <img :src="config.config.avatar" alt="" class="z-100  rounded-full  aspect-square self-center w-36 " STYLE="margin-bottom: 60px">
+    <div
+      v-if="isBoursecuProject()"
+      class="flex flex-col items-center mb-[60px]"
+    >
+      <img
+        :src="getProjectLoginLogo(config.config.avatar)"
+        alt=""
+        class="z-100 self-center w-56 h-auto object-contain"
+      >
+      <div class="text-center text-sm text-primary font-medium mt-3 px-2 leading-7 max-w-[18rem]">
+        <div v-for="(line, index) in getProjectLoginTaglineLines()" :key="index">
+          {{ line }}
+        </div>
+      </div>
+    </div>
+    <img
+      v-else
+      :src="getProjectLoginLogo(config.config.avatar)"
+      alt=""
+      class="z-100 rounded-full aspect-square self-center w-36"
+      style="margin-bottom: 60px"
+    >
 
     <!--    <div class="font-bold text-center text-xl">{{  URLUserType() === 'single' ? 'ورود' : 'ورود همکار'  }}</div>-->
 <!--    <div v-if="URLUserType() === 'single'" class="font-bold text-center text-xl">ورود</div>-->
@@ -236,7 +257,7 @@ import { useUserStore } from '@/store/userStore'
 import { useWalletStore } from '@/store/walletStore'
 import { fingerPosition, setTruth } from '@/main'
 import {useConfigStore} from "@/store/configStore";
-import {getConfigApp} from "@/utils/config";
+import {getConfigApp, getProjectLoginLogo, getProjectLoginTaglineLines, isBoursecuProject} from "@/utils/config";
 import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
 import {getConfig} from "@/api/config";
 import shareAppleIcon from '@/assets/img/share-apple.png'
diff --git a/src/views/login/components/Register.vue b/src/views/login/components/Register.vue
index 2060d71..d4c2cf1 100644
--- a/src/views/login/components/Register.vue
+++ b/src/views/login/components/Register.vue
@@ -1,6 +1,26 @@
 <template>
   <div class="w-full flex flex-col">
-    <img :src="config.config.avatar" alt="" class="z-100  rounded-full  aspect-square self-center w-36" STYLE="">
+    <div
+      v-if="isBoursecuProject()"
+      class="flex flex-col items-center mb-4"
+    >
+      <img
+        :src="getProjectLoginLogo(config.config.avatar)"
+        alt=""
+        class="z-100 self-center w-56 h-auto object-contain"
+      >
+      <div class="text-center text-sm text-primary font-medium mt-3 px-2 leading-7 max-w-[18rem]">
+        <div v-for="(line, index) in getProjectLoginTaglineLines()" :key="index">
+          {{ line }}
+        </div>
+      </div>
+    </div>
+    <img
+      v-else
+      :src="getProjectLoginLogo(config.config.avatar)"
+      alt=""
+      class="z-100 rounded-full aspect-square self-center w-36"
+    >
     <div class="font-bold text-center text-xl">ثبت نام</div>
     <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic"
             @finish="registerAccount">
@@ -142,6 +162,7 @@ import DialogVantOneButton from '@/components/DialogVantOneButton.vue'
 import { registerCustomer } from '@/api/login'
 import router from '@/router'
 import {useConfigStore} from "@/store/configStore";
+import {getProjectLoginLogo, getProjectLoginTaglineLines, isBoursecuProject} from "@/utils/config";
 const config = useConfigStore()
 
 // const stepTwoVerify = ref<boolean>(false)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 045ce29..f6635d6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-center ">
+  <div class="login-page flex items-center justify-center">
     <!--    <PhoneVerify/>-->
     <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
       <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover">
@@ -43,6 +43,8 @@ onMounted(() => {
 </script>
 
 
-<style>
-
+<style scoped>
+.login-page {
+  min-height: calc(100vh - var(--app-credit-footer-offset, 28px));
+}
 </style>