From a525a4a9481a4a4b333e73abb9a0e85f94286184 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 20 Jun 2025 16:28:22 +0500
Subject: [PATCH] upd: about marasi drive desktop and tablet sliders

---
 src/components/AboutMarasiDrive.tsx           |  12 ++-
 src/components/MarasiDriveInteriorsSlider.tsx |  52 ++++++---
 ...=> MarasiDriveNeighboursSliderDesktop.tsx} |  10 +-
 .../MarasiDriveNeighboursSliderTablet.tsx     | 100 ++++++++++++++++++
 4 files changed, 152 insertions(+), 22 deletions(-)
 rename src/components/{MarasiDriveNeighboursSlider.tsx => MarasiDriveNeighboursSliderDesktop.tsx} (75%)
 create mode 100644 src/components/MarasiDriveNeighboursSliderTablet.tsx

diff --git a/src/components/AboutMarasiDrive.tsx b/src/components/AboutMarasiDrive.tsx
index febf546..a2a2b52 100644
--- a/src/components/AboutMarasiDrive.tsx
+++ b/src/components/AboutMarasiDrive.tsx
@@ -3,13 +3,14 @@ import {
   marasiDriveDescriptionBadges,
   marasiDriveMapCards,
 } from "../data/aboutMarasiDrive";
-import MarariDriveNeighboursSlider from "./MarasiDriveNeighboursSlider";
+import MarariDriveNeighboursSliderDesktop from "./MarasiDriveNeighboursSliderDesktop";
 import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider";
 import TextBox from "./ui/TextBox";
 import { useRef } from "react";
 import { useScroll } from "motion/react";
 import MarasiDriveMapCard from "./MarasiDriveMapCard";
 import BrochureButton from "./ui/BrochureButton";
