diff --git a/src/components/UnitSlider.tsx b/src/components/UnitSlider.tsx
new file mode 100644
index 0000000..f719fc6
--- /dev/null
+++ b/src/components/UnitSlider.tsx
@@ -0,0 +1,315 @@
+import { useEffect, useState } from "react";
+import { projects } from "../data/projects";
+import UnitTypeImageWithMarkers from "./UnitTypeImageWithMarkers";
+import Button from "./ui/Button";
+import { AnimatePresence, motion } from "framer-motion";
+import ChevronLeftIcon from "./icons/ChevronLeftIcon";
+import ChevronRightIcon from "./icons/ChevronRightIcon";
+import { useSwipeable } from "react-swipeable";
+import clsx from "clsx";
+
+interface UnitSliderProps {
+ unitTypeVariant: string;
+ complexName: string;
+}
+// костыль: в Мараси 2 bedroom b ЕДИНСТВЕННАЯ НЕ ЗЕРКАЛЬНАЯ ХАТА среди всех
+function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) {
+ const [hasSide, setHasSide] = useState(false);
+
+ const [selectedSide, setSelectedSide] = useState<"left" | "right">();
+
+ const [isLoft, setIsLoft] = useState(false);
+
+ const [currentSlide, setCurrentSlide] = useState(0);
+
+ useEffect(
+ () =>
+ setSelectedSide(
+ hasSide || unitTypeVariant === "2-bedroom-b" ? undefined : "left"
+ ),
+ [hasSide, unitTypeVariant]
+ );
+
+ useEffect(() => {
+ setIsLoft(unitTypeVariant.includes("loft"));
+ setHasSide(
+ unitTypeVariant.endsWith("-left") || unitTypeVariant.endsWith("-right")
+ );
+ }, [unitTypeVariant]);
+
+ const handlers = useSwipeable({
+ onSwipedLeft: () =>
+ setCurrentSlide(Math.min(currentSlide + 1, isLoft ? 2 : 1)),
+ onSwipedRight: () => setCurrentSlide(Math.max(currentSlide - 1, 0)),
+ preventScrollOnSwipe: true,
+ touchEventOptions: {
+ passive: false,
+ },
+ trackMouse: true,
+ });
+
+ return (
+
+
+ {isLoft ? (
+ <>
+
+
+ project.slug === complexName)
+ ?.types.find(
+ (type) =>
+ type.slug ===
+ (hasSide
+ ? unitTypeVariant
+ .split("-")
+ .slice(0, isLoft ? -2 : -1)
+ .join("-")
+ : unitTypeVariant)
+ )?.legend || []
+ }
+ />
+
+
+
+
+ project.slug === complexName)
+ ?.types.find(
+ (type) =>
+ type.slug ===
+ (hasSide
+ ? unitTypeVariant
+ .split("-")
+ .slice(0, isLoft ? -2 : -1)
+ .join("-")
+ : unitTypeVariant)
+ )?.legend || []
+ }
+ />
+
+
+
+ ) : (
+
+
+ project.slug === complexName)
+ ?.types.find(
+ (type) =>
+ type.slug ===
+ (hasSide
+ ? unitTypeVariant.split("-").slice(0, -1).join("-")
+ : unitTypeVariant)
+ )?.legend || []
+ }
+ />
+
+
+ )}
+
+
+ {!hasSide &&
+ unitTypeVariant !== "2-bedroom-b" &&
+ currentSlide !== (isLoft ? 2 : 1) && (
+
+
+ )}
+
+
+ );
+}
+
+export default UnitSlider;
diff --git a/src/components/UnitTypeCard.tsx b/src/components/UnitTypeCard.tsx
index 038e479..8c2fe19 100644
--- a/src/components/UnitTypeCard.tsx
+++ b/src/components/UnitTypeCard.tsx
@@ -23,7 +23,9 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
+ 
+
+
+ Left
+
+ setSelectedSide(selectedSide === "left" ? "right" : "left")
+ }
+ >
+
+ Right
+
+ {isLoft ? (
+ <>
+
+
+
+ ) : (
+
+ )}
+
+ {Array.from({ length: isLoft ? 3 : 2 }).map((_, index) => (
+
+ ))}
+
+
+
+ 