From 6d9fd2a45819d4cfada8be61057fb6faca3fc7cf Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 13 Aug 2024 19:09:29 +0500
Subject: [PATCH] fixes, again todo sliders...

---
 .../img/pages/home/calc/chart_highlight.svg   | 12 +++
 .../img/pages/home/calc/numbers_highlight.svg | 12 +++
 src/app/blog/[postId]/page.tsx                |  2 +-
 src/app/layout.tsx                            |  2 +-
 src/components/Layout/Header.tsx              |  2 +-
 .../pages/BlogPage/RelevantSlider.tsx         |  2 +-
 .../pages/MainPage/Calculator/Calculator.tsx  | 54 ++++++------
 src/components/pages/MainPage/Clients.tsx     |  2 +-
 .../pages/MainPage/Demoversions.tsx           | 22 ++---
 .../pages/MainPage/ProjectManagment.tsx       | 10 ++-
 src/components/pages/MainPage/Projects.tsx    |  8 +-
 src/components/pages/MainPage/Showreel.tsx    | 44 +++-------
 src/components/pages/MainPage/Statistics.tsx  | 87 +++++++------------
 src/components/pages/MainPage/Technology.tsx  | 48 +++++-----
 src/components/pages/MainPage/Winners.tsx     | 10 +--
 src/consts/reviews.json                       |  4 +-
 src/hocs/ClassNameWrapper.tsx                 |  2 +-
 src/ui/LineThrow.tsx                          |  3 +-
 src/ui/SliderWithScaling.tsx                  | 57 +++++-------
 19 files changed, 179 insertions(+), 204 deletions(-)
 create mode 100644 public/img/pages/home/calc/chart_highlight.svg
 create mode 100644 public/img/pages/home/calc/numbers_highlight.svg

