From b10dea1591984276acf9cad32d76fde8b99a128b Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Wed, 18 Jun 2025 17:24:48 +0500
Subject: [PATCH] sections fix about marasi drive

---
 .env                                |  2 +-
 src/components/AboutMarasiDrive.tsx | 49 +++++++++++++++--------------
 src/components/Footer.tsx           |  2 +-
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/.env b/.env
index 8dbb94c..ec09a95 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-VITE_API_URL=http://192.168.1.122:4002
+VITE_API_URL=http://192.168.1.168:4002
 # VITE_API_URL=http://194.26.138.94:4002
\ No newline at end of file
diff --git a/src/components/AboutMarasiDrive.tsx b/src/components/AboutMarasiDrive.tsx
index 113f012..877af3c 100644
--- a/src/components/AboutMarasiDrive.tsx
+++ b/src/components/AboutMarasiDrive.tsx
@@ -26,7 +26,7 @@ function AboutMarasiDrive() {
           <img
             src="/images/about-complex/marasi-drive/main_c.jpg"
             alt=""
-            className="object-cover max-2xl:hidden w-full"
+            className="object-cover max-2xl:hidden w-full h-full"
           />
           <img
             src="/images/about-complex/marasi-drive/main-tablet_c.jpg"
@@ -77,8 +77,8 @@ function AboutMarasiDrive() {
           </p>
         </div>
       </section>
-      <section className="2xl:sticky relative 2xl:top-[-275%] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[5.347vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8 flex flex-col gap-[11.667vw] bg-white w-full overflow-clip">
-        <div className="flex flex-col 2xl:gap-[4.444vw] md:max-2xl:gap-12 gap-10">
+      <div className="2xl:sticky relative 2xl:top-[-275%], top-[-135vw] bg-white w-full overflow-clip">
+        <section className="2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8 flex flex-col 2xl:gap-[4.444vw] md:max-2xl:gap-12 gap-10">
           <div className="flex flex-col 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
             <h2 className="font-mixcase-unmixed md:text-h1 text-[28px] leading-none text-center max-md:whitespace-pre-line ">
               {`What makes
@@ -90,9 +90,9 @@ function AboutMarasiDrive() {
               destination for artful inspiration and cleverly activated spaces.`}
             </p>
           </div>
-          <div className="flex gap-[0.556vw]">
+          <div className="flex max-2xl:flex-wrap max-2xl:justify-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:w-[93.75vw]">
             {marasiDriveFeatures.map(({ image, name }) => (
-              <div key={name}>
+              <div key={name} className="md:max-2xl:w-[30.208vw]">
                 <img
                   src={image}
                   alt={name}
@@ -101,9 +101,9 @@ function AboutMarasiDrive() {
               </div>
             ))}
           </div>
-        </div>
-        <div className="flex flex-col 2xl:gap-[4.444vw]">
-          <div className="flex flex-col gap-[2.222vw] items-center">
+        </section>
+        <section className="flex flex-col 2xl:gap-[4.444vw] gap-12 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8">
+          <div className="flex flex-col 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
             <h2 className="font-mixcase-unmixed text-h1 text-center">
               Expandable Living Solutions
             </h2>
@@ -111,7 +111,7 @@ function AboutMarasiDrive() {
               {`ORI introduces a revolutionary solution to apartment living,
               where space is not just a constraint but an opportunity.`}
             </p>
-            <div className="flex gap-[0.556vw]">
+            <div className="flex 2xl:gap-[0.556vw] gap-2">
               {["Simple", "Safe", "Effortless"].map((text) => (
                 <TextBox key={text} text={text} />
               ))}
@@ -128,8 +128,8 @@ function AboutMarasiDrive() {
               </div>
             ))}
           </div>
-        </div>
-        <div className="flex flex-col 2xl:gap-[4.444vw]">
+        </section>
+        <section className="flex flex-col 2xl:gap-[4.444vw] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8">
           <div className="flex flex-col 2xl:gap-[2.222vw] items-center">
             <h2 className="font-mixcase-unmixed text-h1 text-center">
               Inspired interiors
@@ -142,10 +142,10 @@ function AboutMarasiDrive() {
             </p>
           </div>
           <MarasiDriveInteriorsSlider />
-        </div>
-      </section>
-      <section className="sticky pt-[9.444vw] px-[2.222vw] pb-[5.347vw] flex flex-col gap-[11.667vw] bg-white w-full overflow-clip">
-        <div className="flex flex-col 2xl:gap-[4.444vw]">
+        </section>
+      </div>
+      <div className="2xl:sticky bg-white w-full overflow-clip">
+        <section className="flex flex-col 2xl:gap-[4.444vw] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8">
           <div className="flex flex-col items-center 2xl:gap-[2.222vw]">
             <h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
               {`A home for the young
@@ -162,8 +162,11 @@ function AboutMarasiDrive() {
             src="/images/about-complex/marasi-drive/business_bay.jpg"
             alt=""
           />
-        </div>
-        <div className="h-[calc(27.639vw*5)]" ref={target}>
+        </section>
+        <section
+          className="h-[calc(27.639vw*5)] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8"
+          ref={target}
+        >
           <div className="flex flex-col 2xl:gap-[4.444vw] sticky top-[5vw]">
             <div className="flex flex-col items-center 2xl:gap-[2.222vw]">
               <h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
@@ -177,8 +180,8 @@ function AboutMarasiDrive() {
             </div>
             <MarariDriveNeighboursSlider scrollYProgress={scrollYProgress} />
           </div>
-        </div>
-        <div className="flex flex-col gap-[3.333vw]">
+        </section>
+        <section className="flex flex-col gap-[3.333vw] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8">
           <div className="flex flex-col gap-[2.222vw] items-center">
             <h2 className="text-h1 font-mixcase-unmixed">
               Rove around the city
@@ -201,8 +204,8 @@ function AboutMarasiDrive() {
               />
             </div>
           </div>
-        </div>
-        <div className="flex items-stretch justify-center gap-[1.111vw] px-[10.278vw]">
+        </section>
+        <section className="flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:py-[9.444vw] md:max-2xl:py-[104px] md:mx-2xl:px-6 max-md:pt-20 max-md:pb-12 px-4">
           <div>
             <img
               src="/images/about-complex/marasi-drive/podium.png"
@@ -247,8 +250,8 @@ function AboutMarasiDrive() {
               </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </div>
     </div>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b3a42ef..23d4d4f 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -14,7 +14,7 @@ function Footer() {
   const { setModal } = useModalStore();
 
   return (
-    <footer className="z-1a 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl border-t border-[#E2E2DC] bg-white">
+    <footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl border-t border-[#E2E2DC] bg-white">
       <img
         src="/images/logo.svg"
         className="2xl:w-[5.972vw] w-[86px] cursor-pointer"