From cecbed99b5f28e4cb52940750b422484752dfc24 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 26 Jan 2026 16:12:00 +0700
Subject: [PATCH] Add hero section to home page with scroll collapse

- Full-screen dark gradient hero on home page
- Search input centered vertically
- Smooth collapse to fixed header on scroll
- Added hero translations (ru/en)
---
 app/composables/useHeroScroll.ts |  75 +++++++++
 app/layouts/topnav.vue           | 277 +++++++++++++++++++++++++------
 i18n/locales/en/hero.json        |   6 +
 i18n/locales/ru/hero.json        |   6 +
 nuxt.config.ts                   |   4 +-
 5 files changed, 320 insertions(+), 48 deletions(-)
 create mode 100644 app/composables/useHeroScroll.ts
 create mode 100644 i18n/locales/en/hero.json
 create mode 100644 i18n/locales/ru/hero.json

diff --git a/app/composables/useHeroScroll.ts b/app/composables/useHeroScroll.ts
new file mode 100644
index 0000000..e544c66
--- /dev/null
+++ b/app/composables/useHeroScroll.ts
@@ -0,0 +1,75 @@
+/**
+ * Composable for home page hero scroll behavior
+ * Starts with full-screen hero, collapses to fixed header on scroll
+ */
+export const useHeroScroll = () => {
+  const scrollY = ref(0)
+
+  // Hero height = viewport height minus some space (e.g., 80px for visual balance)
+  const heroBaseHeight = ref(0)
+  const collapsedHeight = 100 // Fixed header height when collapsed
+
+  // Calculate hero height based on viewport
+  const updateHeroHeight = () => {
+    if (import.meta.client) {
+      heroBaseHeight.value = window.innerHeight - 80 // Nearly full screen
+    }
+  }
+
+  // How much to collapse (0 = full hero, 1 = fully collapsed)
+  const collapseProgress = computed(() => {
+    const maxScroll = heroBaseHeight.value - collapsedHeight
+    if (maxScroll <= 0) return 1
+    return Math.min(1, Math.max(0, scrollY.value / maxScroll))
+  })
+
+  // Current hero height (animated)
+  const heroHeight = computed(() => {
+    const maxScroll = heroBaseHeight.value - collapsedHeight
+    return Math.max(collapsedHeight, heroBaseHeight.value - scrollY.value)
+  })
+
+  // Is fully collapsed to fixed header?
+  const isCollapsed = computed(() => collapseProgress.value >= 1)
+
+  // Padding for content below hero
+  const contentPaddingTop = computed(() => {
+    return heroHeight.value
+  })
+
+  const onScroll = () => {
+    if (import.meta.client) {
+      scrollY.value = window.scrollY
+    }
+  }
+
+  const onResize = () => {
+    updateHeroHeight()
+  }
+
+  onMounted(() => {
+    if (import.meta.client) {
+      updateHeroHeight()
+      window.addEventListener('scroll', onScroll, { passive: true })
+      window.addEventListener('resize', onResize, { passive: true })
+      onScroll()
+    }
+  })
+
+  onUnmounted(() => {
+    if (import.meta.client) {
+      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onResize)
+    }
+  })
+
+  return {
+    scrollY: readonly(scrollY),
+    heroBaseHeight: readonly(heroBaseHeight),
+    heroHeight,
+    collapseProgress,
+    isCollapsed,
+    contentPaddingTop,
+    collapsedHeight
+  }
+}
diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index c3f59e8..4512f1c 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -1,49 +1,200 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-300">
-    <!-- Fixed Header Container (MainNav + SubNav) - slides up on scroll -->
-    <div class="fixed top-0 left-0 right-0 z-40" :style="headerStyle">
-      <!-- Main Navigation (Logo + Search + User) -->
-      <MainNavigation
-        :session-checked="sessionChecked"
-        :logged-in="isLoggedIn"
-        :user-avatar-svg="userAvatarSvg"
-        :user-name="userName"
-        :user-initials="userInitials"
-        :theme="theme"
-        :user-data="userData"
-        :is-seller="isSeller"
-        :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"
-        :glass-style="isCatalogSection"
-        @toggle-theme="toggleTheme"
-        @set-catalog-mode="setCatalogMode"
-        @sign-out="onClickSignOut"
-        @sign-in="signIn()"
-        @switch-team="switchToTeam"
-        @start-select="startSelect"
-        @cancel-select="cancelSelect"
-        @edit-token="editFilter"
-        @remove-token="removeFilter"
-        @update:search-query="searchQuery = $event"
-        @update-quantity="setQuantity"
-        @search="onSearch"
-      />
+    <!-- Home Page Hero Header (full screen, dark background, collapses on scroll) -->
+    <template v-if="isHomePage">
+      <div
+        class="fixed top-0 left-0 right-0 z-40 flex flex-col justify-center transition-all duration-100 ease-out"
+        :style="heroStyle"
+      >
+        <!-- Dark gradient background -->
+        <div class="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900" />
+        <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent" />
 
