From 0bf1c1071ab3359423cf90e64fab8301c418a687 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Wed, 29 Jan 2025 19:05:22 +0500
Subject: [PATCH] upd

---
 src/app/globals.css                           |   4 +
 src/components/pages/MainPage/Clients.tsx     |   2 +-
 .../MainPage/Presentation/Presentation.tsx    |   4 +-
 .../MainPage/Presentation/PresentationLG.tsx  |   2 +-
 .../MainPage/Presentation/PresentationMD.tsx  | 517 ++++++++++--------
 .../MainPage/Presentation/PresentationMd2.tsx | 333 +++++++++++
 .../MainPage/Presentation/VideoLayer.tsx      |  12 +-
 src/consts/presentation/videos.ts             |   8 +
 src/hooks/useScroll.ts                        |  15 +-
 src/ui/SeasonCard.tsx                         |   2 +-
 10 files changed, 661 insertions(+), 238 deletions(-)
 create mode 100644 src/components/pages/MainPage/Presentation/PresentationMd2.tsx
 create mode 100644 src/consts/presentation/videos.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index f085611b..e8006b7d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -145,6 +145,10 @@ body {
   @apply sm:text-[clamp(12px,12px+(100vw-360px)/1560*2,14px)] text-xs leading-none;
 }
 