diff --git a/public/img/pages/home/calc/chart_highlight.svg b/public/img/pages/home/calc/chart_highlight.svg
new file mode 100644
index 00000000..8d2cdf7f
--- /dev/null
+++ b/public/img/pages/home/calc/chart_highlight.svg
@@ -0,0 +1,12 @@
+<svg width="512" height="264" viewBox="0 0 512 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_3520_15055)">
+<ellipse cx="71.3167" cy="236.909" rx="104.059" ry="67.6618" transform="rotate(-6.77723 71.3167 236.909)" fill="#5545AC"/>
+</g>
+<defs>
+<filter id="filter0_f_3520_15055" x="-380.328" y="-179.405" width="903.29" height="832.628" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="174" result="effect1_foregroundBlur_3520_15055"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/img/pages/home/calc/numbers_highlight.svg b/public/img/pages/home/calc/numbers_highlight.svg
new file mode 100644
index 00000000..6f38a268
--- /dev/null
+++ b/public/img/pages/home/calc/numbers_highlight.svg
@@ -0,0 +1,12 @@
+<svg width="256" height="132" viewBox="0 0 256 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_3856_6199)">
+<ellipse cx="212.927" cy="104.469" rx="104.059" ry="67.6618" transform="rotate(-6.77723 212.927 104.469)" fill="#5545AC"/>
+</g>
+<defs>
+<filter id="filter0_f_3856_6199" x="-238.718" y="-311.845" width="903.29" height="832.628" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="174" result="effect1_foregroundBlur_3856_6199"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/app/blog/[postId]/page.tsx b/src/app/blog/[postId]/page.tsx
index 5a7f16e7..e5394f97 100644
--- a/src/app/blog/[postId]/page.tsx
+++ b/src/app/blog/[postId]/page.tsx
@@ -28,7 +28,7 @@ export default function PostPage({
   return (
     post && (
       <>
-        <div className="lg:pt-[68px] sm:pb-7 lg:px-10 sm:px-6 sm:pt-[76px] pt-12 px-4 pb-4 flex max-lg:flex-col justify-between sm:gap-4 gap-y-8 border-b border-[#3D425C]">
+        <div className="sm:pb-7 pb-4 flex max-lg:flex-col justify-between sm:gap-4 gap-y-8 border-b border-[#3D425C]">
           <div className="min-w-[calc(25vw-56px)] flex lg:flex-col justify-between max-sm:flex-col-reverse gap-y-2">
             <div className="flex flex-wrap gap-3">
               {post.tags.map(tag => (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0dc397f0..5862a82a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
     <html lang="en">
       <body className="min-h-screen flex flex-col justify-between lg:px-6">
         <DynamicHeader />
-        <main className="flex-1 lg:pt-40">{children}</main>
+        <main className="flex-1 lg:pt-[140px]">{children}</main>
         <Feedback />
         <Footer />
         <ModalContainer />
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 1e6bb886..20690892 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -32,7 +32,7 @@ export function Header() {
     <header className="relative">
       <nav className="flex items-stretch justify-between border-b border-[#3D425C] lg:min-h-[72px] min-h-16 -mx-6">
         <div className="flex">
-          <div className="w-[25vw] lg:pl-10 pl-6 flex items-center">
+          <div className="w-[25vw] lg:pl-6 flex items-center">
             <Link href={'/'}>
               <ClassNameWrapper className="xl:hidden" element={<LogoIcon />} />
               {width >= 1280 && <LogoWithTextIcon />}
diff --git a/src/components/pages/BlogPage/RelevantSlider.tsx b/src/components/pages/BlogPage/RelevantSlider.tsx
index 9a32c167..5c845f0e 100644
--- a/src/components/pages/BlogPage/RelevantSlider.tsx
+++ b/src/components/pages/BlogPage/RelevantSlider.tsx
@@ -14,7 +14,7 @@ export function RelevantSlider() {
   const width = useWindowWidth();
 
   return (
-    <div className="lg:py-[70px] sm:pt-[66px] sm:pb-14 py-14 overflow-hidden">
+    <div className="lg:py-[70px] sm:pt-[66px] sm:pb-14 py-14 overflow-hidden lg:-mb-[82px] -mb-[96px]">
       <div className="flex justify-between sm:mb-10 mb-6 lg:px-10 sm:px-8 px-4">
         <h2 className="lg:h2 h1 font-medium flex">Похожие статьи</h2>
         <div className="flex gap-x-2 lg:py-1 self-end">
diff --git a/src/components/pages/MainPage/Calculator/Calculator.tsx b/src/components/pages/MainPage/Calculator/Calculator.tsx
index 1ddb0025..cd99ae11 100644
--- a/src/components/pages/MainPage/Calculator/Calculator.tsx
+++ b/src/components/pages/MainPage/Calculator/Calculator.tsx
@@ -178,12 +178,14 @@ export function Calculator() {
 
   return (
     <div className="bg-[url(/img/pages/home/stats/highlight.svg)d] bg-no-repeat bg-center border-t border-[#3D425C]">
-      <p className="accent font-medium py-16 max-w-screen-md m-auto">
-        Для прогнозирования экономического эффекта продукта мы изучили
-        отраслевую аналитику на рынке продаж новых квартир, отчеты об
-        использовании интерактивной презентации и собрали статистику за время
-        работы с застройщиками
-      </p>
+      <div className="grid grid-cols-4">
+        <p className="accent font-medium py-16 col-start-2 col-end-4 m-auto">
+          Для прогнозирования экономического эффекта продукта мы изучили
+          отраслевую аналитику на рынке продаж новых квартир, отчеты об
+          использовании интерактивной презентации и собрали статистику за время
+          работы с застройщиками
+        </p>
+      </div>
       <div className="grid grid-cols-12 grid-rows-3">
         <div className="flex flex-col items-stretch gap-y-12 col-span-3 row-span-full py-6 pr-4 border-y border-[#3D425C]">
           <Descriptor title="калькулятор эффективности" />
@@ -272,7 +274,7 @@ export function Calculator() {
             {(selectedRegion?.costPerSquare || 100).toLocaleString()}
           </p>
         </div>
-        <div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-2 row-end-3 border-[#3D425C] border-l border-b">
+        <div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-2 row-end-3 border-[#3D425C] border-l border-b bg-[url(/img/pages/home/calc/numbers_highlight.svg)] bg-no-repeat bg-cover">
           <p className="m-caption">Срок реализации</p>
           <p className="font-medium">
             <span className="accent">
@@ -285,7 +287,7 @@ export function Calculator() {
             </span>
           </p>
         </div>
-        <div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-3 border-[#3D425C] border-l border-b">
+        <div className="p-6 flex flex-col justify-between col-start-8 col-end-10 row-start-3 border-[#3D425C] border-l border-b bg-[url(/img/pages/home/calc/numbers_highlight.svg)] bg-no-repeat bg-cover">
           <p className="m-caption">Месячный доход</p>
           <p className="font-medium">
             <span className="accent">
@@ -295,53 +297,49 @@ export function Calculator() {
           </p>
         </div>
 
-        <div className="col-span-4 row-span-2 px-6 py-12 grid grid-cols-11 grid-rows-3 2xl:gap-3 sm:gap-1.5 gap-2 border-[#3D425C] border-l border-b">
-          <p className="l-text col-span-1 row-span-1 self-center">100%</p>
+        <div className="col-span-4 row-span-2 2xl:px-6 xl:px-3 py-12 grid grid-cols-11 grid-rows-3 2xl:gap-3 sm:gap-1.5 gap-2 border-[#3D425C] border-l border-b bg-[url(/img/pages/home/calc/chart_highlight.svg)] bg-no-repeat bg-cover">
+          <p className="m-text col-span-1 row-span-1 self-center">100%</p>
           <div className="bg-[#212431] rounded-full col-span-8">
             <div
-              className={`2xl:py-3.5 py-2 rounded-full w-full transition-all ${
+              className={`2xl:py-3.5 py-2 rounded-full w-full h-full flex justify-center items-center transition-all ${
                 isToolEnabled ? 'bg-gradient' : 'bg-[#52587A]'
               }`}
             >
-              <p className="text-center self-center">{consultations}</p>
+              <p>{consultations}</p>
             </div>
           </div>
-          <p className="l-caption text-[#8088A7] text-wrap col-span-2 self-center">
-            Консультаций в офисе
+          <p className="m-caption text-[#8088A7] text-wrap col-span-2 self-center">
+            Консультации
           </p>
-          <p className="l-text col-span-1 self-center">
+          <p className="m-text col-span-1 self-center">
             {isToolEnabled ? 42 : 30}%
           </p>
           <div className="bg-[#212431] rounded-full w-full col-span-8 flex justify-center">
             <div
-              className={`2xl:py-3.5 py-2 rounded-full transition-all ${
+              className={`2xl:py-3.5 py-2 rounded-full flex justify-center items-center transition-all ${
                 isToolEnabled ? 'w-[60%] bg-gradient' : 'w-[50%] bg-[#52587A]'
               }`}
             >
-              <p className="text-center self-center">
-                {isToolEnabled ? reservation : oldReservation}
-              </p>
+              <p>{isToolEnabled ? reservation : oldReservation}</p>
             </div>
           </div>
-          <p className="l-caption text-[#8088A7] text-wrap col-span-2 self-center">
-            Бронь квартиры
+          <p className="m-caption text-[#8088A7] text-wrap col-span-2 self-center">
+            Бронь
           </p>
-          <p className="l-text col-span-1 self-center">
+          <p className="m-text col-span-1 self-center">
             {isToolEnabled ? 42 : 30}%
           </p>
           <div className="bg-[#212431] rounded-full w-full col-span-8 flex justify-center">
             <div
-              className={`2xl:py-3.5 py-2 rounded-full transition-all ${
+              className={`2xl:py-3.5 py-2 rounded-full flex justify-center items-center transition-all ${
                 isToolEnabled ? 'w-[60%] bg-gradient' : 'w-[50%] bg-[#52587A]'
               }`}
             >
-              <p className="text-center self-center">
-                {isToolEnabled ? sales : oldSales}
-              </p>
+              <p>{isToolEnabled ? sales : oldSales}</p>
             </div>
           </div>
-          <p className="l-caption text-[#8088A7] text-wrap col-span-2 self-center">
-            Продажа
+          <p className="m-caption text-[#8088A7] text-wrap col-span-2 self-center">
+            Продажи
           </p>
         </div>
 
diff --git a/src/components/pages/MainPage/Clients.tsx b/src/components/pages/MainPage/Clients.tsx
index e0ed1058..1f3be0dd 100644
--- a/src/components/pages/MainPage/Clients.tsx
+++ b/src/components/pages/MainPage/Clients.tsx
@@ -20,7 +20,7 @@ function MarqueeHalf() {
             key={client.src}
             alt=""
             fill
-            className="object-contain !relative"
+            className="!relative object-contain"
           />
         </div>
       ))}
diff --git a/src/components/pages/MainPage/Demoversions.tsx b/src/components/pages/MainPage/Demoversions.tsx
index 92f01610..b92ae7f4 100644
--- a/src/components/pages/MainPage/Demoversions.tsx
+++ b/src/components/pages/MainPage/Demoversions.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image';
 export function Demoversions() {
   return (
     <div className="pt-8 grid grid-cols-12 gap-x-4 border-t border-[#3D425C] mb-[200px]">
-      <Descriptor title="Демоверсии" className="mt-6 col-span-1" />
+      <Descriptor title="Демоверсии" className="mt-6 col-span-2 self-start" />
       <div className="col-start-4 col-span-9">
         <div className="grid grid-cols-3 gap-4 mb-10">
           <div className="space-y-[50px] p-6 bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-center bg-no-repeat">
@@ -25,40 +25,40 @@ export function Demoversions() {
           </div>
           <div className="space-y-[50px] p-6 bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-center bg-no-repeat">
             <Image
-              src={'/img/pages/home/demoversions/upside_towers.png'}
+              src={'/img/pages/home/demoversions/revolution_towers.png'}
               width={164}
               height={164}
               alt={''}
             />
             <div className="flex justify-between items-end">
               <div className="space-y-1">
-                <h4 className="h4 font-medium">Upside Towers</h4>
-                <p className="m-text">Россия, Москва</p>
+                <h4 className="h4 font-medium">Re:volution Towers</h4>
+                <p className="m-text">Россия, Екатеринбург</p>
               </div>
               <ArrowMoreIcon />
             </div>
           </div>
           <div className="space-y-[50px] p-6 bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-center bg-no-repeat">
             <Image
-              src={'/img/pages/home/demoversions/upside_towers.png'}
+              src={'/img/pages/home/demoversions/ayvasovsky.png'}
               width={164}
               height={164}
               alt={''}
             />
             <div className="flex justify-between items-end">
               <div className="space-y-1">
-                <h4 className="h4 font-medium">Upside Towers</h4>
-                <p className="m-text">Россия, Москва</p>
+                <h4 className="h4 font-medium">Айвазовский City</h4>
+                <p className="m-text">Россия, Тюмень</p>
               </div>
               <ArrowMoreIcon />
             </div>
           </div>
         </div>
-        <p className="col-span-6 max-w-screen-md accent font-medium">
-          Местоположение и устройство не имеют значения. Для демонстрации нужен
-          только интернет
-        </p>
       </div>
+      <p className="col-start-4 col-span-6 accent font-medium">
+        Местоположение и устройство не имеют значения. Для демонстрации нужен
+        только интернет
+      </p>
     </div>
   );
 }
diff --git a/src/components/pages/MainPage/ProjectManagment.tsx b/src/components/pages/MainPage/ProjectManagment.tsx
index 7e5f067c..b23da932 100644
--- a/src/components/pages/MainPage/ProjectManagment.tsx
+++ b/src/components/pages/MainPage/ProjectManagment.tsx
@@ -39,10 +39,12 @@ export function ProjectManagment() {
           alt={''}
           className="!relative"
         />
-        <p className="accent font-medium max-w-screen-md m-auto">
-          Полученный отчет позволяет сделать процесс демонстрации
-          жилого комплекса еще эффективнее
-        </p>
+        <div className="grid grid-cols-4">
+          <p className="accent font-medium m-auto col-start-2 col-end-4">
+            Полученный отчет позволяет сделать процесс демонстрации
+            жилого комплекса еще эффективнее
+          </p>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/pages/MainPage/Projects.tsx b/src/components/pages/MainPage/Projects.tsx
index 6134baa0..b195d5fe 100644
--- a/src/components/pages/MainPage/Projects.tsx
+++ b/src/components/pages/MainPage/Projects.tsx
@@ -11,8 +11,8 @@ import Link from 'next/link';
 export function Projects() {
   return (
     <div>
-      <div className="border-y border-[#3D425C] py-6 flex justify-between items-end">
-        <div className="space-y-6">
+      <div className="border-y border-[#3D425C] py-6 grid grid-cols-4">
+        <div className="space-y-6 col-start-1 col-span-2">
           <Descriptor title="Проекты" />
           <p className="accent font-medium max-w-[42vw]">
             За <span className="text-gradient">13 лет</span> работы мы
@@ -23,13 +23,13 @@ export function Projects() {
         </div>
         <Link
           href={'/projects'}
-          className="px-6 py-4 flex justify-between items-center rounded-full border border-[#3D425C] min-w-[23vw]"
+          className="px-6 py-4 flex justify-between items-center rounded-full border border-[#3D425C] col-start-4 self-end"
         >
           Все проекты{' '}
           <ClassNameWrapper className="w-8 h-8" element={<ArrowMoreIcon />} />
         </Link>
       </div>
-      <div className="py-20 grid grid-cols-12 grid-rows-[554px_286px_554px] gap-4">
+      <div className="py-20 grid grid-cols-12 grid-rows-[34.625vw_17.875vw_34.625vw] gap-4">
         <ProjectCard
           city="Москва"
           company="Upside Development"
diff --git a/src/components/pages/MainPage/Showreel.tsx b/src/components/pages/MainPage/Showreel.tsx
index 21a13cdc..2c5a1c58 100644
--- a/src/components/pages/MainPage/Showreel.tsx
+++ b/src/components/pages/MainPage/Showreel.tsx
@@ -4,11 +4,11 @@ import { LoadingIcon } from '@/components/icons/LoadingIcon';
 import { PauseIcon } from '@/components/icons/PauseIcon';
 import { PlayIcon } from '@/components/icons/PlayIcon';
 import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
+import { useHover } from 'usehooks-ts';
 
 export function Showreel() {
   const [isPlaying, setIsPlaying] = useState(true);
-  const [hovered, setHovered] = useState(false);
   const [isBuffering, setIsBuffering] = useState(false);
 
   function handleOnPlaying() {
@@ -22,28 +22,7 @@ export function Showreel() {
   const ref = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
 
-  const addMouseOut = useCallback(
-    () =>
-      ref.current?.addEventListener('mouseout', () => setHovered(isPlaying)),
-    [isPlaying],
-  );
-
-  const removeMouseOut = useCallback(
-    () =>
-      ref.current?.removeEventListener('mouseout', () => setHovered(isPlaying)),
-    [isPlaying],
-  );
-
-  useEffect(() => {
-    const video = ref.current;
-    video?.addEventListener('mouseover', () => setHovered(true));
-    addMouseOut();
-
-    return () => {
-      video?.removeEventListener('mouseover', () => setHovered(true));
-      removeMouseOut();
-    };
-  }, [isPlaying, addMouseOut, removeMouseOut]);
+  const hovered = useHover(ref);
 
   return (
     <div className="lg:mb-[200px]">
@@ -54,11 +33,11 @@ export function Showreel() {
           muted
           autoPlay
           loop
-          className={'w-full object-cover '}
+          className="w-full object-cover"
           onPlaying={handleOnPlaying}
           onWaiting={handleOnWaiting}
         />
-        {hovered && (
+        {(hovered || !isPlaying) && (
           <button
             onClick={() => {
               if (!isPlaying) {
@@ -69,13 +48,12 @@ export function Showreel() {
                 setIsPlaying(false);
               }
             }}
-            className="absolute z-30 mx-auto p-8 rounded-full border"
+            className="absolute z-10 mx-auto p-8 rounded-full border"
           >
-            {isPlaying ? (
-              <ClassNameWrapper className="w-10 h-10" element={<PauseIcon />} />
-            ) : (
-              <ClassNameWrapper className="w-10 h-10" element={<PlayIcon />} />
-            )}
+            <ClassNameWrapper
+              className="w-10 h-10"
+              element={isPlaying ? <PauseIcon /> : <PlayIcon />}
+            />
           </button>
         )}
 
@@ -92,7 +70,7 @@ export function Showreel() {
                 element={<LoadingIcon />}
               />
             </span>
-            <span className="">Загружаем шоурил...</span>
+            <span>Загружаем шоурил...</span>
           </div>
         </div>
       </div>
diff --git a/src/components/pages/MainPage/Statistics.tsx b/src/components/pages/MainPage/Statistics.tsx
index 24180b42..a271be6b 100644
--- a/src/components/pages/MainPage/Statistics.tsx
+++ b/src/components/pages/MainPage/Statistics.tsx
@@ -25,7 +25,7 @@ export function Statistics() {
             src={'/img/pages/home/stats/map.jpg'}
             alt={''}
             fill
-            className="!static object-cover"
+            className="!relative object-cover"
           />
         </div>
         <div className="col-span-1 py-10 flex flex-col justify-between border-b border-r border-[#3D425C]">
@@ -36,103 +36,82 @@ export function Statistics() {
           </p>
         </div>
         <div className="col-span-3 py-4 pl-4 gap-4 border-b border-[#3D425C] grid grid-cols-3 grid-rows-2">
-          <div className="p-6 aspect-[376/250] flex flex-col bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat">
+          <div className="p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat flex flex-col">
             <p className="m-text">
-              Конверсия из консультации в бронирование <br /> увеличивается на
+              Конверсия из консультации в бронирование увеличивается на
             </p>
-            <div className="flex flex-1 relative">
+            <div className="aspect-[328/158] relative bg-[url(/img/pages/home/stats/increasing.svg)] bg-[length:53.65%_77.53%] bg-[left_12.5%_bottom_2.5%] bg-no-repeat flex-1">
               <p
-                className="font-bold absolute -bottom-[5px] text-[#52587A]"
+                className="font-bold text-sm absolute -bottom-[5px] left-px text-[#52587A]"
                 style={{ fontFamily: manrope.style.fontFamily }}
               >
                 30%
               </p>
               <p
-                className="font-bold absolute top-[7px] left-[202px] text-[#798FFF]"
+                className="opacity-50 font-bold text-sm absolute top-[4.43%] left-[55.58%] text-[#798FFF]"
                 style={{ fontFamily: manrope.style.fontFamily }}
               >
                 48%
               </p>
-              <Image
-                src={'/img/pages/home/stats/increasing.svg'}
-                width="176"
-                height="122"
-                alt={''}
-                className="bottom-1 left-10 max-h-[122px] absolute"
-              />
-              <p className="h1 self-end absolute right-0">
-                18<span className="h3 font-medium">%</span>
+              <p className="h1 absolute font-medium bottom-0 right-0">
+                18<span className="h3">%</span>
               </p>
             </div>
           </div>
-          <div className="p-6 flex flex-col aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat">
+
+          <div className="p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat flex flex-col">
             <p className="m-text">
-              Конверсия из консультации в бронирование <br /> увеличивается на
+              Конверсия из консультации в бронирование увеличивается на
             </p>
-            <div className="flex flex-1 relative">
+            <div className="aspect-[328/158] relative bg-[url(/img/pages/home/stats/increasing.svg)] bg-[length:53.65%_77.53%] bg-[left_12.5%_bottom_2.5%] bg-no-repeat flex-1">
               <p
-                className="font-bold absolute -bottom-[5px] text-[#52587A]"
+                className="font-bold text-sm absolute -bottom-[5px] left-px text-[#52587A]"
                 style={{ fontFamily: manrope.style.fontFamily }}
               >
                 30%
               </p>
               <p
-                className="font-bold absolute top-[7px] left-[202px] text-[#798FFF]"
+                className="opacity-50 font-bold text-sm absolute top-[4.43%] left-[55.58%] text-[#798FFF]"
                 style={{ fontFamily: manrope.style.fontFamily }}
               >
                 42%
               </p>
-              <Image
-                src={'/img/pages/home/stats/increasing.svg'}
-                width="176"
-                height="122"
-                alt={''}
-                className="bottom-1 left-10 max-h-[122px] absolute"
-              />
-              <p className="h1 self-end absolute right-0">
-                12<span className="h3 font-medium">%</span>
+              <p className="h1 absolute font-medium bottom-0 right-0">
+                12<span className="h3">%</span>
               </p>
             </div>
           </div>
 
-          <div className="flex flex-col p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat overflow-hidden">
-            <p className="m-text">
-              Время реализации проекта <br /> сокращается до
-            </p>
-            <div className="relative flex h-full justify-end">
+          <div className="p-6 aspect-[376/250] bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat relative overflow-hidden flex flex-col">
+            <p className="m-text">Время реализации проекта сокращается до</p>
+            <div className="relative aspect-[328/158] flex items-end flex-1">
               <Image
                 src={'/img/pages/home/stats/building.png'}
-                width={85}
-                height={238}
                 alt={''}
-                className="absolute left-[23px] -bottom-6"
+                fill
+                className="max-w-[22.6%] max-h-[95.2%] ml-[7%] mt-[10%]"
               />
               <Image
                 src={'/img/pages/home/stats/building.png'}
-                width={85}
-                height={238}
-                className="absolute left-[79px] -bottom-[calc(50%-16px)]"
                 alt={''}
+                fill
+                className="max-w-[22.6%] max-h-[95.2%] ml-[24%] mt-[30.8%]"
               />
-              <p className="relative -bottom-0.5 h1 font-medium self-end">
-                2<span className="h3 font-medium"> раз</span>
+              <p className="absolute bottom-0 right-0 h1 font-medium">
+                2<span className="h3"> раз</span>
               </p>
             </div>
           </div>
-          <div className="flex flex-col justify-between p-6 aspect-[376/250] relative bg-[url(/img/pages/home/stats/highlight.svg)] bg-cover bg-no-repeat overflow-hidden">
+
+          <div className="p-6 aspect-[376/250] relative bg-[url(/img/pages/home/stats/highlight.svg),url(/img/pages/home/stats/adv.png)] bg-[length:100%,65%_75%] bg-[position:center,left_bottom] bg-no-repeat overflow-hidden flex flex-col">
             <p className="m-text">
-              Время на подготовку рекламных <br /> материалов сокращается до
-            </p>
-            <Image
-              src={'/img/pages/home/stats/adv.png'}
-              width={263}
-              height={223}
-              alt={''}
-              className="absolute left-0 bottom-0"
-            />
-            <p className="h1 font-medium self-end">
-              4<span className="h3 font-medium"> раз</span>
+              Время на подготовку рекламных материалов сокращается до
             </p>
+            <div className="aspect-[328/158] relative flex-1">
+              <p className="h1 font-medium absolute bottom-0 right-0">
+                4<span className="h3"> раз</span>
+              </p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/pages/MainPage/Technology.tsx b/src/components/pages/MainPage/Technology.tsx
index 358e6665..210e0a0d 100644
--- a/src/components/pages/MainPage/Technology.tsx
+++ b/src/components/pages/MainPage/Technology.tsx
@@ -6,33 +6,37 @@ import Link from 'next/link';
 
 export function Technology() {
   return (
-    <div className="pt-1 flex flex-col items-center lg:max-w-screen-md m-auto">
+    <div className="flex flex-col items-center m-auto border-y border-[#3D425C]">
       <div className="h-[172px] flex flex-col items-center mb-[76px]">
         <div className="w-px bg-[#3D425C] flex-1" />
         <PlusIcon />
       </div>
-      <p className="accent mb-16 font-medium">
-        Уникальная технология удаленной демонстрации дает возможность
-        презентовать объект покупателю из любой точки мира
-      </p>
-      <Image
-        src={'/img/pages/home/technology/Content.png'}
-        fill
-        alt={''}
-        className="!relative max-w-screen-md max-h-[417px] mb-10 rounded-lg border-[7.31px][border-image:linear-gradient(360deg,#14161F,#ffffff)_3_linear-gradient(360deg,#282A33,#32343D)_3]"
-      />
-      <div className="flex justify-between items-start">
-        <h4 className="h4 font-medium w-2/3">
-          Высокий уровень графики и полное погружение покупателя в процесс
-          выбора квартиры
-        </h4>
-        <Link href={'/'} className="flex gap-1 items-center">
-          <p className="btn-text font-medium text-[#9299BD]">О технологии</p>
-          <ClassNameWrapper
-            className="text-[#9299BD]"
-            element={<ArrowMoreIcon />}
+      <div className="grid grid-cols-4">
+        <p className="accent mb-16 font-medium col-start-2 col-end-4">
+          Уникальная технология удаленной демонстрации дает возможность
+          презентовать объект покупателю из любой точки мира
+        </p>
+        <div className="col-start-2 col-end-4 rounded-lg [box-shadow:1.04px_1.04px_4.18px_0px_rgba(45,79,0,0.3)]">
+          <Image
+            src={'/img/pages/home/technology/Content.png'}
+            fill
+            alt={''}
+            className="!relative rounded-lg border-[8.36px] border-transparent [background:linear-gradient(72.18deg,#575A6C_1.53%,#616476_98.43%)_border-box] [-webkit-mask:linear-gradient(#fff_0_0)_padding-box,linear-gradient(#fff_0_0)] [-webkit-mask-composite:xor]"
           />
-        </Link>
+        </div>
+        <div className="flex justify-between items-start col-start-2 col-end-4 mt-10">
+          <h4 className="h4 font-medium w-2/3">
+            Высокий уровень графики и полное погружение покупателя в процесс
+            выбора квартиры
+          </h4>
+          <Link href={'/'} className="flex gap-1 items-center">
+            <p className="btn-text font-medium text-[#9299BD]">О технологии</p>
+            <ClassNameWrapper
+              className="text-[#9299BD]"
+              element={<ArrowMoreIcon />}
+            />
+          </Link>
+        </div>
       </div>
       <div className="h-[172px] flex flex-col items-center mt-[76px]">
         <PlusIcon />
diff --git a/src/components/pages/MainPage/Winners.tsx b/src/components/pages/MainPage/Winners.tsx
index b3dd347b..c3200427 100644
--- a/src/components/pages/MainPage/Winners.tsx
+++ b/src/components/pages/MainPage/Winners.tsx
@@ -6,8 +6,8 @@ import Link from 'next/link';
 
 export function Winners() {
   return (
-    <div className="m-auto max-w-screen-md py-40 space-y-4">
-      <Title className="text-[96px]">
+    <div className="grid grid-cols-4 py-40 gap-y-4">
+      <Title className="text-[96px] col-start-2 col-span-2">
         <span className="text-gradient block">Победители</span>
         <span className="text-gradient text-right block">BuildUP 2023</span>
         <span className="block">в номинации IT</span>
@@ -15,15 +15,15 @@ export function Winners() {
       <Image
         src={'/img/pages/home/winners/nomination.png'}
         fill
-        className="!relative"
+        className="!relative col-start-2 col-span-2"
         alt={''}
       />
-      <p className="accent font-medium mb-2">
+      <p className="accent font-medium mb-2 col-start-2 col-span-2">
         В 2023 году наш продукт для застройщиков GRAFF.estate был признан лучшим
         в категории IT на Акселераторе технологических стартапов от лидеров в
         строительстве и девелопменте Build UP от Фонда «Сколково»
       </p>
-      <Link href={'/'} className="flex gap-x-1 py-2 w-fit">
+      <Link href={'/'} className="flex gap-x-1 py-2 w-fit col-start-2">
         <p className="text-[#9299BD] font-medium btn-text self-center">
           Как это было
         </p>
diff --git a/src/consts/reviews.json b/src/consts/reviews.json
index e1fd8dd9..f3e44b3c 100644
--- a/src/consts/reviews.json
+++ b/src/consts/reviews.json
@@ -1,7 +1,7 @@
 [
   {
     "image": "/img/pages/home/reviews/1.png",
-    "text": "«Эффективность инструмента была подтверждена буквально в первый день после его внедрения.»",
+    "text": "«Эффективность инструмента была подтверждена буквально в первый день после его внедрения»",
     "author": "Егор Бобров, Коммерческий директор авторского квартала «Машаров»"
   },
   {
@@ -11,7 +11,7 @@
   },
   {
     "image": "/img/pages/home/reviews/3.jpg",
-    "text": "«Одним из преимуществ инструмента является возможность посмотреть 3D-модель квартиры с готовым дизайнерским ремонтом и оценить видовые характеристиками, изменяя время суток (день или ночь)»",
+    "text": "«Клиенты особенно ценят возможность легко выбрать квартиру с помощью 3D-модель жилого комплекса»",
     "author": "Алина Веселова, Ведущий специалист отдела продаж"
   }
 ]
diff --git a/src/hocs/ClassNameWrapper.tsx b/src/hocs/ClassNameWrapper.tsx
index 815a73d2..0a89b282 100644
--- a/src/hocs/ClassNameWrapper.tsx
+++ b/src/hocs/ClassNameWrapper.tsx
@@ -16,7 +16,7 @@ export function ClassNameWrapper({ element, className }: Props) {
     ref.current?.children
       .item(0)
       ?.classList.add(...className.split(' ').filter(Boolean));
-  }, [className]);
+  }, [className, element]);
 
   return <div ref={ref}>{element}</div>;
 }
diff --git a/src/ui/LineThrow.tsx b/src/ui/LineThrow.tsx
index 773e8089..d6048fb4 100644
--- a/src/ui/LineThrow.tsx
+++ b/src/ui/LineThrow.tsx
@@ -6,9 +6,8 @@ export function LineThrow({
 }: PropsWithChildren<{ className?: string }>) {
   return (
     <span
-      className={`line-through decoration-white text-[#52587A] + ${className}`}
+      className={'line-through decoration-white text-[#52587A]' + className}
     >
-      {' '}
       {children}
     </span>
   );
diff --git a/src/ui/SliderWithScaling.tsx b/src/ui/SliderWithScaling.tsx
index 1ad513b3..3e494ffe 100644
--- a/src/ui/SliderWithScaling.tsx
+++ b/src/ui/SliderWithScaling.tsx
@@ -37,15 +37,18 @@ export function SliderWithScaling<T>({
   const [itemRef, scale] = useAnimate<HTMLDivElement>();
 
   const [slide, setSlide] = useState(0);
+  const [sliderOffset, setSliderOffset] = useState(baseoffset);
 
   const [order, dispatch] = useReducer(
     (state: typeof slides, action: 'prev' | 'next') => {
       switch (action) {
         case 'prev':
           setSlide(slide => (slide === 0 ? slides.length - 1 : slide - 1));
+          setSliderOffset(2 * baseoffset);
           return [state[state.length - 3], ...state.slice(0, -1)];
         case 'next':
           setSlide(slide => (slide === slides.length - 1 ? 0 : slide + 1));
+          setSliderOffset(0);
           return [...state.slice(1), state[2]];
         default:
           return state;
@@ -54,13 +57,6 @@ export function SliderWithScaling<T>({
     [slides[slides.length - 1], ...slides, slides[0]],
   );
 
-  useEffect(() => {
-    console.log(
-      sliderRef.current.children.item(0)?.children.item(0)?.clientWidth,
-      sliderRef.current.children.item(0)?.children.item(0)?.clientHeight,
-    );
-  }, [sliderRef]);
-
   const nextSlide = async () => {
     await scale(
       itemRef.current!,
@@ -69,23 +65,21 @@ export function SliderWithScaling<T>({
         minHeight,
       },
       { duration: 0.5 },
-    ).then(() => {
-      dispatch('next');
-    });
-    await move(
-      sliderRef.current!,
-      { transform: `translateX(0px)` },
-      { duration: 0.000001 },
-    );
-    await move(
-      sliderRef.current!,
-      {
-        transform: `translateX(${baseoffset}px)`,
-      },
-      {
-        duration: 0.5,
-      },
-    );
+    )
+      .then(async () => {
+        dispatch('next');
+        console.log(sliderOffset);
+        move(
+          sliderRef.current!,
+          {
+            transform: `translateX(${baseoffset}px)`,
+          },
+          {
+            duration: 0.5,
+          },
+        );
+      })
+      .then(() => setSliderOffset(baseoffset));
   };
 
   const prevSlide = async () => {
@@ -96,14 +90,7 @@ export function SliderWithScaling<T>({
         minHeight,
       },
       { duration: 0.5 },
-    ).then(() => {
-      dispatch('prev');
-    });
-    await move(
-      sliderRef.current!,
-      { transform: `translateX(${2 * baseoffset}px)` },
-      { duration: 0.000001 },
-    );
+    ).then(() => dispatch('prev'));
     await move(
       sliderRef.current!,
       {
@@ -123,6 +110,10 @@ export function SliderWithScaling<T>({
     touchEventOptions: { passive: false },
   });
 
+  useEffect(() => {
+    console.log(sliderRef.current.style.transform);
+  }, [sliderRef]);
+
   return (
     <div className={'flex flex-col relative ' + className}>
       <div className="flex items-center justify-between mb-10">
@@ -133,7 +124,7 @@ export function SliderWithScaling<T>({
           <motion.div
             ref={sliderRef}
             className={`flex items-${alignItems} gap-x-4 -mr-6 relative select-none`}
-            initial={{ transform: `translateX(${baseoffset}px)` }}
+            style={{ transform: `translateX(${sliderOffset}px)` }}
           >
             {order.map((slide, index) => (
               <SlideElement