From 670e9b7fd181e40162b79c815f3a85a1e6c30fb0 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:26:55 +0700
Subject: [PATCH] feat(ui): align web shell and landing with logistics style

---
 app/assets/css/tailwind.css         |  231 ++----
 app/components/AppHeader.vue        |  474 +++++++++++++
 app/components/page/CatalogPage.vue |   37 +-
 app/layouts/topnav.vue              |  370 +---------
 app/pages/index.vue                 | 1009 +++++++++++++++------------
 5 files changed, 1142 insertions(+), 979 deletions(-)
 create mode 100644 app/components/AppHeader.vue

diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css
index 09c3829..6949c29 100644
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/tailwind.css
@@ -1,155 +1,16 @@
 @import "tailwindcss";
+
 @plugin "daisyui";
 
-@plugin "daisyui/theme" {
-  name: "cupcake";
-  default: true;
-  prefersdark: false;
-  color-scheme: "light";
-  --color-base-100: oklch(97.788% 0.004 56.375);
-  --color-base-200: oklch(93.982% 0.007 61.449);
-  --color-base-300: oklch(91.586% 0.006 53.44);
-  --color-base-content: oklch(23.574% 0.066 313.189);
-  --color-primary: oklch(85% 0.138 181.071);
-  --color-primary-content: oklch(43% 0.078 188.216);
-  --color-secondary: oklch(89% 0.061 343.231);
-  --color-secondary-content: oklch(45% 0.187 3.815);
-  --color-accent: oklch(90% 0.076 70.697);
-  --color-accent-content: oklch(47% 0.157 37.304);
-  --color-neutral: oklch(27% 0.006 286.033);
-  --color-neutral-content: oklch(92% 0.004 286.32);
-  --color-info: oklch(68% 0.169 237.323);
-  --color-info-content: oklch(29% 0.066 243.157);
-  --color-success: oklch(69% 0.17 162.48);
-  --color-success-content: oklch(26% 0.051 172.552);
-  --color-warning: oklch(79% 0.184 86.047);
-  --color-warning-content: oklch(28% 0.066 53.813);
-  --color-error: oklch(64% 0.246 16.439);
-  --color-error-content: oklch(27% 0.105 12.094);
-  --radius-selector: 2rem;
-  --radius-field: 2rem;
-  --radius-box: 2rem;
-  --size-selector: 0.3125rem;
-  --size-field: 0.3125rem;
-  --border: 0.5px;
-  --depth: 1;
-  --noise: 0;
-}
-
-@layer components {
-  /* ── Three-tier glass system (Apple-style glassmorphism) ── */
-
-  /* Tier 1 — lightest underlay, large panels / sidebars */
-  .glass-underlay {
-    background: rgba(255, 255, 255, 0.34);
-    box-shadow:
-      0 16px 44px rgba(24, 20, 12, 0.11),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4);
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-  }
-
-  /* Tier 2 — medium capsule, nav pills / search bar */
-  .glass-capsule {
-    background: rgba(255, 255, 255, 0.56);
-    box-shadow:
-      0 8px 24px rgba(24, 20, 12, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.56);
-    backdrop-filter: blur(22px);
-    -webkit-backdrop-filter: blur(22px);
-  }
-
-  /* Tier 3 — densest chip, small tags / badges */
-  .glass-chip {
-    background: rgba(255, 255, 255, 0.72);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-  }
-
-  /* Legacy aliases — keep backward compat during transition */
-  .glass-soft {
-    background: rgba(255, 255, 255, 0.34);
-    box-shadow:
-      0 16px 44px rgba(24, 20, 12, 0.11),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4);
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-  }
-
-  .glass-bright {
-    background: rgba(255, 255, 255, 0.56);
-    box-shadow:
-      0 8px 24px rgba(24, 20, 12, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.56);
-    backdrop-filter: blur(22px);
-    -webkit-backdrop-filter: blur(22px);
-  }
-
-  /* Map overlays must stay solid (no glass) */
-  .map-chip {
-    background: color-mix(in oklab, var(--color-base-100) 96%, transparent);
-    border: 1px solid color-mix(in oklab, var(--color-base-300) 80%, transparent);
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
-  }
-}
-
-/* ── Header glass: two-layer Apple-style glassmorphism ── */
-
-.header-glass {
-  background: transparent;
-}
-
-/* Layer 1: frosted bar backdrop — fades to transparent at bottom */
-.header-glass-backdrop {
-  position: absolute;
-  inset: 0;
-  height: 350%;
-  background: rgba(255, 255, 255, 0.06);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
-  mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Layer 2: capsule pills — denser frosted glass with inner shine */
-.pill-glass {
-  position: relative;
-  background: rgba(255, 255, 255, 0.12);
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
-  backdrop-filter: blur(20px) saturate(180%);
-  box-shadow:
-    0 8px 32px rgba(31, 38, 135, 0.2),
-    inset 0 4px 20px rgba(255, 255, 255, 0.3);
-}
-
-/* Inner shine highlight — liquid glass refraction */
-.pill-glass::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background: rgba(255, 255, 255, 0.1);
-  box-shadow:
-    inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
-    inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
-  opacity: 0.6;
-  filter: blur(1px) brightness(115%);
-  pointer-events: none;
-}
-
 @plugin "daisyui/theme" {
   name: "silk";
-  default: false;
+  default: true;
   prefersdark: false;
   color-scheme: "light";
   --color-base-100: oklch(97% 0.0035 67.78);
   --color-base-200: oklch(95% 0.0081 61.42);
   --color-base-300: oklch(90% 0.0081 61.42);
-  --color-base-content: oklch(40% 0.0081 61.42);
+  --color-base-content: oklch(24% 0.02 256);
   --color-primary: oklch(23.27% 0.0249 284.3);
   --color-primary-content: oklch(94.22% 0.2505 117.44);
   --color-secondary: oklch(23.27% 0.0249 284.3);
@@ -167,48 +28,60 @@
   --color-error: oklch(75.1% 0.1814 22.37);
   --color-error-content: oklch(35.1% 0.1814 22.37);
   --radius-selector: 2rem;
-  --radius-field: 1rem;
-  --radius-box: 1rem;
-  --size-selector: 0.28125rem;
-  --size-field: 0.28125rem;
+  --radius-field: 2rem;
+  --radius-box: 2rem;
+  --size-selector: 0.3125rem;
+  --size-field: 0.3125rem;
   --border: 0.5px;
   --depth: 0;
   --noise: 0;
 }
 