+@utility text-gradient {
+  @apply bg-gradient-to-r from-[#798FFF] to-[#D375FF] bg-clip-text;
+}
+
 @keyframes infinite-scroll {
   0% {
     transform: translateX(0);
diff --git a/src/components/pages/MainPage/Clients.tsx b/src/components/pages/MainPage/Clients.tsx
index f4bee36c..8657a364 100644
--- a/src/components/pages/MainPage/Clients.tsx
+++ b/src/components/pages/MainPage/Clients.tsx
@@ -17,7 +17,7 @@ export function Clients() {
 
   return (
     <div className="lg:space-y-16 space-y-10 lg:mt-40 mt-[100px]">
-      <Title>
+      <Title className="mx-auto text-center max-w-2/3">
         <span className="text-gradient">
           {companies !== undefined && getCompaniesCount(companies.length)}
         </span>{' '}
diff --git a/src/components/pages/MainPage/Presentation/Presentation.tsx b/src/components/pages/MainPage/Presentation/Presentation.tsx
index fe6303ce..52814e00 100644
--- a/src/components/pages/MainPage/Presentation/Presentation.tsx
+++ b/src/components/pages/MainPage/Presentation/Presentation.tsx
@@ -1,11 +1,11 @@
 import { PresentationLG } from './PresentationLG';
-import { PresentationMD } from './PresentationMD';
+import { PresentationMd2 } from './PresentationMd2';
 
 export function Presentation() {
   return (
     <>
       <PresentationLG />
-      <PresentationMD />
+      <PresentationMd2 />
     </>
   );
 }
diff --git a/src/components/pages/MainPage/Presentation/PresentationLG.tsx b/src/components/pages/MainPage/Presentation/PresentationLG.tsx
index b858feab..5aa4243c 100644
--- a/src/components/pages/MainPage/Presentation/PresentationLG.tsx
+++ b/src/components/pages/MainPage/Presentation/PresentationLG.tsx
@@ -38,7 +38,7 @@ export function PresentationLG() {
         и увеличивают темпы продаж квартир в жилом комплексе
       </Title>
       <div className="h-[480vh]" ref={ref}>
-        <div className="gap-x-3 items-stretch h-[480vh] max-h-[80vh] overflow-hidden w-full transition-transform sticky grid grid-cols-6 grid-rows-1 duration-1000 top-24">
+        <div className="gap-x-3 items-stretch h-[480vh] max-h-[80vh] overflow-hidden w-full sticky grid grid-cols-6 grid-rows-1 duration-1000 top-24">
           <Searching slide={slide} />
           <AnimatePresence>{slide === 5 && <IntegrationCRM />}</AnimatePresence>
           <VideoLayer slide={slide} videoRefs={videoRefs} />
diff --git a/src/components/pages/MainPage/Presentation/PresentationMD.tsx b/src/components/pages/MainPage/Presentation/PresentationMD.tsx
index 54c11f50..cbb51cc2 100644
--- a/src/components/pages/MainPage/Presentation/PresentationMD.tsx
+++ b/src/components/pages/MainPage/Presentation/PresentationMD.tsx
@@ -1,10 +1,14 @@
 'use client';
 
 import { EmotionalIcon } from '@/components/icons/EmotionalIcon';
+import { Flat1 } from '@/components/icons/Flat1';
+import { Flat2 } from '@/components/icons/Flat2';
 import { KidsIcon } from '@/components/icons/KidsIcon';
 import { LocationIcon } from '@/components/icons/LocationIcon';
+import { MailIcon } from '@/components/icons/MailIcon';
 import { MetroIcon } from '@/components/icons/MetroIcon';
 import { NatureIcon } from '@/components/icons/NatureIcon';
+import { PhoneIcon } from '@/components/icons/PhoneIcon';
 import { SafetyIcon } from '@/components/icons/SafetyIcon';
 import { ShopIcon } from '@/components/icons/ShopIcon';
 import { SportIcon } from '@/components/icons/SportIcon';
@@ -12,235 +16,318 @@ import { StudyIcon } from '@/components/icons/StudyIcon';
 import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
 import { SeasonCard } from '@/ui/SeasonCard';
 import { SlideBadge } from '@/ui/SlideBadge';
+import { Title } from '@/ui/Title';
 import Image from 'next/image';
 
 export function PresentationMD() {
   return (
-    <div className="md:max-lg:block hidden space-y-[500px] h-[calc(auto+500px)]">
-      <div className="top-16 h-[80vh] sticky flex flex-col bg-[#0F1011]">
-        <video
-          src="/videos/pages/home/presentation/1_search.mp4"
-          loop
-          muted
-          playsInline
-        />
-        <div className="gap-x-3 flex flex-1">
-          <div className="p-6 rounded-2xl bg-radial-[at_100%_100%] from-[#7A7A7A66] backdrop-blur-[500px] to-transparent flex flex-col justify-between flex-1">
-            <p className="heading2 font-medium">Выбор квартиры на генплане</p>
-            <div className="space-y-4">
-              <div className="flex gap-6">
-                <ClassNameWrapper className="w-8 h-8">
-                  <EmotionalIcon />
-                </ClassNameWrapper>
-                <p className="text1 max-w-[60%]">
-                  Эмоциональное вовлечение пользователя в выбор квартиры
-                </p>
+    <div className="space-y-12 mt-25 md:max-lg:block hidden">
+      <Title>
+        Интерактивная презентация
+        <span className="text-gradient">
+          {' '}
+          улучшает опыт выбора недвижимости{' '}
+        </span>
+        и увеличивают темпы продаж квартир в жилом комплексе
+      </Title>
+      <div className="space-y-[100vh] h-[1200vh]">
+        <div className="top-0 pt-16 h-screen sticky flex flex-col bg-[#0F1011]">
+          <video
+            src="/videos/pages/home/presentation/1_search.mp4"
+            loop
+            muted
+            playsInline
+            autoPlay
+            className="flex-1"
+          />
+          <div className="gap-x-3 flex min-h-[30vh]">
+            <div className="p-6 rounded-2xl bg-radial-[at_100%_100%] from-[#7A7A7A66] backdrop-blur-[500px] to-transparent flex flex-col justify-between flex-1">
+              <p className="heading2 font-medium">Выбор квартиры на генплане</p>
+              <div className="space-y-4">
+                <div className="flex gap-6">
+                  <ClassNameWrapper className="w-8 h-8">
+                    <EmotionalIcon />
+                  </ClassNameWrapper>
+                  <p className="text1 max-w-[60%]">
+                    Эмоциональное вовлечение пользователя в выбор квартиры
+                  </p>
+                </div>
+                <div className="flex gap-6">
+                  <ClassNameWrapper className="w-8 h-8">
+                    <LocationIcon />
+                  </ClassNameWrapper>
+                  <p className="text1 max-w-[60%]">
+                    Удобство выбора расположения и видовых характеристик
+                  </p>
+                </div>
               </div>
-              <div className="flex gap-6">
-                <ClassNameWrapper className="w-8 h-8">
-                  <LocationIcon />
-                </ClassNameWrapper>
-                <p className="text1 max-w-[60%]">
-                  Удобство выбора расположения и видовых характеристик
-                </p>
+            </div>
+            <div className="p-6 rounded-2xl bg-radial-[at_100%_100%] from-[#7A7A7A66] backdrop-blur-[500px] to-transparent flex flex-col justify-between flex-1">
+              <p className="heading2 font-medium">Поиск по параметрам</p>
+              <div className="flex flex-wrap gap-2">
+                {[
+                  'Расположение',
+                  'Комнатность',
+                  'Стоимость',
+                  'Инсоляция',
+                  'Особенности планировки',
+                ].map((tag) => (
+                  <p
+                    key={tag}
+                    className="px-5 py-[11px] rounded-2xl border border-[#37393B] font-medium btnm"
+                  >
+                    {tag}
+                  </p>
+                ))}
               </div>
             </div>
           </div>
-          <div className="p-6 rounded-2xl bg-radial-[at_100%_100%] from-[#7A7A7A66] backdrop-blur-[500px] to-transparent flex flex-col justify-between flex-1">
-            <p className="heading2 font-medium">Поиск по параметрам</p>
-            <div className="flex flex-wrap gap-2">
+        </div>
+        <div className="top-0 pt-16 sticky flex flex-col bg-[#0F1011] h-screen">
+          <video
+            src="/videos/pages/home/presentation/2_3dtour.mp4"
+            loop
+            muted
+            playsInline
+            autoPlay
+            className="flex-1"
+          />
+          <div className="space-y-6 bg-[#0F1011]">
+            <p className="heading2 font-medium text-center">3D-тур</p>
+            <div className="grid items-stretch grid-cols-3 grid-rows-2 gap-2">
               {[
-                'Расположение',
-                'Комнатность',
-                'Стоимость',
-                'Инсоляция',
-                'Особенности планировки',
-              ].map((tag) => (
-                <p
-                  key={tag}
-                  className="px-5 py-[11px] rounded-2xl border border-[#37393B] font-medium btnm"
-                >
-                  {tag}
-                </p>
+                {
+                  title: 'Двор',
+                  src: '/img/pages/home/presentation/court.png',
+                },
+                {
+                  title: 'Места общего пользования',
+                  src: '/img/pages/home/presentation/mop.png',
+                },
+                {
+                  title: 'Квартиры',
+                  src: '/img/pages/home/presentation/flats.png',
+                },
+                {
+                  title: 'Паркинг',
+                  src: '/img/pages/home/presentation/parking.png',
+                },
+                {
+                  title: 'Коммерческие помещения',
+                  src: '/img/pages/home/presentation/office.png',
+                },
+              ].map((item) => (
+                <SlideBadge {...item} key={item.title} />
               ))}
             </div>
           </div>
         </div>
-      </div>
-      <div className="top-16 sticky flex flex-col bg-[#0F1011] pb-5">
-        <video
-          src="/videos/pages/home/presentation/2_3dtour.mp4"
-          loop
-          muted
-          playsInline
-          className="object-center"
-        />
-        <div className="space-y-6 bg-[#0F1011] aflex-1">
-          <p className="heading2 font-medium text-center">3D-тур</p>
-          <div className="grid items-stretch grid-cols-3 grid-rows-2 gap-2">
-            {[
-              {
-                title: 'Двор',
-                src: '/img/pages/home/presentation/court.png',
-              },
-              {
-                title: 'Места общего пользования',
-                src: '/img/pages/home/presentation/mop.png',
-              },
-              {
-                title: 'Квартиры',
-                src: '/img/pages/home/presentation/flats.png',
-              },
-              {
-                title: 'Паркинг',
-                src: '/img/pages/home/presentation/parking.png',
-              },
-              {
-                title: 'Коммерческие помещения',
-                src: '/img/pages/home/presentation/office.png',
-              },
-            ].map((item) => (
-              <SlideBadge {...item} key={item.title} />
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="top-16 sticky flex flex-col pb-5 bg-[#0F1011]">
-        <video
-          src="/videos/pages/home/presentation/3_infrastructure.mp4"
-          loop
-          muted
-          playsInline
-        />
-        <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid gap-y-7 grid-rows-[5fr_2fr] grid-cols-2">
-          <p className="heading2 font-medium">
-            Демонстрация инфраструктуры вокруг будущего комплекса
-          </p>
-          <p className="text1">
-            Режим «Инфраструктура» знакомит пользователя с перспективной
-            застройкой целого района. В зависимости от срока сдачи либо
-            функциональной нагрузки того или иного блока можно ввести выделение
-            цветом.
-          </p>
-          <div className="flex col-span-2 gap-[5px]">
-            <div className="w-18 h-18 aspect-square rounded-full bg-[#B5F54E] flex justify-center items-center">
-              <ClassNameWrapper className={'w-11 text-[#232425]'}>
-                <NatureIcon />
-              </ClassNameWrapper>
-            </div>
-            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
-              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
-                <KidsIcon />
-              </ClassNameWrapper>
-            </div>
-            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
-              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
-                <MetroIcon />
-              </ClassNameWrapper>
-            </div>
-            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
-              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
-                <ShopIcon />
-              </ClassNameWrapper>
-            </div>
-            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
-              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
-                <SportIcon />
-              </ClassNameWrapper>
-            </div>
-            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
-              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
-                <StudyIcon />
-              </ClassNameWrapper>
-            </div>
-            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
-              <ClassNameWrapper className="w-11 text-[#7A7A7A]">
-                <SafetyIcon />
-              </ClassNameWrapper>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="top-16 sticky flex flex-col bg-[#0F1011] pb-5">
-        <video
-          src="/videos/pages/home/presentation/4_insolation.mp4"
-          loop
-          muted
-          playsInline
-        />
-        <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid gap-y-[30px] grid-cols-2 grid-rows-[1fr_3fr] flex-1">
-          <p className="heading2 font-medium">Интерактивная инсоляция</p>
-          <p className="text1">
-            Клиент может наблюдать, как световое пятно перемещается в
-            зависимости от времени суток и сезона, поскольку солнечный свет
-            имеет физическое воздействие.
-          </p>
-          <div className="col-span-2 flex justify-between gap-x-[5px]">
-            {[
-              {
-                title: 'Лето',
-                src: '/img/pages/home/presentation/summer.png',
-              },
-              {
-                title: 'Зима',
-                src: '/img/pages/home/presentation/winter.png',
-              },
-              {
-                title: 'Осень',
-                src: '/img/pages/home/presentation/autumn.png',
-              },
-            ].map((item) => (
-              <SeasonCard
-                {...item}
-                key={item.title}
-                className="flex flex-col items-center justify-between flex-1"
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="top-16 sticky flex flex-col gap-16 pb-5 bg-[#0F1011]">
-        <video
-          src="/videos/pages/home/presentation/5_engine.mp4"
-          loop
-          muted
-          playsInline
-        />
-        <div className="space-y-6">
-          <p className="heading2 font-medium text-center">
-            Модуль инженерных систем
-          </p>
-          <div className="flex flex-1 gap-2">
-            {[
-              {
-                src: '/img/pages/home/presentation/ventilation.png',
-                title: 'Вентиляция',
-              },
-              {
-                src: '/img/pages/home/presentation/heating.png',
-                title: 'Отопление',
-              },
-              {
-                src: '/img/pages/home/presentation/facade.png',
-                title: 'Фасад',
-              },
-            ].map(({ src, title }) => (
-              <div
-                className="flex flex-col gap-16 items-stretch pt-5 pb-2 pl-4 pr-2 bg-[#37393B99] rounded-2xl flex-1"
-                key={title}
-              >
-                <p className="text1">{title}</p>
-                <div className="relative w-[calc(216/240*100%)] self-end">
-                  <Image
-                    src={src}
-                    fill
-                    alt={title}
-                    className="rounded-xl self-end !relative w-full h-full"
-                    sizes="100%"
-                  />
-                </div>
+        <div className="top-0 pt-16 sticky flex flex-col bg-[#0F1011] h-screen">
+          <video
+            src="/videos/pages/home/presentation/3_infrastructure.mp4"
+            loop
+            muted
+            playsInline
+            autoPlay
+            className="flex-1"
+          />
+          <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid gap-y-7 grid-rows-[5fr_2fr] grid-cols-2">
+            <p className="heading2 font-medium">
+              Демонстрация инфраструктуры вокруг будущего комплекса
+            </p>
+            <p className="text1">
+              Режим «Инфраструктура» знакомит пользователя с перспективной
+              застройкой целого района. В зависимости от срока сдачи либо
+              функциональной нагрузки того или иного блока можно ввести
+              выделение цветом.
+            </p>
+            <div className="flex col-span-2 gap-[5px]">
+              <div className="w-18 h-18 aspect-square rounded-full bg-[#B5F54E] flex justify-center items-center">
+                <ClassNameWrapper className={'w-11 text-[#232425]'}>
+                  <NatureIcon />
+                </ClassNameWrapper>
               </div>
-            ))}
+              <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+                <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                  <KidsIcon />
+                </ClassNameWrapper>
+              </div>
+              <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+                <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                  <MetroIcon />
+                </ClassNameWrapper>
+              </div>
+              <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+                <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                  <ShopIcon />
+                </ClassNameWrapper>
+              </div>
+              <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+                <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                  <SportIcon />
+                </ClassNameWrapper>
+              </div>
+              <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+                <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                  <StudyIcon />
+                </ClassNameWrapper>
+              </div>
+              <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+                <ClassNameWrapper className="w-11 text-[#7A7A7A]">
+                  <SafetyIcon />
+                </ClassNameWrapper>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="top-0 pt-16 sticky flex flex-col bg-[#0F1011]  h-screen">
+          <video
+            src="/videos/pages/home/presentation/4_insolation.mp4"
+            loop
+            muted
+            playsInline
+            autoPlay
+            className="flex-1"
+          />
+          <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid gap-y-[30px] grid-cols-2 grid-rows-[1fr_3fr]">
+            <p className="heading2 font-medium">Интерактивная инсоляция</p>
+            <p className="text1">
+              Клиент может наблюдать, как световое пятно перемещается в
+              зависимости от времени суток и сезона, поскольку солнечный свет
+              имеет физическое воздействие.
+            </p>
+            <div className="col-span-2 flex justify-between gap-x-[5px]">
+              {[
+                {
+                  title: 'Лето',
+                  src: '/img/pages/home/presentation/summer.png',
+                },
+                {
+                  title: 'Зима',
+                  src: '/img/pages/home/presentation/winter.png',
+                },
+                {
+                  title: 'Осень',
+                  src: '/img/pages/home/presentation/autumn.png',
+                },
+              ].map((item) => (
+                <SeasonCard
+                  {...item}
+                  key={item.title}
+                  className="flex flex-col items-center justify-between flex-1"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="top-0 pt-16 sticky flex flex-col  bg-[#0F1011] h-screen">
+          <video
+            src="/videos/pages/home/presentation/5_engine.mp4"
+            loop
+            muted
+            autoPlay
+            playsInline
+            className="flex-1"
+          />
+          <div className="space-y-6">
+            <p className="heading2 font-medium text-center">
+              Модуль инженерных систем
+            </p>
+            <div className="flex flex-1 gap-2">
+              {[
+                {
+                  src: '/img/pages/home/presentation/ventilation.png',
+                  title: 'Вентиляция',
+                },
+                {
+                  src: '/img/pages/home/presentation/heating.png',
+                  title: 'Отопление',
+                },
+                {
+                  src: '/img/pages/home/presentation/facade.png',
+                  title: 'Фасад',
+                },
+              ].map(({ src, title }) => (
+                <div
+                  className="flex flex-col gap-10 items-stretch pt-5 pb-2 pl-4 pr-2 bg-[#37393B99] rounded-2xl flex-1"
+                  key={title}
+                >
+                  <p className="text1">{title}</p>
+                  <div className="relative w-[calc(216/240*100%)] self-end">
+                    <Image
+                      src={src}
+                      fill
+                      alt={title}
+                      className="rounded-xl self-end !relative w-full h-full"
+                      sizes="100%"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col  bg-[#0F1011] sticky top-0 pt-16 h-screen">
+          <video
+            src="/videos/pages/home/presentation/6_reservation.mp4"
+            loop
+            muted
+            playsInline
+            autoPlay
+            className="flex-1"
+          />
+          <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid grid-cols-2">
+            <p className="heading2 font-medium">
+              Интеграция с CRM-системой застройщика
+            </p>
+            <div className="space-y-10">
+              <div className="space-y-4">
+                <div className="flex">
+                  <div className="w-12 h-12 rounded-lg bg-[#B5F54E] flex items-center text-black font-medium justify-center -rotate-[4deg] text1 shadow-[0_2px_10px_0_#00000033] z-[2]">
+                    2K
+                  </div>
+                  <div className="bg-[#37393B] rounded-lg right-2 relative shadow-[0_2px_10px_0_#00000033] z-[1]">
+                    <ClassNameWrapper className="w-12 h-12">
+                      <Flat1 />
+                    </ClassNameWrapper>
+                  </div>
+                  <div className="bg-[#37393B] rounded-lg -rotate-[4deg] right-4 relative shadow-[0_2px_10px_0_#00000033]">
+                    <ClassNameWrapper className="w-12 h-12">
+                      <Flat2 />
+                    </ClassNameWrapper>
+                  </div>
+                </div>
+                <p className="text1">
+                  Клиент всегда видит актуальные данные об интересующем его
+                  лоте, включая статус и стоимость.
+                </p>
+              </div>
+              <div className="space-y-4">
+                <div className="flex">
+                  <Image
+                    src={'/img/pages/home/presentation/vova.png'}
+                    width={48}
+                    height={48}
+                    alt="vovka"
+                    className="rounded-lg -rotate-[4deg] shadow-[0_2px_10px_0_#00000033] z-[2]"
+                  />
+                  <div className="rounded-lg bg-[#37393B] flex justify-center items-center relative right-2 w-12 h-12 shadow-[0_2px_10px_0_#00000033] z-[1]">
+                    <ClassNameWrapper className="w-[21px] h-[21px]">
+                      <MailIcon />
+                    </ClassNameWrapper>
+                  </div>
+                  <div className="rounded-lg bg-[#37393B] flex justify-center items-center relative right-4 -rotate-[4deg] w-12 h-12 shadow-[0_2px_10px_0_#00000033]">
+                    <ClassNameWrapper className="w-[21px] h-[21px]">
+                      <PhoneIcon />
+                    </ClassNameWrapper>
+                  </div>
+                </div>
+                <p className="text1">
+                  Инструмент продаж сам создаст карточку клиента в вашей
+                  CRM-системе и назначит ответственного менеджера.
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/pages/MainPage/Presentation/PresentationMd2.tsx b/src/components/pages/MainPage/Presentation/PresentationMd2.tsx
new file mode 100644
index 00000000..bad4ce0d
--- /dev/null
+++ b/src/components/pages/MainPage/Presentation/PresentationMd2.tsx
@@ -0,0 +1,333 @@
+'use client';
+
+import { EmotionalIcon } from '@/components/icons/EmotionalIcon';
+import { Flat1 } from '@/components/icons/Flat1';
+import { Flat2 } from '@/components/icons/Flat2';
+import { KidsIcon } from '@/components/icons/KidsIcon';
+import { LocationIcon } from '@/components/icons/LocationIcon';
+import { MailIcon } from '@/components/icons/MailIcon';
+import { MetroIcon } from '@/components/icons/MetroIcon';
+import { NatureIcon } from '@/components/icons/NatureIcon';
+import { PhoneIcon } from '@/components/icons/PhoneIcon';
+import { SafetyIcon } from '@/components/icons/SafetyIcon';
+import { ShopIcon } from '@/components/icons/ShopIcon';
+import { SportIcon } from '@/components/icons/SportIcon';
+import { StudyIcon } from '@/components/icons/StudyIcon';
+import { videos } from '@/consts/presentation/videos';
+import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
+import { useScroll } from '@/hooks/useScroll';
+import { SeasonCard } from '@/ui/SeasonCard';
+import { SlideBadge } from '@/ui/SlideBadge';
+import { Title } from '@/ui/Title';
+import Image from 'next/image';
+import { createRef, RefObject, useEffect, useRef, useState } from 'react';
+
+export function PresentationMd2() {
+  const [slide, setSlide] = useState(0);
+  const [videoRefs, setVideoRefs] = useState<RefObject<HTMLVideoElement>[]>([]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const scroll = useScroll(ref);
+
+  useEffect(() => setVideoRefs(videos.map(createRef<HTMLVideoElement>)), []);
+
+  useEffect(
+    () =>
+      setSlide(
+        Math.max(
+          0,
+          Math.min(
+            5,
+            Math.trunc(
+              (window.innerHeight - 388 - scroll) / (window.innerHeight + 199)
+            )
+          )
+        )
+      ),
+    [scroll]
+  );
+
+  useEffect(() => {
+    console.log(-scroll, window.innerHeight + 388);
+  }, [scroll]);
+
+  useEffect(() => {
+    videoRefs[slide]?.current?.play();
+  }, [slide, videoRefs]);
+
+  return (
+    <div className="mt-25 max-md:hidden lg:hidden">
+      <div className="space-y-12 sticky top-25">
+        <Title>
+          Интерактивная презентация{' '}
+          <span className="text-gradient">
+            улучшает опыт выбора недвижимости
+          </span>{' '}
+          и увеличивают темпы продаж квартир в жилом комплексе
+        </Title>
+        <div className="relative h-95">
+          {videos.map((video, index) => (
+            <video
+              key={video}
+              src={`/videos/pages/home/presentation/${video}.mp4`}
+              loop
+              muted
+              playsInline
+              ref={videoRefs[index]}
+              style={{
+                zIndex: videos.length - index,
+              }}
+              className={`absolute w-full h-full transition-opacity${
+                slide > index && index !== videos.length - 1 ? ' opacity-0' : ''
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-y-[100vh]" ref={ref}>
+        <div className="flex h-[348px] gap-3 sticky top-[calc(100vh-388px)]">
+          <div className="p-6 rounded-2xl bg-radial-[at_100%_100%] from-[#7A7A7A66] backdrop-blur-[500px] to-transparent flex flex-col justify-between flex-1">
+            <p className="heading2 font-medium">
+              1. Выбор квартиры на генплане
+            </p>
+            <div className="space-y-4">
+              <div className="flex gap-6">
+                <ClassNameWrapper className="w-8 h-8">
+                  <EmotionalIcon />
+                </ClassNameWrapper>
+                <p className="text1 max-w-[60%]">
+                  Эмоциональное вовлечение пользователя в выбор квартиры
+                </p>
+              </div>
+              <div className="flex gap-6">
+                <ClassNameWrapper className="w-8 h-8">
+                  <LocationIcon />
+                </ClassNameWrapper>
+                <p className="text1 max-w-[60%]">
+                  Удобство выбора расположения и видовых характеристик
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="p-6 rounded-2xl bg-radial-[at_100%_100%] from-[#7A7A7A66] backdrop-blur-[500px] to-transparent flex flex-col justify-between flex-1">
+            <p className="heading2 font-medium">Поиск по параметрам</p>
+            <div className="flex flex-wrap gap-2">
+              {[
+                'Расположение',
+                'Комнатность',
+                'Стоимость',
+                'Инсоляция',
+                'Особенности планировки',
+              ].map((tag) => (
+                <p
+                  key={tag}
+                  className="px-5 py-[11px] rounded-2xl border border-[#37393B] font-medium btnm"
+                >
+                  {tag}
+                </p>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="space-y-6 bg-[#0F1011] backdrop-blur-xs h-[348px] sticky top-[calc(100vh-388px)]">
+          <p className="heading2 font-medium text-center">2. 3D-тур</p>
+          <div className="grid items-stretch grid-cols-3 grid-rows-2 gap-2">
+            {[
+              {
+                title: 'Двор',
+                src: '/img/pages/home/presentation/court.png',
+              },
+              {
+                title: 'Места общего пользования',
+                src: '/img/pages/home/presentation/mop.png',
+              },
+              {
+                title: 'Квартиры',
+                src: '/img/pages/home/presentation/flats.png',
+              },
+              {
+                title: 'Паркинг',
+                src: '/img/pages/home/presentation/parking.png',
+              },
+              {
+                title: 'Коммерческие помещения',
+                src: '/img/pages/home/presentation/office.png',
+              },
+            ].map((item) => (
+              <SlideBadge {...item} key={item.title} />
+            ))}
+          </div>
+        </div>
+        <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid gap-7 grid-rows-[5fr_2fr] grid-cols-2 h-[348px] sticky top-[calc(100vh-388px)]">
+          <p className="heading2 font-medium">
+            3. Демонстрация инфраструктуры вокруг будущего комплекса
+          </p>
+          <p className="text1">
+            Режим «Инфраструктура» знакомит пользователя с перспективной
+            застройкой целого района. В зависимости от срока сдачи либо
+            функциональной нагрузки того или иного блока можно ввести выделение
+            цветом.
+          </p>
+          <div className="flex col-span-2 gap-[5px]">
+            <div className="w-18 h-18 aspect-square rounded-full bg-[#B5F54E] flex justify-center items-center">
+              <ClassNameWrapper className={'w-11 text-[#232425]'}>
+                <NatureIcon />
+              </ClassNameWrapper>
+            </div>
+            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                <KidsIcon />
+              </ClassNameWrapper>
+            </div>
+            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                <MetroIcon />
+              </ClassNameWrapper>
+            </div>
+            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                <ShopIcon />
+              </ClassNameWrapper>
+            </div>
+            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                <SportIcon />
+              </ClassNameWrapper>
+            </div>
+            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+              <ClassNameWrapper className={'w-11 text-[#7A7A7A]'}>
+                <StudyIcon />
+              </ClassNameWrapper>
+            </div>
+            <div className="w-18 h-18 aspect-square rounded-full bg-[#37393B99] flex justify-center items-center">
+              <ClassNameWrapper className="w-11 text-[#7A7A7A]">
+                <SafetyIcon />
+              </ClassNameWrapper>
+            </div>
+          </div>
+        </div>
+        <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid gap-y-[30px] grid-cols-2 grid-rows-[1fr_3fr] h-[348px] sticky top-[calc(100vh-388px)]">
+          <p className="heading2 font-medium">4. Интерактивная инсоляция</p>
+          <p className="text1">
+            Клиент может наблюдать, как световое пятно перемещается в
+            зависимости от времени суток и сезона, поскольку солнечный свет
+            имеет физическое воздействие.
+          </p>
+          <div className="col-span-2 flex justify-between gap-x-[5px]">
+            {[
+              {
+                title: 'Лето',
+                src: '/img/pages/home/presentation/summer.png',
+              },
+              {
+                title: 'Зима',
+                src: '/img/pages/home/presentation/winter.png',
+              },
+              {
+                title: 'Осень',
+                src: '/img/pages/home/presentation/autumn.png',
+              },
+            ].map((item) => (
+              <SeasonCard
+                {...item}
+                key={item.title}
+                className="flex flex-col items-center justify-between flex-1"
+              />
+            ))}
+          </div>
+        </div>
+        <div className="space-y-6 h-[348px] sticky top-[calc(100vh-388px)] bg-[#0F1011]">
+          <p className="heading2 font-medium text-center">
+            5. Модуль инженерных систем
+          </p>
+          <div className="flex flex-1 gap-2">
+            {[
+              {
+                src: '/img/pages/home/presentation/ventilation.png',
+                title: 'Вентиляция',
+              },
+              {
+                src: '/img/pages/home/presentation/heating.png',
+                title: 'Отопление',
+              },
+              {
+                src: '/img/pages/home/presentation/facade.png',
+                title: 'Фасад',
+              },
+            ].map(({ src, title }) => (
+              <div
+                className="flex flex-col gap-10 items-stretch pt-5 pb-2 pl-4 pr-2 bg-[#37393B99] rounded-2xl flex-1"
+                key={title}
+              >
+                <p className="text1">{title}</p>
+                <div className="relative w-[calc(216/240*100%)] self-end">
+                  <Image
+                    src={src}
+                    fill
+                    alt={title}
+                    className="rounded-xl self-end !relative w-full h-full"
+                    sizes="100%"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="rounded-2xl backdrop-blur-[500px] bg-[#0F101199] bg-radial-[at_50%_0%] from-[#7A7A7A99] p-6 grid grid-cols-2 h-[348px] sticky top-[calc(100vh-388px)]">
+          <p className="heading2 font-medium">
+            6. Интеграция с CRM-системой застройщика
+          </p>
+          <div className="flex flex-col justify-between">
+            <div className="space-y-4">
+              <div className="flex">
+                <div className="w-12 h-12 rounded-lg bg-[#B5F54E] flex items-center text-black font-medium justify-center -rotate-[4deg] text1 shadow-[0_2px_10px_0_#00000033] z-[2]">
+                  2K
+                </div>
+                <div className="bg-[#37393B] rounded-lg right-2 relative shadow-[0_2px_10px_0_#00000033] z-[1]">
+                  <ClassNameWrapper className="w-12 h-12">
+                    <Flat1 />
+                  </ClassNameWrapper>
+                </div>
+                <div className="bg-[#37393B] rounded-lg -rotate-[4deg] right-4 relative shadow-[0_2px_10px_0_#00000033]">
+                  <ClassNameWrapper className="w-12 h-12">
+                    <Flat2 />
+                  </ClassNameWrapper>
+                </div>
+              </div>
+              <p className="text1">
+                Клиент всегда видит актуальные данные об интересующем его лоте,
+                включая статус и стоимость.
+              </p>
+            </div>
+            <div className="space-y-4">
+              <div className="flex">
+                <Image
+                  src={'/img/pages/home/presentation/vova.png'}
+                  width={48}
+                  height={48}
+                  alt="vovka"
+                  className="rounded-lg -rotate-[4deg] shadow-[0_2px_10px_0_#00000033] z-[2]"
+                />
+                <div className="rounded-lg bg-[#37393B] flex justify-center items-center relative right-2 w-12 h-12 shadow-[0_2px_10px_0_#00000033] z-[1]">
+                  <ClassNameWrapper className="w-[21px] h-[21px]">
+                    <MailIcon />
+                  </ClassNameWrapper>
+                </div>
+                <div className="rounded-lg bg-[#37393B] flex justify-center items-center relative right-4 -rotate-[4deg] w-12 h-12 shadow-[0_2px_10px_0_#00000033]">
+                  <ClassNameWrapper className="w-[21px] h-[21px]">
+                    <PhoneIcon />
+                  </ClassNameWrapper>
+                </div>
+              </div>
+              <p className="text1">
+                Инструмент продаж сам создаст карточку клиента в вашей
+                CRM-системе и назначит ответственного менеджера.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/pages/MainPage/Presentation/VideoLayer.tsx b/src/components/pages/MainPage/Presentation/VideoLayer.tsx
index a49ce138..7bdf4ef4 100644
--- a/src/components/pages/MainPage/Presentation/VideoLayer.tsx
+++ b/src/components/pages/MainPage/Presentation/VideoLayer.tsx
@@ -1,3 +1,4 @@
+import { videos } from '@/consts/presentation/videos';
 import { SlideBadge } from '@/ui/SlideBadge';
 import { Slide2Marquee } from '@/ui/SlideMarquee';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -20,14 +21,7 @@ export function VideoLayer({
           : 'col-start-1'
       }`}
     >
-      {[
-        '1_search',
-        '2_3dtour',
-        '3_infrastructure',
-        '4_insolation',
-        '5_engine',
-        '6_reservation',
-      ].map((video, index, videos) => (
+      {videos.map((video, index) => (
         <video
           key={video}
           src={`/videos/pages/home/presentation/${video}.mp4`}
@@ -38,7 +32,7 @@ export function VideoLayer({
           style={{
             zIndex: videos.length - index,
           }}
-          className={`absolute w-full h-full object-covera transition-descrete${
+          className={`absolute w-full h-full transition-opacity${
             slide > index && index !== videos.length - 1 ? ' opacity-0' : ''
           }`}
         />
diff --git a/src/consts/presentation/videos.ts b/src/consts/presentation/videos.ts
new file mode 100644
index 00000000..ccf8535e
--- /dev/null
+++ b/src/consts/presentation/videos.ts
@@ -0,0 +1,8 @@
+export const videos = [
+  '1_search',
+  '2_3dtour',
+  '3_infrastructure',
+  '4_insolation',
+  '5_engine',
+  '6_reservation',
+];
diff --git a/src/hooks/useScroll.ts b/src/hooks/useScroll.ts
index 0c072646..ab4b58e7 100644
--- a/src/hooks/useScroll.ts
+++ b/src/hooks/useScroll.ts
@@ -5,19 +5,16 @@ export function useScroll(ref: RefObject<HTMLElement>) {
     ref.current?.getBoundingClientRect().top ?? 0
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  function handleScroll() {
+    setScroll(ref.current!.getBoundingClientRect().top);
+  }
+
   useEffect(() => {
-    const element = ref.current;
-
-    if (!element) return;
-
-    const handleScroll = () => {
-      setScroll(element.getBoundingClientRect().top);
-    };
-
     document.addEventListener('scroll', handleScroll);
 
     return () => document.removeEventListener('scroll', handleScroll);
-  }, [ref]);
+  }, [handleScroll, ref]);
 
   return scroll;
 }
diff --git a/src/ui/SeasonCard.tsx b/src/ui/SeasonCard.tsx
index 1aa0c243..68cc5ca2 100644
--- a/src/ui/SeasonCard.tsx
+++ b/src/ui/SeasonCard.tsx
@@ -18,7 +18,7 @@ export function SeasonCard({
       <div className="relative md:max-lg:max-w-[calc(138/224*100%)]">
         <Image
           src={src}
-          className="!relative object-cover lg:min-w-full md:min-w-[calc(138/224*100%)]"
+          className="!relative lg:min-w-full md:min-w-[calc(138/224*100%)]"
           alt={title}
           fill
           sizes="(min-width: 768px) calc(138/224*100%), (min-width: 1024px) 100%"