modified: main_dc/yalarba/easySite/easySite/app/components/layout/PlanBadge.vue

set for planBage preview message that revile on hover
Added a message to the rate badge that appears when you hover

main_dc/yalarba/easySite/easySite/app/components/layout/PlanBadge.vue

@@ -1,7 +1,19 @@
 <!-- components/PlanBadge.vue -->
 <template>
-  <div class="plan-badge" :class="badgeClass">
-    <span class="text-sm font-semibold">{{ planLabel }}</span>
+  <div class="plan-badge-wrapper relative inline-flex">
+    <NuxtLink 
+      :to="'/rules'" 
+      class="plan-badge group" 
+      :class="badgeClass"
+      @click.prevent="navigateToRules"
+    >
+      <span class="text-sm font-semibold">{{ planLabel }}</span>
+      
+      <!-- CSS Tooltip -->
+      <div class="tooltip">
+        {{ tooltipText }}
+      </div>
+    </NuxtLink>
   </div>
 </template>
 
@@ -11,6 +23,10 @@ const props = defineProps({
     type: String,
     default: 'start',
     validator: (value) => ['start', 'pro', 'vip'].includes(value)
+  },
+  isCurrentPlan: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -20,12 +36,89 @@ const planLabels = {
   vip: 'VIP'
 }
 
+const planDescriptions = {
+  start: 'Базовый план для начала работы',
+  pro: 'Расширенные возможности для профессионалов',
+  vip: 'Премиум решение для максимального роста'
+}
+
 const planColors = {
-  start: 'bg-green-100 text-green-800 border-green-200',
-  pro: 'bg-blue-100 text-blue-800 border-blue-200',
-  vip: 'bg-purple-100 text-purple-800 border-purple-200'
+  start: 'bg-green-100 text-green-800 border-green-200 hover:bg-green-200',
+  pro: 'bg-blue-100 text-blue-800 border-blue-200 hover:bg-blue-200',
+  vip: 'bg-purple-100 text-purple-800 border-purple-200 hover:bg-purple-200'
 }
 
 const planLabel = computed(() => planLabels[props.plan])
-const badgeClass = computed(() => `inline-flex items-center px-3 py-1 rounded-full border ${planColors[props.plan]}`)
-</script>
+const badgeClass = computed(() => `inline-flex items-center px-3 py-1 rounded-full border cursor-pointer transition-colors duration-200 ${planColors[props.plan]}`)
+
+// Текст подсказки
+const tooltipText = computed(() => {
+  if (props.isCurrentPlan) {
+    return `Это ваш тарифный план: ${planDescriptions[props.plan]}`
+  }
+  return planDescriptions[props.plan]
+})
+
+// Навигация на страницу правил
+const navigateToRules = () => {
+  navigateTo('/rules')
+}
+</script>
+
+<style scoped>
+.plan-badge-wrapper {
+  display: inline-flex;
+}
+
+.plan-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+/* Стили для CSS tooltip (всплывает вниз) */
+.tooltip {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(8px);
+  background: #1f2937; /* gray-800 */
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.2s ease-in-out;
+  pointer-events: none;
+  z-index: 50;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  min-width: 180px;
+  text-align: center;
+}
+
+/* Стрелка для tooltip (теперь сверху) */
+.tooltip::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-bottom-color: #1f2937; /* gray-800 */
+}
+
+/* Показываем tooltip при наведении */
+.plan-badge:hover .tooltip {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(4px);
+}
+
+/* Альтернативный вариант - подсказка появляется сразу без задержки */
+.plan-badge .tooltip {
+  transition-delay: 0s;
+}
+</style>