Refactor FloorsPage component to streamline floor selection and rendering; replace individual floor components with a centralized FloorPlanViewer for improved maintainability. Introduce new floor data structure in Project type for better data management.

src/components/floor-plans/AmenitiesFloorView.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import { AmenitiesFloorData } from "../../types/Floor";
+import Badge from "../ui/Badge";
+import Button from "../ui/Button";
+import PlayIcon from "../icons/PlayIcon";
+import useModalStore from "../../stores/useModalStore";
+import VideoModal from "../VideoModal";
+import ViewToggleButtons from "./ViewToggleButtons";
+import AmentitiesBadge from "../AmentitiesCard";
+import AmenitiesBadge from "../icons/AmenitiesBadge";
+import AmentitiesContentSlider from "../AmentitiesContentSlider";
+
+interface AmenitiesFloorViewProps {
+  floor: AmenitiesFloorData;
+}
+
+function AmenitiesFloorView({ floor }: AmenitiesFloorViewProps) {
+  const { setModal } = useModalStore();
+  const [currentView, setCurrentView] = useState<"exterior" | "interior">(
+    "exterior"
+  );
+
+  const hasInteriorView = !!floor.images.interior;
+  const currentImage =
+    currentView === "interior" && floor.images.interior
+      ? floor.images.interior
+      : floor.images.main;
+
+  // Split amenities into indoor and outdoor if counts are provided
+  const hasIndoorOutdoorSplit =
+    floor.amenitiesCount.indoor !== undefined &&
+    floor.amenitiesCount.outdoor !== undefined;
+
+  const indoorAmenities = hasIndoorOutdoorSplit
+    ? floor.amenitiesList.slice(0, floor.amenitiesCount.indoor)
+    : [];
+
+  const outdoorAmenities = hasIndoorOutdoorSplit
+    ? floor.amenitiesList.slice(floor.amenitiesCount.indoor)
+    : floor.amenitiesList;
+
+  return (
+    <div className="2xl:space-y-[2.222vw] space-y-8">
+      <div className="2xl:space-y-[1.667vw] space-y-6">
+        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
+          <p className="text-h4 font-medium">{floor.displayName}</p>
+          <Badge
+            variant="secondary"
+            text={`${floor.amenitiesCount.total} Amenities`}
+          />
+        </div>
+
+        {hasIndoorOutdoorSplit && (
+          <div className="flex items-center 2xl:gap-[1.667vw] gap-6">
+            <AmenitiesBadge
+              count={floor.amenitiesCount.indoor!}
+              type="Indoor"
+            />
+            <AmenitiesBadge
+              count={floor.amenitiesCount.outdoor!}
+              type="Outdoor"
+            />
+          </div>
+        )}
+
+        <ViewToggleButtons
+          currentView={currentView}
+          onViewChange={setCurrentView}
+          hasInteriorView={hasInteriorView}
+        />
+
+        <div className="bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
+          <img
+            src="/images/floor-plans/compass.png"
+            className="absolute top-0 left-0 size-[7.222vw]"
+            alt=""
+          />
+          <img src={currentImage} alt={floor.name} className="w-full" />
+          {floor.video && (
+            <Button
+              variant="cta"
+              className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] md:max-2xl:top-6 md:max-2xl:right-6 top-4 right-4"
+              onlyIcon
+              size="small"
+              onClick={() => setModal(<VideoModal src={floor.video!} />)}
+            >
+              <span className="2xl:size-[1.111vw] size-4">
+                <PlayIcon />
+              </span>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {hasIndoorOutdoorSplit && indoorAmenities.length > 0 && (
+        <div className="2xl:space-y-[1.667vw] space-y-6">
+          <p className="font-medium text-h4">Indoor Amenities</p>
+          <div className="grid md:grid-cols-4 grid-cols-3 2xl:gap-[1.111vw] gap-4">
+            {indoorAmenities.map((amenity, index) => (
+              <AmentitiesBadge key={index} title={amenity.title} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {hasIndoorOutdoorSplit && indoorAmenities.length > 0 && (
+        <hr className="border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
+      )}
+
+      <div className="2xl:space-y-[1.667vw] space-y-6">
+        <p className="font-medium text-h4">
+          {hasIndoorOutdoorSplit ? "Outdoor Amenities" : "Amenities"}
+        </p>
+        <div
+          className={
+            hasIndoorOutdoorSplit
+              ? "grid md:grid-cols-4 grid-cols-3 2xl:gap-x-[1.111vw] 2xl:gap-y-[1.667vw] gap-x-4 gap-y-6"
+              : "flex flex-wrap 2xl:gap-[0.556vw] gap-2"
+          }
+        >
+          {outdoorAmenities.map((amenity, index) => (
+            <AmentitiesBadge key={index} title={amenity.title} />
+          ))}
+        </div>
+      </div>
+
+      {floor.images.content.length > 1 ? (
+        <AmentitiesContentSlider srcs={floor.images.content} />
+      ) : (
+        floor.images.content.length === 1 && (
+          <img
+            src={floor.images.content[0]}
+            alt={floor.name}
+            className="w-full 2xl:rounded-[1.111vw] rounded-2xl select-none"
+          />
+        )
+      )}
+    </div>
+  );
+}
+
+export default AmenitiesFloorView;

src/components/floor-plans/FloorPlanViewer.tsx

@@ -0,0 +1,46 @@
+import { FloorData } from "../../types/Floor";
+import { Unit } from "../../types/IUnit";
+import { ComplexName } from "../../types/ComplexName";
+import { FloorsData } from "../FloorSelect";
+import ResidentialFloorView from "./ResidentialFloorView";
+import AmenitiesFloorView from "./AmenitiesFloorView";
+
+interface FloorPlanViewerProps {
+  floor: FloorData;
+  complexName: ComplexName;
+  unitsOnFloor?: Unit[];
+  floorsData?: FloorsData[];
+  selectedFloor: string;
+  onFloorSelect: (floor: string) => void;
+}
+
+function FloorPlanViewer({
+  floor,
+  complexName,
+  unitsOnFloor,
+  floorsData,
+  selectedFloor,
+  onFloorSelect,
+}: FloorPlanViewerProps) {
+  if (floor.type === "residential") {
+    return (
+      <ResidentialFloorView
+        floor={floor}
+        complexName={complexName}
+        unitsOnFloor={unitsOnFloor}
+        floorsData={floorsData}
+        selectedFloor={selectedFloor}
+        onFloorSelect={onFloorSelect}
+      />
+    );
+  }
+
+  if (floor.type === "amenities") {
+    return <AmenitiesFloorView floor={floor} />;
+  }
+
+  // This should never happen with proper TypeScript typing
+  return null;
+}
+
+export default FloorPlanViewer;

src/components/floor-plans/ResidentialFloorView.tsx

@@ -0,0 +1,283 @@
+import { useState } from "react";
+import { ResidentialFloorData } from "../../types/Floor";
+import { Unit } from "../../types/IUnit";
+import { ComplexName } from "../../types/ComplexName";
+import { FloorsData } from "../FloorSelect";
+import Badge from "../ui/Badge";
+import Select from "../ui/Select";
+import UnitTypeBadge from "../UnitTypeBadge";
+import Button from "../ui/Button";
+import { usePopupStore } from "../../stores/usePopupStore";
+import { isMobile } from "react-device-detect";
+
+// Import floor plan components
+import FloorPlanMarasiDriveEast from "../FloorPlanMarasiDriveEast";
+import FloorPlanMarasiDriveWestLower from "../FloorPlanMarasiDriveWestLower";
+import FloorPlanMarasiDriveWestUpper from "../FloorPlanMarasiDriveWestUpper";
+import FloorPlanDubaiMarina7_38 from "../FloorPlanDubaiMarina7_38";
+import FloorPlanDubaiMarina7_38Comb from "../FloorPlanDubaiMarina7_38Comb";
+import FloorPlanDubaiMarina39_40 from "../FloorPlanDubaiMarina39_40";
+import FloorPlanDubaiMarina41_42 from "../FloorPlanDubaiMarina41_42";
+
+interface ResidentialFloorViewProps {
+  floor: ResidentialFloorData;
+  complexName: ComplexName;
+  unitsOnFloor?: Unit[];
+  floorsData?: FloorsData[];
+  selectedFloor: string;
+  onFloorSelect: (floor: string) => void;
+}
+
+function ResidentialFloorView({
+  floor,
+  complexName,
+  unitsOnFloor,
+  floorsData,
+  selectedFloor,
+  onFloorSelect,
+}: ResidentialFloorViewProps) {
+  const { setPopup, setPosition } = usePopupStore();
+  const [isCombinable, setIsCombinable] = useState(false);
+
+  // Marasi Drive specific logic
+  if (complexName === "marasi-drive") {
+    const floorNumber = floor.floorNumber;
+    const wing = floor.wing || selectedFloor.split(" ")[0];
+    const currentFloorData = floorsData?.find(
+      (item) => item.floor === floorNumber
+    );
+
+    const totalUnits =
+      (currentFloorData?.East?.totalUnits || 0) +
+      (currentFloorData?.West?.totalUnits || 0);
+
+    const wingData =
+      currentFloorData?.[selectedFloor.split(" ")[0] as "West" | "East"];
+
+    return (
+      <div className="2xl:space-y-[1.111vw] space-y-4" onScroll={() => setPopup(null)}>
+        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-4">
+          <p className="font-medium text-h4">{floorNumber} floor</p>
+          <div className="flex items-center 2xl:gap-[0.278vw] gap-1">
+            <Badge variant="secondary" text={`${totalUnits} Apartments`} />
+          </div>
+        </div>
+        <div className="2xl:space-y-[0.833vw] space-y-2">
+          <div className="flex items-center 2xl:gap-[1.111vw] gap-2">
+            <Select
+              options={
+                floorsData?.flatMap((item) => [
+                  `East ${item.floor}`,
+                  `West ${item.floor}`,
+                ]) || []
+              }
+              defaultOption={selectedFloor?.toString() || ""}
+              onSelect={onFloorSelect}
+              className="2xl:w-[8.333vw] md:max-2xl:w-[120px] w-full"
+              maxOptionsCount={7}
+            />
+            <div className="bg-[#E2E2DC] w-px 2xl:h-[1.667vw] h-1.5"></div>
+            <div className="flex items-center 2xl:gap-[1.667vw] gap-2 max-md:hidden">
+              <UnitTypeBadge
+                type="Studio Flex"
+                count={wingData?.types["Studio Flex"] || 0}
+              />
+              <UnitTypeBadge
+                type="Studio"
+                count={wingData?.types["Studio Squared"] || 0}
+              />
+              <UnitTypeBadge
+                type="1 Bedroom"
+                count={wingData?.types["1 BR Squared"] || 0}
+              />
+              <UnitTypeBadge
+                type="2 Bedroom"
+                count={wingData?.types["2 BR Squared"] || 0}
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className="2xl:p-[4.444vw] p-4 bg-[#F3F3F2] 2xl:rounded-[0.833vw] rounded-lg"
+          onMouseMove={(e) =>
+            !isMobile && setPosition({ x: e.clientX, y: e.clientY })
+          }
+        >
+          {unitsOnFloor && wing === "East" && (
+            <FloorPlanMarasiDriveEast
+              unitsOnFloor={unitsOnFloor}
+              selectedFloor={floorNumber.toString()}
+            />
+          )}
+          {wing === "West" && unitsOnFloor && (
+            <>
+              {floorNumber < 24 ? (
+                <FloorPlanMarasiDriveWestLower
+                  unitsOnFloor={unitsOnFloor}
+                  selectedFloor={floorNumber.toString()}
+                />
+              ) : (
+                <FloorPlanMarasiDriveWestUpper
+                  unitsOnFloor={unitsOnFloor}
+                  selectedFloor={floorNumber.toString()}
+                />
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Dubai Marina specific logic
+  if (complexName === "dubai-marina") {
+    const floorNumber = floor.floorNumber;
+    const currentFloorData = floorsData?.find(
+      (item) => item.floor === floorNumber
+    );
+
+    const isSpecialFloor =
+      selectedFloor === "39-40" || selectedFloor === "41-42";
+
+    return (
+      <div className="2xl:space-y-[1.111vw] space-y-4" onScroll={() => setPopup(null)}>
+        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-4">
+          <p className="font-medium text-h4">{selectedFloor} floor</p>
+          <div className="flex items-center 2xl:gap-[0.278vw] gap-1">
+            <Badge
+              variant="secondary"
+              text={`${currentFloorData?.others.totalUnits || 0} Apartments`}
+            />
+            {!isSpecialFloor && <Badge variant="primary" text="Combinable" />}
+          </div>
+        </div>
+
+        <div className="2xl:space-y-[0.833vw] space-y-2">
+          <div className="flex items-center 2xl:gap-[1.111vw] gap-2">
+            <Select
+              options={
+                floorsData?.map((item) => {
+                  if (item.floor === 39) {
+                    return "39-40";
+                  }
+                  if (item.floor === 41) {
+                    return "41-42";
+                  }
+                  return item.floor.toString();
+                }) || []
+              }
+              defaultOption={selectedFloor?.toString() || ""}
+              onSelect={onFloorSelect}
+              className="2xl:w-[8.333vw] md:max-xl:w-[120px] w-full"
+              maxOptionsCount={7}
+            />
+            <div className="bg-[#E2E2DC] w-px 2xl:h-[1.667vw] h-1.5"></div>
+            <div className="flex items-center 2xl:gap-[1.667vw] gap-2 max-md:hidden">
+              <UnitTypeBadge
+                type="Studio"
+                count={
+                  floorsData?.find(
+                    (item) =>
+                      item.floor ===
+                      parseInt(selectedFloor!.split(" ").at(-1)!)
+                  )?.others.types["Studio2"] || 0
+                }
+              />
+              <UnitTypeBadge
+                type="1 Bedroom"
+                count={
+                  floorsData?.find(
+                    (item) =>
+                      item.floor ===
+                      parseInt(selectedFloor!.split(" ").at(-1)!)
+                  )?.others.types["One Bedroom2"] || 0
+                }
+              />
+              <UnitTypeBadge
+                type="1 Bedroom Loft"
+                count={
+                  floorsData?.find(
+                    (item) =>
+                      item.floor ===
+                      parseInt(selectedFloor!.split(" ").at(-1)!)
+                  )?.others.types["One Bedroom Loft"] || 0
+                }
+              />
+              <UnitTypeBadge
+                type="2 Bedroom Loft"
+                count={
+                  floorsData?.find(
+                    (item) =>
+                      item.floor ===
+                      parseInt(selectedFloor!.split(" ").at(-1)!)
+                  )?.others.types["Two Bedroom Loft"] || 0
+                }
+              />
+            </div>
+          </div>
+          {!isSpecialFloor && (
+            <div className="flex gap-2 justify-center items-center">
+              <Button
+                variant={!isCombinable ? "cta" : "primary"}
+                onClick={() => setIsCombinable(false)}
+              >
+                Standard
+              </Button>
+              <Button
+                variant={isCombinable ? "cta" : "primary"}
+                onClick={() => setIsCombinable(true)}
+              >
+                Combinable
+              </Button>
+            </div>
+          )}
+          <div
+            className="2xl:py-[1.667vw] 2xl:px-[1.111vw] max-2xl:p-4 bg-[#F3F3F2] 2xl:rounded-[0.833vw] rounded-lg relative 2xl:space-y-[2.222vw] space-y-8"
+            onMouseMove={(e) =>
+              !isMobile && setPosition({ x: e.clientX, y: e.clientY })
+            }
+          >
+            {selectedFloor && unitsOnFloor && (
+              <>
+                {+selectedFloor >= 7 && +selectedFloor < 39 && (
+                  <>
+                    {!isCombinable ? (
+                      <FloorPlanDubaiMarina7_38
+                        selectedFloor={selectedFloor}
+                        unitsOnFloor={unitsOnFloor}
+                      />
+                    ) : (
+                      <FloorPlanDubaiMarina7_38Comb
+                        selectedFloor={selectedFloor}
+                        unitsOnFloor={unitsOnFloor}
+                      />
+                    )}
+                  </>
+                )}
+                {selectedFloor === "39-40" && (
+                  <FloorPlanDubaiMarina39_40
+                    selectedFloor={selectedFloor}
+                    unitsOnFloor={unitsOnFloor}
+                    chosenUnit={null}
+                  />
+                )}
+                {selectedFloor === "41-42" && (
+                  <FloorPlanDubaiMarina41_42
+                    selectedFloor={selectedFloor}
+                    unitsOnFloor={unitsOnFloor}
+                    chosenUnit={null}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Default fallback
+  return <div>Unsupported complex: {complexName}</div>;
+}
+
+export default ResidentialFloorView;

src/components/floor-plans/ViewToggleButtons.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import Button from "../ui/Button";
+
+interface ViewToggleButtonsProps {
+  currentView: "exterior" | "interior";
+  onViewChange: (view: "exterior" | "interior") => void;
+  hasInteriorView: boolean;
+}
+
+function ViewToggleButtons({
+  currentView,
+  onViewChange,
+  hasInteriorView,
+}: ViewToggleButtonsProps) {
+  if (!hasInteriorView) {
+    return null;
+  }
+
+  return (
+    <div className="flex 2xl:gap-[0.556vw] gap-2">
+      <Button
+        variant={currentView === "exterior" ? "primary" : "secondary"}
+        size="small"
+        onClick={() => onViewChange("exterior")}
+        className={clsx(
+          "2xl:px-[1.111vw] 2xl:py-[0.556vw] px-4 py-2",
+          currentView === "exterior" && "!bg-[#0D1922] !text-white"
+        )}
+      >
+        Exterior View
+      </Button>
+      <Button
+        variant={currentView === "interior" ? "primary" : "secondary"}
+        size="small"
+        onClick={() => onViewChange("interior")}
+        className={clsx(
+          "2xl:px-[1.111vw] 2xl:py-[0.556vw] px-4 py-2",
+          currentView === "interior" && "!bg-[#0D1922] !text-white"
+        )}
+      >
+        Interior View
+      </Button>
+    </div>
+  );
+}
+
+export default ViewToggleButtons;

src/data/floors/dubai-marina.ts

@@ -0,0 +1,156 @@
+import { FloorData } from "../../types/Floor";
+
+export const dubaiMarinaFloors: FloorData[] = [
+  // Ground Level
+  {
+    id: "ground-level",
+    name: "Ground Level",
+    displayName: "Ground Level",
+    type: "amenities",
+    amenitiesCount: {
+      total: 14,
+    },
+    amenitiesList: [
+      { icon: "text", title: "Residential Entrance" },
+      { icon: "text", title: "Multifunctional Feature Staircase" },
+      { icon: "text", title: "Lobby Lounge & Concierge" },
+      { icon: "text", title: "Outdoor Landscape Seating Area" },
+      { icon: "text", title: "Lift Lobby" },
+      { icon: "text", title: "Rove Cafe & Energize Bar" },
+      { icon: "text", title: "Organic Smart Gardens & Seating" },
+      { icon: "text", title: "Co-working Area " },
+      { icon: "text", title: "24x7 Convenience Store" },
+      { icon: "text", title: "WCs" },
+      { icon: "text", title: "Visitor Parking" },
+      { icon: "text", title: "EV Charging Stations" },
+      { icon: "text", title: "Bicycle/Scooter Rental & Storage" },
+      { icon: "text", title: "Drop-off Area" },
+    ],
+    images: {
+      main: "/images/floor-plans/dubai-marina/ground.png",
+      content: ["/images/floor-plans/dubai-marina/ground/content.jpg"],
+    },
+    video: "/videos/dubai-marina/GroundDubaiMarina.mp4",
+  },
+
+  // Podium Level
+  {
+    id: "podium-level",
+    name: "Podium Level",
+    displayName: "Podium Level",
+    type: "amenities",
+    amenitiesCount: {
+      total: 14,
+      indoor: 3,
+      outdoor: 12,
+    },
+    amenitiesList: [
+      // Indoor
+      { icon: "text", title: "Multipurpose Hall" },
+      { icon: "text", title: "Gaming Lounge" },
+      { icon: "text", title: "State-of-the-art Gym" },
+      { icon: "text", title: "7m Climbing Wall" },
+      { icon: "text", title: "Changing Rooms & Lockers" },
+      { icon: "text", title: "Hydration Station" },
+      { icon: "text", title: "Boutique Fitness Studio - Crank" },
+      { icon: "text", title: "Rentable Guest Rooms" },
+      // Outdoor
+      { icon: "text", title: "Semi-Olympic Leisure Pool" },
+      { icon: "text", title: "Outdoor Cinema & Amphitheatre" },
+      { icon: "text", title: "Water Feature Wall" },
+      { icon: "text", title: "Multipurpose Fitness Pool" },
+      { icon: "text", title: "Communal Gardens" },
+      { icon: "text", title: "BBQ & Social Zone" },
+      { icon: "text", title: "Popsicle Cart" },
+      { icon: "text", title: "Gaming Lounge - Terrace" },
+      { icon: "text", title: "Zen Library" },
+      { icon: "text", title: "Co-working Area" },
+      { icon: "text", title: "Multipurpose Hall with Terrace" },
+      { icon: "text", title: "Marina View Chill Zone" },
+      { icon: "text", title: "Outdoor Gym" },
+    ],
+    images: {
+      main: "/images/floor-plans/dubai-marina/podium.png",
+      content: [
+        "/images/floor-plans/dubai-marina/podium/content1.jpg",
+        "/images/floor-plans/dubai-marina/podium/content2.jpg",
+        "/images/floor-plans/dubai-marina/podium/content3.jpg",
+      ],
+    },
+    video: "/videos/dubai-marina/PodiumDubaiMarina.mp4",
+  },
+
+  // Residential floors 7-20
+  ...Array.from({ length: 14 }, (_, i) => {
+    const floor = i + 7;
+    return {
+      id: `floor-${floor}`,
+      name: `${floor}`,
+      displayName: `${floor}`,
+      type: "residential" as const,
+      floorNumber: floor,
+    };
+  }),
+
+  // Residential floors 22-38
+  ...Array.from({ length: 17 }, (_, i) => {
+    const floor = i + 22;
+    return {
+      id: `floor-${floor}`,
+      name: `${floor}`,
+      displayName: `${floor}`,
+      type: "residential" as const,
+      floorNumber: floor,
+    };
+  }),
+
+  // Residential floors 39-40 (special layout)
+  {
+    id: "floor-39-40",
+    name: "39-40",
+    displayName: "39-40",
+    type: "residential",
+    floorNumber: 39,
+  },
+
+  // Residential floors 41-42 (special layout)
+  {
+    id: "floor-41-42",
+    name: "41-42",
+    displayName: "41-42",
+    type: "residential",
+    floorNumber: 41,
+  },
+
+  // Rooftop (Sky 44)
+  {
+    id: "rooftop",
+    name: "Rooftop",
+    displayName: "Sky 44 - Rooftop",
+    type: "amenities",
+    amenitiesCount: {
+      total: 14,
+    },
+    amenitiesList: [
+      { icon: "text", title: "Sky Viewing Lounges" },
+      { icon: "text", title: "Convertible Indoor Infinity Pool" },
+      { icon: "text", title: "Marina View Amphitheatre" },
+      { icon: "text", title: "Ultra Shield Oxygen Pod" },
+      { icon: "text", title: "Aroma Steam Pod" },
+      { icon: "text", title: "Reflexology Pool" },
+      { icon: "text", title: "Cold Bucket Experience Shower Pod" },
+      { icon: "text", title: "Experience Shower Pod" },
+      { icon: "text", title: "Cold Plunge Pool" },
+      { icon: "text", title: "Salt Steam Pod" },
+      { icon: "text", title: "Finnish Sauna Pod" },
+      { icon: "text", title: "Water Feature Wall" },
+      { icon: "text", title: "Vitality Pool" },
+      { icon: "text", title: "Changing Rooms and Lockers" },
+    ],
+    images: {
+      main: "/images/floor-plans/dubai-marina/rooftop.png",
+      content: ["/images/floor-plans/dubai-marina/rooftop/content.jpg"],
+    },
+    video: "/videos/dubai-marina/SkyDubaiMarina.mp4",
+  },
+];

src/data/floors/marasi-drive.ts

@@ -0,0 +1,207 @@
+import { FloorData } from "../../types/Floor";
+
+export const marasiDriveFloors: FloorData[] = [
+  // Ground Level
+  {
+    id: "ground-level",
+    name: "Ground Level",
+    displayName: "Ground Level",
+    type: "amenities",
+    amenitiesCount: {
+      total: 7,
+    },
+    amenitiesList: [
+      { icon: "RoveCafe", title: "Rove Café" },
+      { icon: "LoungingSpaceIcon", title: "Lobby Lounge" },
+      { icon: "CoworkingIcon", title: "Coworking Space" },
+      { icon: "LushLandscapeIcon", title: "Outdoor Terrace" },
+      { icon: "PrivateMeetingRoomsIcon", title: "Private Meeting Rooms" },
+      { icon: "ConvenienceIcon", title: "Convenience Store" },
+      { icon: "SoundproofMeetingPodsIcon", title: "Soundproof Meeting Pods" },
+    ],
+    images: {
+      main: "/images/floor-plans/marasi-drive/ground.png",
+      content: [
+        "/images/floor-plans/marasi-drive/ground/content1.jpg",
+        "/images/floor-plans/marasi-drive/ground/content2.jpg",
+        "/images/floor-plans/marasi-drive/ground/content3.jpg",
+        "/images/floor-plans/marasi-drive/ground/content4.jpg",
+        "/images/floor-plans/marasi-drive/ground/content5.jpg",
+        "/images/floor-plans/marasi-drive/ground/content6.jpg",
+      ],
+    },
+    video: "/videos/marasi-drive/GroundMarasiDrive.mp4",
+  },
+
+  // Podium Level
+  {
+    id: "podium-level",
+    name: "Podium Level",
+    displayName: "Podium Level",
+    type: "amenities",
+    amenitiesCount: {
+      total: 27,
+      indoor: 13,
+      outdoor: 14,
+    },
+    amenitiesList: [
+      // Indoor
+      { icon: "LoungeIcon", title: "Indoor Lounge" },
+      { icon: "MonkeyBarsIcon", title: "Monkey Bars" },
+      { icon: "KaraokeIcon", title: "Karaoke Room" },
+      { icon: "ArcadeGameIcon", title: "Arcade Games" },
+      { icon: "ClimbingWallIcon", title: "Climbing Wall" },
+      { icon: "PlaystationIcon", title: "Playstation Deck" },
+      { icon: "FullyEquippedGymIcon", title: "Fully Equipped Gym" },
+      { icon: "ChangingRoomIcon", title: "Changing Rooms" },
+      { icon: "HammockMovieLoungeIcon", title: "Hammock Movie Lounge" },
+      { icon: "GuestRooms", title: "Guest Rooms" },
+      { icon: "MultiballInteractiveGamingIcon", title: "Multi Ball Interactive Gaming" },
+      { icon: "MultiPurposeRoomWithKitchenIcon", title: "Multi-purpose Room for Kitchen" },
+      { icon: "GamingLoungeIcon", title: "Gaming Lounge" },
+      // Outdoor
+      { icon: "UrbanBeachPoolIcon", title: "Urban Beach Pool" },
+      { icon: "JacuzziIcon", title: "Jacuzzi" },
+      { icon: "YogaLoungeIcon", title: "Yoga Lounge" },
+      { icon: "SunLoungeIcon", title: "Sun Lounging Pool" },
+      { icon: "CascadingLeisurePoolIcon", title: "Cascading Leisure Pool" },
+      { icon: "AquaCyclingIcon", title: "AquaCycling" },
+      { icon: "OpenAirGymIcon", title: "Open-Air Gym" },
+      { icon: "RoveBeverageTruckIcon", title: "Rove Beverage Truck" },
+      { icon: "CabanasWithDaybeds", title: "Cabanas with Daybeds" },
+      { icon: "IntegratedLapPoolIcon", title: "Integrated Lap Pool" },
+      { icon: "SunkenGardensIcon", title: "Sunken Gardens" },
+      { icon: "MultiPurposeRoomWithKitchenIcon", title: "Outdoor Multi-Purpose Terrace" },
+      { icon: "GamingTerraceIcon", title: "Outdoor Gaming Terrace" },
+      { icon: "CoworkingIcon", title: "Outdoor Coworking Space" },
+    ],
+    images: {
+      main: "/images/floor-plans/marasi-drive/podium.png",
+      content: [
+        "/images/floor-plans/marasi-drive/podium/content1.jpg",
+        "/images/floor-plans/marasi-drive/podium/content2.jpg",
+        "/images/floor-plans/marasi-drive/podium/content3.jpg",
+        "/images/floor-plans/marasi-drive/podium/content4.jpg",
+        "/images/floor-plans/marasi-drive/podium/content5.jpg",
+        "/images/floor-plans/marasi-drive/podium/content6.jpg",
+        "/images/floor-plans/marasi-drive/podium/content7.jpg",
+        "/images/floor-plans/marasi-drive/podium/content8.jpg",
+        "/images/floor-plans/marasi-drive/podium/content9.jpg",
+        "/images/floor-plans/marasi-drive/podium/content10.jpg",
+        "/images/floor-plans/marasi-drive/podium/content11.jpg",
+      ],
+    },
+    video: "/videos/marasi-drive/PodiumMarasiDrive.mp4",
+  },
+
+  // Residential floors 5-21 East Wing
+  ...Array.from({ length: 17 }, (_, i) => {
+    const floor = i + 5;
+    return {
+      id: `east-${floor}`,
+      name: `East ${floor}`,
+      displayName: `East Wing ${floor}`,
+      type: "residential" as const,
+      floorNumber: floor,
+      wing: "East" as const,
+    };
+  }),
+
+  // Residential floors 5-21 West Wing
+  ...Array.from({ length: 17 }, (_, i) => {
+    const floor = i + 5;
+    return {
+      id: `west-${floor}`,
+      name: `West ${floor}`,
+      displayName: `West Wing ${floor}`,
+      type: "residential" as const,
+      floorNumber: floor,
+      wing: "West" as const,
+    };
+  }),
+
+  // Residential floors 24-31 West Wing (upper)
+  ...Array.from({ length: 8 }, (_, i) => {
+    const floor = i + 24;
+    return {
+      id: `west-${floor}`,
+      name: `West ${floor}`,
+      displayName: `West Wing ${floor}`,
+      type: "residential" as const,
+      floorNumber: floor,
+      wing: "West" as const,
+    };
+  }),
+
+  // Sky Garden
+  {
+    id: "sky-garden",
+    name: "Sky Garden",
+    displayName: "Sky Garden",
+    type: "amenities",
+    amenitiesCount: {
+      total: 15,
+      indoor: 3,
+      outdoor: 12,
+    },
+    amenitiesList: [
+      // Indoor
+      { icon: "PoolIcon", title: "Indoor Lap Pool" },
+      { icon: "WellnessIcon", title: "Wellness Features" },
+      { icon: "ChangingRoomIcon", title: "Changing Rooms" },
+      // Outdoor
+      { icon: "PingPongIcon", title: "Padel Pong" },
+      { icon: "SunLoungeIcon", title: "Sun Lounging Deck" },
+      { icon: "CinemaIcon", title: "Outdoor Cinema" },
+      { icon: "BoulderingWallIcon", title: "Bouldering Wall" },
+      { icon: "PingPongInTubeIcon", title: "Ping Pong in a Tube" },
+      { icon: "AmphitheatreIcon", title: "Amphitheatre" },
+      { icon: "CommunalDiningTablesIcon", title: "Communal Dining Tables" },
+      { icon: "SuspendedLoungingNetsIcon", title: "Suspended Lounging Nets " },
+      { icon: "LushLandscapeIcon", title: "Lush Landscape" },
+      { icon: "RunningWheelIcon", title: "Running Wheel" },
+      { icon: "ChessIcon", title: "Chess Tables" },
+      { icon: "ClimbingWallIcon", title: "Climbing Wall" },
+      { icon: "CoworkingIcon", title: "Outdoor Coworking Space" },
+      { icon: "MultiPurposeIcon", title: "Multi-purpose Court" },
+    ],
+    images: {
+      main: "/images/floor-plans/marasi-drive/sky-garden.png",
+      content: [
+        "/images/floor-plans/marasi-drive/skygarden/content1.jpg",
+        "/images/floor-plans/marasi-drive/skygarden/content2.jpg",
+        "/images/floor-plans/marasi-drive/skygarden/content3.jpg",
+        "/images/floor-plans/marasi-drive/skygarden/content4.jpg",
+      ],
+    },
+    video: "/videos/marasi-drive/SkyGardenMarasiDrive.mp4",
+  },
+
+  // Rooftop
+  {
+    id: "rooftop",
+    name: "Rooftop",
+    displayName: "Rooftop",
+    type: "amenities",
+    amenitiesCount: {
+      total: 10,
+    },
+    amenitiesList: [
+      { icon: "StargazingIcon", title: "Stargazing Point" },
+      { icon: "BBQTerraceIcon", title: "BBQ Terrace" },
+      { icon: "OutdoorKitchenIcon", title: "Outdoor Kitchen" },
+      { icon: "CabanasWithDaybeds", title: "Cabanas with Daybeds" },
+      { icon: "ViewingDeckWithWingsIcon", title: "Viewing Deck with Wings" },
+      { icon: "LoungingSpaceIcon", title: "Lounging Space" },
+      { icon: "SunkenSeatingIcon", title: "Sunken Seating" },
+      { icon: "FirePitIcon", title: "Firepit" },
+      { icon: "RooftopGardenIcon", title: "Rooftop Garden" },
+      { icon: "CommunalDiningTablesRoundedIcon", title: "Communal Dining Tables" },
+    ],
+    images: {
+      main: "/images/floor-plans/marasi-drive/rooftop.png",
+      content: ["/images/floor-plans/marasi-drive/rooftop/content.jpg"],
+    },
+    video: "/videos/marasi-drive/RooftopMarasiDrive.mp4",
+  },
+];

src/pages/FloorsPage.tsx

@@ -2,33 +2,16 @@ import FloorSelect, { FloorsData } from "../components/FloorSelect";
 import { useParams } from "react-router";
 import FloorSidebar from "../components/FloorSidebar";
 
-import { useEffect, useState } from "react";
-import Select from "../components/ui/Select";
+import { useState, useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
-import UnitTypeBadge from "../components/UnitTypeBadge";
-import FloorPlanMarasiDriveEast from "../components/FloorPlanMarasiDriveEast";
-import RooftopMarasiDrive from "../components/floor-plans/marasi-drive/RooftopMarasiDrive";
-import GroundMarasiDrive from "../components/floor-plans/marasi-drive/GroundMarasiDrive";
-import PodiumMarasiDrive from "../components/floor-plans/marasi-drive/PodiumMarasiDrive";
-import SkyGardenMarasiDrive from "../components/floor-plans/marasi-drive/SkyGardenMarasiDrive";
-import Badge from "../components/ui/Badge";
-import RooftopDubaiMarina from "../components/floor-plans/dubai-marina/RooftopDubaiMarina";
-import GroundDubaiMarina from "../components/floor-plans/dubai-marina/GroundDubaiMarina";
-import PodiumDubaiMarina from "../components/floor-plans/dubai-marina/PodiumDubaiMarina";
-import FloorPlanMarasiDriveWestLower from "../components/FloorPlanMarasiDriveWestLower";
-import FloorPlanMarasiDriveWestUpper from "../components/FloorPlanMarasiDriveWestUpper";
 import { SPECIAL_FLOORS } from "../constants/floors";
 import { Unit } from "../types/IUnit";
 import slugToComplexName from "../utils/slugToComplexName";
-import { usePopupStore } from "../stores/usePopupStore";
-import { isMobile } from "react-device-detect";
-import FloorPlanDubaiMarina41_42 from "../components/FloorPlanDubaiMarina41_42";
-import FloorPlanDubaiMarina39_40 from "../components/FloorPlanDubaiMarina39_40";
-import FloorPlanDubaiMarina7_38Comb from "../components/FloorPlanDubaiMarina7_38Comb";
-import FloorPlanDubaiMarina7_38 from "../components/FloorPlanDubaiMarina7_38";
-import Button from "../components/ui/Button";
 import { ComplexName } from "../types/ComplexName";
+import FloorPlanViewer from "../components/floor-plans/FloorPlanViewer";
+import { marasiDriveFloors } from "../data/floors/marasi-drive";
+import { dubaiMarinaFloors } from "../data/floors/dubai-marina";
 
 function FloorsPage() {
   const [selectedFloor, setSelectedFloor] = useState<string | null>(null);
@@ -66,12 +49,22 @@ function FloorsPage() {
         .json<Unit[]>(),
   });
 
-  const { setPosition, setPopup } = usePopupStore();
-  const [isCombinable, setIsCombinable] = useState(false);
+  // Get floor data based on complex
+  const allFloors = useMemo(() => {
+    if (complexName === "marasi-drive") {
+      return marasiDriveFloors;
+    }
+    if (complexName === "dubai-marina") {
+      return dubaiMarinaFloors;
+    }
+    return [];
+  }, [complexName]);
 
-  useEffect(() => {
-    setIsCombinable(false);
-  }, [selectedFloor]);
+  // Find current floor
+  const currentFloor = useMemo(() => {
+    if (!selectedFloor) return null;
+    return allFloors.find((floor) => floor.name === selectedFloor);
+  }, [selectedFloor, allFloors]);
 
   return (
     <div className="relative 2xl:h-[calc(100dvh-4.444vw)]md:max-2xl:h-[calc(100vh-64px)]h-[calc(100vh-56px)] h-full overflow-hidden">
@@ -84,287 +77,20 @@ function FloorsPage() {
         isOpen={!!selectedFloor}
         onClose={() => setSelectedFloor(null)}
       >
-        {complexName === "dubai-marina" && (
-          <>
-            {selectedFloor === "Rooftop" && <RooftopDubaiMarina />}
-            {selectedFloor === "Ground Level" && <GroundDubaiMarina />}
-            {selectedFloor === "Podium Level" && <PodiumDubaiMarina />}
-            {!!parseInt(selectedFloor!) && (
-              <div
-                className="2xl:space-y-[1.111vw] space-y-4"
-                onScroll={() => setPopup(null)}
-              >
-                <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-4">
-                  <p className="font-medium text-h4">{selectedFloor} floor</p>
-                  <div className="flex items-center 2xl:gap-[0.278vw] gap-1">
-                    <Badge
-                      variant="secondary"
-                      text={`${
-                        floorsData?.find(
-                          (item) => item.floor === parseInt(selectedFloor!),
-                        )?.others.totalUnits || 0
-                      } Apartments`}
-                    />
-                    <Badge variant="primary" text="Combinable" />
-                  </div>
-                </div>
-
-                <div className="2xl:space-y-[0.833vw] space-y-2">
-                  <div className="flex items-center 2xl:gap-[1.111vw] gap-2">
-                    <Select
-                      options={
-                        floorsData?.map((item) => {
-                          if (item.floor === 39) {
-                            return "39-40";
-                          }
-                          if (item.floor === 41) {
-                            return "41-42";
-                          }
-                          return item.floor.toString();
-                        }) || []
-                      }
-                      defaultOption={selectedFloor?.toString() || ""}
-                      onSelect={setSelectedFloor}
-                      className="2xl:w-[8.333vw] md:max-xl:w-[120px] w-full"
-                      maxOptionsCount={7}
-                    />
-                    <div className="bg-[#E2E2DC] w-px 2xl:h-[1.667vw] h-1.5"></div>
-                    <div className="flex items-center 2xl:gap-[1.667vw] gap-2 max-md:hidden">
-                      <UnitTypeBadge
-                        type="Studio"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor!.split(" ").at(-1)!),
-                          )?.others.types["Studio2"] || 0
-                        }
-                      />
-                      <UnitTypeBadge
-                        type="1 Bedroom"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor!.split(" ").at(-1)!),
-                          )?.others.types["One Bedroom2"] || 0
-                        }
-                      />
-                      <UnitTypeBadge
-                        type="1 Bedroom Loft"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor!.split(" ").at(-1)!),
-                          )?.others.types["One Bedroom Loft"] || 0
-                        }
-                      />
-                      <UnitTypeBadge
-                        type="2 Bedroom Loft"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor!.split(" ").at(-1)!),
-                          )?.others.types["Two Bedroom Loft"] || 0
-                        }
-                      />
-                    </div>
-                  </div>
-                  {selectedFloor !== "39-40" && selectedFloor !== "41-42" && (
-                    <div className="flex gap-2 justify-center items-center">
-                      <Button
-                        variant={!isCombinable ? "cta" : "primary"}
-                        // className="w-full"
-                        onClick={() => setIsCombinable(false)}
-                      >
-                        Standard
-                      </Button>
-                      <Button
-                        variant={isCombinable ? "cta" : "primary"}
-                        // className="w-full"
-                        onClick={() => setIsCombinable(true)}
-                      >
-                        Combinable
-                      </Button>
-                    </div>
-                  )}
-                  <div
-                    className="2xl:py-[1.667vw] 2xl:px-[1.111vw] max-2xl:p-4 bg-[#F3F3F2] 2xl:rounded-[0.833vw] rounded-lg relative 2xl:space-y-[2.222vw] space-y-8"
-                    onMouseMove={(e) =>
-                      !isMobile && setPosition({ x: e.clientX, y: e.clientY })
-                    }
-                  >
-                    {selectedFloor && unitsOnFloor && (
-                      <>
-                        {+selectedFloor >= 7 && +selectedFloor < 39 && (
-                          <>
-                            {!isCombinable ? (
-                              <FloorPlanDubaiMarina7_38
-                                selectedFloor={selectedFloor}
-                                unitsOnFloor={unitsOnFloor}
-                              />
-                            ) : (
-                              <FloorPlanDubaiMarina7_38Comb
-                                selectedFloor={selectedFloor}
-                                unitsOnFloor={unitsOnFloor}
-                              />
-                            )}
-                          </>
-                        )}
-                        {selectedFloor === "39-40" && (
-                          <FloorPlanDubaiMarina39_40
-                            selectedFloor={selectedFloor}
-                            unitsOnFloor={unitsOnFloor}
-                            chosenUnit={null}
-                          />
-                        )}
-                        {selectedFloor === "41-42" && (
-                          <FloorPlanDubaiMarina41_42
-                            selectedFloor={selectedFloor}
-                            unitsOnFloor={unitsOnFloor}
-                            chosenUnit={null}
-                          />
-                        )}
-                      </>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-          </>
+        {currentFloor && (
+          <FloorPlanViewer
+            floor={currentFloor}
+            complexName={complexName!}
+            unitsOnFloor={unitsOnFloor}
+            floorsData={floorsData}
+            selectedFloor={selectedFloor!}
+            onFloorSelect={setSelectedFloor}
+          />
         )}
-        {complexName === "marasi-drive" && (
-          <>
-            {selectedFloor === "Rooftop" && <RooftopMarasiDrive />}
-            {selectedFloor === "Ground Level" && <GroundMarasiDrive />}
-            {selectedFloor === "Podium Level" && <PodiumMarasiDrive />}
-            {selectedFloor === "Sky Garden" && <SkyGardenMarasiDrive />}
-            {selectedFloor && !!parseInt(selectedFloor.split(" ").at(-1)!) && (
-              <div
-                className="2xl:space-y-[1.111vw] space-y-4"
-                onScroll={() => setPopup(null)}
-              >
-                <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-4">
-                  <p className="font-medium text-h4">
-                    {selectedFloor.split(" ").at(-1)} floor
-                  </p>
-                  <div className="flex items-center 2xl:gap-[0.278vw] gap-1">
-                    <Badge
-                      variant="secondary"
-                      text={`${
-                        (floorsData?.find(
-                          (item) =>
-                            item.floor ===
-                            parseInt(selectedFloor.split(" ").at(-1)!),
-                        )?.East?.totalUnits || 0) +
-                        (floorsData?.find(
-                          (item) =>
-                            item.floor ===
-                            parseInt(selectedFloor.split(" ").at(-1)!),
-                        )?.West?.totalUnits || 0)
-                      } Apartments`}
-                    />
-                    {/* <Badge variant="primary" text="Combinable" /> */}
-                  </div>
-                </div>
-                <div className="2xl:space-y-[0.833vw] space-y-2">
-                  <div className="flex items-center 2xl:gap-[1.111vw] gap-2">
-                    <Select
-                      options={
-                        floorsData?.flatMap((item) => [
-                          `East ${item.floor}`,
-                          `West ${item.floor}`,
-                        ]) || []
-                      }
-                      defaultOption={selectedFloor?.toString() || ""}
-                      onSelect={setSelectedFloor}
-                      className="2xl:w-[8.333vw] md:max-2xl:w-[120px] w-full"
-                      maxOptionsCount={7}
-                    />
-                    <div className="bg-[#E2E2DC] w-px 2xl:h-[1.667vw] h-1.5"></div>
-                    <div className="flex items-center 2xl:gap-[1.667vw] gap-2 max-md:hidden">
-                      <UnitTypeBadge
-                        type="Studio Flex"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor.split(" ").at(-1)!),
-                          )?.[selectedFloor.split(" ")[0] as "West" | "East"]
-                            .types["Studio Flex"] || 0
-                        }
-                      />
-                      <UnitTypeBadge
-                        type="Studio"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor.split(" ").at(-1)!),
-                          )?.[selectedFloor.split(" ")[0] as "West" | "East"]
-                            .types["Studio Squared"] || 0
-                        }
-                      />
-                      <UnitTypeBadge
-                        type="1 Bedroom"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor.split(" ").at(-1)!),
-                          )?.[selectedFloor.split(" ")[0] as "West" | "East"]
-                            .types["1 BR Squared"] || 0
-                        }
-                      />
-                      <UnitTypeBadge
-                        type="2 Bedroom"
-                        count={
-                          floorsData?.find(
-                            (item) =>
-                              item.floor ===
-                              parseInt(selectedFloor.split(" ").at(-1)!),
-                          )?.[selectedFloor.split(" ")[0] as "West" | "East"]
-                            .types["2 BR Squared"] || 0
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div
-                  className="2xl:p-[4.444vw] p-4 bg-[#F3F3F2] 2xl:rounded-[0.833vw] rounded-lg"
-                  onMouseMove={(e) =>
-                    !isMobile && setPosition({ x: e.clientX, y: e.clientY })
-                  }
-                >
-                  {unitsOnFloor && selectedFloor.split(" ")[0] === "East" && (
-                    <FloorPlanMarasiDriveEast
-                      unitsOnFloor={unitsOnFloor}
-                      selectedFloor={selectedFloor.split(" ").at(-1)!}
-                    />
-                  )}
-                  {selectedFloor.split(" ")[0] === "West" && unitsOnFloor && (
-                    <>
-                      {+selectedFloor.split(" ")[1] < 24 ? (
-                        <FloorPlanMarasiDriveWestLower
-                          unitsOnFloor={unitsOnFloor}
-                          selectedFloor={selectedFloor.split(" ").at(-1)!}
-                        />
-                      ) : (
-                        <FloorPlanMarasiDriveWestUpper
-                          unitsOnFloor={unitsOnFloor}
-                          selectedFloor={selectedFloor.split(" ").at(-1)!}
-                        />
-                      )}
-                    </>
-                  )}
-                </div>
-              </div>
-            )}
-          </>
+        {!currentFloor && complexName === "hq" && <>HQ</>}
+        {!currentFloor && selectedFloor && (
+          <div>Floor not found: {selectedFloor}</div>
         )}
-        {complexName === "hq" && <>HQ</>}
       </FloorSidebar>
     </div>
   );

src/types/Floor.ts

@@ -0,0 +1,36 @@
+// Базовый интерфейс для всех этажей
+export interface BaseFloorData {
+  id: string;
+  name: string; // "1", "Rooftop", "Ground Level" и т.д.
+  displayName: string; // "1st Floor", "Rooftop"
+}
+
+// Жилой этаж с квартирами и SVG масками
+export interface ResidentialFloorData extends BaseFloorData {
+  type: 'residential';
+  floorNumber: number;
+  wing?: 'East' | 'West'; // для Marasi Drive
+}
+
+// Этаж с удобствами
+export interface AmenitiesFloorData extends BaseFloorData {
+  type: 'amenities';
+  amenitiesCount: {
+    total: number;
+    indoor?: number;
+    outdoor?: number;
+  };
+  amenitiesList: {
+    icon: string; // название компонента иконки
+    title: string;
+  }[];
+  images: {
+    main: string; // основное изображение (exterior)
+    interior?: string; // для переключения вида
+    content: string[]; // изображения для слайдера/галереи
+  };
+  video?: string; // путь к видео
+}
+
+// Discriminated union
+export type FloorData = ResidentialFloorData | AmenitiesFloorData;

src/types/Project.ts

@@ -1,4 +1,5 @@
 import UnitType from "./UnitType";
+import { FloorData } from "./Floor";
 
 export default interface Project {
   title: string;
@@ -7,6 +8,7 @@ export default interface Project {
   buildingType: "residential" | "commercial";
   types: UnitType[];
   amenitiesFloors: AmenitiesFloor[];
+  floors?: FloorData[]; // New centralized floor data structure
 }
 
 export interface AmenitiesFloor {