+import MarasiDriveNeighboursSliderTablet from "./MarasiDriveNeighboursSliderTablet";
 
 function AboutMarasiDrive() {
   const target = useRef<HTMLDivElement>(null);
@@ -178,10 +179,10 @@ function AboutMarasiDrive() {
           />
         </section>
         <section
-          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"
+          className="bg-white w-full overflow-clip 2xl: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 2xl:gap-[4.444vw] 2xl: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">
                 {`Explore the neighbourhood`}
@@ -192,7 +193,10 @@ function AboutMarasiDrive() {
               at Rove Home Marasi Drive!`}
               </p>
             </div>
-            <MarariDriveNeighboursSlider scrollYProgress={scrollYProgress} />
+            <MarariDriveNeighboursSliderDesktop
+              scrollYProgress={scrollYProgress}
+            />
+            <MarasiDriveNeighboursSliderTablet />
           </div>
         </section>
         <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">
diff --git a/src/components/MarasiDriveInteriorsSlider.tsx b/src/components/MarasiDriveInteriorsSlider.tsx
index 686d8ac..773e877 100644
--- a/src/components/MarasiDriveInteriorsSlider.tsx
+++ b/src/components/MarasiDriveInteriorsSlider.tsx
@@ -24,21 +24,40 @@ function MarasiDriveInteriorsSlider() {
   });
 
   return (
-    <div className="relative 2xl:mb-[15vw]" {...handlers}>
+    <div className="relative max-md:hidden 2xl:mb-[15vw]" {...handlers}>
       <motion.div
-        className="flex items-center gap-[6.667vw] min-h-[38.333vw]"
+        className="flex items-center 2xl:gap-[6.667vw] gap-[12.5vw] 2xl:min-h-[38.333vw] min-h-[calc(58.333vw*9/10)]"
         animate={{
-          transform: `translateX(calc(5vw - ${currentIndex - 1} * 27.222vw))`,
+          transform:
+            innerWidth >= 1440
+              ? `translateX(calc(5vw - ${currentIndex - 1} * 27.222vw))`
+              : `translateX(calc(-33.333vw + 12px - ${
+                  currentIndex - 1
+                } * 51.042vw))`,
         }}
       >
         <AnimatePresence>
           {marasiDriveInspiredInteriors.map(({ image, name }, index) => (
             <motion.div
               animate={{
-                width: index === currentIndex ? "31.111vw" : "20.556vw",
+                width:
+                  innerWidth >= 1440
+                    ? index === currentIndex
+                      ? "31.111vw"
+                      : "20.556vw"
+                    : index === currentIndex
+                    ? "58.333vw"
+                    : "38.542vw",
               }}
               exit={{
-                width: index !== currentIndex ? "31.111vw" : "20.556vw",
+                width:
+                  innerWidth >= 1440
+                    ? index !== currentIndex
+                      ? "31.111vw"
+                      : "20.556vw"
+                    : index !== currentIndex
+                    ? "58.333vw"
+                    : "38.542vw",
               }}
               key={name}
               className="shrink-0"
@@ -46,9 +65,16 @@ function MarasiDriveInteriorsSlider() {
               <motion.img
                 src={image}
                 alt={name}
-                className="object-cover rounded-[1.667vw] pointer-events-none"
+                className="object-cover 2xl:rounded-[1.667vw] rounded-[3.125vw] pointer-events-none max-2xl:aspect-[12/9]"
                 animate={{
-                  marginBottom: index !== currentIndex ? "1.667vw" : "2.222vw",
+                  marginBottom:
+                    innerWidth >= 1440
+                      ? index !== currentIndex
+                        ? "1.667vw"
+                        : "2.222vw"
+                      : index !== currentIndex
+                      ? "32px"
+                      : "24px",
                 }}
                 onClick={() => setCurrentIndex(index)}
               />
@@ -68,25 +94,25 @@ function MarasiDriveInteriorsSlider() {
         onlyIcon
         disabled={currentIndex === 0}
         onClick={() => setCurrentIndex(Math.max(currentIndex - 1, 0))}
-        className="!bg-[#F3F3F2] absolute 2xl:left-[27.778vw] top-[15.833vw]"
+        className="absolute 2xl:left-[27.778vw] left-[12.5vw] 2xl:top-[15.833vw] max-2xl:bottom-1/2"
       >
-        <span className="2xl:size-[1.389vw] size-5 text-[#0D1922] in-disabled:text-[#0D1922]/40">
+        <div className="2xl:size-[1.389vw] size-5">
           <ChevronLeftIcon />
-        </span>
+        </div>
       </Button>
       <Button
         onlyIcon
         disabled={currentIndex === marasiDriveInspiredInteriors.length - 1}
-        className="absolute 2xl:right-[27.778vw] top-[15.833vw]"
+        className="absolute 2xl:left-[65vw] left-[79.167vw] 2xl:top-[15.833vw] max-2xl:bottom-1/2"
         onClick={() =>
           setCurrentIndex(
             Math.min(currentIndex + 1, marasiDriveInspiredInteriors.length - 1)
           )
         }
       >
-        <span className="2xl:size-[1.389vw] size-5">
+        <div className="2xl:size-[1.389vw] size-5">
           <ChevronRightIcon />
-        </span>
+        </div>
       </Button>
     </div>
   );
diff --git a/src/components/MarasiDriveNeighboursSlider.tsx b/src/components/MarasiDriveNeighboursSliderDesktop.tsx
similarity index 75%
rename from src/components/MarasiDriveNeighboursSlider.tsx
rename to src/components/MarasiDriveNeighboursSliderDesktop.tsx
index 6a4942f..ec51838 100644
--- a/src/components/MarasiDriveNeighboursSlider.tsx
+++ b/src/components/MarasiDriveNeighboursSliderDesktop.tsx
@@ -6,7 +6,7 @@ import {
 } from "motion/react";
 import { marasiDriveNeighbours } from "../data/aboutMarasiDrive";
 
-function MarariDriveNeighboursSlider({
+function MarariDriveNeighboursSliderDesktop({
   scrollYProgress,
 }: {
   scrollYProgress: MotionValue<number>;
@@ -39,20 +39,20 @@ function MarariDriveNeighboursSlider({
 
   return (
     <motion.div
-      className="flex items-center 2xl:gap-[4.965vw] min-h-[27.639vw]"
+      className="flex items-center 2xl:gap-[4.965vw] gap-[9.375vw] 2xl:min-h-[27.639vw] max-2xl:hidden"
       style={{ x }}
     >
       <AnimatePresence>
         {marasiDriveNeighbours.map(({ name, image }, index) => (
           <motion.div
             key={name}
-            className="flex flex-col shrink-0 items-center gap-[1.667vw]"
+            className="flex flex-col shrink-0 items-center 2xl:gap-[1.667vw] gap-6"
             style={{ width: [width1, width2, width3, width4][index] }}
           >
             <img
               src={image}
               alt={name}
-              className="2xl:rounded-[1.667vw] aspect-[290/205] object-cover w-full pointer-events-none"
+              className="2xl:rounded-[1.667vw] rounded-[3.125vw] aspect-[290/205] object-cover w-full pointer-events-none"
             />
             <p className={"text-h4 text-center font-medium"}>{name}</p>
           </motion.div>
@@ -62,4 +62,4 @@ function MarariDriveNeighboursSlider({
   );
 }
 
-export default MarariDriveNeighboursSlider;
+export default MarariDriveNeighboursSliderDesktop;
diff --git a/src/components/MarasiDriveNeighboursSliderTablet.tsx b/src/components/MarasiDriveNeighboursSliderTablet.tsx
new file mode 100644
index 0000000..51d8671
--- /dev/null
+++ b/src/components/MarasiDriveNeighboursSliderTablet.tsx
@@ -0,0 +1,100 @@
+import { AnimatePresence, motion } from "motion/react";
+import { useState } from "react";
+import { useSwipeable } from "react-swipeable";
+import { marasiDriveNeighbours } from "../data/aboutMarasiDrive";
+import Button from "./ui/Button";
+import ChevronLeftIcon from "./icons/ChevronLeftIcon";
+import clsx from "clsx";
+import ChevronRightIcon from "./icons/ChevronRightIcon";
+
+function MarasiDriveNeighboursSliderTablet() {
+  const [currentIndex, setCurrentIndex] = useState(1);
+
+  const handlers = useSwipeable({
+    onSwipedLeft: () =>
+      setCurrentIndex(
+        Math.min(currentIndex + 1, marasiDriveNeighbours.length - 1)
+      ),
+    onSwipedRight: () => setCurrentIndex(Math.max(currentIndex - 1, 0)),
+    preventScrollOnSwipe: true,
+    touchEventOptions: {
+      passive: false,
+    },
+    trackMouse: true,
+  });
+
+  return (
+    <div
+      className="relative hidden md:max-2xl:block min-h-[calc(47.135vw*11/9)]"
+      {...handlers}
+    >
+      <motion.div
+        className="flex items-center gap-[9.375vw]"
+        animate={{
+          transform: `translateX(calc(-31.641vw - 24px - ${
+            currentIndex - 1
+          } * 47.135vw))`,
+        }}
+      >
+        <AnimatePresence>
+          {marasiDriveNeighbours.map(({ image, name }, index) => (
+            <motion.div
+              animate={{
+                width: index === currentIndex ? "69.141vw" : "37.76vw",
+              }}
+              exit={{
+                width: index !== currentIndex ? "69.141vw" : "37.76vw",
+              }}
+              key={name}
+              className="shrink-0 flex flex-col"
+            >
+              <motion.img
+                src={image}
+                alt={name}
+                className="object-cover rounded-[3.125vw] pointer-events-none aspect-[12/9] object-center"
+                animate={{
+                  marginBottom: index !== currentIndex ? "32px" : "24px",
+                }}
+                onClick={() => setCurrentIndex(index)}
+              />
+              <p
+                className={clsx(
+                  "text-h4 text-center font-medium",
+                  index !== currentIndex && "opacity-40"
+                )}
+              >
+                {name}
+              </p>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </motion.div>
+      <Button
+        onlyIcon
+        disabled={currentIndex === 0}
+        onClick={() => setCurrentIndex(Math.max(currentIndex - 1, 0))}
+        className="absolute left-[8.203vw] bottom-1/2"
+      >
+        <span className="size-5">
+          <ChevronLeftIcon />
+        </span>
+      </Button>
+      <Button
+        onlyIcon
+        disabled={currentIndex === marasiDriveNeighbours.length - 1}
+        className="absolute left-[83.594vw] bottom-1/2"
+        onClick={() =>
+          setCurrentIndex(
+            Math.min(currentIndex + 1, marasiDriveNeighbours.length - 1)
+          )
+        }
+      >
+        <span className="size-5">
+          <ChevronRightIcon />
+        </span>
+      </Button>
+    </div>
+  );
+}
+
+export default MarasiDriveNeighboursSliderTablet;