webapp/app/pages/index.vue

<template>
  <div class="pb-0">
    <!-- Spacer after hero -->
    <div class="h-16 md:h-24" />

    <!-- Section: How it works -->
    <section class="container mx-auto px-4 mb-20">
      <!-- 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">
definePageMeta({
  layout: 'topnav'
})
</script>