zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

map page scaling

Browse Source
This commit is contained in:
zojgame
2024-07-02 14:41:15 +05:00
parent 497cb6aa44
commit 5bad67dbb6
27 changed files with 191 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ApartmentSidebar.tsx
+4 -4
View File
@@ -18,8 +18,8 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
};
return (
<div className="flex lg:flex-col gap-2 h-full">
<div className="rounded-2xl overflow-clip lg:flex-1 flex-none relative">
<div className="flex gap-2 w-full">
<div className="rounded-2xl overflow-clip flex-none relative w-1/2">
<p className="absolute top-[30px] left-6 font-semibold text-m text-white">
View from window
</p>
@@ -29,8 +29,8 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
className="w-full h-full object-cover"
/>
</div>
<div className="flex gap-2 flex-col flex-1 lg:flex-none">
<div className="flex flex-col rounded-2xl bg-white p-6 gap-6 ">
<div className="flex gap-2 flex-col flex-1 w-1/2 aspect-square">
<div className="flex flex-col rounded-2xl bg-white p-6 gap-6 h-full">
<h2 className="font-semibold text-[#0D1922] text-subheadline-s">
Parameters
</h2>
client/src/components/ButtomPanel.tsx
+5 -1
View File
@@ -25,7 +25,11 @@ const ButtomPanel = () => {
</div>
<div className="p-6">
<div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
<img src="../images/masterplan/compass.png" alt="compass" />
<img
src="../images/masterplan/compass.png"
className="w-[250px] h-[250px]"
alt="compass"
/>
</div>
</div>
</div>
client/src/components/Button.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const Button = ({
type={type}
disabled={disabled}
onClick={onClick}
className={`min-w-10 max-h-10 ${rounded} ${
className={`zoom-280 min-w-10 max-h-10 ${rounded} ${
icon && !text ? "p-[10px]" : padding
} transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
className ? className : ""
client/src/components/Logo.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const Logo = ({ className = "" }: LogoProps) => {
return (
<div
className={`text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
className={`zoom-280 text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
onClick={handleOnLogoClick}
>
<LogoIcon />
client/src/components/aboutComplex/LivingSolutionSlider.tsx
+2 -1
View File
@@ -2,11 +2,12 @@
import { useSwipeable } from "react-swipeable";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Image } from "../../types/image";
import { isMobile } from "react-device-detect";
import Button from "../Button";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
const isMobile = true;
const images: Image[] = [
{ id: "1", src: "/images/aboutCompany/livingSolutionsSlider/1.png" },
{ id: "2", src: "/images/aboutCompany/livingSolutionsSlider/2.png" },
client/src/components/apartmentPage/ApartmentLayout.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
)?.layout;
return (
<div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full">
<div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full flex-1">
<div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center">
<img
className="w-full h-full object-contain max-h-[628px]"
client/src/components/companyPage/OurValues/Slider.tsx
+2 -1
View File
@@ -5,8 +5,9 @@ import { useLayoutEffect, useRef, useState } from "react";
import Button from "../../Button";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
import { isMobile } from "react-device-detect";
// import { isMobile } from "react-device-detect";
const isMobile = true;
const images: Image[] = [
{ id: "1", src: "./images/company/slider/1.png" },
{ id: "2", src: "./images/company/slider/2.png" },
client/src/components/complexPage/ComplexTopPanel.tsx
+6 -6
View File
@@ -6,7 +6,7 @@ import HintIcon from "../icons/HintIcon";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import ResizeIcon from "../icons/ResizeIcon";
import HelpModal from "../modals/HelpModal";
import MasterplanFilters from "../modals/MasterplanFilters";
// import MasterplanFilters from "../modals/MasterplanFilters";
import InfoIcon from "../icons/InfoIcon";
import useFullScreen from "../../store/useFullScreen";
import ActiveResizeIcon from "../icons/ActiveResizeIcon";
@@ -24,9 +24,9 @@ const ComplexTopPanel = () => {
setModal(<HelpModal />);
};
const handleOnFiltersClick = () => {
setModal(<MasterplanFilters />);
};
// const handleOnFiltersClick = () => {
// setModal(<MasterplanFilters />);
// };
const handleOnMobileFiltersClick = () => {
setModal(
@@ -61,7 +61,7 @@ const ComplexTopPanel = () => {
return (
<>
<div className="absolute top-0 w-screen z-20 select-none pointer-events-none">
<div className=" absolute top-0 w-screen z-20 select-none pointer-events-none">
<img src="../images/top_shadow.png" className="w-screen" alt="" />
</div>
<div
@@ -78,7 +78,7 @@ const ComplexTopPanel = () => {
icon={<FilterIcon />}
buttonType="primary"
text="Filters"
onClick={handleOnFiltersClick}
onClick={handleOnMobileFiltersClick}
/>
<Button
className="lg:hidden flex"
client/src/components/complexPage/SequenceSlider.tsx
+35 -15
View File
@@ -10,7 +10,7 @@ import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
import useCompass from "../../store/useCompass";
import SequenceHighlighting from "./SequenceHighlighting";
import { laptopWidth, mobileWidht } from "../../consts/masterplan";
// import { laptopWidth, mobileWidht } from "../../consts/masterplan";
const arrayLength = 360;
const keyframes: number[] = [51, 178, 249, 339];
@@ -129,28 +129,48 @@ function SequenceSlider({ path }: SequenceSliderProps) {
animateToLeft(currentOffset);
}
// function handleResize() {
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // if (screenWidth > laptopWidth) {
// const _top = screenHeight / 7;
// setTop(_top);
// const _left = 2500 - screenWidth;
// // const _left = laptopWidth - screenWidth;
// const _width = screenWidth + _left * 2;
// setWidth(_width);
// setLeft(_left);
// // setWidth(screenWidth);
// // setTop(screenWidth / 2 - screenHeight / 2);
// // setLeft(0);
// // } else {
// // if (screenWidth > mobileWidht) {
// // const _top = screenHeight / 4;
// // setTop(_top);
// // } else {
// // const _top = screenHeight / 2.5;
// // setTop(_top);
// // }
// // const _left = laptopWidth - screenWidth;
// // const _width = screenWidth + _left * 2;
// // setWidth(_width);
// // setLeft(_left);
// // }
// }
function handleResize() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
if (screenWidth > laptopWidth) {
setWidth(screenWidth);
setTop(screenWidth / 2 - screenHeight / 2);
setLeft(0);
} else {
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _top = screenHeight / 4.5;
setTop(_top);
} else {
const _top = screenHeight / 2.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
const _left = screenHeight - screenWidth;
const _width = screenHeight + _left;
setWidth(_width);
setLeft(_left);
}
}
function handleOnSequenceClick(): void {
navigate("./wing");
}
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+88 -36
View File
@@ -19,7 +19,6 @@ import { getFilteredApartments } from "../../../calc/getFilteredApartments";
import LoaderModal from "../../modals/LoaderModal";
import FloorNumbers from "./FloorNumbers";
import WingSignatures from "./WingSignatures";
import { isMobile } from "react-device-detect";
import FloorsHighlighting from "./FloorsHighlighting";
import MobileFloorDescription from "./MobileFloorDescription";
import WingFloorModal from "../../modals/mobile/WingFloorModal";
@@ -125,14 +124,14 @@ const SequenceWing = () => {
// >1072
if (screenWidth > laptopWidth) {
const _top = screenWidth / 2 - screenHeight / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
setMousePos([e.clientX + 1284, e.clientY + Math.abs(_top) + 40]);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _left = laptopWidth - screenWidth;
setMousePos([
e.clientX - 440 + _left,
e.clientX - 640 + _left,
e.clientY + Math.abs(_top) + 20,
]);
// <640
@@ -149,42 +148,97 @@ const SequenceWing = () => {
//detect currentFloor, current sidebar and apartment on floor
if (!currentHoveredFloor && !currentHoveredApartments) return;
setCurrentFloor(currentHoveredFloor);
if (!isMobile) {
setIsFloorSidebar(true);
setIsSkygardenSidebar(false);
setIsSidebar(true);
} else {
// if (!isMobile) {
// setIsFloorSidebar(true);
// setIsSkygardenSidebar(false);
// setIsSidebar(true);
// } else {
setIsDescriptionFloorMobile(true);
setCurrentFloor(null);
// }
}
}
}
// function handleOnMouseDown(e: MouseEvent | any) {
// const isFloorClicked = Boolean(e.target.dataset.id);
// if (isFloorClicked) {
// // detect mouse pos
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // >1072
// if (screenWidth > laptopWidth) {
// const _top = screenWidth / 2 - screenHeight / 2;
// setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
// } else {
// // 640-1072
// if (screenWidth > mobileWidht) {
// const _top = screenHeight / 4;
// const _left = laptopWidth - screenWidth;
// setMousePos([
// e.clientX - 440 + _left,
// e.clientY + Math.abs(_top) + 20,
// ]);
// // <640
// } else {
// const _top = screenHeight / 2.5;
// const _left = laptopWidth - screenWidth;
// setMousePos([
// e.clientX - 440 + _left,
// e.clientY + Math.abs(_top) + 20,
// ]);
// }
// }
// //detect currentFloor, current sidebar and apartment on floor
// if (!currentHoveredFloor && !currentHoveredApartments) return;
// setCurrentFloor(currentHoveredFloor);
// if (!isMobile) {
// setIsFloorSidebar(true);
// setIsSkygardenSidebar(false);
// setIsSidebar(true);
// } else {
// setIsDescriptionFloorMobile(true);
// setCurrentFloor(null);
// }
// }
// }
function handleResize() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
if (screenWidth > laptopWidth) {
setWidth(screenWidth);
setTop(screenWidth / 2 - screenHeight / 2);
setLeft(0);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _top = screenHeight / 4.5;
setTop(_top);
// <640
} else {
const _top = screenHeight / 2.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
const _left = screenHeight - screenWidth;
const _width = screenHeight + _left;
setWidth(_width);
setLeft(_left);
}
}
// function handleResize() {
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // >1072
// if (screenWidth > laptopWidth) {
// setWidth(screenWidth);
// setTop(screenWidth / 2 - screenHeight / 2);
// setLeft(0);
// } else {
// // 640-1072
// if (screenWidth > mobileWidht) {
// const _top = screenHeight / 4;
// setTop(_top);
// // <640
// } else {
// const _top = screenHeight / 2.5;
// setTop(_top);
// }
// const _left = laptopWidth - screenWidth;
// const _width = screenWidth + _left * 2;
// setWidth(_width);
// setLeft(_left);
// }
// }
const handleOnExploreFloorClick = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
@@ -280,13 +334,13 @@ const SequenceWing = () => {
sortList,
]);
useEffect(() => {
if (isLoading) {
setModal(<LoaderModal />);
} else {
setModal(null);
}
}, [isLoading, setModal]);
// useEffect(() => {
// if (isLoading) {
// setModal(<LoaderModal />);
// } else {
// setModal(null);
// }
// }, [isLoading, setModal]);
return (
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
@@ -296,9 +350,7 @@ const SequenceWing = () => {
width: `${width}px`,
height: `${width}px`,
top: `-${top}px`,
left: `${
isSkygardenSidebar || isFloorSidebar ? "-25%" : `-${left}px`
}`,
left: `-${left}px`,
}}
>
{/* */}
client/src/components/header/Auth/Auth.tsx
-6
View File
@@ -1,6 +1,4 @@
import { isMobile } from "react-device-detect";
import AuthDesktop from "./AuthDesktop";
import AuthMobile from "./AuthMobile";
interface AuthProps {
isAuth?: boolean;
@@ -11,11 +9,7 @@ const Auth = ({ isAuth = false }: AuthProps) => {
return (
<>
{isMobile ? (
<AuthMobile isAuth={isAuth} userName={userName} />
) : (
<AuthDesktop isAuth={isAuth} userName={userName} />
)}
</>
);
};
client/src/components/header/Header/DesktopHeader.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
import Location from "../Location";
const DesktopHeader = () => (
<header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none">
<header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none items-center">
<div className="flex gap-4 col-span-2">
<Logo />
<Location />
client/src/components/header/Header/Layout.tsx
+2 -2
View File
@@ -2,8 +2,8 @@ import { Outlet } from "react-router-dom";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { useEffect } from "react";
import useModal from "../../../store/useModal";
import MobileHeader from "./MobileHeader";
import useFullScreen from "../../../store/useFullScreen";
import DesktopHeader from "./DesktopHeader";
const Layout = () => {
const { modal } = useModal();
@@ -17,7 +17,7 @@ const Layout = () => {
return (
<>
<FullScreen handle={onFullscreenHandle}>
<MobileHeader />
<DesktopHeader />
{modal}
<Outlet />
</FullScreen>
client/src/components/header/Header/MobileHeader.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const MobileHeader = () => {
};
return (
<header
className={`bg-white w-full ${
className={` bg-white w-full ${
isToggled
? "rounded-ee-lg rounded-es-lg shadow-[#00000026] shadow-md"
: ""
client/src/components/header/Location.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import LocationIcon from "../icons/LocationIcon";
const Location = () => {
return (
<div className="text-[#73787C] flex gap-1 items-center justify-center">
<div className="text-[#73787C] flex gap-1 items-center justify-center zoom-280">
<LocationIcon />
<p className="">Dubai</p>
</div>
client/src/components/header/Navbar/Navbar.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { Tab } from "../../../types/tab";
import NavbarMobile from "./NavbarMobile";
import { tabs as _tabs } from "../../../consts/tabs";
import useFavorites from "../../../store/useFavorites";
import NavbarDesktop from "./NavbarDesktop";
const Navbar = () => {
const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
@@ -49,7 +49,7 @@ const Navbar = () => {
return (
<>
{
<NavbarMobile
<NavbarDesktop
onTabClick={onTabClick}
tabs={tabs}
selectedTab={selectedTab}
client/src/components/header/Navbar/NavbarDesktop.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface NavbarProps {
const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
<nav
className={`text-[#73787C] self-center col-span-2 justify-center flex h-full`}
className={`text-[#73787C] self-center col-span-2 justify-center flex h-full `}
>
{tabs.map((tab) => (
<NavbarTabDesktop
client/src/components/header/Navbar/NavbarTabDesktop.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ const NavbarTabDesktop = ({
onClick={() => onClick(tab)}
>
<div
className={`border-b-2 h-full flex items-center transition-all duration-300 ${
className={`border-b-2 h-full flex items-center transition-all duration-300 text-[38.4px] ${
isSelected
? "border-b-[#00BED7]"
: "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
@@ -26,7 +26,7 @@ const NavbarTabDesktop = ({
{tab.value}
</div>
{tab.count !== 0 && (
<div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center pt-0.5 pr-[1px]">
<div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-0.5 pr-[1px]">
<span className="leading-none">{tab.count}</span>
</div>
)}
client/src/components/masterplanPage/TopPanel.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const TopPanel = () => {
<img src="/images/top_shadow.png" className="w-screen" alt="" />
</div>
<div
className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
className={`absolute top-[172px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
>
{isFullscreen ? (
<Button
client/src/components/masterplanPage/map/Map.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import ImageMarker, { MarkerComponentProps } from "react-image-marker";
import { isMobile } from "react-device-detect";
// import { isMobile } from "react-device-detect";
import Marker from "./Marker";
import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker";
@@ -20,9 +20,9 @@ const Map = () => {
return (
<div className="relative">
<TransformWrapper
initialScale={isMobile ? 2 : 1}
minScale={isMobile ? 2 : 1}
maxScale={2}
initialScale={2}
minScale={2}
maxScale={4}
alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
wheel={{ step: 10000, smoothStep: 0.0005 }}
zoomAnimation={{
@@ -45,7 +45,7 @@ const Map = () => {
wrapperClass={"top-[-50px] left-[-200px]"}
>
<ImageMarker
src="images/Map.jpg"
src="/images/Map.jpg"
markers={imageMarkers}
markerComponent={Marker}
extraClass={`transition-all duration-300 ease-in-out ${
client/src/components/masterplanPage/map/Marker.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const Marker = (props: MarkerComponentProps) => {
return (
<div
className="relative transition-transform "
className="relative transition-transform zoom-280"
style={{ transform: `scale(${markerScale})` }}
>
<div
client/src/components/modals/mobile/SkygardenModal.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ const SkygardenModal = () => {
</div>
<div
style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
className="bg-[#F3F3F2] h-fit p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
>
<div
className="w-[calc(100%-48px)] absolute flex justify-center py-3"
client/src/components/modals/mobile/WingFloorModal.tsx
+2 -2
View File
@@ -169,7 +169,7 @@ const WingFloorModal = ({
</div>
<div
style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
className="bg-[#F3F3F2] h-fit p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
>
<div
className="w-[calc(100%-48px)] absolute flex justify-center py-3"
@@ -217,7 +217,7 @@ const WingFloorModal = ({
</div>
</div>
</div>
<div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4 overflow-clip">
<div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center py-4 overflow-clip">
{currentFloor?.wing === "West Wing" ? (
currentFloor && currentFloor.floor <= 21 ? (
<svg
client/src/components/searchPage/SidebarFilters.tsx
+3 -3
View File
@@ -99,9 +99,9 @@ const SidebarFilters = () => {
return (
<div>
<div className="h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
<div className="w-full py-6 px-6 flex flex-col items-center">
<div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4">
<div className=" h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
<div className="w-full py-6 px-6 flex flex-col items-center ">
<div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4 ">
<h2 className="text-subheadline-m font-semibold">Filters</h2>
<Button
isCircleRounded
client/src/consts/markers.ts
+6 -6
View File
@@ -2,22 +2,22 @@ import { Marker } from "../types/marker";
const markers: Marker[] = [
{
top: 38.2,
left: 54,
top: 33.5,
left: 51.5,
itemNumber: 0,
popup: "/images/markers/popups/1.svg",
isPopupLeft: true,
},
{
top: 39.5,
left: 56,
top: 35.5,
left: 53,
itemNumber: 1,
popup: "/images/markers/popups/1.svg",
isPopupLeft: false,
},
{
top: 73,
left: 22.5,
top: 69,
left: 20.0,
itemNumber: 2,
popup: "/images/markers/popups/1.svg",
isPopupLeft: false,
client/src/index.css
+4
View File
@@ -50,6 +50,10 @@ html {
}
@layer components {
.zoom-280 {
zoom: 280%;
}
.desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026;
}
client/src/pages/AboutComplex.tsx
+3 -1
View File
@@ -1,4 +1,4 @@
import { isMobile } from "react-device-detect";
// import { isMobile } from "react-device-detect";
import Footer from "../components/Footer";
import Button from "../components/Button";
import LeftArrowIcon from "../components/icons/LeftArrowIcon";
@@ -6,6 +6,8 @@ import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlide
import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
import { useNavigate } from "react-router-dom";
const isMobile = true;
interface ICityItem {
time: number;
title: string;