upd

2025-06-18 18:23:00 +05:00
parent e48b6d75ef
commit 4818f29fc7
1 changed files with 63 additions and 61 deletions
@@ -21,64 +21,66 @@ function AboutMarasiDrive() {

  return (
    <div className="relative">
-      <section className="2xl:sticky relative 2xl:top-[4.444vw] w-full bg-white 2xl:h-[calc(100dvh-4.444vw)] md:max-2xl:h-[calc(100dvh-64px)] h-[calc(100dvh-56px)] 2xl:p-[2.222vw] 2xl:pt-[5vw] md:max-2xl:p-6 md:max-2xl:pt-10 p-4 pt-8 flex flex-col justify-between">
-        <div className="absolute inset-0">
-          <img
-            src="/images/about-complex/marasi-drive/main_c.jpg"
-            alt=""
-            className="object-cover max-2xl:hidden w-full h-full"
-          />
-          <img
-            src="/images/about-complex/marasi-drive/main-tablet_c.jpg"
-            alt=""
-            className="object-cover md:max-2xl:block hidden w-full"
-          />
-          <img
-            src="/images/about-complex/marasi-drive/main-mobile_c.jpg"
-            alt=""
-            className="object-cover md:hidden size-full"
-          />
-        </div>
-
-        <div className="2xl:space-y-[1.667vw] md:max-2xl:space-y-6 space-y-4 relative">
-          <h1 className="2xl:text-[5vw] md:max-2xl:text-7xl text-[32px] leading-none tracking-[-0.07em] font-mixcase-unmixed font-medium whitespace-pre-line">
-            {`Rove Home 
-            Marasi Drive`}
-          </h1>
-          <div className="2xl:space-y-[0.556vw] space-y-2">
-            {marasiDriveDescriptionBadges.map((description) => (
-              <TextBox text={description} key={description} />
-            ))}
+      <div className="2xl:sticky relative 2xl:top-[4.444vw]">
+        <section className="w-full bg-white 2xl:h-[calc(100dvh-4.444vw)] md:max-2xl:h-[calc(100dvh-64px)] h-[calc(100dvh-56px)] 2xl:p-[2.222vw] 2xl:pt-[5vw] md:max-2xl:p-6 md:max-2xl:pt-10 p-4 pt-8 flex flex-col justify-between">
+          <div className="absolute inset-0">
+            <img
+              src="/images/about-complex/marasi-drive/main_c.jpg"
+              alt=""
+              className="object-cover max-2xl:hidden w-full h-full"
+            />
+            <img
+              src="/images/about-complex/marasi-drive/main-tablet_c.jpg"
+              alt=""
+              className="object-cover md:max-2xl:block hidden w-full"
+            />
+            <img
+              src="/images/about-complex/marasi-drive/main-mobile_c.jpg"
+              alt=""
+              className="object-cover md:hidden size-full"
+            />
          </div>
-        </div>

-        <div className="2xl:space-y-[2.222vw] md:max-2xl:space-y-6 relative max-md:hidden">
-          <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line">
-            {`A home for the young
+          <div className="2xl:space-y-[1.667vw] md:max-2xl:space-y-6 space-y-4 relative">
+            <h1 className="2xl:text-[5vw] md:max-2xl:text-7xl text-[32px] leading-none tracking-[-0.07em] font-mixcase-unmixed font-medium whitespace-pre-line">
+              {`Rove Home 
+            Marasi Drive`}
+            </h1>
+            <div className="2xl:space-y-[0.556vw] space-y-2">
+              {marasiDriveDescriptionBadges.map((description) => (
+                <TextBox text={description} key={description} />
+              ))}
+            </div>
+          </div>
+
+          <div className="2xl:space-y-[2.222vw] md:max-2xl:space-y-6 relative max-md:hidden">
+            <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line">
+              {`A home for the young
            and young in heart`}
-          </h4>
-          <p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
-            The dynamic essence of Rove comes to life at our new location in
-            Marasi Drive, Business Bay. Enjoy an urban living experience beyond
-            the ordinary.
-          </p>
-        </div>
-      </section>
-      <section>
-        <div className="space-y-6 bg-white px-4 py-8 md:hidden">
-          <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line">
-            {`A home for the young
+            </h4>
+            <p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
+              The dynamic essence of Rove comes to life at our new location in
+              Marasi Drive, Business Bay. Enjoy an urban living experience
+              beyond the ordinary.
+            </p>
+          </div>
+        </section>
+        <section>
+          <div className="space-y-6 bg-white px-4 py-8 md:hidden">
+            <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line">
+              {`A home for the young
            and young in heart`}
-          </h4>
-          <p className="text-s opacity-70">
-            The dynamic essence of Rove comes to life at our new location in
-            Marasi Drive, Business Bay. Enjoy an urban living experience beyond
-            the ordinary.
-          </p>
-        </div>
-      </section>
-      <div className="2xl:sticky relative top-[-134vw] 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">
+            </h4>
+            <p className="text-s opacity-70">
+              The dynamic essence of Rove comes to life at our new location in
+              Marasi Drive, Business Bay. Enjoy an urban living experience
+              beyond the ordinary.
+            </p>
+          </div>
+        </section>
+      </div>
+      <div className="2xl:sticky relative 2xl:top-[-134vw]">
+        <section className="bg-white w-full overflow-clip 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
@@ -102,7 +104,7 @@ function AboutMarasiDrive() {
            ))}
          </div>
        </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">
+        <section className="bg-white w-full overflow-clip 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
@@ -129,7 +131,7 @@ function AboutMarasiDrive() {
            ))}
          </div>
        </section>
-        <section className="flex flex-col 2xl:gap-[4.444vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] 2xl:px-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 max-md:pb-8">
+        <section className="bg-white w-full overflow-clip flex flex-col 2xl:gap-[4.444vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] 2xl:px-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 max-md:pb-8">
          <div className="flex flex-col 2xl:gap-[2.222vw] items-center">
            <h2 className="font-mixcase-unmixed text-h1 text-center">
              Inspired interiors
@@ -144,8 +146,8 @@ function AboutMarasiDrive() {
          <MarasiDriveInteriorsSlider />
        </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="2xl:sticky">
+        <section className="bg-white w-full overflow-clip 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
@@ -164,7 +166,7 @@ function AboutMarasiDrive() {
          />
        </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"
+          className="bg-white w-full overflow-clip 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]">
@@ -181,7 +183,7 @@ function AboutMarasiDrive() {
            <MarariDriveNeighboursSlider scrollYProgress={scrollYProgress} />
          </div>
        </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">
+        <section className="bg-white w-full overflow-clip 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
@@ -205,7 +207,7 @@ function AboutMarasiDrive() {
            </div>
          </div>
        </section>
-        <section className="flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] md:max-2xl:py-[104px] md:mx-2xl:px-6 max-md:pt-20 max-md:pb-12 px-4">
+        <section className="bg-white w-full overflow-clip flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] 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"