diff --git a/client/src/components/MultiRangeSlider.tsx b/client/src/components/MultiRangeSlider.tsx index 753a026..4a93499 100644 --- a/client/src/components/MultiRangeSlider.tsx +++ b/client/src/components/MultiRangeSlider.tsx @@ -70,22 +70,22 @@ const MultiRangeSlider = ({ }, [multirangeSlider.endValue]); return ( -
-
+
+
diff --git a/client/src/components/companyPage/InvestmentPortfolio.tsx b/client/src/components/companyPage/InvestmentPortfolio.tsx index 44e1802..42db23b 100644 --- a/client/src/components/companyPage/InvestmentPortfolio.tsx +++ b/client/src/components/companyPage/InvestmentPortfolio.tsx @@ -1,27 +1,23 @@ import { projects } from "../../consts/projects"; -const projectStyles = [ - "xl:col-start-3 xl:col-end-7", - "xl:col-span-4", - "xl:col-start-5 xl:col-end-9", - "xl:col-span-4", - "xl:col-start-3 xl:col-span-4", -]; +// const projectStyles = [ +// "xl:col-start-3 xl:col-end-7", +// "xl:col-span-4", +// "xl:col-start-5 xl:col-end-9", +// "xl:col-span-4", +// "xl:col-start-3 xl:col-span-4", +// ]; const InvestmentPortfolio = () => { return ( -
-
+
+
OUR INVESTMENT PORTFOLIO
- {projects.map((project, index) => { - const styles = `${projectStyles[index]} ${ - index % 2 === 0 ? "sm:col-start-1" : "sm:col-start-7" - }`; - + {projects.map((project) => { return (
{
{project.title}
-
+
{project.city}
diff --git a/client/src/components/companyPage/OurStory.tsx b/client/src/components/companyPage/OurStory.tsx index e9ad266..b2dd304 100644 --- a/client/src/components/companyPage/OurStory.tsx +++ b/client/src/components/companyPage/OurStory.tsx @@ -1,32 +1,29 @@ const OurStory = () => { return ( -
- {/*
*/} -
+
+
Our story
-
-
+
+
1 - {/*

*/} -

+

IRTH is prominently positioned among the top tier establishments in United Arab Emirates, a family backed investment company with core values of trust, strength and agility.

- {/*
*/} -
-

+

+

IRTH embodies the essence of legacy, anchoring its roots in the heart of a vibrant Dubai. As a part of a distinguished local family conglomerate, our privately held real estate investment platform draws strength from a heritage spanning over a century.

-

+

At IRTH, our foundation is built upon three CORE values: Trust, Strength, and Agility. These principles serve as our guiding light, propelling us forward as a prominent player in the realm of @@ -36,19 +33,19 @@ const OurStory = () => {

-
+
2 2 - {/*
*/} -
+ +

Our influence extends even further through strategic partnerships with esteemed local and international hospitality brands, diff --git a/client/src/components/companyPage/OurValues/OurValues.tsx b/client/src/components/companyPage/OurValues/OurValues.tsx index bef49a0..baec0b8 100644 --- a/client/src/components/companyPage/OurValues/OurValues.tsx +++ b/client/src/components/companyPage/OurValues/OurValues.tsx @@ -1,13 +1,13 @@ import Slider from "./Slider"; const OurValues = () => { return ( -

-
-
+
+
+
our values
-
-
+
+

Trust

(1)

@@ -25,8 +25,8 @@ const OurValues = () => {

-
-
+
+

Strength

@@ -45,8 +45,8 @@ const OurValues = () => {

-
-
+
+

Agility

@@ -65,49 +65,47 @@ const OurValues = () => {

-
+
These core values not only shape our identity but also drive our actions, decisions, and aspirations as we shape the future of real estate with dedication and purpose.
-
-
+
+
9
-
-

- Osman Celiker -

-
+
+

Osman Celiker

+
Managing Director, IRTH
-
+
Osman Celiker, the Managing Director of IRTH, possesses a robust history in real estate development, both on a local and international scale.
-
+
Osman oversees a skilled and seasoned development team responsible for crafting remarkable projects. This team has brought to life many local and international projects.
-
+
our values
-
-
+
+
Nestled at the pulsating core of Dubai, IRTH’s headquarters finds its strategic abode within the iconic masterpiece, The Opus, envisioned by the architectural virtuoso Zaha Hadid.
-
+
This exceptional location mirrors our commitment to being at the forefront of innovation and design, reflecting the very essence of our brand. Just as The Opus stands as a testament to architectural diff --git a/client/src/components/companyPage/OurValues/Slider.tsx b/client/src/components/companyPage/OurValues/Slider.tsx index 9956eaf..f92e979 100644 --- a/client/src/components/companyPage/OurValues/Slider.tsx +++ b/client/src/components/companyPage/OurValues/Slider.tsx @@ -5,21 +5,20 @@ 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"; -const isMobile = true; +// const isMobile = true; const images: Image[] = [ - { id: "1", src: "./images/company/slider/1.png" }, - { id: "2", src: "./images/company/slider/2.png" }, - { id: "3", src: "./images/company/slider/3.png" }, + { id: "img-1", src: "./images/company/slider/1.png" }, + { id: "img-2", src: "./images/company/slider/2.png" }, + { id: "img-3", src: "./images/company/slider/3.png" }, ]; -const getGapOffset = (screenWidth: number) => { - if (screenWidth > 1600) return 16; - if (screenWidth > 1280) return 24; - if (screenWidth > 640) return 16; - return 16; -}; +// const getGapOffset = (screenWidth: number) => { +// if (screenWidth > 1600) return 16; +// if (screenWidth > 1280) return 24; +// if (screenWidth > 640) return 16; +// return 16; +// }; const Slider = () => { const [selectedImageIndex, setSelectedImageIndex] = useState(-1); @@ -34,15 +33,11 @@ const Slider = () => { }, [imageRef.current, window.innerWidth]); useLayoutEffect(() => { - const screenWidth = window.innerWidth; - const gapOffset = getGapOffset(screenWidth); + const gapOffset = 45; - const _rightImageOffset = - screenWidth > 1280 - ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${ - selectedImageIndex * (imageWidth + gapOffset) - }px)` - : `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`; + const _rightImageOffset = `${ + (selectedImageIndex + 1) * (imageWidth + gapOffset) + }px`; setRightImageOffset(_rightImageOffset); }, [imageWidth, selectedImageIndex, window.innerWidth]); @@ -54,7 +49,7 @@ const Slider = () => { }); function next() { - const lastIndex = isMobile ? images.length - 2 : images.length - 3; + const lastIndex = images.length - 2; if (selectedImageIndex === lastIndex) return; setSelectedImageIndex((prev) => prev + 1); @@ -69,10 +64,10 @@ const Slider = () => {
{ src={image.src} alt="" key={image.id} - className="rounded-2xl sm:aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none w-[calc(100%-16px)]" + className="rounded-2xl object-cover pointer-events-none select-none w-[1493.44px]" /> ))}
-
-
- {images.map((image, index) => ( -
- ))} +
+
+
+
); diff --git a/client/src/components/complexPage/ComplexTopPanel.tsx b/client/src/components/complexPage/ComplexTopPanel.tsx index a29496f..6745623 100644 --- a/client/src/components/complexPage/ComplexTopPanel.tsx +++ b/client/src/components/complexPage/ComplexTopPanel.tsx @@ -5,7 +5,6 @@ import FilterIcon from "../icons/FilterIcon"; 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 InfoIcon from "../icons/InfoIcon"; import useFullScreen from "../../store/useFullScreen"; @@ -13,6 +12,7 @@ import ActiveResizeIcon from "../icons/ActiveResizeIcon"; import useWingSidebar from "../../store/useWingSidebar"; import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper"; import MasterplanFiltersModal from "../modals/mobile/MasterplanFiltersModal"; +import MobileHelpModal from "../modals/mobile/MobileHelpModal"; const ComplexTopPanel = () => { const { setModal, modal } = useModal(); @@ -21,7 +21,12 @@ const ComplexTopPanel = () => { const navigate = useNavigate(); const handleOnHelpClick = () => { - setModal(); + // setModal(); + setModal( + + + + ); }; // const handleOnFiltersClick = () => { diff --git a/client/src/components/icons/DisclaimerIcon.tsx b/client/src/components/icons/DisclaimerIcon.tsx index 889b84e..8015f05 100644 --- a/client/src/components/icons/DisclaimerIcon.tsx +++ b/client/src/components/icons/DisclaimerIcon.tsx @@ -14,7 +14,7 @@ const DisclaimerIcon = () => { { d="M10 14.1665V9.1665" stroke="currentColor" stroke-width="1.5" - stroke-linecap="round" + strokeLinecap="round" /> { ); diff --git a/client/src/components/icons/RightArrowSliderIcon.tsx b/client/src/components/icons/RightArrowSliderIcon.tsx index 2ef2f60..40a3796 100644 --- a/client/src/components/icons/RightArrowSliderIcon.tsx +++ b/client/src/components/icons/RightArrowSliderIcon.tsx @@ -10,9 +10,9 @@ const RightArrowSliderIcon = () => { ); diff --git a/client/src/components/masterplanPage/TopPanel.tsx b/client/src/components/masterplanPage/TopPanel.tsx index 72d5484..f172a58 100644 --- a/client/src/components/masterplanPage/TopPanel.tsx +++ b/client/src/components/masterplanPage/TopPanel.tsx @@ -3,15 +3,21 @@ import useModal from "../../store/useModal"; import Button from "../Button"; import HintIcon from "../icons/HintIcon"; import ResizeIcon from "../icons/ResizeIcon"; -import HelpModal from "../modals/HelpModal"; import ActiveResizeIcon from "../icons/ActiveResizeIcon"; +import MobileHelpModal from "../modals/mobile/MobileHelpModal"; +import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper"; const TopPanel = () => { const { setModal } = useModal(); const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen(); const handleOnHelpClick = () => { - setModal(); + // setModal(); + setModal( + + + + ); }; const handleOnFullScreenClick = () => { diff --git a/client/src/components/modals/VirtualTourVideoModal.tsx b/client/src/components/modals/VirtualTourVideoModal.tsx index f1cc726..18ade2e 100644 --- a/client/src/components/modals/VirtualTourVideoModal.tsx +++ b/client/src/components/modals/VirtualTourVideoModal.tsx @@ -15,10 +15,10 @@ const VirtualTourVideoModal = ({ videoHref }: VirtualTourVideoModalProps) => { return (
-
+
diff --git a/client/src/components/virtualTour/LabelMarker.tsx b/client/src/components/virtualTour/LabelMarker.tsx index b3b460e..d7f5694 100644 --- a/client/src/components/virtualTour/LabelMarker.tsx +++ b/client/src/components/virtualTour/LabelMarker.tsx @@ -12,7 +12,7 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => { return ( <> { - + {sphereLink.type === "default" && ( )} diff --git a/client/src/components/virtualTour/VirtualTourSidebar.tsx b/client/src/components/virtualTour/VirtualTourSidebar.tsx index 42df908..e124138 100644 --- a/client/src/components/virtualTour/VirtualTourSidebar.tsx +++ b/client/src/components/virtualTour/VirtualTourSidebar.tsx @@ -103,9 +103,9 @@ const VirtualTourSidebar = ({ return (
-
+
-
+