adata-ui 2.1.41-beta.0 → 2.1.41-beta.10

package/-error.vue

@@ -135,7 +135,7 @@ function handleError() {
             <div
               v-for="item in errorData.content?.list"
               :key="item.id"
-              class="flex items-center gap-1 text-sm	font-medium"
+              class="flex items-center gap-1 text-sm font-medium"
             >
               <a-icon-check class="stroke-icon-brand" />
               {{ item.label }}

package/CLAUDE.md

@@ -6,7 +6,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 adata-ui — UI-кит проектов adata.kz, оформленный как **Nuxt 3 layer** (`main` = `nuxt.config.ts`, публикуется npm-пакетом `adata-ui`). Консьюмеры (pk-frontend) подключают его через `extends` и автоматически получают компоненты, Tailwind и стили. Разработка и просмотр компонентов — в `.playground` (extends `'..'`).
 
-Ветка `tailwind-v4` (2026-07) — миграция на Tailwind v4 + новая палитра + тёмная тема на семантических токенах; `predesign` ещё на v3. pk-frontend мигрирован на v4/семантику (ветка ADTC-8931, extends `'../adata-ui'`); `deepblue` удалён из theme.css после его миграции (2026-07-28). Каталог `docs/` удалён из дерева; реестр миграции — в git-истории: `git show 69039ec:docs/color-migration.md`.
+Миграция на Tailwind v4 + новая палитра + тёмная тема на семантических токенах влита в `predesign` (ветка `tailwind-v4`, 2026-07) — рабочая ветка уже на v4. pk-frontend мигрирован на v4/семантику (ветка ADTC-8931, extends `'../adata-ui'`); `deepblue` удалён из theme.css после его миграции (2026-07-28). Каталог `docs/` удалён из дерева; реестр миграции — в git-истории: `git show 69039ec:docs/color-migration.md`.
 
 ## Команды
 
@@ -35,7 +35,8 @@ adata-ui — UI-кит проектов adata.kz, оформленный как
 
 - **Примитивные шкалы (`gray-*`, `red-*`, `brand-*`, `secondary-*`, `white`/`black`) константны в обеих темах.** Под `.dark` переключаются только семантические токены (блоки `@generated-semantic-colors[-dark]` в theme.css, источник — Figma-артефакт «Семантические цвета»).
 - В новом коде цвета задавать семантикой: `text-primary/secondary/quaternary/disabled/brand/link/success/warning/danger`, `bg-main/subtle/muted/overlay/badge/brand[-subtle]/{success,warning,danger,red…rose}[-subtle]`, `border-default/strong/focus/brand/…`, `bg-action-{primary,secondary,danger}[-hover|-active]` + `text-action-*-fg`, `text/fill/stroke-icon-*`, `fill-main`/`stroke-main` (флип белых заливок иллюстраций). Реестр и маппинг — `git show 69039ec:docs/color-migration.md`.
-- **Роли поверхностей (по Figma-макетам ДС)**: страница — `bg-main`; карточки/секции — `bg-subtle` + `border-default` (subtle полупрозрачен и без бордера не читается); утилитарный непрозрачный серый (thead, скелетоны, зебра, треки, плашки) — `bg-muted`; hover поверхностей — `bg-action-secondary-hover` (не `bg-subtle` — в дарке невидим). **`bg-canvas` не использовать** (dark #1E2939 сине-серый, выведен из употребления).
+- **Роли поверхностей (по Figma-макетам ДС)**: страница — `bg-main`; карточки/секции — `bg-subtle` + `border-default` (subtle полупрозрачен и без бордера не читается); утилитарный непрозрачный серый (thead, скелетоны, зебра, треки, плашки) — `bg-muted`; hover поверхностей — `bg-action-secondary-hover` (не `bg-subtle` — в дарке невидим); «утопленная» зона (инпуты, плитки, «экраны» иллюстраций) — `bg-canvas` (dark #0F0F10 — глубже `bg-main`; прежний сине-серый #1E2939 заменён аудитом семантических цветов 2026-08).
+- **Пара иконка+плитка**: цвет `text-icon-{цвет}` всегда идёт с плиткой `bg-{цвет}-subtle` того же оттенка — колор-кодирование блоков (лендинги, карточки модулей) строится только так.
 - Примитив в разметке легален, когда цвет должен быть одинаков в темах: инвертированные поверхности (`bg-secondary-500` футера/тултипов), белый декор на цветном (`bg-white` точки/бегунки), `chart-*`, `surface-dark*`. Цветовые `dark:`-классы разрешены для краевых случаев без токена (`dark:bg-white/5`-тинты и т.п.).
 - Для ring/outline border-токены доступны var-синтаксисом: `ring-(--border-color-default)`, `outline-(--border-color-danger)/60`.
 - В `<style>`-блоках: `var(--text-color-*)`, `var(--background-color-*)`, `var(--border-color-*)`, `var(--color-action-*|icon-*)`; полупрозрачность — `color-mix(in srgb, var(--…) N%, transparent)`. `theme('colors…')` в v4 не работает. **Не вешать `/N` на полупрозрачные токены** (`bg-subtle`, `bg-overlay`, dark `brand-subtle`/`danger-subtle`) — альфа перемножается.

package/assets/styles/main.css

@@ -1,6 +1,7 @@
-/* CSS-вход adata-ui: подключается конфигом слоя (css: в nuxt.config.ts),
-   консьюмерам ничего настраивать не нужно. Свой @import "tailwindcss"
-   в приложении не заводить — будет второй tailwind-корень и дубли утилит. */
+/* CSS-вход adata-ui. Подключать его обязан КОНСЬЮМЕР (css: в своём nuxt.config),
+   а не слой: у слоя из node_modules Nuxt дописывает авто-импорты в сам CSS и
+   ломает dev-SSR. Свой @import "tailwindcss" в приложении не заводить —
+   будет второй tailwind-корень и дубли утилит. */
 @import "tailwindcss";
 @import "./theme.css";
 @import "./ui.css";

package/assets/styles/theme.css

@@ -7,15 +7,22 @@
 @theme static {
   --font-sans: "Open Sans", sans-serif;
 
+  /* Точка, с которой лендинги ДС-2026 расширяют контейнер (макет: min-[1920px]) */
+  --breakpoint-3xl: 1920px;
+  /* Дефолтная шкала v4 кончается на --container-7xl = 80rem = 1280px */
+  --container-8xl: 96rem;
+
   --radius-*: initial;
   --radius: 4px;
   --radius-xs: 4px;
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-10: 10px;
+  --radius-14: 14px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 20px;
+  --radius-3xl: 24px;
 
   --text-display-hero: 60px;
   --text-display-hero--line-height: 72px;
@@ -136,6 +143,13 @@
   --color-secondary-900: #10171E;
   /* @generated-colors:end */
 
+  /* ОСОЗНАННОЕ ОТКЛОНЕНИЕ ОТ АРТЕФАКТА (2026-08-24, по просьбе PM): роль warning для текста и
+     subtle-фона переведена с amber на yellow — --text-color-warning (#A65F00 / dark #FFDF20) и
+     --background-color-warning-subtle (#FEF9C2 / dark #432004), т.е. yellow-700/300 и yellow-100/950.
+     Причина: прежняя пара amber-500 на amber-100 давала ≈1.9:1 — провал WCAG AA для мелкого текста.
+     Остальные warning-токены (--background-color-warning, --border-color-warning, --color-icon-warning)
+     оставлены как в артефакте. При регенерации семантических блоков из Figma эти четыре значения
+     (здесь и в @generated-semantic-colors-dark ниже) нужно вернуть вручную. */
   /* @generated-semantic-colors:start (светлые значения; тёмные — в @layer base .dark ниже)
      Источник: Figma-артефакт «Семантические цвета» (таблица токенов — в git-истории: git show 69039ec:docs/color-migration.md).
      Старый генератор (git show 8862721) к этому блоку неприменим: регенерация = дамп таблицы артефакта.
@@ -152,7 +166,7 @@
   --text-color-link: #068DFF;
   --text-color-link-hover: #007AE0;
   --text-color-success: #00A63E;
-  --text-color-warning: #FE9A00;
+  --text-color-warning: #A65F00;
   --text-color-danger: #FB2C36;
   /* bg */
   --background-color-main: #FFFFFF;
@@ -165,7 +179,7 @@
   --background-color-success: #00A63E;
   --background-color-success-subtle: #DCFCE7;
   --background-color-warning: #FE9A00;
-  --background-color-warning-subtle: #FEF3C6;
+  --background-color-warning-subtle: #FEF9C2;
   --background-color-danger: #FB2C36;
   --background-color-danger-subtle: #FEF2F2;
   --background-color-badge: #E5E7EB;
@@ -284,20 +298,20 @@
     --text-color-link: #3DA6FF;
     --text-color-link-hover: #B3DCFF;
     --text-color-success: #00C950;
-    --text-color-warning: #FFB900;
+    --text-color-warning: #FFDF20;
     --text-color-danger: #FF6467;
     /* bg */
     --background-color-main: #161617;
-    --background-color-canvas: #1E2939;
+    --background-color-canvas: #0F0F10;
     --background-color-subtle: #171717;
-    --background-color-muted: #262626;
+    --background-color-muted: #1F1F21;
     --background-color-overlay: #00000099;
     --background-color-brand: #068DFF;
     --background-color-brand-subtle: #068DFF1A;
     --background-color-success: #008236;
     --background-color-success-subtle: #032E15;
     --background-color-warning: #E17100;
-    --background-color-warning-subtle: #461901;
+    --background-color-warning-subtle: #432004;
     --background-color-danger: #FF6467;
     --background-color-danger-subtle: #4608094D;
     --background-color-badge: #4A5565;

package/assets/styles/ui.css

@@ -14,6 +14,18 @@ body {
   background-color: var(--background-color-main);
 }
 
+/* Отключает жёлоб скроллбара на страницах со своим скроллом (схемы связей).
+   Вешается через useHead({ htmlAttrs: { class: … } }) и снимается при уходе со
+   страницы — в отличие от глобального <style> в layout'е, который утекал в
+   <head> навсегда. Специфичность класса выше html, !important не нужен. */
+html.no-scroll-gutter {
+  scrollbar-gutter: initial;
+}
+
+html.no-scroll-gutter::-webkit-scrollbar {
+  width: 0;
+}
+
 html::-webkit-scrollbar {
   width: 15px;
 }
@@ -168,3 +180,68 @@ input[type="number"] {
   clip: rect(0 0 0 0);
   overflow: hidden;
 }
+
+/* Подложка hero-иллюстраций лендингов (§05 аудита: декоративный градиент — литерал).
+   Тема — по классу .dark, как у .bg-gradient-blue. */
+.a-illus-backdrop {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(145deg, #e4f2ff 0%, #c3e1ff 48%, #a5d2ff 100%);
+  box-shadow: 0 30px 60px -28px rgba(6, 141, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
+}
+
+.a-illus-backdrop::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(130px 130px at 80% 16%, rgba(255, 255, 255, .6), transparent 70%);
+  pointer-events: none;
+}
+
+.a-illus-backdrop::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(rgba(6, 141, 255, .16) 1.3px, transparent 1.4px);
+  background-size: 15px 15px;
+  opacity: .55;
+  mask-image: linear-gradient(135deg, #000, transparent 55%);
+  pointer-events: none;
+}
+
+.dark .a-illus-backdrop {
+  background: linear-gradient(145deg, #15273b 0%, #101a27 55%, #0d1622 100%);
+  box-shadow: 0 30px 60px -28px rgba(6, 141, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
+}
+
+.dark .a-illus-backdrop::before {
+  background: radial-gradient(130px 130px at 80% 16%, rgba(6, 141, 255, .14), transparent 70%);
+}
+
+/* Голубой ореол за hero лендинга (§05 аудита: декоративный градиент — литерал).
+   Тёмного варианта нет намеренно: та же rgba читается и на #fff, и на #161617.
+   Вешать на корень страницы лендинга, а не на body — pk-frontend это всё
+   приложение, а не набор лендингов. */
+.a-page-glow {
+  position: relative;
+  z-index: 0;
+}
+
+/* z-index: -1 красится поверх фона хоста, но под его контентом — только если у
+   хоста есть свой контекст наложения (z-index: 0 выше). */
+.a-page-glow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-image: radial-gradient(
+    closest-side circle,
+    rgba(43, 127, 255, .1) 0%,
+    rgba(43, 127, 255, .05) 48%,
+    rgba(43, 127, 255, 0) 100%
+  );
+  background-size: 1500px 1500px;
+  background-position: 50% -420px;
+}

package/components/elements/button/AButtonV2.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
 
-type View = 'solid' | 'outline' | 'ghost' | 'soft'
+type View = 'solid' | 'outline' | 'ghost' | 'soft' | 'gradient'
 type Size = 'xs' | 'sm' | 'md' | 'lg'
 type Color = 'blue' | 'green' | 'red' | 'gray' | 'white'
-type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 
 const props = withDefaults(defineProps<{
   view?: View
@@ -16,7 +16,10 @@ const props = withDefaults(defineProps<{
   loading?: boolean
   disabled?: boolean
   block?: boolean
+  glow?: boolean
+  square?: boolean
   type?: 'button' | 'submit' | 'reset'
+  dataTestId?: string
 }>(), {
   view: 'solid',
   color: 'blue',
@@ -26,6 +29,8 @@ const props = withDefaults(defineProps<{
   loading: false,
   disabled: false,
   block: false,
+  glow: false,
+  square: false,
   type: 'button',
 })
 
@@ -33,38 +38,65 @@ const emit = defineEmits<{ click: [event: MouseEvent] }>()
 
 const VIEW_CLASS: Record<Color, Record<View, string>> = {
   blue: {
-    solid: 'bg-action-primary text-action-primary-fg shadow-xs hover:bg-action-primary-hover hover:shadow-md active:bg-action-primary-active',
+    solid: 'bg-action-primary text-action-primary-fg hover:bg-action-primary-hover active:bg-action-primary-active',
+    gradient: 'bg-linear-to-r from-brand-500 to-brand-400 text-inverted hover:brightness-105',
     outline: 'border border-brand bg-action-secondary text-brand hover:bg-brand-subtle active:bg-blue-subtle',
     ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
     soft: 'bg-brand-subtle text-brand hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
   },
   green: {
-    solid: 'bg-success text-white shadow-xs hover:bg-green-700 hover:shadow-md active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
+    solid: 'bg-success text-white hover:bg-green-700 active:bg-green-800 dark:hover:bg-green-800 dark:active:bg-green-900',
+    gradient: 'bg-linear-to-r from-green-600 to-green-500 text-inverted hover:brightness-105',
     outline: 'border border-success bg-action-secondary text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
     ghost: 'text-success hover:bg-success-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
     soft: 'bg-success-subtle text-success hover:bg-green-subtle active:bg-green-200/70 dark:active:bg-green-500/25',
   },
   red: {
-    solid: 'bg-action-danger text-action-danger-fg shadow-xs hover:bg-action-danger-hover hover:shadow-md active:bg-action-danger-hover',
+    solid: 'bg-action-danger text-action-danger-fg hover:bg-action-danger-hover active:bg-action-danger-hover',
+    gradient: 'bg-linear-to-r from-red-600 to-red-500 text-inverted hover:brightness-105',
     outline: 'border border-danger bg-action-secondary text-danger hover:bg-danger-subtle active:bg-red-subtle',
     ghost: 'text-danger hover:bg-danger-subtle active:bg-red-subtle',
     soft: 'bg-danger-subtle text-danger hover:bg-red-subtle active:bg-red-200/70 dark:active:bg-red-500/25',
   },
   gray: {
     /* осознанно константный серый solid: action-gray триады нет в ДС */
-    solid: 'bg-gray-500 text-white shadow-xs hover:bg-gray-600 hover:shadow-md active:bg-gray-700',
+    solid: 'bg-gray-500 text-white hover:bg-gray-600 active:bg-gray-700',
+    gradient: 'bg-linear-to-r from-gray-600 to-gray-500 text-inverted hover:brightness-105',
     outline: 'border border-strong bg-action-secondary text-primary hover:border-strong hover:bg-action-secondary-hover active:bg-badge',
     ghost: 'text-action-secondary-fg hover:bg-action-secondary-hover active:bg-badge',
     soft: 'bg-badge text-quaternary hover:bg-badge active:bg-badge/70',
   },
   white: {
-    solid: 'bg-main text-brand-600 shadow-xs hover:bg-brand-subtle hover:shadow-md active:bg-blue-subtle',
+    solid: 'bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
+    gradient: 'bg-linear-to-r from-white to-brand-50 text-brand-600 hover:brightness-105',
     outline: 'border border-brand bg-main text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
     ghost: 'text-brand-600 hover:bg-brand-subtle active:bg-blue-subtle',
     soft: 'bg-brand-subtle text-brand-600 hover:bg-blue-subtle active:bg-brand-200/70 dark:active:bg-brand-500/25',
   },
 }
 
+/* Тень вынесена из VIEW_CLASS: конфликт shadow-утилит Tailwind решает порядком
+   в стилях, а не порядком классов, поэтому glow должен ЗАМЕНЯТЬ базовую тень. */
+const RAISED_VIEWS: View[] = ['solid', 'gradient']
+
+const BASE_ELEVATION = 'shadow-xs hover:shadow-md'
+
+/* Цветная тень: форма и цвет раздельно. Тон берётся из примитивов, а не из
+   семантики — ореол не должен сам менять оттенок между темами; пара dark: —
+   осознанная подгонка плотности (на #161617 40% блюмит). */
+const GLOW_CLASS: Record<Color, string> = {
+  blue: 'shadow-md shadow-brand-500/30 hover:shadow-lg hover:shadow-brand-500/40 dark:shadow-brand-400/25 dark:hover:shadow-brand-400/35',
+  green: 'shadow-md shadow-green-600/30 hover:shadow-lg hover:shadow-green-600/40 dark:shadow-green-500/25 dark:hover:shadow-green-500/35',
+  red: 'shadow-md shadow-red-600/30 hover:shadow-lg hover:shadow-red-600/40 dark:shadow-red-500/25 dark:hover:shadow-red-500/35',
+  gray: 'shadow-md shadow-gray-500/25 hover:shadow-lg hover:shadow-gray-500/35 dark:shadow-gray-400/20 dark:hover:shadow-gray-400/30',
+  white: 'shadow-md shadow-brand-500/25 hover:shadow-lg hover:shadow-brand-500/35 dark:shadow-brand-400/20 dark:hover:shadow-brand-400/30',
+}
+
+const elevationClass = computed(() => {
+  if (!RAISED_VIEWS.includes(props.view)) return ''
+  return props.glow ? GLOW_CLASS[props.color] : BASE_ELEVATION
+})
+
 const SIZE_CLASS: Record<Size, string> = {
   xs: 'h-6 gap-1 px-2 text-body-sm',
   sm: 'h-8 gap-1.5 px-3 text-body-sm',
@@ -72,13 +104,24 @@ const SIZE_CLASS: Record<Size, string> = {
   lg: 'h-12 gap-2.5 px-5 text-body-lg',
 }
 
+/* Квадрат под одну иконку: ЗАМЕНЯЕТ SIZE_CLASS, а не дописывается к нему —
+   `px-0` рядом с `px-4` проиграет (конфликт решает порядок в stylesheet), из-за
+   чего такие кнопки обычно лепят через `!w-10 !px-0`. */
+const SQUARE_CLASS: Record<Size, string> = {
+  xs: 'size-6',
+  sm: 'size-8',
+  md: 'size-10',
+  lg: 'size-12',
+}
+
 const ROUNDED_CLASS: Record<Rounded, string> = {
-  none: 'rounded-none',
-  sm: 'rounded-sm',
-  md: 'rounded-md',
-  lg: 'rounded-lg',
-  xl: 'rounded-xl',
-  full: 'rounded-full',
+  'none': 'rounded-none',
+  'sm': 'rounded-sm',
+  'md': 'rounded-md',
+  'lg': 'rounded-lg',
+  'xl': 'rounded-xl',
+  '2xl': 'rounded-2xl',
+  'full': 'rounded-full',
 }
 
 const ICON_SIZE: Record<Size, string> = {
@@ -98,14 +141,16 @@ function onClick(event: MouseEvent) {
   <button
     :type="type"
     :disabled="disabled || loading"
-    class="button-v2 inline-flex select-none items-center justify-center font-semibold transition-all duration-150 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+    class="button-v2 inline-flex items-center justify-center font-semibold transition-all duration-150 select-none focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
       VIEW_CLASS[color][view],
-      SIZE_CLASS[size],
+      elevationClass,
+      square ? SQUARE_CLASS[size] : SIZE_CLASS[size],
       ROUNDED_CLASS[rounded],
       block ? 'w-full' : '',
       iconRight ? 'flex-row-reverse' : '',
     ]"
+    :data-test-id="dataTestId"
     @click="onClick"
   >
     <a-icon-loader-circle

package/components/elements/count-up/ACountUp.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// Декоративный счётчик: анимирует 0 → `to` при монтировании.
+// С пропом `play` поведение другое: значение сразу стоит на `to`, а анимация
+// играет заново на каждое изменение триггера (ховер карточки в лендингах).
+const props = withDefaults(defineProps<{
+  to: number
+  duration?: number
+  suffix?: string
+  locale?: string
+  play?: number
+}>(), {
+  duration: 1100,
+  suffix: '',
+  locale: 'ru-RU',
+})
+
+const isTriggered = computed(() => props.play !== undefined)
+
+const value = ref(isTriggered.value ? props.to : 0)
+const display = computed(() => `${Math.round(value.value).toLocaleString(props.locale)}${props.suffix}`)
+
+let raf = 0
+
+function run() {
+  cancelAnimationFrame(raf)
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    value.value = props.to
+    return
+  }
+  value.value = 0
+  let start = 0
+  const step = (ts: number) => {
+    if (!start) start = ts
+    const progress = Math.min(1, (ts - start) / props.duration)
+    value.value = props.to * (1 - (1 - progress) ** 3)
+    if (progress < 1) raf = requestAnimationFrame(step)
+  }
+  raf = requestAnimationFrame(step)
+}
+
+onMounted(() => {
+  if (!isTriggered.value) run()
+})
+
+watch(() => props.play, (next) => {
+  if (next) run()
+})
+
+onUnmounted(() => cancelAnimationFrame(raf))
+</script>
+
+<template>
+  <span>{{ display }}</span>
+</template>

package/components/elements/curve-block-v2/ACurveBlockV2.vue

@@ -8,24 +8,26 @@ withDefaults(defineProps<{
   description: string
   to?: string
   color?: string
+  tint?: string
   forceActive?: boolean
-  hoverAccent?: boolean
+  dataTestId?: string
 }>(), {
-  color: '#068dff',
+  color: 'var(--color-icon-brand)',
+  tint: undefined,
   forceActive: true,
-  hoverAccent: false,
 })
 </script>
-`
+
 <template>
-  <NuxtLinkLocale
+  <nuxt-link-locale
     :to="to"
-    :style="{ '--cb-color': color }"
-    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-default bg-main p-6 text-left transition-all duration-200 hover:-translate-y-1 hover:border-strong hover:shadow-lg"
-    :class="{ 'active-item': !to && forceActive, 'hover-accent': hoverAccent }"
+    :style="{ '--cb-color': color, '--cb-tint': tint }"
+    class="curve-block-v2 group relative flex w-full cursor-pointer flex-col gap-4 rounded-2xl border border-default bg-main p-6 text-left"
+    :class="{ 'active-item': !to && forceActive }"
     active-class="active-item"
+    :data-test-id="dataTestId"
   >
-    <div class="arrow-icon absolute right-4 top-4 flex size-7 items-center justify-center rounded-full bg-brand-subtle p-2 text-brand">
+    <div class="arrow-icon absolute top-4 right-4 flex size-8 items-center justify-center rounded-full bg-canvas p-2 text-secondary transition-all duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
       <svg
         class="size-2"
         viewBox="16 16 16 16"
@@ -49,36 +51,72 @@ withDefaults(defineProps<{
     </div>
 
     <div class="flex flex-col gap-2 pr-6">
-      <p class="title text-body-lg-strong text-primary">
+      <p class="title text-h5 text-primary transition-colors duration-200">
         {{ title }}
       </p>
-      <p class="text-body-md leading-relaxed text-secondary">
+      <p class="text-body-md leading-relaxed text-quaternary">
         {{ description }}
       </p>
     </div>
-  </NuxtLinkLocale>
+  </nuxt-link-locale>
 </template>
 
 <style scoped>
+.curve-block-v2 {
+  --cb-fill: var(--cb-tint, color-mix(in srgb, var(--cb-color) 10%, transparent));
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
 .icon-item {
-  background-color: color-mix(in srgb, var(--cb-color) 10%, transparent);
+  background-color: var(--cb-fill);
   color: var(--cb-color);
 }
 
-.hover-accent:hover {
+.curve-block-v2:hover {
+  transform: translateY(-4px);
   border-color: var(--cb-color);
+  box-shadow: 0 0 22px -12px var(--cb-color);
+}
+
+.curve-block-v2:hover .title,
+.curve-block-v2:hover .arrow-icon {
+  color: var(--cb-color);
+}
+
+.curve-block-v2:hover .arrow-icon {
+  background-color: var(--cb-fill);
 }
 
 .active-item {
   border-color: var(--cb-color);
-  background-color: color-mix(in srgb, var(--cb-color) 10%, transparent);
+  box-shadow: 0 0 22px -12px var(--cb-color);
 }
+
+.active-item:hover {
+  transform: none;
+}
+
 .active-item .title,
 .active-item .arrow-icon {
   color: var(--cb-color);
 }
-.active-item .icon-item {
-  background-color: var(--cb-color);
-  color: var(--color-icon-on-brand);
+
+.active-item .arrow-icon {
+  background-color: var(--cb-fill);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .curve-block-v2,
+  .curve-block-v2 .title,
+  .curve-block-v2 .arrow-icon {
+    transition: none;
+  }
+
+  .curve-block-v2:hover {
+    transform: none;
+  }
 }
 </style>

package/components/elements/empty-box/empty-box-V2.vue

@@ -57,7 +57,7 @@ defineProps<Props>()
 
       <p
         v-if="subtitle"
-        class="mt-1 text-secondary"
+        class="mt-1 text-secondary text-body-md"
       >
         {{ subtitle }}
       </p>

package/components/elements/error-template/index.vue

@@ -3,8 +3,11 @@ import { AIconArrowLeft, AIconHome } from '#components'
 
 interface Props {
   statusCode: number
+  homePath?: string
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  homePath: '/',
+})
 
 const { t } = useI18n()
 const localePath = useLocalePath()
@@ -14,7 +17,7 @@ const errorTitle = computed(() => t(`errorPage.${props.statusCode}.title`))
 const errorSubTitle = computed(() => t(`errorPage.${props.statusCode}.subTitle`))
 
 function goToMainPage() {
-  return navigateTo(`${localePath('/')}`, { external: true })
+  return navigateTo(`${localePath(props.homePath)}`, { external: true })
 }
 
 function goBack() {
@@ -22,7 +25,7 @@ function goBack() {
     router.back()
   }
   else {
-    return navigateTo(`${localePath('/')}`, { external: true })
+    return navigateTo(`${localePath(props.homePath)}`, { external: true })
   }
 }
 </script>
@@ -56,7 +59,9 @@ function goBack() {
         >
           {{ t('actions.goToMainPage') }}
         </a-button-v2>
+
         <a-button-v2
+          v-if="![404, 500, 502, 503, 504].includes(statusCode)"
           :icon="AIconArrowLeft"
           view="outline"
           color="gray"