From 3a46cfc5dcdcc0dde29c20ac7635659bdd0347b6 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 16:42:23 +0700
Subject: [PATCH] Homepage: bento magazine layout + dark footer with offices by
 continent

- Bento grid with varied card sizes (8-col hero, 4-col stats, 3-col roles)
- Stats cards with gradient backgrounds (500+ suppliers, 24/7 support)
- Dark footer with countries by continent (Europe, CIS, Asia, Americas)
- Office locations (Dubai HQ, Amsterdam, Moscow)
- Quick links for products, services, company, legal
- Security badges in bottom bar
---
 app/pages/index.vue | 392 ++++++++++++++++++++++++++++++++------------
 1 file changed, 291 insertions(+), 101 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5de44b9..96972ef 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,86 +1,66 @@
 <template>
-  <div class="space-y-16 pb-16">
-    <!-- How it works - Photo Glass Cards -->
-    <section class="container mx-auto px-4">
-      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
-        {{ $t('howto.title') }}
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <!-- Step 1: Search -->
-        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
+  <div class="pb-0">
+    <!-- Bento Grid: How it works + Who it's for - Magazine style -->
+    <section class="container mx-auto px-4 mb-16">
+      <div class="grid grid-cols-12 gap-4 auto-rows-[140px]">
+        <!-- Hero card: Search (large, spans 8 cols, 2 rows) -->
+        <div class="col-span-12 md:col-span-8 row-span-2 relative overflow-hidden rounded-2xl 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-500"
+            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/80 via-black/40 to-black/10" />
-          <div class="absolute inset-0 p-6 flex flex-col justify-end">
-            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
-              <Icon name="lucide:search" size="24" class="text-white" />
+          <div class="absolute inset-0 bg-gradient-to-tr from-black/90 via-black/50 to-transparent" />
+          <div class="absolute inset-0 p-8 flex flex-col justify-end">
+            <div class="flex items-center gap-3 mb-4">
+              <div class="w-14 h-14 rounded-2xl bg-emerald-500/30 backdrop-blur-sm flex items-center justify-center">
+                <Icon name="lucide:search" size="28" class="text-emerald-300" />
+              </div>
+              <span class="text-emerald-400 text-sm font-medium uppercase tracking-wider">{{ $t('howto.step', '01') }}</span>
             </div>
-            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step1.title') }}</h3>
-            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step1.description') }}</p>
+            <h3 class="text-3xl md:text-4xl font-bold text-white mb-2">{{ $t('howto.step1.title') }}</h3>
+            <p class="text-white/70 text-lg max-w-xl">{{ $t('howto.step1.description') }}</p>
           </div>
         </div>
 
-        <!-- Step 2: Compare -->
-        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
+        <!-- Stats card (4 cols, 1 row) -->
+        <div class="col-span-6 md:col-span-4 row-span-1 relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-600 to-purple-800 p-6 flex flex-col justify-center">
+          <div class="text-4xl font-black text-white mb-1">500+</div>
+          <div class="text-white/70 text-sm">{{ $t('stats.suppliers', 'Поставщиков') }}</div>
+        </div>
+
+        <!-- Mini card: Compare (4 cols, 1 row) -->
+        <div class="col-span-6 md:col-span-4 row-span-1 relative overflow-hidden rounded-2xl group cursor-pointer">
           <img
             src="/images/promo/compare.jpg"
             alt=""
-            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+            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-black/80 via-black/40 to-black/10" />
-          <div class="absolute inset-0 p-6 flex flex-col justify-end">
-            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
-              <Icon name="lucide:git-compare" size="24" class="text-white" />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-black/20" />
+          <div class="absolute inset-0 p-4 flex items-end">
+            <div class="flex items-center gap-2">
+              <div class="w-8 h-8 rounded-lg bg-cyan-500/40 backdrop-blur-sm flex items-center justify-center">
+                <Icon name="lucide:git-compare" size="16" class="text-cyan-200" />
+              </div>
+              <span class="text-white font-semibold text-sm">{{ $t('howto.step2.title') }}</span>
             </div>
-            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step2.title') }}</h3>
-            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step2.description') }}</p>
           </div>
         </div>
 
-        <!-- Step 3: Services -->
-        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
-          <img
-            src="/images/promo/services.jpg"
-            alt=""
-            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-          />
-          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
-          <div class="absolute inset-0 p-6 flex flex-col justify-end">
-            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
-              <Icon name="lucide:sparkles" size="24" class="text-white" />
-            </div>
-            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step3.title') }}</h3>
-            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step3.description') }}</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Who it's for - Photo Glass Cards with CTA -->
-    <section class="container mx-auto px-4">
-      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
-        {{ $t('roles.title') }}
-      </h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <!-- Producers -->
-        <div class="relative overflow-hidden rounded-2xl h-96 group">
+        <!-- Producers card (6 cols, 2 rows) -->
+        <div class="col-span-12 md:col-span-6 row-span-2 relative overflow-hidden rounded-2xl 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-500"
+            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/50 to-black/20" />
+          <div class="absolute inset-0 bg-gradient-to-t from-violet-900/95 via-violet-900/60 to-transparent" />
           <div class="absolute inset-0 p-6 flex flex-col justify-end">
             <div class="w-12 h-12 rounded-xl bg-violet-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
               <Icon name="lucide:factory" size="24" class="text-violet-200" />
             </div>