-@plugin "daisyui/theme" {
-  name: "night";
-  default: false;
-  prefersdark: true;
-  color-scheme: "dark";
-  --color-base-100: oklch(20.768% 0.039 265.754);
-  --color-base-200: oklch(19.314% 0.037 265.754);
-  --color-base-300: oklch(17.86% 0.034 265.754);
-  --color-base-content: oklch(84.153% 0.007 265.754);
-  --color-primary: oklch(75.351% 0.138 232.661);
-  --color-primary-content: oklch(15.07% 0.027 232.661);
-  --color-secondary: oklch(68.011% 0.158 276.934);
-  --color-secondary-content: oklch(13.602% 0.031 276.934);
-  --color-accent: oklch(72.36% 0.176 350.048);
-  --color-accent-content: oklch(14.472% 0.035 350.048);
-  --color-neutral: oklch(27.949% 0.036 260.03);
-  --color-neutral-content: oklch(85.589% 0.007 260.03);
-  --color-info: oklch(68.455% 0.148 237.251);
-  --color-info-content: oklch(0% 0 0);
-  --color-success: oklch(78.452% 0.132 181.911);
-  --color-success-content: oklch(15.69% 0.026 181.911);
-  --color-warning: oklch(83.242% 0.139 82.95);
-  --color-warning-content: oklch(16.648% 0.027 82.95);
-  --color-error: oklch(71.785% 0.17 13.118);
-  --color-error-content: oklch(14.357% 0.034 13.118);
-  --radius-selector: 1rem;
-  --radius-field: 1rem;
-  --radius-box: 1rem;
-  --size-selector: 0.25rem;
-  --size-field: 0.25rem;
-  --border: 0.5px;
-  --depth: 0;
-  --noise: 0;
+:root {
+  color-scheme: light;
+}
+
+html {
+  scroll-behavior: smooth;
+  color-scheme: light;
+  background-color: #f7f5f1;
+}
+
+body {
+  min-height: 100vh;
+  color-scheme: light;
+  font-family: "Onest", "Avenir Next", "Trebuchet MS", sans-serif;
+  color: oklch(24% 0.02 256);
+  background:
+    radial-gradient(circle at 10% 0%, #fdf8ea 0%, rgba(253, 248, 234, 0) 40%),
+    radial-gradient(circle at 90% 100%, #e9f2ff 0%, rgba(233, 242, 255, 0) 35%),
+    linear-gradient(135deg, #f7f5f1 0%, #f1eee8 100%);
+}
+
+.glass-underlay,
+.glass-soft {
+  background: #ece3d3;
+  border: 1px solid #d7ccb7;
+  box-shadow: 0 14px 30px rgba(24, 20, 12, 0.1);
+}
+
+.glass-capsule,
+.glass-bright {
+  background: #e9decb;
+  border: 1px solid #d5c7b0;
+  box-shadow: 0 8px 22px rgba(24, 20, 12, 0.1);
+}
+
+.glass-chip {
+  background: #f2eadb;
+  border: 1px solid #dbcdb8;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.map-chip {
+  background: #f2eadb;
+  border: 1px solid #dbcdb8;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
 }
 
 .manager-logistics-shell {
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
new file mode 100644
index 0000000..d13f874
--- /dev/null
+++ b/app/components/AppHeader.vue
@@ -0,0 +1,474 @@
+<script setup lang="ts">
+interface MenuLink {
+  label: string
+  to: string
+  icon: 'home' | 'catalog' | 'orders' | 'profile'
+}
+
+const props = withDefaults(defineProps<{
+  hideSearchCapsule?: boolean
+}>(), {
+  hideSearchCapsule: false,
+})
+
+const route = useRoute()
+const localePath = useLocalePath()
+const switchLocalePath = useSwitchLocalePath()
+const { locale, locales } = useI18n()
+const { signIn, signOut, loggedIn, user } = useAuth()
+
+const { productLabel, hubLabel, supplierLabel, quantity, canSearch } = useCatalogSearch()
+
+const isMenuOpen = ref(false)
+
+const isAuthenticated = computed(() => loggedIn.value || Boolean(user.value?.id))
+const profileLabel = computed(() => {
+  return user.value?.id || (locale.value === 'en' ? 'Profile' : 'Профиль')
+})
+
+const isHomePage = computed(() => route.path === localePath('/'))
+const isCatalogPage = computed(() => route.path.startsWith(localePath('/catalog')))
+const isClientAreaPage = computed(() => route.path.startsWith(localePath('/clientarea')))
+const isAuthPage = computed(() => {
+  return route.path === localePath('/auth')
+    || route.path === localePath('/sign-in')
+    || route.path === localePath('/callback')
+})
+
+const showSearchCapsule = computed(() => {
+  if (props.hideSearchCapsule || isAuthPage.value) return false
+  return isHomePage.value || isCatalogPage.value
+})
+
+const headerBackdropClass = computed(() => {
+  if (isHomePage.value) return 'header-glass-backdrop--landing'
+  return 'header-glass-backdrop--default'
+})
+
+const menuLinks = computed<MenuLink[]>(() => {
+  const links: MenuLink[] = [
+    { label: locale.value === 'en' ? 'Home' : 'Главная', to: '/', icon: 'home' },
+    { label: locale.value === 'en' ? 'Catalog' : 'Каталог', to: '/catalog', icon: 'catalog' },
+    { label: locale.value === 'en' ? 'Orders' : 'Заказы', to: '/clientarea/orders', icon: 'orders' },
+  ]
+
+  if (isAuthenticated.value) {
+    links.push({ label: locale.value === 'en' ? 'Profile' : 'Профиль', to: '/clientarea/profile', icon: 'profile' })
+  }
+
+  return links
+})
+
+const searchProductLabel = computed(() => productLabel.value || (locale.value === 'en' ? 'Product' : 'Товар'))
+const searchDestinationLabel = computed(() => {
+  return hubLabel.value || supplierLabel.value || (locale.value === 'en' ? 'Destination' : 'Точка назначения')
+})
+const searchQuantityLabel = computed(() => {
+  return quantity.value ? `${quantity.value} t` : (locale.value === 'en' ? 'Volume' : 'Объем')
+})
+
+function isBasePathActive(path: string, exact = false) {
+  const localized = localePath(path)
+  if (exact) return route.path === localized
+  return route.path === localized || route.path.startsWith(`${localized}/`)
+}
+
+async function openStep(step: 'product' | 'destination' | 'quantity') {
+  await navigateTo(localePath(`/catalog/${step}`))
+}
+
+async function submitHeaderSearch() {
+  if (canSearch.value) {
+    await navigateTo(localePath('/catalog/results'))
+    return
+  }
+  await navigateTo(localePath('/catalog/product'))
+}
+
+async function handleAuthAction() {
+  if (isAuthenticated.value) {
+    await signOut()
+    return
+  }
+  await signIn()
+}
+
+watch(() => route.fullPath, () => {
+  isMenuOpen.value = false
+})
+</script>
+
+<template>
+  <header class="header-glass fixed inset-x-0 top-0 z-50 border-0">
+    <div class="header-glass-backdrop" :class="headerBackdropClass" aria-hidden="true" />
+
+    <div class="relative z-10 mx-auto max-w-[2200px] px-4 py-4">
+      <div class="grid items-center gap-2 lg:grid-cols-[auto_1fr_auto]">
+        <div class="pill-glass relative z-20 hidden h-16 items-center rounded-full px-2.5 py-2.5 lg:flex">
+          <NuxtLink :to="localePath('/')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none text-sm font-black tracking-wide">
+            optovia
+          </NuxtLink>
+
+          <div class="h-6 w-px shrink-0 bg-base-300/85" />
+
+          <div class="flex items-center rounded-full bg-white/55 p-1">
+            <NuxtLink
+              v-for="lang in locales"
+              :key="lang.code"
+              :to="switchLocalePath(lang.code)"
+              class="rounded-full px-3 py-1 text-xs font-semibold transition-colors"
+              :class="locale === lang.code ? 'bg-white text-[#2f2418]' : 'text-[#6f6250] hover:text-[#2f2418]'"
+            >
+              {{ lang.code.toUpperCase() }}
+            </NuxtLink>
+          </div>
+
+          <div class="h-6 w-px shrink-0 bg-base-300/85" />
+
+          <button
+            class="btn h-11 w-11 min-h-0 min-w-0 rounded-full border-0 bg-transparent p-0 shadow-none text-base-content/70"
+            :aria-label="locale === 'en' ? 'Menu' : 'Меню'"
+            @click="isMenuOpen = !isMenuOpen"
+          >
+            <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+              <path d="M4 7h16M4 12h16M4 17h16" />
+            </svg>
+          </button>
+        </div>
+
+        <div class="hidden lg:block" aria-hidden="true" />
+
+        <div class="lg:hidden">
+          <button
+            type="button"
+            class="btn btn-secondary h-10 min-h-0 w-full rounded-full text-sm font-semibold"
+            @click="openStep('product')"
+          >
+            {{ locale === 'en' ? 'Start Search' : 'Начать поиск' }}
+          </button>
+        </div>
+
+        <div class="pill-glass relative z-20 hidden h-16 items-center rounded-full px-2.5 py-2.5 lg:flex">
+          <NuxtLink :to="localePath('/catalog')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none">
+            {{ locale === 'en' ? 'Catalog' : 'Каталог' }}
+          </NuxtLink>
+
+          <div class="h-6 w-px shrink-0 bg-base-300/85" />
+
+          <NuxtLink :to="localePath('/clientarea/orders')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none">
+            {{ locale === 'en' ? 'Orders' : 'Заказы' }}
+          </NuxtLink>
+
+          <div class="h-6 w-px shrink-0 bg-base-300/85" />
+
+          <NuxtLink
+            v-if="isAuthenticated"
+            :to="localePath('/clientarea/profile')"
+            class="btn h-11 min-h-0 gap-2 rounded-full border-0 bg-transparent pl-2 pr-4 shadow-none"
+          >
+            <UserAvatar :seed="profileLabel" :label="profileLabel" :size="34" />
+            {{ profileLabel }}
+          </NuxtLink>
+          <button
+            v-else
+            class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none"
+            @click="handleAuthAction"
+          >
+            {{ locale === 'en' ? 'Log in' : 'Войти' }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="showSearchCapsule" class="pointer-events-none absolute inset-x-0 z-10 hidden justify-center lg:flex" style="top: 16px;">
+        <div class="pill-glass h-16 min-w-0 w-full max-w-[1120px] rounded-full px-2.5 py-2.5 pointer-events-auto shadow-2xl">
+          <form class="flex min-w-0 flex-wrap items-center gap-2 rounded-full" @submit.prevent="submitHeaderSearch">
+            <label class="search-arch input flex h-11 min-h-0 min-w-[170px] flex-1 items-center gap-3 rounded-full shadow-none">
+              <span class="shrink-0 text-base leading-none">🛒</span>
+              <input
+                :value="searchProductLabel"
+                type="text"
+                class="w-full cursor-pointer"
+                :placeholder="locale === 'en' ? 'Product' : 'Товар'"
+                readonly
+                @focus.prevent="openStep('product')"
+                @click.prevent="openStep('product')"
+              >
+            </label>
+
+            <label class="search-arch input flex h-11 min-h-0 min-w-[170px] flex-1 items-center gap-3 rounded-full shadow-none">
+              <span class="shrink-0 text-base leading-none">📍</span>
+              <input
+                :value="searchDestinationLabel"
+                type="text"
+                class="w-full cursor-pointer"
+                :placeholder="locale === 'en' ? 'Destination' : 'Назначение'"
+                readonly
+                @focus.prevent="openStep('destination')"
+                @click.prevent="openStep('destination')"
+              >
+            </label>
+
+            <label class="search-arch input flex h-11 min-h-0 min-w-[190px] flex-[1.4] items-center gap-3 rounded-full shadow-none">
+              <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 shrink-0 text-base-content/60" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                <path d="m3.3 7 8.7 5 8.7-5" />
+                <path d="M12 22V12" />
+              </svg>
+              <input
+                :value="searchQuantityLabel"
+                type="text"
+                class="w-full cursor-pointer"
+                :placeholder="locale === 'en' ? 'Volume' : 'Объем'"
+                readonly
+                @focus.prevent="openStep('quantity')"
+                @click.prevent="openStep('quantity')"
+              >
+            </label>
+
+            <button type="submit" class="btn btn-secondary h-11 min-h-0 rounded-full px-5">
+              {{ locale === 'en' ? 'Find' : 'Найти' }}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <nav v-if="!isAuthPage" class="dock-glass fixed inset-x-0 bottom-0 z-50 flex items-center justify-around px-2 py-2 lg:hidden">
+    <NuxtLink :to="localePath('/')" class="dock-item" :class="isBasePathActive('/', true) ? 'dock-item--active' : ''" aria-label="Home">
+      <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+        <polyline points="9 22 9 12 15 12 15 22" />
+      </svg>
+      <span class="dock-label">{{ locale === 'en' ? 'Home' : 'Домой' }}</span>
+    </NuxtLink>
+
+    <NuxtLink :to="localePath('/catalog')" class="dock-item" :class="isBasePathActive('/catalog') ? 'dock-item--active' : ''" aria-label="Catalog">
+      <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="3" width="7" height="7" rx="1.5" />
+        <rect x="14" y="3" width="7" height="7" rx="1.5" />
+        <rect x="3" y="14" width="7" height="7" rx="1.5" />
+        <rect x="14" y="14" width="7" height="7" rx="1.5" />
+      </svg>
+      <span class="dock-label">{{ locale === 'en' ? 'Catalog' : 'Каталог' }}</span>
+    </NuxtLink>
+
+    <NuxtLink :to="localePath('/clientarea/orders')" class="dock-item" :class="isBasePathActive('/clientarea/orders') ? 'dock-item--active' : ''" aria-label="Orders">
+      <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 7h11v10H3z" />
+        <path d="M14 10h4l3 3v4h-7z" />
+        <circle cx="7.5" cy="18" r="1.5" />
+        <circle cx="18.5" cy="18" r="1.5" />
+      </svg>
+      <span class="dock-label">{{ locale === 'en' ? 'Orders' : 'Заказы' }}</span>
+    </NuxtLink>
+
+    <NuxtLink
+      v-if="isAuthenticated"
+      :to="localePath('/clientarea/profile')"
+      class="dock-item"
+      :class="isBasePathActive('/clientarea/profile') ? 'dock-item--active' : ''"
+      aria-label="Profile"
+    >
+      <UserAvatar :seed="profileLabel" :label="profileLabel" :size="24" />
+      <span class="dock-label">{{ locale === 'en' ? 'Profile' : 'Профиль' }}</span>
+    </NuxtLink>
+
+    <button v-else class="dock-item" aria-label="Auth" @click="handleAuthAction">
+      <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+      <span class="dock-label">{{ locale === 'en' ? 'Log in' : 'Войти' }}</span>
+    </button>
+  </nav>
+
+  <Teleport to="body">
+    <Transition name="menu-overlay">
+      <div v-if="isMenuOpen" class="fixed inset-0 z-[100] flex flex-col overflow-y-auto bg-[#0b0b0d]">
+        <div class="flex justify-end px-5 pt-5">
+          <button class="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20" @click="isMenuOpen = false">
+            <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <nav class="mx-auto flex w-full max-w-md flex-1 flex-col justify-center gap-0 px-6 py-8">
+          <NuxtLink
+            v-for="(link, i) in menuLinks"
+            :key="link.to"
+            :to="localePath(link.to)"
+            class="menu-item group flex items-center gap-4 rounded-2xl px-5 py-5 transition-all duration-200 hover:bg-white/8 hover:pl-7"
+            :class="isBasePathActive(link.to) ? 'bg-white/8' : ''"
+            :style="{ animationDelay: `${i * 60}ms` }"
+            @click="isMenuOpen = false"
+          >
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 shadow-lg transition-transform duration-200 group-hover:scale-110">
+              <svg v-if="link.icon === 'home'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" />
+              </svg>
+              <svg v-else-if="link.icon === 'catalog'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="3" width="7" height="7" rx="1.5" />
+                <rect x="14" y="3" width="7" height="7" rx="1.5" />
+                <rect x="3" y="14" width="7" height="7" rx="1.5" />
+                <rect x="14" y="14" width="7" height="7" rx="1.5" />
+              </svg>
+              <svg v-else-if="link.icon === 'orders'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M3 7h11v10H3z" />
+                <path d="M14 10h4l3 3v4h-7z" />
+                <circle cx="7.5" cy="18" r="1.5" />
+                <circle cx="18.5" cy="18" r="1.5" />
+              </svg>
+              <svg v-else viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+
+            <div class="min-w-0">
+              <p class="text-xl font-semibold text-white">{{ link.label }}</p>
+            </div>
+          </NuxtLink>
+
+          <button
+            class="menu-item mt-6 flex items-center gap-3 rounded-2xl px-5 py-4 text-left text-white/80 transition hover:bg-white/8"
+            @click="handleAuthAction"
+          >
+            <svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <path d="M16 17l5-5-5-5" />
+              <path d="M21 12H9" />
+            </svg>
+            <span class="text-base font-medium">
+              {{ isAuthenticated ? (locale === 'en' ? 'Log out' : 'Выйти') : (locale === 'en' ? 'Log in' : 'Войти') }}
+            </span>
+          </button>
+        </nav>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+.header-glass {
+  background: transparent;
+  border: 0;
+}
+
+.header-glass-backdrop {
+  position: absolute;
+  inset: 0;
+  height: 220%;
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.35) 52%, rgba(0,0,0,0.08) 74%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.35) 52%, rgba(0,0,0,0.08) 74%, transparent 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.header-glass-backdrop--default {
+  background: linear-gradient(180deg, rgba(243, 238, 230, 0.92) 0%, rgba(243, 238, 230, 0.72) 38%, rgba(243, 238, 230, 0) 100%);
+}
+
+.header-glass-backdrop--landing {
+  background: linear-gradient(180deg, rgba(11, 26, 47, 0.78) 0%, rgba(11, 26, 47, 0.38) 36%, rgba(11, 26, 47, 0) 100%);
+}
+
+.pill-glass {
+  position: relative;
+  background: rgba(243, 238, 230, 0.94);
+  border: 0;
+  box-shadow: 0 14px 34px rgba(62, 47, 26, 0.12);
+}
+
+.pill-glass::after {
+  display: none;
+}
+
+.search-arch {
+  background: #ffffff;
+  border: 0;
+  box-shadow: none;
+  padding-left: 0.7rem;
+  padding-right: 0.7rem;
+}
+
+.search-arch span {
+  color: rgba(55, 65, 81, 0.72);
+}
+
+.search-arch input::placeholder {
+  color: rgba(107, 114, 128, 0.62);
+}
+
+.menu-overlay-enter-active {
+  transition: opacity 0.3s ease;
+}
+
+.menu-overlay-enter-active .menu-item {
+  animation: menu-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.menu-overlay-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.menu-overlay-leave-active .menu-item {
+  animation: menu-item-out 0.2s ease both;
+}
+
+.menu-overlay-enter-from,
+.menu-overlay-leave-to {
+  opacity: 0;
+}
+
+@keyframes menu-item-in {
+  from {
+    opacity: 0;
+    transform: translateX(-30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes menu-item-out {
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+}
+
+.dock-glass {
+  background: #e8ddca;
+  border-top: 1px solid #d5c7b0;
+  box-shadow: 0 -4px 14px rgba(60, 47, 29, 0.12);
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.dock-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 12px;
+  border-radius: 12px;
+  color: rgba(30, 23, 14, 0.65);
+  transition: color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dock-item--active {
+  color: #2f2416;
+}
+
+.dock-label {
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+}
+</style>
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 8451c9d..5972295 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -35,17 +35,22 @@
     <!-- List button (LEFT, opens panel) - hide when panel is open -->
     <button
       v-if="!isPanelOpen"
-      class="absolute top-[116px] left-4 z-20 hidden lg:flex items-center gap-2 map-chip rounded-full px-3 py-1.5 text-base-content text-sm hover:bg-base-200 transition-colors"
+      class="absolute bottom-4 left-4 top-[108px] z-20 hidden w-14 lg:flex flex-col items-center justify-between rounded-full border border-[#d5c7b0] bg-[#f3eee6] px-2 py-3 text-[#2f2418] shadow-[0_20px_40px_rgba(38,29,18,0.18)] transition-colors hover:bg-[#eee6dc]"
       @click="openPanel"
     >
-      <Icon name="lucide:menu" size="16" />
-      <span>{{ $t('catalog.list') }}</span>
+      <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-[#5f4b33]">
+        <Icon name="lucide:panel-left-open" size="16" />
+      </span>
+      <span class="-rotate-90 whitespace-nowrap text-[11px] font-bold uppercase tracking-[0.14em] text-[#6f6353]">
+        {{ $t('catalog.list') }}
+      </span>
+      <span class="h-10 w-10" aria-hidden="true" />
     </button>
 
     <!-- Filter by bounds checkbox (LEFT, next to panel when open) - only in selection mode -->
     <label
       v-if="selectMode !== null"
-      class="absolute top-[116px] z-20 hidden lg:flex items-center gap-2 map-chip rounded-full px-3 py-1.5 cursor-pointer text-base-content text-sm hover:bg-base-200 transition-colors"
+      class="absolute top-[108px] z-20 hidden lg:flex items-center gap-2 rounded-full border border-[#d5c7b0] bg-[#f3eee6] px-3 py-1.5 cursor-pointer text-[#2f2418] text-sm shadow-[0_12px_26px_rgba(38,29,18,0.12)] transition-colors hover:bg-[#eee6dc]"
       :style="boundsFilterStyle"
     >
       <input
@@ -61,11 +66,11 @@
     <!-- View toggle (top RIGHT overlay, below header) - hide in info mode or when hideViewToggle -->
     <div v-if="!isInfoMode && !hideViewToggle" class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
       <!-- View mode toggle -->
-      <div class="flex gap-1 map-chip rounded-full p-1">
+      <div class="flex gap-1 rounded-full border border-[#d5c7b0] bg-[#f3eee6] p-1 shadow-[0_12px_26px_rgba(38,29,18,0.12)]">
         <button
           v-if="showOffersToggle"
           class="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-bold transition-colors"
-          :class="mapViewMode === 'offers' ? 'bg-base-300 text-base-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+          :class="mapViewMode === 'offers' ? 'bg-[#2f2416] text-[#fff8ef]' : 'text-[#6b5b48] hover:text-[#2f2418] hover:bg-[#ece3d3]'"
           @click="setMapViewMode('offers')"
         >
           <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
@@ -76,7 +81,7 @@
         <button
           v-if="showHubsToggle"
           class="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-bold transition-colors"
-          :class="mapViewMode === 'hubs' ? 'bg-base-300 text-base-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+          :class="mapViewMode === 'hubs' ? 'bg-[#2f2416] text-[#fff8ef]' : 'text-[#6b5b48] hover:text-[#2f2418] hover:bg-[#ece3d3]'"
           @click="setMapViewMode('hubs')"
         >
           <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
@@ -87,7 +92,7 @@
         <button
           v-if="showSuppliersToggle"
           class="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-bold transition-colors"
-          :class="mapViewMode === 'suppliers' ? 'bg-base-300 text-base-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
+          :class="mapViewMode === 'suppliers' ? 'bg-[#2f2416] text-[#fff8ef]' : 'text-[#6b5b48] hover:text-[#2f2418] hover:bg-[#ece3d3]'"
           @click="setMapViewMode('suppliers')"
         >
           <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
@@ -102,10 +107,10 @@
     <Transition name="slide-left">
       <div
         v-if="isPanelOpen"
-        class="absolute top-[116px] left-0 bottom-0 z-30 max-w-[calc(100vw-1rem)] hidden lg:block"
+        class="absolute top-[108px] left-4 bottom-4 z-30 max-w-[calc(100vw-1rem)] hidden lg:block"
         :class="panelWidth"
       >
-        <div class="bg-base-100 text-base-content border border-base-300 border-l-0 rounded-none rounded-tr-[1.1rem] rounded-bl-[1.1rem] shadow-2xl h-full flex flex-col">
+        <div class="h-full flex flex-col overflow-hidden rounded-[28px] border-0 bg-[#f3eee6] text-[#2f2418] shadow-[0_28px_70px_rgba(38,29,18,0.18)]">
           <slot name="panel" />
         </div>
       </div>
@@ -117,7 +122,7 @@
       <div class="flex justify-between px-4 mb-2">
         <!-- List button (mobile) -->
         <button
-          class="flex items-center gap-2 map-chip rounded-full px-3 py-2 text-base-content text-sm font-medium"
+          class="flex items-center gap-2 rounded-full border border-[#d5c7b0] bg-[#f3eee6] px-3 py-2 text-[#2f2418] text-sm font-medium shadow-[0_10px_24px_rgba(38,29,18,0.12)]"
           @click="openPanel"
         >
           <Icon name="lucide:menu" size="16" />
@@ -125,11 +130,11 @@
         </button>
 
         <!-- Mobile view toggle - hide in info mode or when hideViewToggle -->
-        <div v-if="!isInfoMode && !hideViewToggle" class="flex gap-1 map-chip rounded-full p-1">
+        <div v-if="!isInfoMode && !hideViewToggle" class="flex gap-1 rounded-full border border-[#d5c7b0] bg-[#f3eee6] p-1 shadow-[0_10px_24px_rgba(38,29,18,0.12)]">
           <button
             v-if="showOffersToggle"
             class="flex items-center justify-center w-8 h-8 rounded-full transition-colors"
-            :class="mapViewMode === 'offers' ? 'bg-base-300' : 'hover:bg-base-200'"
+            :class="mapViewMode === 'offers' ? 'bg-[#2f2416]' : 'hover:bg-[#ece3d3]'"
             @click="setMapViewMode('offers')"
           >
             <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
@@ -139,7 +144,7 @@
           <button
             v-if="showHubsToggle"
             class="flex items-center justify-center w-8 h-8 rounded-full transition-colors"
-            :class="mapViewMode === 'hubs' ? 'bg-base-300' : 'hover:bg-base-200'"
+            :class="mapViewMode === 'hubs' ? 'bg-[#2f2416]' : 'hover:bg-[#ece3d3]'"
             @click="setMapViewMode('hubs')"
           >
             <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
@@ -149,7 +154,7 @@
           <button
             v-if="showSuppliersToggle"
             class="flex items-center justify-center w-8 h-8 rounded-full transition-colors"
-            :class="mapViewMode === 'suppliers' ? 'bg-base-300' : 'hover:bg-base-200'"
+            :class="mapViewMode === 'suppliers' ? 'bg-[#2f2416]' : 'hover:bg-[#ece3d3]'"
             @click="setMapViewMode('suppliers')"
           >
             <span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
@@ -163,7 +168,7 @@
       <Transition name="slide-up">
         <div
           v-if="isPanelOpen"
-          class="bg-base-100 text-base-content rounded-t-3xl border-t border-base-300 shadow-[0_-8px_40px_rgba(0,0,0,0.12)] transition-all duration-300 h-[60vh]"
+          class="rounded-t-3xl border-t border-[#d5c7b0] bg-[#f3eee6] text-[#2f2418] shadow-[0_-8px_40px_rgba(0,0,0,0.12)] transition-all duration-300 h-[60vh]"
         >
           <!-- Drag handle / close -->
           <div
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index aab8f57..4a3720f 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -1,347 +1,31 @@
+<script setup lang="ts">
+const route = useRoute()
+const localePath = useLocalePath()
+
+const isHomePage = computed(() => route.path === localePath('/'))
+const isCatalogSection = computed(() => route.path.startsWith(localePath('/catalog')))
+const isClientArea = computed(() => route.path.startsWith(localePath('/clientarea')))
+
+const contentClass = computed(() => {
+  if (isCatalogSection.value || isHomePage.value) {
+    return 'flex-1 flex flex-col min-h-0'
+  }
+  return 'flex-1 flex flex-col min-h-0 px-3 lg:px-6'
+})
+
+const mainStyle = computed(() => {
+  if (isCatalogSection.value || isHomePage.value) return { paddingTop: '0' }
+  if (isClientArea.value) return { paddingTop: '116px', paddingBottom: '96px' }
+  return { paddingTop: '132px', paddingBottom: '96px' }
+})
+</script>
+
 <template>
-  <div class="min-h-screen flex flex-col manager-logistics-shell">
-    <AiChatSidebar
-      :open="isChatOpen"
-      :width="chatWidth"
-      @close="isChatOpen = false"
-    />
+  <div class="min-h-screen flex flex-col bg-base-100 text-base-content">
+    <AppHeader />
 
-    <div class="flex-1 flex flex-col" :style="contentStyle">
-      <!-- Fixed Header Container -->
-      <div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
-      <div class="header-glass-backdrop" aria-hidden="true" />
-
-      <!-- MainNavigation -->
-      <MainNavigation
-        class="relative z-10"
-        :height="100"
-        :collapse-progress="isHomePage ? 0 : 1"
-        :hero-scroll-y="isHomePage ? heroScrollY : 0"
-        :hero-base-height="isHomePage ? heroBaseHeight : 0"
-        :session-checked="sessionChecked"
-        :logged-in="isLoggedIn"
-        :user-avatar-svg="userAvatarSvg"
-        :user-name="userName"
-        :user-initials="userInitials"
-        :theme="theme"
-        :user-data="userData"
-        :is-seller="isSeller"
-        :has-multiple-roles="hasMultipleRoles"
-        :current-role="currentRole"
-        :active-tokens="activeTokens"
-        :available-chips="availableChips"
-        :select-mode="selectMode"
-        :search-query="searchQuery"
-        :catalog-mode="catalogMode"
-        :product-label="productLabel ?? undefined"
-        :hub-label="hubLabel ?? undefined"
-        :quantity="quantity"
-        :can-search="canSearch"
-        :show-mode-toggle="true"
-        :show-active-mode="isCatalogSection"
-        :is-collapsed="isHomePage ? false : (isCatalogSection || isClientArea)"
-        :is-home-page="isHomePage"
-        :is-client-area="isClientArea"
-        :chat-open="isChatOpen"
-        @toggle-theme="toggleTheme"
-        @toggle-chat="isChatOpen = !isChatOpen"
-        @set-catalog-mode="setCatalogMode"
-        @sign-out="onClickSignOut"
-        @sign-in="signIn()"
-        @switch-team="switchToTeam"
-        @switch-role="switchToRole"
-        @start-select="startSelect"
-        @cancel-select="cancelSelect"
-        @edit-token="editFilter"
-        @remove-token="removeFilter"
-        @update:search-query="searchQuery = $event"
-        @update-quantity="setQuantity"
-        @search="onSearch"
-      />
-
-      <!-- Sub Navigation (section-specific tabs) - only for non-catalog/non-home/non-clientarea sections -->
-      <SubNavigation
-        v-if="!isHomePage && !isCatalogSection && !isClientArea"
-        :section="currentSection"
-      />
-      </div>
-
-      <!-- Page content - padding-top compensates for fixed header -->
-      <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6" :style="mainStyle">
-        <slot />
-      </main>
-    </div>
+    <main :class="contentClass" :style="mainStyle">
+      <slot />
+    </main>
   </div>
 </template>
-
-<script setup lang="ts">
-const runtimeConfig = useRuntimeConfig()
-const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
-const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
-const route = useRoute()
-const router = useRouter()
-const localePath = useLocalePath()
-const { locale, locales } = useI18n()
-const switchLocalePath = useSwitchLocalePath()
-
-const isChatOpen = useState('ai-chat-open', () => false)
-const chatWidth = computed(() => (isChatOpen.value ? 'clamp(240px, 15vw, 360px)' : '0px'))
-const contentStyle = computed(() => ({
-  marginLeft: isChatOpen.value ? chatWidth.value : '0px',
-  width: isChatOpen.value ? `calc(100% - ${chatWidth.value})` : '100%',
-  transition: 'margin-left 250ms ease, width 250ms ease'
-}))
-
-// Catalog search state
-const {
-  selectMode,
-  searchQuery,
-  activeTokens,
-  availableChips,
-  startSelect,
-  cancelSelect,
-  removeFilter,
-  editFilter,
-  setQuantity,
-  catalogMode,
-  setCatalogMode,
-  productLabel,
-  hubLabel,
-  quantity,
-  canSearch
-} = useCatalogSearch()
-
-// Collapsible header for catalog pages
-const { headerOffset, isCollapsed } = useScrollCollapse(100)
-
-// Hero scroll for home page
-const {
-  scrollY: heroScrollY,
-  heroBaseHeight,
-} = useHeroScroll()
-
-// Theme state
-const theme = useState<'silk' | 'night'>('theme', () => 'silk')
-
-// User data state (shared across layouts)
-interface SelectedLocation {
-  type: string
-  uuid: string
-  name: string
-  latitude: number
-  longitude: number
-}
-
-const userData = useState<{
-  id?: string
-  firstName?: string
-  lastName?: string
-  avatarId?: string
-  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: SelectedLocation | null }
-  activeTeamId?: string
-  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string; teamType?: string }>
-} | null>('me', () => null)
-
-const sessionChecked = ref(false)
-const userAvatarSvg = useState('user-avatar-svg', () => '')
-const lastAvatarSeed = useState('user-avatar-seed', () => '')
-
-const isSeller = computed(() => {
-  return userData.value?.activeTeam?.teamType === 'SELLER'
-})
-
-// Role switching support
-const buyerTeam = computed(() =>
-  userData.value?.teams?.find(t => t?.teamType === 'BUYER')
-)
-const sellerTeam = computed(() =>
-  userData.value?.teams?.find(t => t?.teamType === 'SELLER')
-)
-const hasBuyerTeam = computed(() => !!buyerTeam.value)
-const hasSellerTeam = computed(() => !!sellerTeam.value)
-const hasMultipleRoles = computed(() => hasBuyerTeam.value && hasSellerTeam.value)
-const currentRole = computed(() =>
-  userData.value?.activeTeam?.teamType || 'BUYER'
-)
-
-const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)
-
-const userName = computed(() => {
-  return userData.value?.firstName || 'User'
-})
-
-const userInitials = computed(() => {
-  const first = userData.value?.firstName?.charAt(0) || ''
-  const last = userData.value?.lastName?.charAt(0) || ''
-  if (first || last) return (first + last).toUpperCase()
-  return '?'
-})
-
-// Determine current section from route
-const currentSection = computed(() => {
-  const path = route.path
-  if (path.startsWith('/catalog') || path === '/') return 'catalog'
-  if (path.includes('/clientarea/offers')) return 'seller'
-  if (path.includes('/clientarea/orders') || path.includes('/clientarea/addresses') || path.includes('/clientarea/billing')) return 'orders'
-  if (path.includes('/clientarea')) return 'settings'
-  return 'catalog'
-})
-
-// Home page detection
-const isHomePage = computed(() => {
-  return route.path === '/' || route.path === '/en' || route.path === '/ru'
-})
-
-// Catalog section detection (unified search, no SubNav needed)
-const isCatalogSection = computed(() => {
-  return route.path.startsWith('/catalog') ||
-         route.path.startsWith('/en/catalog') ||
-         route.path.startsWith('/ru/catalog')
-})
-
-// Client area detection (cabinet tabs in MainNavigation, no SubNav needed)
-const isClientArea = computed(() => {
-  return route.path.includes('/clientarea')
-})
-
-// Collapsible header logic - only for pages with SubNav
-const hasSubNav = computed(() => !isHomePage.value && !isCatalogSection.value && !isClientArea.value)
-const canCollapse = computed(() => hasSubNav.value)
-const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)
-
-// Header container style - transform for SubNav pages
-const headerContainerStyle = computed(() => {
-  if (hasSubNav.value) {
-    // SubNav pages: slide up on scroll
-    return { transform: `translateY(${headerOffset.value}px)` }
-  }
-  return {}
-})
-
-
-// Main content padding-top to compensate for fixed header
-const mainStyle = computed(() => {
-  if (isCatalogSection.value) return { paddingTop: '0' }
-  if (isHomePage.value) return { paddingTop: '0' }
-  if (isClientArea.value) return { paddingTop: '116px' }  // Header only, no SubNav
-  return { paddingTop: '154px' }
-})
-
-// Provide collapsed state to child components (CatalogPage needs it for map positioning)
-provide('headerCollapsed', isHeaderCollapsed)
-
-// Avatar generation
-const generateUserAvatar = async (seed: string) => {
-  if (!seed) return
-  try {
-    const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
-    if (response.ok) {
-      userAvatarSvg.value = await response.text()
-      lastAvatarSeed.value = seed
-    }
-  } catch (error) {
-    console.error('Error generating avatar:', error)
-  }
-}
-
-const { setActiveTeam } = useActiveTeam()
-const { mutate } = useGraphQL()
-const locationStore = useLocationStore()
-
-const syncUserUi = async () => {
-  if (!userData.value) {
-    locationStore.clear()
-    return
-  }
-
-  if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
-    setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
-  }
-
-  const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'
-
-  if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
-    userAvatarSvg.value = ''
-    await generateUserAvatar(seed)
-  }
-
-  locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
-}
-
-watch(userData, () => {
-  void syncUserUi()
-}, { immediate: true })
-
-// Check session
-await fetchSession().catch(() => {})
-sessionChecked.value = true
-
-const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string; teamType?: string }) => {
-  if (!team?.id) return
-
-  try {
-    const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
-    const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')
-
-    if (result.switchTeam?.user && userData.value) {
-      userData.value.activeTeam = team as typeof userData.value.activeTeam
-      userData.value.activeTeamId = team.id
-      if (team.logtoOrgId) {
-        setActiveTeam(team.id, team.logtoOrgId)
-      }
-    }
-  } catch (err) {
-    console.error('Failed to switch team:', err)
-  }
-}
-
-const switchToRole = async (role: 'BUYER' | 'SELLER') => {
-  const targetTeam = role === 'SELLER' ? sellerTeam.value : buyerTeam.value
-  if (targetTeam?.id) {
-    await switchToTeam(targetTeam)
-    // Redirect to appropriate page when in client area
-    if (isClientArea.value) {
-      const targetPath = role === 'SELLER'
-        ? '/clientarea/offers'
-        : '/clientarea/orders'
-      await navigateTo(localePath(targetPath))
-    }
-  }
-}
-
-const onClickSignOut = () => {
-  signOut(siteUrl)
-}
-
-const applyTheme = (value: 'silk' | 'night') => {
-  if (import.meta.client) {
-    document.documentElement.setAttribute('data-theme', value)
-    localStorage.setItem('theme', value)
-  }
-}
-
-onMounted(() => {
-  const stored = import.meta.client ? localStorage.getItem('theme') : null
-  if (stored === 'night' || stored === 'silk') {
-    theme.value = stored as 'silk' | 'night'
-  }
-  applyTheme(theme.value)
-})
-
-watch(theme, (value) => applyTheme(value))
-
-const toggleTheme = () => {
-  theme.value = theme.value === 'night' ? 'silk' : 'night'
-}
-
-// Search handler for Quote mode - triggers search via shared state
-const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
-const onSearch = () => {
-  // Navigate to catalog page if not there
-  if (!route.path.includes('/catalog')) {
-    router.push({ path: localePath('/catalog'), query: { ...route.query, mode: 'quote', select: 'product' } })
-  }
-  // Trigger search by incrementing the counter (page watches this)
-  searchTrigger.value++
-}
-</script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 684468b..630e8bb 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,445 +1,572 @@
-<template>
-  <div class="pb-0 -mx-3 lg:-mx-6">
-    <!-- Hero -->
-    <section class="relative mb-16 min-h-[calc(100vh-100px)] overflow-hidden">
-      <HeroBackground fill />
-
-      <div class="relative z-10 flex min-h-[calc(100vh-100px)] items-center justify-center px-4 pt-16 pb-28">
-        <div class="mx-auto max-w-4xl text-center text-white">
-          <h1 class="text-4xl font-black leading-tight md:text-6xl">
-            {{ $t('hero.tagline', 'Торговля — это просто') }}
-          </h1>
-        </div>
-      </div>
-    </section>
-
-    <!-- Section: How it works -->
-    <section class="container mx-auto px-4 mb-20 mt-0">
-      <!-- Section header with line -->
-      <div class="flex items-center gap-6 mb-10">
-        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-base-content/20 to-transparent" />
-        <h2 class="text-sm font-medium uppercase tracking-[0.2em] text-base-content/60">
-          {{ $t('howto.title') }}
-        </h2>
-        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-base-content/20 to-transparent" />
-      </div>
-
-      <!-- Magazine layout -->
-      <div class="grid grid-cols-12 gap-6 md:gap-8">
-        <!-- Large hero image (8 cols) -->
-        <div class="col-span-12 md:col-span-7 relative overflow-hidden rounded-3xl h-[400px] md:h-[500px] group cursor-pointer">
-          <img
-            src="/images/promo/search.jpg"
-            alt=""
-            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
-          />
-          <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
-          <div class="absolute bottom-0 left-0 right-0 p-8">
-            <span class="inline-block px-3 py-1 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-medium mb-4">
-              {{ $t('howto.step', 'Шаг') }} 01
-            </span>
-            <h3 class="text-3xl md:text-4xl font-bold text-white mb-3">{{ $t('howto.step1.title') }}</h3>
-            <p class="text-white/70 text-lg max-w-md">{{ $t('howto.step1.description') }}</p>
-          </div>
-        </div>
-
-        <!-- Right column: text + small cards -->
-        <div class="col-span-12 md:col-span-5 flex flex-col gap-6">
-          <!-- Text block -->
-          <div class="p-8 rounded-3xl bg-base-200/50 border border-base-300/50">
-            <div class="text-6xl font-black text-primary/20 mb-2">500+</div>
-            <div class="text-xl font-semibold text-base-content mb-2">{{ $t('stats.suppliers', 'Поставщиков') }}</div>
-            <p class="text-base-content/60 text-sm">
-              {{ $t('stats.suppliersDesc', 'Проверенные производители из России, Казахстана и других стран СНГ') }}
-            </p>
-          </div>
-
-          <!-- Compare card -->
-          <div class="flex-1 relative overflow-hidden rounded-3xl group cursor-pointer min-h-[200px]">
-            <img
-              src="/images/promo/compare.jpg"
-              alt=""
-              class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-            />
-            <div class="absolute inset-0 bg-gradient-to-t from-cyan-900/90 via-cyan-900/40 to-transparent" />
-            <div class="absolute bottom-0 left-0 right-0 p-6">
-              <span class="inline-block px-3 py-1 rounded-full bg-cyan-500/20 text-cyan-300 text-xs font-medium mb-3">
-                {{ $t('howto.step', 'Шаг') }} 02
-              </span>
-              <h3 class="text-xl font-bold text-white">{{ $t('howto.step2.title') }}</h3>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Full-width quote/testimonial -->
-    <section class="bg-slate-900 py-16 mb-20">
-      <div class="container mx-auto px-4">
-        <div class="max-w-3xl mx-auto text-center">
-          <Icon name="lucide:quote" size="48" class="text-white/20 mb-6 mx-auto" />
-          <blockquote class="text-2xl md:text-3xl font-light text-white mb-6 leading-relaxed">
-            {{ $t('testimonial.quote', 'Optovia помогла нам найти надёжных поставщиков за считанные дни. Раньше на это уходили месяцы.') }}
-          </blockquote>
-          <div class="flex items-center justify-center gap-3">
-            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500" />
-            <div class="text-left">
-              <div class="text-white font-medium">{{ $t('testimonial.author', 'Алексей Петров') }}</div>
-              <div class="text-white/50 text-sm">{{ $t('testimonial.role', 'Директор по закупкам, АгроХолдинг') }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Section: Who it's for -->
-    <section class="container mx-auto px-4 mb-20">
-      <!-- Section header -->
-      <div class="mb-12">
-        <h2 class="text-3xl md:text-4xl font-bold text-base-content mb-4">{{ $t('roles.title') }}</h2>
-        <p class="text-base-content/60 text-lg max-w-2xl">
-          {{ $t('roles.subtitle', 'Платформа для всех участников рынка сельхозпродукции') }}
-        </p>
-      </div>
-
-      <!-- Asymmetric grid -->
-      <div class="grid grid-cols-12 gap-6">
-        <!-- Producers: large card -->
-        <div class="col-span-12 md:col-span-8 relative overflow-hidden rounded-3xl h-[450px] group">
-          <img
-            src="/images/promo/producer.jpg"
-            alt=""
-            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
-          />
-          <div class="absolute inset-0 bg-gradient-to-r from-violet-900/95 via-violet-900/70 to-transparent" />
-          <div class="absolute inset-0 p-8 flex flex-col justify-center max-w-md">
-            <div class="w-14 h-14 rounded-2xl bg-violet-500/30 backdrop-blur-sm flex items-center justify-center mb-4">
-              <Icon name="lucide:factory" size="28" class="text-violet-200" />
-            </div>
-            <h3 class="text-3xl font-bold text-white mb-3">{{ $t('roles.producers.title') }}</h3>
-            <p class="text-white/70 mb-4">{{ $t('roles.producers.description') }}</p>
-            <ul class="space-y-2 mb-6">
-              <li class="flex items-center gap-2 text-white/80">
-                <Icon name="lucide:check-circle" size="18" class="text-violet-400" />
-                {{ $t('roles.producers.benefit1') }}
-              </li>
-              <li class="flex items-center gap-2 text-white/80">
-                <Icon name="lucide:check-circle" size="18" class="text-violet-400" />
-                {{ $t('roles.producers.benefit2') }}
-              </li>
-            </ul>
-            <button class="btn bg-violet-500 hover:bg-violet-600 border-0 text-white w-fit">
-              {{ $t('roles.producers.cta') }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Right column: stats + services -->
-        <div class="col-span-12 md:col-span-4 flex flex-col gap-6">
-          <!-- Stats -->
-          <div class="p-6 rounded-3xl bg-gradient-to-br from-rose-500 to-pink-600 text-white">
-            <div class="text-5xl font-black mb-2">24/7</div>
-            <div class="text-white/80">{{ $t('stats.support', 'Поддержка') }}</div>
-          </div>
-
-          <!-- Services mini -->
-          <div class="flex-1 relative overflow-hidden rounded-3xl group cursor-pointer min-h-[200px]">
-            <img
-              src="/images/promo/services.jpg"
-              alt=""
-              class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
-            />
-            <div class="absolute inset-0 bg-gradient-to-t from-amber-900/90 to-transparent" />
-            <div class="absolute bottom-0 left-0 right-0 p-6">
-              <div class="w-10 h-10 rounded-xl bg-amber-500/30 backdrop-blur-sm flex items-center justify-center mb-2">
-                <Icon name="lucide:sparkles" size="20" class="text-amber-200" />
-              </div>
-              <h3 class="text-lg font-bold text-white">{{ $t('howto.step3.title') }}</h3>
-            </div>
-          </div>
-        </div>
-
-        <!-- Bottom row: 3 equal cards -->
-        <div class="col-span-12 md:col-span-4 relative overflow-hidden rounded-3xl h-[300px] group">
-          <img
-            src="/images/promo/buyer.jpg"
-            alt=""
-            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
-          />
-          <div class="absolute inset-0 bg-gradient-to-t from-cyan-900/95 via-cyan-900/50 to-transparent" />
-          <div class="absolute bottom-0 left-0 right-0 p-6">
-            <div class="w-12 h-12 rounded-xl bg-cyan-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
-              <Icon name="lucide:building-2" size="24" class="text-cyan-200" />
-            </div>
-            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.buyers.title') }}</h3>
-            <p class="text-white/60 text-sm mb-3">{{ $t('roles.buyers.description') }}</p>
-            <button class="btn btn-sm bg-cyan-500 hover:bg-cyan-600 border-0 text-white">
-              {{ $t('roles.buyers.cta') }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Text only card -->
-        <div class="col-span-12 md:col-span-4 p-8 rounded-3xl border-2 border-dashed border-base-300 flex flex-col justify-center items-center text-center h-[300px]">
-          <div class="w-16 h-16 rounded-full bg-base-200 flex items-center justify-center mb-4">
-            <Icon name="lucide:globe" size="32" class="text-base-content/40" />
-          </div>
-          <div class="text-4xl font-bold text-base-content mb-2">15+</div>
-          <div class="text-base-content/60">{{ $t('stats.countries', 'Стран присутствия') }}</div>
-        </div>
-
-        <!-- Partners -->
-        <div class="col-span-12 md:col-span-4 relative overflow-hidden rounded-3xl h-[300px] group cursor-pointer">
-          <img
-            src="/images/promo/partner.jpg"
-            alt=""
-            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
-          />
-          <div class="absolute inset-0 bg-gradient-to-t from-rose-900/95 via-rose-900/50 to-transparent" />
-          <div class="absolute bottom-0 left-0 right-0 p-6">
-            <div class="w-12 h-12 rounded-xl bg-rose-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
-              <Icon name="lucide:handshake" size="24" class="text-rose-200" />
-            </div>
-            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.services.title') }}</h3>
-            <p class="text-white/60 text-sm">{{ $t('roles.services.description') }}</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- CTA section -->
-    <section class="container mx-auto px-4 mb-20">
-      <div class="rounded-3xl bg-gradient-to-r from-emerald-600 via-cyan-600 to-blue-600 p-12 md:p-16 text-center">
-        <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
-          {{ $t('cta.title', 'Готовы начать?') }}
-        </h2>
-        <p class="text-white/80 text-lg mb-8 max-w-xl mx-auto">
-          {{ $t('cta.description', 'Присоединяйтесь к сотням компаний, которые уже торгуют на Optovia') }}
-        </p>
-        <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <button class="btn btn-lg bg-white text-emerald-700 hover:bg-white/90 border-0">
-            {{ $t('cta.register', 'Зарегистрироваться') }}
-          </button>
-          <button class="btn btn-lg btn-outline border-white/30 text-white hover:bg-white/10 hover:border-white/50">
-            {{ $t('cta.demo', 'Запросить демо') }}
-          </button>
-        </div>
-      </div>
-    </section>
-
-    <!-- Dark Footer -->
-    <footer class="bg-slate-900 text-white pt-16 pb-8">
-      <div class="container mx-auto px-4">
-        <!-- Main footer grid -->
-        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 mb-12">
-          <!-- Logo & Description -->
-          <div class="col-span-2">
-            <div class="flex items-center gap-2 mb-4">
-              <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 flex items-center justify-center">
-                <Icon name="lucide:leaf" size="24" class="text-white" />
-              </div>
-              <span class="text-2xl font-bold">Optovia</span>
-            </div>
-            <p class="text-slate-400 text-sm mb-4">
-              {{ $t('footer.description', 'Глобальная B2B платформа для торговли сырьём и сельхозпродукцией. Соединяем производителей и покупателей по всему миру.') }}
-            </p>
-            <div class="flex gap-3">
-              <a href="#" class="w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 flex items-center justify-center transition-colors">
-                <Icon name="lucide:linkedin" size="18" class="text-slate-400" />
-              </a>
-              <a href="#" class="w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 flex items-center justify-center transition-colors">
-                <Icon name="lucide:twitter" size="18" class="text-slate-400" />
-              </a>
-              <a href="#" class="w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 flex items-center justify-center transition-colors">
-                <Icon name="lucide:instagram" size="18" class="text-slate-400" />
-              </a>
-              <a href="#" class="w-9 h-9 rounded-lg bg-slate-800 hover:bg-slate-700 flex items-center justify-center transition-colors">
-                <Icon name="lucide:youtube" size="18" class="text-slate-400" />
-              </a>
-            </div>
-          </div>
-
-          <!-- Europe -->
-          <div>
-            <h4 class="font-semibold text-white mb-4 flex items-center gap-2">
-              <Icon name="lucide:globe" size="16" class="text-blue-400" />
-              {{ $t('footer.europe', 'Европа') }}
-            </h4>
-            <ul class="space-y-2 text-sm text-slate-400">
-              <li class="hover:text-white cursor-pointer transition-colors">🇩🇪 {{ $t('footer.germany', 'Германия') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇫🇷 {{ $t('footer.france', 'Франция') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇳🇱 {{ $t('footer.netherlands', 'Нидерланды') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇵🇱 {{ $t('footer.poland', 'Польша') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇪🇸 {{ $t('footer.spain', 'Испания') }}</li>
-            </ul>
-          </div>
-
-          <!-- CIS -->
-          <div>
-            <h4 class="font-semibold text-white mb-4 flex items-center gap-2">
-              <Icon name="lucide:map" size="16" class="text-emerald-400" />
-              {{ $t('footer.cis', 'СНГ') }}
-            </h4>
-            <ul class="space-y-2 text-sm text-slate-400">
-              <li class="hover:text-white cursor-pointer transition-colors">🇷🇺 {{ $t('footer.russia', 'Россия') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇰🇿 {{ $t('footer.kazakhstan', 'Казахстан') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇺🇿 {{ $t('footer.uzbekistan', 'Узбекистан') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇧🇾 {{ $t('footer.belarus', 'Беларусь') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇦🇿 {{ $t('footer.azerbaijan', 'Азербайджан') }}</li>
-            </ul>
-          </div>
-
-          <!-- Asia & Middle East -->
-          <div>
-            <h4 class="font-semibold text-white mb-4 flex items-center gap-2">
-              <Icon name="lucide:sunrise" size="16" class="text-amber-400" />
-              {{ $t('footer.asia', 'Азия') }}
-            </h4>
-            <ul class="space-y-2 text-sm text-slate-400">
-              <li class="hover:text-white cursor-pointer transition-colors">🇨🇳 {{ $t('footer.china', 'Китай') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇮🇳 {{ $t('footer.india', 'Индия') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇹🇷 {{ $t('footer.turkey', 'Турция') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇦🇪 {{ $t('footer.uae', 'ОАЭ') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇸🇦 {{ $t('footer.saudi', 'Саудовская Аравия') }}</li>
-            </ul>
-          </div>
-
-          <!-- Americas & Africa -->
-          <div>
-            <h4 class="font-semibold text-white mb-4 flex items-center gap-2">
-              <Icon name="lucide:globe-2" size="16" class="text-rose-400" />
-              {{ $t('footer.americas', 'Америка и Африка') }}
-            </h4>
-            <ul class="space-y-2 text-sm text-slate-400">
-              <li class="hover:text-white cursor-pointer transition-colors">🇺🇸 {{ $t('footer.usa', 'США') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇧🇷 {{ $t('footer.brazil', 'Бразилия') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇦🇷 {{ $t('footer.argentina', 'Аргентина') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇿🇦 {{ $t('footer.southafrica', 'ЮАР') }}</li>
-              <li class="hover:text-white cursor-pointer transition-colors">🇪🇬 {{ $t('footer.egypt', 'Египет') }}</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- Offices section -->
-        <div class="border-t border-slate-800 pt-8 mb-8">
-          <h4 class="font-semibold text-white mb-6 text-center">{{ $t('footer.offices', 'Наши офисы') }}</h4>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <!-- HQ -->
-            <div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
-              <div class="flex items-center gap-2 mb-3">
-                <div class="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center">
-                  <Icon name="lucide:building" size="16" class="text-emerald-400" />
-                </div>
-                <div>
-                  <div class="text-sm font-semibold">{{ $t('footer.hq', 'Штаб-квартира') }}</div>
-                  <div class="text-xs text-slate-500">Dubai, UAE</div>
-                </div>
-              </div>
-              <p class="text-xs text-slate-400">Business Bay, Churchill Towers</p>
-              <p class="text-xs text-emerald-400 mt-2">+971 4 XXX XXXX</p>
-            </div>
-
-            <!-- Europe Office -->
-            <div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
-              <div class="flex items-center gap-2 mb-3">
-                <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center">
-                  <Icon name="lucide:building-2" size="16" class="text-blue-400" />
-                </div>
-                <div>
-                  <div class="text-sm font-semibold">{{ $t('footer.europeOffice', 'Европа') }}</div>
-                  <div class="text-xs text-slate-500">Amsterdam, NL</div>
-                </div>
-              </div>
-              <p class="text-xs text-slate-400">Zuidas Business District</p>
-              <p class="text-xs text-blue-400 mt-2">+31 20 XXX XXXX</p>
-            </div>
-
-            <!-- CIS Office -->
-            <div class="bg-slate-800/50 rounded-xl p-5 border border-slate-700/50">
-              <div class="flex items-center gap-2 mb-3">
-                <div class="w-8 h-8 rounded-lg bg-violet-500/20 flex items-center justify-center">
-                  <Icon name="lucide:landmark" size="16" class="text-violet-400" />
-                </div>
-                <div>
-                  <div class="text-sm font-semibold">{{ $t('footer.cisOffice', 'СНГ') }}</div>
-                  <div class="text-xs text-slate-500">Moscow, RU</div>
-                </div>
-              </div>
-              <p class="text-xs text-slate-400">Moscow City, Federation Tower</p>
-              <p class="text-xs text-violet-400 mt-2">+7 495 XXX XXXX</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Quick links -->
-        <div class="border-t border-slate-800 pt-8 mb-8">
-          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-            <div>
-              <h5 class="text-sm font-semibold text-white mb-3">{{ $t('footer.products', 'Продукты') }}</h5>
-              <ul class="space-y-2 text-sm text-slate-400">
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.grains', 'Зерновые') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.oilseeds', 'Масличные') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.sugar', 'Сахар') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.fertilizers', 'Удобрения') }}</li>
-              </ul>
-            </div>
-            <div>
-              <h5 class="text-sm font-semibold text-white mb-3">{{ $t('footer.services', 'Сервисы') }}</h5>
-              <ul class="space-y-2 text-sm text-slate-400">
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.logistics', 'Логистика') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.insurance', 'Страхование') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.financing', 'Финансирование') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.inspection', 'Инспекция') }}</li>
-              </ul>
-            </div>
-            <div>
-              <h5 class="text-sm font-semibold text-white mb-3">{{ $t('footer.company', 'Компания') }}</h5>
-              <ul class="space-y-2 text-sm text-slate-400">
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.about', 'О нас') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.careers', 'Карьера') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.press', 'Пресса') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.contact', 'Контакты') }}</li>
-              </ul>
-            </div>
-            <div>
-              <h5 class="text-sm font-semibold text-white mb-3">{{ $t('footer.legal', 'Юридическое') }}</h5>
-              <ul class="space-y-2 text-sm text-slate-400">
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.terms', 'Условия') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.privacy', 'Конфиденциальность') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.cookies', 'Cookies') }}</li>
-                <li class="hover:text-white cursor-pointer transition-colors">{{ $t('footer.compliance', 'Комплаенс') }}</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <!-- Bottom bar -->
-        <div class="border-t border-slate-800 pt-6 flex flex-col md:flex-row items-center justify-between gap-4">
-          <div class="text-sm text-slate-500">
-            © 2024 Optovia. {{ $t('footer.rights', 'Все права защищены.') }}
-          </div>
-          <div class="flex items-center gap-6 text-sm text-slate-400">
-            <div class="flex items-center gap-2">
-              <Icon name="lucide:shield-check" size="16" class="text-emerald-500" />
-              <span>{{ $t('footer.secure', 'Безопасные сделки') }}</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <Icon name="lucide:lock" size="16" class="text-blue-500" />
-              <span>SSL</span>
-            </div>
-            <div class="flex items-center gap-2">
-              <Icon name="lucide:badge-check" size="16" class="text-violet-500" />
-              <span>{{ $t('footer.verified', 'Верификация') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </footer>
-  </div>
-</template>
-
 <script setup lang="ts">
+const { locale } = useI18n()
+const localePath = useLocalePath()
+
+const isEn = computed(() => locale.value === 'en')
+
+const heroTitle = computed(() => isEn.value
+  ? 'Optovia makes procurement and logistics transparent'
+  : 'Optovia делает закупку и логистику прозрачными')
+
+const heroSubtitle = computed(() => isEn.value
+  ? 'One flow for product search, hubs, offers, and route decisions.'
+  : 'Единый поток: поиск товара, хабы, офферы и решение по маршруту.')
+
+const howSteps = computed(() => isEn.value
+  ? [
+      {
+        number: '01',
+        title: 'Choose product and destination',
+        text: 'Start from the top search capsule and set what you buy and where it should go.',
+      },
+      {
+        number: '02',
+        title: 'See offers and hubs on map',
+        text: 'Compare suppliers, hubs, prices, and route options on one interactive canvas.',
+      },
+      {
+        number: '03',
+        title: 'Commit with full context',
+        text: 'Move to the best option with clear terms, timeline, and next actions for your team.',
+      },
+    ]
+  : [
+      {
+        number: '01',
+        title: 'Выберите товар и направление',
+        text: 'Начните в верхней поисковой капсуле: задайте что закупаете и куда везете.',
+      },
+      {
+        number: '02',
+        title: 'Смотрите офферы и хабы на карте',
+        text: 'Сравнивайте поставщиков, хабы, цены и маршруты в одном интерактивном полотне.',
+      },
+      {
+        number: '03',
+        title: 'Принимайте решение с полным контекстом',
+        text: 'Переходите к лучшему варианту с понятными условиями, сроками и шагами для команды.',
+      },
+    ])
+
+const services = computed(() => isEn.value
+  ? [
+      {
+        title: 'Supplier and offer discovery',
+        text: 'Find relevant suppliers and compare live commercial terms without tab chaos.',
+      },
+      {
+        title: 'Hub-first route strategy',
+        text: 'Evaluate delivery through key hubs and optimize route economics early.',
+      },
+      {
+        title: 'Map-based operating control',
+        text: 'Keep product, destination, and route context in one place for faster execution.',
+      },
+      {
+        title: 'Team workflow continuity',
+        text: 'Share context between buyer, operations, and manager roles without data loss.',
+      },
+    ]
+  : [
+      {
+        title: 'Поиск поставщиков и офферов',
+        text: 'Находите релевантных поставщиков и сравнивайте коммерцию без хаоса вкладок.',
+      },
+      {
+        title: 'Маршрутная стратегия через хабы',
+        text: 'Оценивайте доставку через ключевые хабы и заранее оптимизируйте экономику.',
+      },
+      {
+        title: 'Операционный контроль на карте',
+        text: 'Держите товар, направление и маршрут в одном месте для быстрого исполнения.',
+      },
+      {
+        title: 'Непрерывный командный workflow',
+        text: 'Передавайте контекст между закупкой, операционкой и менеджментом без потерь.',
+      },
+    ])
+
+const advantages = computed(() => isEn.value
+  ? [
+      'Single visual language from homepage to map and cabinet.',
+      'Faster decisions due to shared context between roles.',
+      'Less operational friction in procurement and route planning.',
+    ]
+  : [
+      'Единый визуальный контур от лендинга до карты и кабинета.',
+      'Быстрее решения за счет общего контекста между ролями.',
+      'Меньше операционных потерь в закупке и планировании маршрута.',
+    ])
+
+const trustedBy = computed(() => isEn.value
+  ? ['Agro Holdings', 'Food Retail', 'Import Teams', 'Distribution Groups', 'Regional Buyers', 'Logistics Partners']
+  : ['Агро холдинги', 'Пищевой ритейл', 'Импорт-команды', 'Дистрибьюторы', 'Региональные закупки', 'Логистические партнеры'])
+
+const testimonials = computed(() => isEn.value
+  ? [
+      {
+        quote: 'We reduced route decision time from days to hours because all options are visible on one map.',
+        author: 'Elena Morozova',
+        role: 'Head of Procurement Operations',
+      },
+      {
+        quote: 'The capsule search and hub view made supplier comparison much cleaner for our team.',
+        author: 'Dmitry Volkov',
+        role: 'Import Manager',
+      },
+      {
+        quote: 'Optovia removed communication noise between buyers and logistics managers.',
+        author: 'Alex Gromov',
+        role: 'CEO, Trading Company',
+      },
+    ]
+  : [
+      {
+        quote: 'Скорость выбора маршрута сократилась с дней до часов, потому что все варианты видны на одной карте.',
+        author: 'Екатерина Морозова',
+        role: 'Руководитель закупочной операционки',
+      },
+      {
+        quote: 'Капсульный поиск и режим хабов сделали сравнение поставщиков заметно чище для команды.',
+        author: 'Дмитрий Волков',
+        role: 'Менеджер по импорту',
+      },
+      {
+        quote: 'Optovia убрала шум в коммуникации между закупкой и логистикой.',
+        author: 'Александр Громов',
+        role: 'CEO, торговая компания',
+      },
+    ])
+
+const leadTestimonial = computed(() => testimonials.value[0] ?? null)
+const sideTestimonials = computed(() => testimonials.value.slice(1))
+
+const ctaTitle = computed(() => isEn.value ? 'Scale your sourcing flow with Optovia' : 'Масштабируйте закупочный поток вместе с Optovia')
+const ctaText = computed(() => isEn.value
+  ? 'Move from fragmented tools to one coherent workflow.'
+  : 'Перейдите от разрозненных инструментов к единому рабочему контуру.')
+
 definePageMeta({
-  layout: 'topnav'
+  layout: 'topnav',
 })
 </script>
+
+<template>
+  <main class="landing-page">
+    <section class="hero-section">
+      <div class="mx-auto w-full max-w-[1280px] px-3 md:px-4">
+        <div class="mx-auto max-w-[980px] text-center text-white">
+          <h1 class="text-4xl font-black leading-tight md:text-6xl">{{ heroTitle }}</h1>
+          <p class="mx-auto mt-5 max-w-[760px] text-base text-white/80 md:text-lg">{{ heroSubtitle }}</p>
+          <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
+            <NuxtLink :to="localePath('/catalog')" class="btn h-11 min-h-0 rounded-full border-0 bg-white px-6 text-[#12213a] hover:bg-white/90">
+              {{ isEn ? 'Open Catalog' : 'Открыть каталог' }}
+            </NuxtLink>
+            <NuxtLink :to="localePath('/catalog')" class="btn h-11 min-h-0 rounded-full border border-white/40 bg-transparent px-6 text-white hover:bg-white/10">
+              {{ isEn ? 'Explore map flow' : 'Посмотреть карту' }}
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--light">
+      <div class="section-inner">
+        <header class="section-header">
+          <h2>{{ isEn ? 'How it works' : 'Как это работает' }}</h2>
+        </header>
+
+        <ol class="steps-flow">
+          <li v-for="step in howSteps" :key="step.number" class="step-item">
+            <p class="step-number">{{ step.number }}</p>
+            <h3>{{ step.title }}</h3>
+            <p>{{ step.text }}</p>
+          </li>
+        </ol>
+      </div>
+    </section>
+
+    <section class="section section--dark">
+      <div class="section-inner">
+        <header class="section-header section-header--inverse">
+          <h2>{{ isEn ? 'Core capabilities' : 'Ключевые возможности' }}</h2>
+        </header>
+
+        <div class="service-stack">
+          <article v-for="(service, index) in services" :key="service.title" class="service-lane">
+            <p class="service-index">{{ String(index + 1).padStart(2, '0') }}</p>
+            <div>
+              <h3>{{ service.title }}</h3>
+              <p>{{ service.text }}</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--accent">
+      <div class="section-inner why-grid">
+        <div>
+          <h2>{{ isEn ? 'Why teams choose this model' : 'Почему команды выбирают эту модель' }}</h2>
+          <p class="why-lead">
+            {{ isEn ? 'The same interaction model works from landing entry to day-to-day map operations.' : 'Одна и та же модель взаимодействия работает от первого экрана до ежедневной работы на карте.' }}
+          </p>
+        </div>
+
+        <ul class="why-list">
+          <li v-for="item in advantages" :key="item">{{ item }}</li>
+        </ul>
+      </div>
+    </section>
+
+    <section class="section section--plain">
+      <div class="section-inner">
+        <header class="section-header">
+          <h2>{{ isEn ? 'Trusted by teams' : 'Нам доверяют команды' }}</h2>
+        </header>
+
+        <div class="logo-wall" role="list">
+          <div v-for="brand in trustedBy" :key="brand" role="listitem" class="logo-brand">{{ brand }}</div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--reviews">
+      <div class="section-inner">
+        <header class="section-header">
+          <h2>{{ isEn ? 'What teams say' : 'Что говорят команды' }}</h2>
+        </header>
+
+        <div class="review-layout">
+          <article v-if="leadTestimonial" class="review-main">
+            <p class="review-main__quote">«{{ leadTestimonial.quote }}»</p>
+            <div class="review-person">
+              <div class="review-avatar review-avatar--lg">{{ leadTestimonial.author.slice(0, 1) }}</div>
+              <div>
+                <p class="review-name">{{ leadTestimonial.author }}</p>
+                <p class="review-role">{{ leadTestimonial.role }}</p>
+              </div>
+            </div>
+          </article>
+
+          <div class="review-side">
+            <article v-for="item in sideTestimonials" :key="item.author" class="review-mini">
+              <p>«{{ item.quote }}»</p>
+              <div class="review-person">
+                <div class="review-avatar">{{ item.author.slice(0, 1) }}</div>
+                <div>
+                  <p class="review-name">{{ item.author }}</p>
+                  <p class="review-role">{{ item.role }}</p>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--cta">
+      <div class="section-inner">
+        <div class="cta-shell">
+          <h2>{{ ctaTitle }}</h2>
+          <p>{{ ctaText }}</p>
+          <NuxtLink :to="localePath('/catalog')" class="btn h-11 min-h-0 rounded-full border-0 bg-white px-6 text-[#12334f] hover:bg-white/90">
+            {{ isEn ? 'Start now' : 'Начать сейчас' }}
+          </NuxtLink>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.landing-page {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  padding-bottom: 0;
+  background: #eef2f6;
+}
+
+.hero-section {
+  position: relative;
+  min-height: 72vh;
+  width: 100%;
+  background: linear-gradient(132deg, #0b3a46 0%, #132b49 48%, #1a2a63 100%);
+  padding: 10rem 0.75rem 2.5rem;
+}
+
+.section {
+  padding: 3.25rem 0;
+}
+
+.section-inner {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1280px;
+  padding: 0 0.75rem;
+}
+
+.section-header {
+  margin-bottom: 1.35rem;
+}
+
+.section-header h2 {
+  margin: 0.3rem 0 0;
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  font-weight: 900;
+  color: #12213a;
+}
+
+.section-header--inverse h2 {
+  color: #fff;
+}
+
+.section--light {
+  background: linear-gradient(180deg, #f1f5fb 0%, #edf3fb 100%);
+}
+
+.steps-flow {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 1rem;
+}
+
+.step-item {
+  position: relative;
+  padding: 1.2rem 0 1.2rem 4.3rem;
+  border-top: 1px solid #cfdae8;
+}
+
+.step-number {
+  position: absolute;
+  left: 0;
+  top: 0.65rem;
+  margin: 0;
+  font-size: clamp(1.8rem, 4vw, 2.7rem);
+  font-weight: 900;
+  color: #d12e35;
+}
+
+.step-item h3 {
+  margin: 0;
+  font-size: 1.35rem;
+  font-weight: 900;
+  color: #12213a;
+}
+
+.step-item p {
+  margin: 0.45rem 0 0;
+  color: #3f5673;
+  line-height: 1.5;
+}
+
+.section--dark {
+  background: linear-gradient(155deg, #0b1a2f 0%, #102842 100%);
+}
+
+.service-stack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.service-lane {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 18px;
+  padding: 1.15rem;
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  color: #fff;
+  background: linear-gradient(110deg, #10243f 0%, #1c4665 100%);
+}
+
+.service-index {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 900;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.service-lane h3 {
+  margin: 0;
+  font-size: 1.28rem;
+  font-weight: 900;
+}
+
+.service-lane p {
+  margin: 0.45rem 0 0;
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.section--accent {
+  background: linear-gradient(180deg, #f8f0ea 0%, #f4ece8 100%);
+}
+
+.why-grid {
+  display: grid;
+  gap: 1.35rem;
+}
+
+.why-grid h2 {
+  margin: 0.3rem 0 0;
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  font-weight: 900;
+  color: #12213a;
+}
+
+.why-lead {
+  margin: 1rem 0 0;
+  color: #3f5673;
+  line-height: 1.55;
+}
+
+.why-list {
+  margin: 0;
+  padding-left: 1.2rem;
+  display: grid;
+  gap: 0.75rem;
+  color: #243e5c;
+}
+
+.section--plain {
+  background: #f1f4f8;
+}
+
+.logo-wall {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+
+.logo-brand {
+  border-radius: 12px;
+  border: 1px solid #d3deea;
+  background: #fff;
+  padding: 0.9rem;
+  text-align: center;
+  font-weight: 700;
+  color: #2d4561;
+}
+
+.section--reviews {
+  background: #0f1f34;
+}
+
+.section--reviews .section-header h2 {
+  color: #fff;
+}
+
+.review-layout {
+  display: grid;
+  gap: 1rem;
+}
+
+.review-main,
+.review-mini {
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.08);
+  padding: 1.2rem;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.review-main__quote {
+  margin: 0;
+  font-size: 1.18rem;
+  line-height: 1.55;
+  font-weight: 700;
+}
+
+.review-side {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.review-person {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.review-avatar {
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.review-avatar--lg {
+  height: 2.75rem;
+  width: 2.75rem;
+}
+
+.review-name {
+  margin: 0;
+  font-weight: 700;
+  color: #fff;
+}
+
+.review-role {
+  margin: 0.2rem 0 0;
+  font-size: 0.86rem;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.section--cta {
+  background: #eef2f6;
+}
+
+.cta-shell {
+  border-radius: 24px;
+  padding: 2rem;
+  background: linear-gradient(120deg, #0f3b54 0%, #1f5b7f 100%);
+  color: #fff;
+  text-align: center;
+}
+
+.cta-shell h2 {
+  margin: 0;
+  font-size: clamp(1.8rem, 4vw, 2.8rem);
+  font-weight: 900;
+}
+
+.cta-shell p {
+  margin: 0.8rem auto 1.4rem;
+  max-width: 680px;
+  color: rgba(255, 255, 255, 0.82);
+}
+
+@media (min-width: 768px) {
+  .hero-section {
+    padding-top: 12rem;
+  }
+
+  .review-layout {
+    grid-template-columns: 1.1fr 0.9fr;
+  }
+
+  .logo-wall {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .why-grid {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+}
+
+@media (min-width: 1024px) {
+  .logo-wall {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+</style>