From ffe76e9e2b2dc8dc1c0c08726e9f72d9fdcbbe1d Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 10 Jun 2026 14:01:00 +0100
Subject: [PATCH] feat(hero): change HeroSlider transition from vertical to
 horizontal

Track now translates on X axis; nav dots unified to bottom row on all breakpoints.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/sections/HeroSlider.tsx | 38 ++++++--------------------
 1 file changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/components/sections/HeroSlider.tsx b/src/components/sections/HeroSlider.tsx
index 9552249..3ef0aa7 100644
--- a/src/components/sections/HeroSlider.tsx
+++ b/src/components/sections/HeroSlider.tsx
@@ -110,20 +110,20 @@ export function HeroSlider({ slides: slidesProp }: { slides?: SlideData[] }) {
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
-      {/* ── Slides track — vertical ── */}
+      {/* ── Slides track — horizontal ── */}
       <div
-        className="absolute inset-x-0 top-0 will-change-transform"
+        className="absolute inset-y-0 left-0 will-change-transform"
         style={{
-          height: `${slides.length * 100}%`,
-          transform: `translateY(-${(current / slides.length) * 100}%)`,
+          width: `${slides.length * 100}%`,
+          transform: `translateX(-${(current / slides.length) * 100}%)`,
           transition: 'transform 0.85s cubic-bezier(0.77,0,0.18,1)',
         }}
       >
         {slides.map((s, i) => (
           <div
             key={i}
-            className="absolute inset-x-0"
-            style={{ top: `${(i / slides.length) * 100}%`, height: `${100 / slides.length}%` }}
+            className="absolute inset-y-0"
+            style={{ left: `${(i / slides.length) * 100}%`, width: `${100 / slides.length}%` }}
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
@@ -221,30 +221,8 @@ export function HeroSlider({ slides: slidesProp }: { slides?: SlideData[] }) {
         </div>
       </div>
 
-      {/* ── Vertical nav dots (desktop) ── */}
-      <div className="absolute top-1/2 right-5 z-30 hidden -translate-y-1/2 flex-col gap-3 lg:flex">
-        {slides.map((_, i) => (
-          <button
-            key={i}
-            aria-label={`Слайд ${i + 1}`}
-            onClick={() => goTo(i)}
-            className="flex h-8 w-8 items-center justify-center"
-          >
-            <span
-              className="block rounded-full transition-all duration-300"
-              style={{
-                width: i === current ? 10 : 6,
-                height: i === current ? 10 : 6,
-                backgroundColor: i === current ? '#f28b4a' : 'rgba(255,255,255,0.55)',
-                boxShadow: i === current ? '0 0 0 2px rgba(242,139,74,0.4)' : 'none',
-              }}
-            />
-          </button>
-        ))}
-      </div>
-
-      {/* ── Mobile dots (bottom) ── */}
-      <div className="absolute bottom-4 left-1/2 z-30 flex -translate-x-1/2 gap-2 lg:hidden">
+      {/* ── Nav dots (bottom, all breakpoints) ── */}
+      <div className="absolute bottom-5 left-1/2 z-30 flex -translate-x-1/2 gap-2 lg:bottom-6 lg:gap-3">
         {slides.map((_, i) => (
           <button
             key={i}