-            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.producers.title') }}</h3>
-            <p class="text-white/70 text-sm mb-4">{{ $t('roles.producers.description') }}</p>
+            <h3 class="text-2xl font-bold text-white mb-2">{{ $t('roles.producers.title') }}</h3>
+            <p class="text-white/70 text-sm mb-3">{{ $t('roles.producers.description') }}</p>
             <ul class="space-y-1 mb-4 text-sm">
               <li class="flex items-center gap-2 text-white/80">
                 <Icon name="lucide:check" size="14" class="text-violet-400" />
@@ -91,73 +71,283 @@
                 {{ $t('roles.producers.benefit2') }}
               </li>
             </ul>
-            <button class="btn btn-sm bg-violet-500 hover:bg-violet-600 border-0 text-white">
+            <button class="btn btn-sm bg-violet-500 hover:bg-violet-600 border-0 text-white w-fit">
               {{ $t('roles.producers.cta') }}
             </button>
           </div>
         </div>
 
-        <!-- Buyers -->
-        <div class="relative overflow-hidden rounded-2xl h-96 group">
+        <!-- Services card (3 cols, 2 rows) -->
+        <div class="col-span-6 md:col-span-3 row-span-2 relative overflow-hidden rounded-2xl group cursor-pointer">
+          <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 via-amber-900/40 to-transparent" />
+          <div class="absolute inset-0 p-5 flex flex-col justify-end">
+            <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 mb-1">{{ $t('howto.step3.title') }}</h3>
+            <p class="text-white/60 text-xs line-clamp-2">{{ $t('howto.step3.description') }}</p>
+          </div>
+        </div>
+
+        <!-- Buyers card (3 cols, 2 rows) -->
+        <div class="col-span-6 md:col-span-3 row-span-2 relative overflow-hidden rounded-2xl 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-500"
+            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/50 to-black/20" />
-          <div class="absolute inset-0 p-6 flex flex-col justify-end">
-            <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 class="absolute inset-0 bg-gradient-to-t from-cyan-900/95 via-cyan-900/50 to-transparent" />
+          <div class="absolute inset-0 p-5 flex flex-col justify-end">
+            <div class="w-10 h-10 rounded-xl bg-cyan-500/30 backdrop-blur-sm flex items-center justify-center mb-2">
+              <Icon name="lucide:building-2" size="20" class="text-cyan-200" />
             </div>
-            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.buyers.title') }}</h3>
-            <p class="text-white/70 text-sm mb-4">{{ $t('roles.buyers.description') }}</p>
-            <ul class="space-y-1 mb-4 text-sm">
-              <li class="flex items-center gap-2 text-white/80">
-                <Icon name="lucide:check" size="14" class="text-cyan-400" />
-                {{ $t('roles.buyers.benefit1') }}
-              </li>
-              <li class="flex items-center gap-2 text-white/80">
-                <Icon name="lucide:check" size="14" class="text-cyan-400" />
-                {{ $t('roles.buyers.benefit2') }}
-              </li>
-            </ul>
-            <button class="btn btn-sm bg-cyan-500 hover:bg-cyan-600 border-0 text-white">
+            <h3 class="text-lg font-bold text-white mb-1">{{ $t('roles.buyers.title') }}</h3>
+            <p class="text-white/60 text-xs mb-2">{{ $t('roles.buyers.description') }}</p>
+            <button class="btn btn-xs bg-cyan-500 hover:bg-cyan-600 border-0 text-white w-fit">
               {{ $t('roles.buyers.cta') }}
             </button>
           </div>
         </div>
 
-        <!-- Services -->
-        <div class="relative overflow-hidden rounded-2xl h-96 group">
+        <!-- Stats card 2 -->
+        <div class="col-span-6 md:col-span-3 row-span-1 relative overflow-hidden rounded-2xl bg-gradient-to-br from-rose-600 to-pink-700 p-5 flex flex-col justify-center">
+          <div class="text-3xl font-black text-white mb-1">24/7</div>
+          <div class="text-white/70 text-xs">{{ $t('stats.support', 'Поддержка') }}</div>
+        </div>
+
+        <!-- Partners/Services card (3 cols, 1 row) -->
+        <div class="col-span-6 md:col-span-3 row-span-1 relative overflow-hidden rounded-2xl 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-500"
+            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-black/90 via-black/50 to-black/20" />
-          <div class="absolute inset-0 p-6 flex flex-col justify-end">
-            <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 class="absolute inset-0 bg-gradient-to-t from-rose-900/90 to-rose-900/30" />
+          <div class="absolute inset-0 p-4 flex items-end">
+            <div class="flex items-center gap-2">
+              <div class="w-8 h-8 rounded-lg bg-rose-500/40 backdrop-blur-sm flex items-center justify-center">
+                <Icon name="lucide:handshake" size="16" class="text-rose-200" />
+              </div>
+              <span class="text-white font-semibold text-sm">{{ $t('roles.services.title') }}</span>
             </div>
-            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.services.title') }}</h3>
-            <p class="text-white/70 text-sm mb-4">{{ $t('roles.services.description') }}</p>
-            <ul class="space-y-1 mb-4 text-sm">
-              <li class="flex items-center gap-2 text-white/80">
-                <Icon name="lucide:check" size="14" class="text-rose-400" />
-                {{ $t('roles.services.benefit1') }}
-              </li>
-              <li class="flex items-center gap-2 text-white/80">
-                <Icon name="lucide:check" size="14" class="text-rose-400" />
-                {{ $t('roles.services.benefit2') }}
-              </li>
-            </ul>
-            <button class="btn btn-sm bg-rose-500 hover:bg-rose-600 border-0 text-white">
-              {{ $t('roles.services.cta') }}
-            </button>
           </div>
         </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>