-      <!-- Sub Navigation (section-specific tabs) - only for non-catalog sections -->
-      <SubNavigation
-        v-if="!isHomePage && !isCatalogSection"
-        :section="currentSection"
-      />
-    </div>
+        <!-- Content wrapper (centers content in the hero area) -->
+        <div class="relative z-10 flex flex-col items-center justify-center flex-1 px-4">
+          <!-- Logo and nav at top when expanded -->
+          <div
+            class="absolute top-0 left-0 right-0 flex items-center justify-between px-4 lg:px-6 transition-opacity duration-200"
+            :style="{ height: '100px', opacity: heroExpanded ? 1 : 0 }"
+          >
+            <!-- Left: Logo + Nav links -->
+            <div class="flex items-center gap-6 pt-4">
+              <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
+                <span class="font-bold text-xl text-white">Optovia</span>
+              </NuxtLink>
+              <nav class="flex items-center gap-1">
+                <button
+                  class="px-3 py-1 text-sm font-medium rounded-lg transition-colors text-white/70 hover:text-white hover:bg-white/10"
+                  @click="setCatalogMode('explore')"
+                >
+                  {{ $t('catalog.modes.explore') }}
+                </button>
+                <button
+                  class="px-3 py-1 text-sm font-medium rounded-lg transition-colors text-white/70 hover:text-white hover:bg-white/10"
+                  @click="setCatalogMode('quote')"
+                >
+                  {{ $t('catalog.modes.quote') }}
+                </button>
+              </nav>
+            </div>
+
+            <!-- Right: Icons (when expanded) -->
+            <div class="flex items-center gap-1 pt-4">
+              <NuxtLink
+                :to="localePath('/clientarea/ai')"
+                class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors"
+              >
+                <Icon name="lucide:bot" size="18" />
+              </NuxtLink>
+              <div class="dropdown dropdown-end">
+                <button
+                  tabindex="0"
+                  class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors"
+                >
+                  <Icon name="lucide:globe" size="18" />
+                </button>
+                <div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
+                  <div class="font-semibold mb-2">{{ $t('common.language') }}</div>
+                  <div class="flex gap-2 mb-4">
+                    <NuxtLink
+                      v-for="loc in locales"
+                      :key="loc.code"
+                      :to="switchLocalePath(loc.code)"
+                      class="btn btn-sm"
+                      :class="locale === loc.code ? 'btn-primary' : 'btn-ghost'"
+                    >
+                      {{ loc.code.toUpperCase() }}
+                    </NuxtLink>
+                  </div>
+                  <div class="font-semibold mb-2">{{ $t('common.theme') }}</div>
+                  <button class="btn btn-sm btn-ghost w-full justify-start" @click="toggleTheme">
+                    <Icon :name="theme === 'night' ? 'lucide:sun' : 'lucide:moon'" size="16" />
+                    {{ theme === 'night' ? $t('common.theme_light') : $t('common.theme_dark') }}
+                  </button>
+                </div>
+              </div>
+              <template v-if="sessionChecked">
+                <template v-if="isLoggedIn">
+                  <div class="dropdown dropdown-end">
+                    <div
+                      tabindex="0"
+                      role="button"
+                      class="w-8 h-8 rounded-full overflow-hidden ring-2 ring-white/20 hover:ring-white/40 transition-all cursor-pointer"
+                    >
+                      <div v-if="userAvatarSvg" v-html="userAvatarSvg" class="w-full h-full" />
+                      <div v-else class="w-full h-full flex items-center justify-center font-bold text-xs bg-white/20 text-white">
+                        {{ userInitials }}
+                      </div>
+                    </div>
+                    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg border border-base-300">
+                      <li class="menu-title"><span>{{ userName }}</span></li>
+                      <li>
+                        <NuxtLink :to="localePath('/clientarea/profile')">
+                          <Icon name="lucide:user" size="16" />
+                          {{ $t('dashboard.profile') }}
+                        </NuxtLink>
+                      </li>
+                      <div class="divider my-1"></div>
+                      <li>
+                        <a @click="onClickSignOut" class="text-error">
+                          <Icon name="lucide:log-out" size="16" />
+                          {{ $t('auth.logout') }}
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </template>
+                <template v-else>
+                  <button
+                    @click="signIn()"
+                    class="px-4 py-1.5 rounded-full text-sm font-medium bg-white/20 text-white hover:bg-white/30 transition-colors"
+                  >
+                    {{ $t('auth.login') }}
+                  </button>
+                </template>
+              </template>
+            </div>
+          </div>
+
+          <!-- Centered search area -->
+          <div class="w-full max-w-2xl" :class="{ 'mt-0': heroExpanded, '-mt-4': !heroExpanded }">
+            <!-- Big title (only when expanded) -->
+            <div
+              class="text-center mb-8 transition-all duration-200"
+              :style="{ opacity: heroExpanded ? 1 : 0, transform: heroExpanded ? 'translateY(0)' : 'translateY(-20px)' }"
+            >
+              <h1 class="text-4xl lg:text-5xl font-bold text-white mb-3">
+                {{ $t('hero.title', 'Оптовая торговля') }}
+              </h1>
+              <p class="text-lg text-white/70">
+                {{ $t('hero.subtitle', 'Найдите лучших поставщиков и товары') }}
+              </p>
+            </div>
+
+            <!-- Search input (always visible, centered) -->
+            <div
+              class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/90 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+              @click="focusHeroInput"
+            >
+              <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
+              <input
+                ref="heroInputRef"
+                v-model="searchQuery"
+                type="text"
+                :placeholder="$t('catalog.search.placeholder')"
+                class="flex-1 min-w-32 bg-transparent outline-none text-lg text-base-content placeholder:text-base-content/50"
+                @keyup.enter="navigateToCatalog"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Regular Fixed Header (for non-home pages) -->
+    <template v-else>
+      <div class="fixed top-0 left-0 right-0 z-40" :style="headerStyle">
+        <MainNavigation
+          :session-checked="sessionChecked"
+          :logged-in="isLoggedIn"
+          :user-avatar-svg="userAvatarSvg"
+          :user-name="userName"
+          :user-initials="userInitials"
+          :theme="theme"
+          :user-data="userData"
+          :is-seller="isSeller"
+          :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"
+          :glass-style="isCatalogSection"
+          @toggle-theme="toggleTheme"
+          @set-catalog-mode="setCatalogMode"
+          @sign-out="onClickSignOut"
+          @sign-in="signIn()"
+          @switch-team="switchToTeam"
+          @start-select="startSelect"
+          @cancel-select="cancelSelect"
+          @edit-token="editFilter"
+          @remove-token="removeFilter"
+          @update:search-query="searchQuery = $event"
+          @update-quantity="setQuantity"
+          @search="onSearch"
+        />
+
+        <SubNavigation
+          v-if="!isCatalogSection"
+          :section="currentSection"
+        />
+      </div>
+    </template>
 
     <!-- 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">
