upd about marasi drive desktop

src/components/AboutMarasiDrive.tsx

@@ -2,12 +2,15 @@ import {
   marasiDriveFeatures,
   marasiDriveDescriptionBadges,
   marasiDriveExpandable,
+  marasiDriveMapCards,
 } from "../data/aboutMarasiDrive";
 import MarariDriveNeighboursSlider from "./MarasiDriveNeighboursSlider";
 import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider";
 import TextBox from "./ui/TextBox";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import { useScroll } from "motion/react";
+import MarasiDriveMapCard from "./MarasiDriveMapCard";
+import BrochureButton from "./ui/BrochureButton";
 
 function AboutMarasiDrive() {
   const target = useRef<HTMLDivElement>(null);
@@ -16,12 +19,6 @@ function AboutMarasiDrive() {
     target,
   });
 
-  useEffect(() => {
-    scrollYProgress.on("change", (latest) => {
-      console.log(latest);
-    });
-  }, [scrollYProgress]);
-
   return (
     <div className="relative">
       <section className="sticky top-[4.444vw] w-full bg-white bg-[url(/images/about-complex/marasi-drive/tower.png)] bg-cover h-[calc(100dvh-4.444vw)] bg-no-repeat bg-[position:left_13.264vw_top] pl-[2.222vw] pt-[5vw] pb-[2.222vw] flex flex-col justify-between">
@@ -48,7 +45,7 @@ function AboutMarasiDrive() {
           </p>
         </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">
+      <section className="sticky top-[-275%] 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 gap-[4.444vw]">
           <div className="flex flex-col gap-[2.222vw] items-center">
             <h2 className="font-mixcase-unmixed text-h1 text-center">
@@ -90,7 +87,11 @@ function AboutMarasiDrive() {
           <div className="flex gap-[1.111vw]">
             {marasiDriveExpandable.map((image) => (
               <div key={image}>
-                <img src={image} alt="Expandable Living Solutions" />
+                <img
+                  src={image}
+                  alt="Expandable Living Solutions"
+                  className="rounded-[1.111vw]"
+                />
               </div>
             ))}
           </div>
@@ -109,6 +110,8 @@ function AboutMarasiDrive() {
           </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]">
           <div className="flex flex-col items-center 2xl:gap-[2.222vw]">
             <h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
@@ -123,11 +126,11 @@ function AboutMarasiDrive() {
           </div>
           <img
             className="rounded-[1.667vw]"
-            src="/images/about-complex/marasi-drive/buisness_bay.jpg"
+            src="/images/about-complex/marasi-drive/business_bay.jpg"
             alt=""
           />
         </div>
-        <div className="h-[calc(27.639vw*3)]" ref={target}>
+        <div className="h-[calc(27.639vw*10)]" 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">
@@ -148,16 +151,71 @@ function AboutMarasiDrive() {
               Rove around the city
             </h2>
             <p className="text-s opacity-70 whitespace-pre-line text-center">
-              Located in the heart of Dubai Marina, Rove Home Dubai Marina is
-              where active living meets modern convenience. Enjoy an energetic
-              lifestyle surrounded by trendy cafés, shops, and entertainment
-              options – all within reach.
+              {`Located in the heart of Dubai Marina, Rove Home Dubai Marina is where active
+              living meets modern convenience. Enjoy an energetic lifestyle surrounded by
+              trendy cafés, shops, and entertainment options - all within reach.`}
             </p>
           </div>
-          <div className="grid grid-cols-6 grid-rows-5 gap-x-[1.111vw] gap-y-[0.556vw]"></div>
+          <div className="grid grid-cols-6 grid-rows-5 gap-x-[1.111vw] gap-y-[0.556vw]">
+            {marasiDriveMapCards.map((card) => (
+              <MarasiDriveMapCard {...card} key={card.title} />
+            ))}
+            <div className="col-start-3 col-span-full row-start-1 row-span-full">
+              <img
+                src="/images/about-complex/marasi-drive/map/map.png"
+                alt=""
+                className="object-cover size-full 2xl:rounded-[1.667vw]"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex items-stretch justify-center gap-[1.111vw] px-[10.278vw]">
+          <div>
+            <img
+              src="/images/about-complex/marasi-drive/podium.png"
+              className="object-cover size-full rounded-[1.667vw]"
+              alt=""
+            />
+          </div>
+          <div className="px-[2.778vw] flex flex-col gap-[3.333vw]">
+            <div className="space-y-[1.111vw]">
+              <h2 className="whitespace-pre-line text-h2 font-medium">
+                {`Live Different
+                with Rove Home`}
+              </h2>
+              <p className="opacity-40 text-s">
+                {`Experience the difference with Rove Home where modern amenities,
+                trendy interiors, and smart features cater to your unique style.`}
+              </p>
+            </div>
+            <div className="space-y-[1.111vw]">
+              <h5 className="text-h5 font-medium">Download our brochures</h5>
+              <div className="space-y-[0.833vw]">
+                <BrochureButton
+                  title={"Main Brochure"}
+                  link="/files/marasi-drive/Main Brochure.pdf"
+                />
+                <BrochureButton
+                  title={"Amenties Brochure"}
+                  link="/files/marasi-drive/Amenties Brochure.pdf"
+                />
+                <BrochureButton
+                  title={"Technical Brochure"}
+                  link="/files/marasi-drive/Technical Brochure.pdf"
+                />
+                <BrochureButton
+                  title={"Factsheet"}
+                  link="/files/marasi-drive/Factsheet.pdf"
+                />
+                <BrochureButton
+                  title={"Reasons to buy"}
+                  link="/files/marasi-drive/Reasons to Buy.pdf"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </section>
-      <section></section>
     </div>
   );
 }

src/components/FloorPlanMarasiDriveWestUpper.tsx

@@ -1178,6 +1178,7 @@ function FloorPlanMarasiDriveEast({
         {unitsOnFloor.map((unit) =>
           floorPlanMarasiDriveWestUpperMasks.has(unit.unitNo.slice(-2)) ? (
             <MarasiDriveWestUpperFloorPlanUnit
+              key={unit.unitNo}
               unit={unit}
               floor={selectedFloor}
               d={

src/components/Header.tsx

@@ -5,7 +5,6 @@ import { useEffect, useRef, useState } from "react";
 import Button from "./ui/Button";
 import BurgerIcon from "./icons/BurgerIcon";
 import { AnimatePresence, motion } from "motion/react";
-import DownloadIcon from "./icons/DownloadIcon";
 import { useClickAway } from "@uidotdev/usehooks";
 import CloseIcon from "./icons/CloseIcon";
 import { projects } from "../data/projects";
@@ -13,6 +12,7 @@ import useModalStore from "../stores/useModalStore";
 import PrivacyPolicyModal from "./modals/PrivacyPolicyModal";
 import ChevronDownIcon from "./icons/ChevronDownIcon";
 import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
+import BrochureButton from "./ui/BrochureButton";
 
 function Header() {
   function handleLogoClick() {
@@ -353,37 +353,3 @@ function BrochuresDropdown() {
     </div>
   );
 }
-
-export function BrochureButton({
-  title,
-  link,
-}: {
-  title: string;
-  link: string;
-}) {
-  const handleDownload = () => {
-    const anchor = document.createElement("a");
-    anchor.href = link;
-    anchor.download = title; // Use the title as the filename
-    anchor.style.display = "none";
-    document.body.appendChild(anchor);
-    anchor.click();
-    document.body.removeChild(anchor);
-  };
-
-  return (
-    <Button
-      variant="secondary"
-      size="large"
-      className="w-full !bg-[#F3F3F2] !justify-between group hover:!bg-[#F3F3F2]"
-      onClick={handleDownload}
-    >
-      <span className="text-nowrap text-caption-m group-hover:text-[#0D1922] transition-colors duration-300">
-        {title}
-      </span>
-      <span className="2xl:size-[1.389vw] size-5 text-[#0D1922]/70 group-hover:text-[#0D1922] transition-colors duration-300">
-        <DownloadIcon />
-      </span>
-    </Button>
-  );
-}

src/components/MarasiDriveInteriorsSlider.tsx

@@ -8,7 +8,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { useSwipeable } from "react-swipeable";
 
 function MarasiDriveInteriorsSlider() {
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(1);
 
   const handlers = useSwipeable({
     onSwipedLeft: () =>

src/components/MarasiDriveMapCard.tsx

@@ -11,7 +11,7 @@ function MarasiDriveMapCard({
 }) {
   return (
     <div
-      className={`rounded-[1.667vw] px-[0.833vw] py-[1.111vw] bg-[#F3F3F2] flex flex-col gap-[0.556vw]${
+      className={`rounded-[1.667vw] px-[0.833vw] py-[1.111vw] w-full bg-[#F3F3F2] flex flex-col justify-between aspect-[216/132] relative ${
         className ? " " + className : ""
       }`}
     >
@@ -21,7 +21,7 @@ function MarasiDriveMapCard({
       </div>
       <img
         src={image}
-        className="rounded-[0.278vw] size-[3.333vw] object-cover self-end"
+        className="rounded-[0.278vw] size-[3.333vw] object-cover absolute bottom-[1.111vw] right-[0.833vw]"
         alt={title}
       />
     </div>

src/components/ui/BrochureButton.tsx

@@ -0,0 +1,36 @@
+import DownloadIcon from "../icons/DownloadIcon";
+import Button from "./Button";
+
+export default function BrochureButton({
+  title,
+  link,
+}: {
+  title: string;
+  link: string;
+}) {
+  const handleDownload = () => {
+    const anchor = document.createElement("a");
+    anchor.href = link;
+    anchor.download = title; // Use the title as the filename
+    anchor.style.display = "none";
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+  };
+
+  return (
+    <Button
+      variant="secondary"
+      size="large"
+      className="w-full !bg-[#F3F3F2] !justify-between group hover:!bg-[#F3F3F2]"
+      onClick={handleDownload}
+    >
+      <span className="text-nowrap text-caption-m group-hover:text-[#0D1922] transition-colors duration-300">
+        {title}
+      </span>
+      <span className="2xl:size-[1.389vw] size-5 text-[#0D1922]/70 group-hover:text-[#0D1922] transition-colors duration-300">
+        <DownloadIcon />
+      </span>
+    </Button>
+  );
+}

src/data/aboutMarasiDrive.ts

@@ -75,46 +75,51 @@ export const marasiDriveMapCards = [
   {
     title: "Burj Khalifa",
     mins: 10,
-    image: "/images/about-complex/marasi-drive/burj_khalifa.jpg",
+    image: "/images/about-complex/marasi-drive/map/burj_khalifa.png",
   },
   {
     title: "Dubai Fountain",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/fountain.jpg",
+    mins: 10,
+    image: "/images/about-complex/marasi-drive/map/fountain.png",
   },
   {
     title: "Dubai Mall",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/mall.jpg",
+    mins: 8,
+    image: "/images/about-complex/marasi-drive/map/mall.png",
   },
   {
     title: "Dubai Opera",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/opera.jpg",
+    mins: 11,
+    image: "/images/about-complex/marasi-drive/map/opera.png",
   },
   {
     title: "Marasi Promenade",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/promenade.jpg",
+    mins: 4,
+    image: "/images/about-complex/marasi-drive/map/promenade.png",
   },
   {
     title: "Rove Downtown Hotel",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/rovedowntown.jpg",
+    mins: 10,
+    image: "/images/about-complex/marasi-drive/map/downtown_hotel.png",
   },
   {
     title: "Rove City Walk Hotel",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/rovecitywalk.jpg",
+    mins: 12,
+    image: "/images/about-complex/marasi-drive/map/city_walk_hotel.png",
+  },
+  {
+    title: "City Walk",
+    mins: 12,
+    image: "/images/about-complex/marasi-drive/map/city_walk.png",
   },
   {
     title: "Coca-Cola Arena",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/arena.jpg",
+    mins: 14,
+    image: "/images/about-complex/marasi-drive/map/arena.png",
   },
   {
     title: "Dubai International Airport",
-    mins: 15,
-    image: "/images/about-complex/marasi-drive/airport.jpg",
+    mins: 10,
+    image: "/images/about-complex/marasi-drive/map/airport.png",
   },
 ] as const;