From bd7a1d1b4bb3e5bb01bd73143fdd713eaf67ff3b Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 16:54:00 +0700
Subject: [PATCH] Homepage: magazine layout with text blocks, quotes, spacing

- Added spacer after hero nav
- Section headers with decorative lines
- Mixed photo cards with text-only blocks
- Full-width testimonial/quote section
- Asymmetric grid layouts
- Dashed border stats card for variety
- Gradient CTA section at bottom
- Better visual rhythm and breathing room
---
 app/pages/index.vue | 239 +++++++++++++++++++++++++++++---------------
 1 file changed, 158 insertions(+), 81 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 96972ef..de52621 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,145 +1,222 @@
 <template>
   <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">
+    <!-- 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-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-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 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>
 
-        <!-- 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>
+        <!-- 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>
 
-        <!-- 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-110 transition-transform duration-500"
-          />
-          <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>
+          <!-- 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>
 
-        <!-- Producers card (6 cols, 2 rows) -->
-        <div class="col-span-12 md:col-span-6 row-span-2 relative overflow-hidden rounded-2xl group">
+    <!-- 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-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 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-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">
+            <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" size="14" class="text-violet-400" />
+                <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" size="14" class="text-violet-400" />
+                <Icon name="lucide:check-circle" size="18" class="text-violet-400" />
                 {{ $t('roles.producers.benefit2') }}
               </li>
             </ul>
-            <button class="btn btn-sm bg-violet-500 hover:bg-violet-600 border-0 text-white w-fit">
+            <button class="btn bg-violet-500 hover:bg-violet-600 border-0 text-white w-fit">
               {{ $t('roles.producers.cta') }}
             </button>
           </div>
         </div>
 
-        <!-- 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" />
+        <!-- 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>
-            <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">
+        <!-- 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 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 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-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">
+            <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>
 
-        <!-- 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>
+        <!-- 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/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">
+        <!-- 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-110 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-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 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">