@@ -57,6 +208,10 @@ 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()
 
 // Catalog search state
 const {
@@ -80,6 +235,28 @@ const {
 // Collapsible header for catalog pages
 const { headerOffset, isCollapsed } = useScrollCollapse(100)
 
+// Hero scroll for home page
+const {
+  heroHeight,
+  collapseProgress,
+  isCollapsed: heroIsCollapsed,
+  collapsedHeight
+} = useHeroScroll()
+
+// Hero input ref
+const heroInputRef = ref<HTMLInputElement>()
+const focusHeroInput = () => {
+  heroInputRef.value?.focus()
+}
+
+// Navigate to catalog on enter
+const navigateToCatalog = () => {
+  router.push(localePath('/catalog'))
+}
+
+// Hero expanded state (not fully collapsed)
+const heroExpanded = computed(() => collapseProgress.value < 0.5)
+
 // Theme state
 const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')
 
@@ -148,13 +325,21 @@ const headerStyle = computed(() => {
   return { transform: `translateY(${headerOffset.value}px)` }
 })
 
+// Hero style for home page - height changes on scroll
+const heroStyle = computed(() => {
+  return {
+    height: `${heroHeight.value}px`,
+    minHeight: `${collapsedHeight}px`
+  }
+})
+
 // Main content padding-top to compensate for fixed header
 // For catalog section: no padding - map extends behind header
-// 100px = MainNav with search (input + chips)
+// Home page: hero height (dynamic)
 // 154px = MainNav + SubNav (orders, seller, settings)
 const mainStyle = computed(() => {
   if (isCatalogSection.value) return { paddingTop: '0' }
-  if (isHomePage.value) return { paddingTop: '100px' }
+  if (isHomePage.value) return { paddingTop: `${heroHeight.value}px` }
   return { paddingTop: '154px' }
 })
 
@@ -252,8 +437,6 @@ const toggleTheme = () => {
 }
 
 // Search handler for Quote mode - triggers search via shared state
-const localePath = useLocalePath()
-const router = useRouter()
 const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
 const onSearch = () => {
   // Navigate to catalog page if not there
diff --git a/i18n/locales/en/hero.json b/i18n/locales/en/hero.json
new file mode 100644
index 0000000..400d149
--- /dev/null
+++ b/i18n/locales/en/hero.json
@@ -0,0 +1,6 @@
+{
+  "hero": {
+    "title": "Wholesale Trading",
+    "subtitle": "Find the best suppliers and products"
+  }
+}
diff --git a/i18n/locales/ru/hero.json b/i18n/locales/ru/hero.json
new file mode 100644
index 0000000..cbb6215
--- /dev/null
+++ b/i18n/locales/ru/hero.json
@@ -0,0 +1,6 @@
+{
+  "hero": {
+    "title": "Оптовая торговля",
+    "subtitle": "Найдите лучших поставщиков и товары"
+  }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 3450dde..6219671 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -20,7 +20,7 @@ export default defineNuxtConfig({
     defaultLocale: 'ru',
     // @ts-expect-error lazy is a valid option but missing from types
     lazy: true,
-    langDir: 'locales',
+    langDir: 'i18n/locales',
     locales: [
       {
         code: 'ru',
@@ -55,6 +55,7 @@ export default defineNuxtConfig({
           'ru/footer.json',
           'ru/ganttTimeline.json',
           'ru/goods.json',
+          'ru/hero.json',
           'ru/howto.json',
           'ru/kyc.json',
           'ru/kycOverview.json',
@@ -117,6 +118,7 @@ export default defineNuxtConfig({
           'en/footer.json',
           'en/ganttTimeline.json',
           'en/goods.json',
+          'en/hero.json',
           'en/howto.json',
           'en/kyc.json',
           'en/kycOverview.json',