+
+ );
+};
+
+export default LivingSolutionSlider;
diff --git a/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
index 364ea4e..65d990a 100644
--- a/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
+++ b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
@@ -4,16 +4,21 @@ interface ApartmentDescriptionProps {
const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => {
return (
-
+
+
+ {images.map((image) => (
+ 
+ ))}
+
+ }
+ className="absolute text-[#73787C] top-[calc(50%-22px)] xl:left-solution-slider-btn-offset left-6 hidden sm:block"
+ />
+ }
+ className="absolute text-[#73787C] top-[calc(50%-22px)] right-6 hidden sm:block"
+ />
+
+ {images.map((image, index) => (
+
+ ))}
+
+
+
diff --git a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
index 0896fb5..48cc682 100644
--- a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+++ b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
@@ -25,17 +25,9 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
}
function handleMouseMove(e: MouseEvent) {
- const top = window.innerWidth / 2 - window.innerHeight / 2;
- // setMousePos([e.clientX - 752, e.clientY - Math.abs(top) + 5]);
- const y = e.clientY - 210;
- const x = e.clientX - 800;
+ const y = e.clientY - 170;
+ const x = e.clientX - window.innerWidth / 2 - 50;
setMousePos([x, y]);
- console.log("e.clientX", e.clientX);
- console.log("e.clientY", e.clientY);
- // setMousePos([
- // e.clientX - window.innerWidth / 2 - 48,
- // e.clientY - window.innerHeight / 2 - top,
- // ]);
}
function handleOnMouseOut(): void {
@@ -53,64 +45,67 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
}, []);
return (
-
-
- 1 bedroom, 609 Sqft -
-AED 1,668,888
+1 bedroom, 609 Sqft
+
+
+ East Wing
+ +Floor 11
+ +E-213
+AED 1,668,888
-
-
diff --git a/src/components/virtualTour/VirtualTourSidebar.tsx b/src/components/virtualTour/VirtualTourSidebar.tsx
index 46009be..c55bec0 100644
--- a/src/components/virtualTour/VirtualTourSidebar.tsx
+++ b/src/components/virtualTour/VirtualTourSidebar.tsx
@@ -5,12 +5,15 @@ import Button from "../Button";
import BookingIcon from "../icons/BookingIcon";
import ChevronDownIcon from "../icons/ChevronDownIcon";
import HeartIcon from "../icons/Heart";
+import MapVectorIcon from "../icons/MapVectorIcon";
+import useCompass from "../../store/useCompass";
interface VirtualTourSidebarProps {
currentAppartment: null | IAppartmentSphere;
}
const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
+ const { currentCompassRotate } = useCompass();
const [isActive, setIsActive] = useState(false);
const { setSelectedSphere, selectedSphere } = useSphere();
const handleOnShowClick = () => {
@@ -53,8 +56,18 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
!isActive ? "max-h-0 opacity-0" : "max-h-screen opacity-100"
}`}
>
-
-
- {currentFloor?.floor} Floor -
-{currentFloor?.wing}
+ <> +
+
+
+
+
);
};
diff --git a/src/components/complexWingPage/SequenceWing.tsx b/src/components/complexWingPage/SequenceWing.tsx
index d7491fe..669ddef 100644
--- a/src/components/complexWingPage/SequenceWing.tsx
+++ b/src/components/complexWingPage/SequenceWing.tsx
@@ -159,13 +159,13 @@ const SequenceWing = () => {
}}
>
+
-
+
+ + {currentFloor?.floor} Floor +
+{currentFloor?.wing}
+
+
234 units
+
-
- 234 units
+
+
+
+
+
+
+ Studio Flex
+
+
+
+ Studio
+
+
+
+ 1 Bedroom
+
+
+
+ 1 Bedroom
+
+
+
+ 2 Bedroom
+
+
-
-
-
-
- Studio Flex
-
-
-
- Studio
-
-
-
- 1 Bedroom
-
-
-
- 1 Bedroom
-
-
-
- 2 Bedroom
-
-
-
-
-
- {
+ return (
+
+ );
+};
+
+export default ArrowLeftIcon;
diff --git a/src/components/icons/MapVectorIcon.tsx b/src/components/icons/MapVectorIcon.tsx
new file mode 100644
index 0000000..a6267db
--- /dev/null
+++ b/src/components/icons/MapVectorIcon.tsx
@@ -0,0 +1,20 @@
+const MapVectorIcon = () => {
+ return (
+
+ );
+};
+
+export default MapVectorIcon;
diff --git a/src/components/virtualTour/LabelMarker.tsx b/src/components/virtualTour/LabelMarker.tsx
index a9bf685..d35e61d 100644
--- a/src/components/virtualTour/LabelMarker.tsx
+++ b/src/components/virtualTour/LabelMarker.tsx
@@ -41,7 +41,9 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
alt=""
/>
- {currentSphere?.roomType}
+
+ {currentSphere?.roomType}
+
- ![]()
+
+ 
+
+
+
@@ -80,13 +93,13 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
-
+
{currentAppartment &&
currentAppartment.spheres.map((sphere) => {
return (
handleOnLabelClick(sphere)}
- className={` font-semibold text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none text-white ${
+ className={`font-semibold text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none text-white ${
selectedSphere?.id === sphere.id
? "bg-[#00BED7]"
: "bg-[#0D192266]"
diff --git a/src/data/appartments.json b/src/data/appartments.json
index 83a5ca4..e04f6a2 100644
--- a/src/data/appartments.json
+++ b/src/data/appartments.json
@@ -7,6 +7,7 @@
"sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-01.jpg",
"roomType": "entrance",
"position": [-14.16, 0, 24.11],
+ "mapPosition": [120, 240],
"links": [
{
"id": "studio-1_sp-02",
@@ -25,6 +26,7 @@
"sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-02.jpg",
"roomType": "bathroom",
"position": [-14.16, 0, 24.11],
+ "mapPosition": [160, 240],
"links": [
{
"id": "studio-1_sp-01",
@@ -38,6 +40,7 @@
"sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-03.jpg",
"roomType": "kitchen",
"position": [-14.16, 0, 24.11],
+ "mapPosition": [120, 175],
"links": [
{
"id": "studio-1_sp-04",
@@ -56,6 +59,7 @@
"sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-04.jpg",
"roomType": "bedroom 1",
"position": [-14.16, 0, 24.11],
+ "mapPosition": [125, 155],
"links": [
{
"id": "studio-1_sp-05",
@@ -74,6 +78,7 @@
"sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-05.jpg",
"roomType": "bedroom 2",
"position": [-14.16, 0, 24.11],
+ "mapPosition": [115, 125],
"links": [
{
"id": "studio-1_sp-06",
@@ -92,6 +97,7 @@
"sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-06.jpg",
"roomType": "glass doors",
"position": [-14.16, 0, 24.11],
+ "mapPosition": [115, 55],
"links": [
{
"id": "studio-1_sp-07",
@@ -110,6 +116,7 @@
"sphereImage": "/images/virtual-tour/studio1/Studio1_w-12_13_sp-07.jpg",
"roomType": "balcony",
"position": [-14.16, 0, 24.11],
+ "mapPosition": [165, 14],
"links": [
{
"id": "studio-1_sp-06",
diff --git a/src/index.css b/src/index.css
index 4eafcc7..81d7b83 100644
--- a/src/index.css
+++ b/src/index.css
@@ -82,6 +82,10 @@ html {
left: clamp(230px, 0.5927rem + 17.2144vw, 370px);
}
+ .left-solution-slider-btn-offset {
+ left: clamp(230px, 0.3927rem + 15.5144vw, 370px);
+ }
+
.slider {
position: relative;
}
diff --git a/src/main.tsx b/src/main.tsx
index babe790..f40702c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -11,6 +11,7 @@ import SearchParticularApartments from "./pages/SearchParticularApartments";
import SearchApartment from "./pages/SearchApartment";
import Favorites from "./pages/Favorites";
import VirtualTour from "./pages/VirtualTour";
+import AboutComplex from "./pages/AboutComplex";
const router = createBrowserRouter([
{
@@ -29,6 +30,10 @@ const router = createBrowserRouter([
path: "/masterplan/:complexId",
element:
+
+ );
+};
+
+export default AboutComplex;
diff --git a/src/types/apartmentSphere.ts b/src/types/apartmentSphere.ts
index b66950d..2fb1375 100644
--- a/src/types/apartmentSphere.ts
+++ b/src/types/apartmentSphere.ts
@@ -9,6 +9,7 @@ interface ISphere {
sphereImage: string;
roomType: string;
position: [number, number, number];
+ mapPosition: [number, number];
links: ISphereLink[];
}
+
+
+ } buttonType="cta" />
+
+ + Rove Home this residence a complete ecosystem that has everything you’ll + ever need. This isn’t just where you’ll live. It’s where you’ll thrive. +
+ +
+
+
+ About rove home
+
+
+ 
+
+
+
+ Embrace Rove’s forever-young spirit at Rove Home, where inspiring
+ design and vibrant art installations converge with an exceptional
+ location and an extended playlist of life-enhancing{" "}
+
+
+ 
+
+
+
+
+
+ ROVE AROUND THE CITY
+
+
+
+
+ {roveAroundTheCity.map((item) => (
+
+
+ 
+
+ ))}
+
+
+
+ {item.title}
+ {item.time} mins
+
+ 
+
+
+
+
+
+ ADVANTAGES
+
+ + What makes a rove home? +
+ {advantages.map((adv, index) => { + const styles = `${advStyles[index]} sm:col-start-1 ${ + index === advantages.length - 1 ? "" : "pb-14" + }`; + + return ( +
+ 
+
+ );
+ })}
+
+
+
+ {adv.title}
+ + Live in the future, today. Designed to embody Rove’s unique look and + feel, the interiors will feature intelligent and modular living + solutions by ORI, never seen before in UAE and the region. +
+
+
+
+ EXPANDABLE LIVING SOLUTIONS
+
+
+
+
+ ORI introduces a revolutionary solution to apartment living, where
+ space is not just a constraint but an opportunity.{" "}
+
+
+
+
+
+
+ Simple
+
+
+
+ Safe
+
+
+
+ Effortless
+
+
+
+
+
+
+
+ ROVE AROUND THE CITY
+
+
+ {unitsDesc.map((unit) => (
+
+
+ 
+
+ ))}
+
+
+
+
+
+ sdfsdfdsfsd
+
+