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

touch v

Browse Source
This commit is contained in:
zojgame
2024-07-06 15:32:02 +05:00
parent ac51d54c15
commit 53267e7cb3
23 changed files with 375 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/MultiRangeSlider.tsx
+5 -5
View File
@@ -70,22 +70,22 @@ const MultiRangeSlider = ({
}, [multirangeSlider.endValue]);
return (
<div className="zoom-280">
<div className="flex justify-between p-[12px] bg-white rounded-[8px] relative flex-col">
<div className="">
<div className="flex justify-between p-[33.6px] bg-white rounded-[19.2px] relative flex-col">
<div className="flex justify-between">
<NumericFormat
thousandSeparator=","
key={multirangeSlider.startValue}
onChange={handleOnFirstInputChange}
defaultValue={multirangeSlider.startValue}
className="focus:outline-none input_number w-1/2"
className="focus:outline-none input_number w-1/2 text-[33.6px]"
/>
<NumericFormat
thousandSeparator=","
key={multirangeSlider.endValue}
onChange={handleOnSecondInputChange}
defaultValue={multirangeSlider.endValue}
className="focus:outline-none input_number w-1/2 text-right"
className="focus:outline-none input_number w-1/2 text-right text-[33.6px]"
/>
</div>
<RangeSlider
@@ -94,7 +94,7 @@ const MultiRangeSlider = ({
value={[multirangeSlider.startValue, multirangeSlider.endValue]}
className={`${
isDisabled ? "pointer-events-none text disabled" : ""
} absolute -bottom-[12px] left-0 w-[calc(100%-16px)] z-20`}
} absolute -bottom-[33.6px] left-0 w-[calc(100%-44.8px)] z-20`}
onInput={handleOnRangeInputChange}
/>
</div>
client/src/components/companyPage/InvestmentPortfolio.tsx
+12 -16
View File
@@ -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 (
<div className="grid grid-cols-12 xl:px-6 px-4 gap-4 2xl:gap-y-14 xl:gap-y-12 sm:gap-y-3 gap-y-5 2xl:pb-[140px] xl:pb-[120px] pb-[100px]">
<div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3 text-caption-m">
<div className="grid grid-cols-12 px-4 gap-4 sm:gap-y-3 gap-y-5 pb-[280px]">
<div className="uppercase text-[#73787C] font-semibold col-span-full pb-3 text-caption-m">
OUR INVESTMENT PORTFOLIO
</div>
{projects.map((project, index) => {
const styles = `${projectStyles[index]} ${
index % 2 === 0 ? "sm:col-start-1" : "sm:col-start-7"
}`;
{projects.map((project) => {
return (
<div
className={`flex flex-col ${styles} sm:col-span-6 col-span-full`}
className={`flex flex-col sm:col-span-6 col-span-full`}
key={project.id}
>
<img
@@ -33,7 +29,7 @@ const InvestmentPortfolio = () => {
<div className="rounded-full bg-[#00BED7] w-3 h-3"></div>
<div className="text-m">{project.title}</div>
</div>
<div className="caption-m font-semibold text-[#73787C] pt-2">
<div className="text-caption-m font-semibold text-[#73787C] pt-2">
{project.city}
</div>
</div>
client/src/components/companyPage/OurStory.tsx
+13 -16
View File
@@ -1,32 +1,29 @@
const OurStory = () => {
return (
<div className="grid grid-cols-12 xl:px-6 px-4 gap-x-4">
{/* <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full "> */}
<div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full text-caption-m">
<div className="grid grid-cols-12 px-4 gap-x-4">
<div className="uppercase text-[#73787C] font-semibold pb-3 col-span-full text-caption-m">
Our story
</div>
<div className="2xl:col-span-8 xl:col-span-9 col-span-full grid grid-cols-12 gap-x-4">
<div className="col-span-full grid 2xl:grid-cols-8 xl:grid-cols-9 grid-cols-8 gap-x-4">
<div className=" col-span-full grid grid-cols-12 gap-x-4">
<div className="col-span-full grid grid-cols-8 gap-x-4">
<img
src="./images/company/1.jpg"
alt="1"
className="aspect-[7/5] rounded-2xl col-span-full object-cover"
/>
{/* <p className="text-[#00BED7] font-semibold text-2xl xl:col-span-5 col-span-full pt-6 text-subheadline-s"> */}
<p className="text-[#00BED7] font-semibold xl:col-span-5 col-span-full pt-6 text-subheadline-s">
<p className="text-[#00BED7] font-semibold col-span-full pt-6 text-[67.5px] leading-[91px]">
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.
</p>
{/* <div className="grid grid-cols-2 gap-4 text-sm 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]"> */}
<div className="grid grid-cols-2 gap-4 text-s 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]">
<p className="xl:col-span-full sm:col-span-1 col-span-full">
<div className="grid grid-cols-2 gap-4 text-s col-span-full pt-4 pb-[146px] text-[#73787C]">
<p className="sm:col-span-1 col-span-full ">
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.
</p>
<p className="xl:col-span-full sm:col-span-1 col-span-full">
<p className="sm:col-span-1 col-span-full">
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 = () => {
</p>
</div>
</div>
<div className="col-span-full grid 2xl:grid-cols-8 xl:grid-cols-9 grid-cols-8 gap-x-4">
<div className="col-span-full grid grid-cols-8 gap-x-4">
<img
src="./images/company/2.jpg"
alt="2"
className="rounded-2xl object-cover sm:col-span-2 col-span-full 2xl:aspect-[5/6] xl:aspect-[4/5] sm:aspect-[7/13] order-1 mb-6"
className="rounded-2xl object-cover sm:col-span-2 col-span-full sm:aspect-[7/13] order-1 mb-6"
/>
<img
src="./images/company/3.png"
alt="2"
className="rounded-2xl object-cover 2xl:col-span-6 xl:col-span-7 sm:col-span-6 col-span-full 2xl:aspect-[7/4] xl:aspect-[14/9] sm:h-full aspect-[6.5/5.2] sm:order-2 order-3 mb-20 sm:mb-0"
className="rounded-2xl object-cover sm:col-span-6 col-span-full sm:h-full aspect-[6.5/5.2] sm:order-2 order-3 sm:mb-0"
/>
{/* <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C]"> */}
<div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 text-[#73787C] text-s">
<div className=" grid col-span-full grid-cols-2 gap-3 sm:order-3 order-2 sm:pb-[280px] pb-6 sm:pt-6 text-[#73787C] text-s">
<p className="sm:col-span-1 col-span-full">
Our influence extends even further through strategic partnerships
with esteemed local and international hospitality brands,
client/src/components/companyPage/OurValues/OurValues.tsx
+21 -23
View File
@@ -1,13 +1,13 @@
import Slider from "./Slider";
const OurValues = () => {
return (
<div className="xl:pb-16 pb-10">
<div className="grid grid-cols-12 xl:px-6 px-4 gap-4 xl:gap-y-6 gap-y-35">
<div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
<div className="pb-[112.5px]">
<div className="grid grid-cols-12 px-4 gap-4 gap-y-35">
<div className="uppercase text-[#73787C] font-semibold col-span-full text-caption-m">
our values
</div>
<div className="bg-white xl:col-start-3 xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
<div className="flex justify-between items-start pb-[50px]">
<div className="bg-white sm:col-span-4 col-span-full p-7 rounded-2xl">
<div className="flex justify-between items-start pb-[76px]">
<p className="text-subheadline-l font-bold text-[#0D1922]">Trust</p>
<p className="text-caption-m font-semibold text-[#73787C]">(1)</p>
</div>
@@ -25,8 +25,8 @@ const OurValues = () => {
</p>
</div>
</div>
<div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
<div className="flex justify-between items-start pb-[50px]">
<div className="bg-white sm:col-span-4 col-span-full p-7 rounded-2xl">
<div className="flex justify-between items-start pb-[76px]">
<p className="text-subheadline-l font-bold text-[#0D1922]">
Strength
</p>
@@ -45,8 +45,8 @@ const OurValues = () => {
</p>
</div>
</div>
<div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
<div className="flex justify-between items-start pb-[50px]">
<div className="bg-white sm:col-span-4 col-span-full p-7 rounded-2xl">
<div className="flex justify-between items-start pb-[76px]">
<p className="text-subheadline-l font-bold text-[#0D1922]">
Agility
</p>
@@ -65,49 +65,47 @@ const OurValues = () => {
</p>
</div>
</div>
<div className="text-subheadline-m font-semibold text-[#00BED7] xl:col-start-3 xl:col-span-6 col-span-full 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
<div className="text-subheadline-m font-semibold text-[#00BED7] col-span-full sm:pb-[280px]">
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.
</div>
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 border-y gap-4 sm:py-5 xl:py-6 xl:mb-[120px] 2xl:mb-[140px] mb-[100px]">
<div className="2xl:col-start-3 2xl:col-span-5 xl:col-span-6 xl:col-start-3 sm:col-start-4 sm:col-span-5 col-span-full order-2 xl:order-1 ">
<div className="col-span-full grid grid-cols-8 border-y gap-4 sm:py-5 mb-[280px]">
<div className="sm:col-start-1 sm:col-span-5 col-span-full">
<img
src="./images/company/9.png"
alt="9"
className="object-cover rounded-2xl w-full"
/>
</div>
<div className="flex flex-col 2xl:col-start-8 xl:col-start-9 sm:col-start-1 sm:col-span-3 col-span-full order-1 xl:order-2 ">
<h2 className="text-subheadline-l font-bold xl:pb-2 pb-1">
Osman Celiker
</h2>
<div className="flex gap-1 items-center xl:pb-8 pb-6">
<div className="flex flex-col sm:col-start-6 sm:col-span-3 col-span-full">
<h2 className="text-subheadline-l font-bold pb-1">Osman Celiker</h2>
<div className="flex gap-1 items-center pb-6">
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
<div className="text-m">Managing Director, IRTH</div>
</div>
<div className="text-[#73787C] text-s pb-4">
<div className="text-[#73787C] text-[33.75px] pb-4">
Osman Celiker, the Managing Director of IRTH, possesses a robust
history in real estate development, both on a local and
international scale.
</div>
<div className="text-[#73787C] text-s">
<div className="text-[#73787C] text-[33.75px]">
Osman oversees a skilled and seasoned development team responsible
for crafting remarkable projects. This team has brought to life
many local and international projects.
</div>
</div>
</div>
<div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
<div className="uppercase text-[#73787C] font-semibold col-span-full text-caption-m">
our values
</div>
<div className="grid xl:grid-cols-10 grid-cols-8 xl:col-span-10 col-span-full xl:col-start-3 gap-6">
<div className="2xl:col-span-4 xl:col-span-5 col-span-6 text-[#00BED7] font-bold text-subheadline-m ">
<div className="grid grid-cols-8 col-span-full gap-6">
<div className="col-span-7 text-[#00BED7] font-bold text-subheadline-m ">
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.
</div>
<div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s pb-6">
<div className="col-span-6 text-[#73787C] text-s pb-[124.75px]">
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
client/src/components/companyPage/OurValues/Slider.tsx
+32 -45
View File
@@ -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 = () => {
<div className="flex flex-col gap-6 " {...handlers}>
<div
className="relative col-span-full overflow-x-hidden flex flex-col"
style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
style={{ height: "1122.2px" }}
>
<div
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none px-4`}
style={{
right: `${rightImageOffset}`,
}}
@@ -83,32 +78,24 @@ 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]"
/>
))}
</div>
<Button
onClick={prev}
icon={<LeftArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] xl:left-slider-btn-offset left-6 hidden sm:block"
/>
<Button
onClick={next}
icon={<RightArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] right-6 hidden sm:block"
/>
</div>
<div className="self-center gap-1 sm:hidden flex">
{images.map((image, index) => (
<div
key={image.id}
className={`transition-all duration-300 ease-in-out rounded-full h-2 ${
index - 1 === selectedImageIndex
? "w-6 bg-[#0D1922]"
: "w-2 bg-[#0D192266]"
}`}
></div>
))}
<div className="absolute top-[calc(50%-22px)] left-4 block">
<Button
onClick={prev}
icon={<LeftArrowSliderIcon />}
className="text-[#73787C]"
/>
</div>
<div className="absolute top-[calc(50%-22px)] right-4 block">
<Button
onClick={next}
icon={<RightArrowSliderIcon />}
className="text-[#73787C]"
/>
</div>
</div>
</div>
);
client/src/components/complexPage/ComplexTopPanel.tsx
+7 -2
View File
@@ -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(<HelpModal />);
// setModal(<HelpModal />);
setModal(
<MobileModalWrapper>
<MobileHelpModal />
</MobileModalWrapper>
);
};
// const handleOnFiltersClick = () => {
client/src/components/icons/DisclaimerIcon.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const DisclaimerIcon = () => {
<path
d="M8 4.66675V8.66675"
stroke="currentColor"
stroke-linecap="round"
strokeLinecap="round"
/>
<ellipse
cx="7.99992"
client/src/components/icons/InfoIcon.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const InfoIcon = () => {
d="M10 14.1665V9.1665"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
strokeLinecap="round"
/>
<ellipse
cx="0.833333"
client/src/components/icons/LeftArrowSliderIcon.tsx
+3 -3
View File
@@ -10,9 +10,9 @@ const LeftArrowSliderIcon = () => {
<path
d="M5 10L15 10M5 10L10.303 5M5 10L10.303 15"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
client/src/components/icons/RightArrowSliderIcon.tsx
+3 -3
View File
@@ -10,9 +10,9 @@ const RightArrowSliderIcon = () => {
<path
d="M15 10L5 10M15 10L9.69697 15M15 10L9.69697 5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
client/src/components/masterplanPage/TopPanel.tsx
+8 -2
View File
@@ -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(<HelpModal />);
// setModal(<HelpModal />);
setModal(
<MobileModalWrapper>
<MobileHelpModal />
</MobileModalWrapper>
);
};
const handleOnFullScreenClick = () => {
client/src/components/modals/VirtualTourVideoModal.tsx
+2 -2
View File
@@ -15,10 +15,10 @@ const VirtualTourVideoModal = ({ videoHref }: VirtualTourVideoModalProps) => {
return (
<div className="absolute z-[99999999] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] flex justify-center items-center">
<div
className="aspect-video xl:h-[768px] xl:w-auto w-screen relative select-none cursor-pointer"
className="aspect-video w-screen relative select-none cursor-pointer"
onClick={handleOnCloseClick}
>
<div className="absolute top-[10px] right-[10px] text-white">
<div className="absolute top-[10px] right-[10px] text-white zoom-280">
<CrossIcon />
</div>
<video autoPlay muted className="w-full" playsInline preload="metadata">
client/src/components/modals/mobile/MobileHelpModal.tsx
+205
View File
@@ -0,0 +1,205 @@
import { useSwipeable } from "react-swipeable";
import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon";
import { ISlider } from "../../../types/slide";
import { useState, useRef, useLayoutEffect, useContext } from "react";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
import { MobileModalWrapperContext } from "./MobileModalWrapper";
import useModal from "../../../store/useModal";
const tipsSlides: ISlider[] = [
{
id: "tps-sld-1",
src: "/images/masterplan/help/1.png",
title: "1. Workspace",
desc: "For more comfortable work with the general plan, size it to the full screen.",
},
{
id: "tps-sld-2",
src: "/images/masterplan/help/1.png",
title: "2. Filter on the master plan",
desc: "Filter the apartments in the project by required parameters.",
},
{
id: "tps-sld-3",
src: "/images/masterplan/help/1.png",
title: "3. Take a closer look at the project",
desc: "Learn more about the project, surrounding infrastructure and apartment features.",
},
{
id: "tps-sld-4",
src: "/images/masterplan/help/1.png",
title: "4. Look for apartments",
desc: "Use the search to select an apartment that suits you, add it to your favorites and compare.",
},
];
const MobileHelpModal = () => {
const [imageWidth] = useState(0);
const imageRef = useRef<HTMLImageElement>(null);
const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
const [rightImageOffset, setRightImageOffset] = useState("");
const { setIsAnimate } = useContext(MobileModalWrapperContext);
const { setModal } = useModal();
const handlers = useSwipeable({
onSwipedDown: () => handleOnCloseClick(),
onSwipedLeft: next,
onSwipedRight: prev,
});
const handleOnCloseClick = () => {
if (setIsAnimate) {
setIsAnimate(false);
const timeout = setTimeout(() => {
setModal(null);
clearTimeout(timeout);
}, 300);
}
};
function next() {
const lastIndex = tipsSlides.length - 2;
if (selectedImageIndex === lastIndex) return;
setSelectedImageIndex((prev) => prev + 1);
}
function prev() {
if (selectedImageIndex === -1) return;
setSelectedImageIndex((prev) => prev - 1);
}
useLayoutEffect(() => {
const gapOffset = 45;
const _rightImageOffset = `${
(selectedImageIndex + 1) * (imageWidth + gapOffset)
}px`;
setRightImageOffset(_rightImageOffset);
}, [
imageWidth,
selectedImageIndex,
window.innerWidth,
imageRef.current?.width,
]);
return (
<div
className="bg-[#F3F3F2] rounded-ss-lg rounded-se-lg h-full p-6 flex flex-col justify-start"
{...handlers}
>
<div className="flex justify-between pb-[66.5px] border-b">
<h2 className="text-[#0D1922] text-subheadline-m font-semibold">
Tips for working
</h2>
<Button
buttonType="secondary"
isCircleRounded
icon={<CrossIcon />}
className="text-[#0D1922B2]"
onClick={handleOnCloseClick}
/>
</div>
<div className="relative col-span-full overflow-x-hidden flex h-[1884px] mt-[475.44px] border-b flex-nowrap">
<div
className={`flex gap-4 w-full absolute h-fit transition-all duration-300 ease-in-out select-none`}
style={{
right: `${rightImageOffset}`,
}}
>
{tipsSlides.map((image) => (
<div
key={image.id}
className="flex flex-col justify-center items-center"
>
<img
ref={imageRef}
src={image.src}
alt=""
className="rounded-2xl object-fill pointer-events-none select-none min-w-[calc(100vw-135px)] h-[1423px] mb-[112.5px]"
/>
<h2 className="text-[#0D1922] text-[56.25px] leading-[78.75px] font-semibold text-center mb-[45px]">
{image.title}
</h2>
<p className="text-[#0D1922] text-[45px] leading-[56.25px] text-center w-[1125px]">
{image.desc}
</p>
</div>
))}
</div>
</div>
<div className="flex gap-8 justify-center mt-[475px] py-6">
<Button
icon={<LeftArrowSliderIcon />}
buttonType="fab"
className="text-black"
/>
<div className="flex items-center gap-3">
<div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
<div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
</div>
<Button
icon={<RightArrowSliderIcon />}
buttonType="fab"
className="text-black"
/>
</div>
</div>
);
// return <div className="absolute z-[99999901] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
// <div className="h-full col-span-3 col-start-10 bg-[#F3F3F2] py-6 px-6 flex flex-col justify-between items-center">
// <div className="flex flex-col gap-8">
// <div className="flex justify-between pb-4 border-b border-[#E2E2DC]">
// <h2 className="text-subheadline-m font-semibold">
// Tips for working
// </h2>
// <Button
// icon={<CrossIcon />}
// buttonType="fab"
// onClick={handleOnCloseClick}
// isCircleRounded
// />
// </div>
// <img
// src="/images/masterplan/help/1.png"
// alt="1"
// className="rounded-2xl"
// />
// <div className="flex flex-col gap-2 text-[#0D1922]">
// <h2 className="text-subheadline-m font-semibold">1. Workspace</h2>
// <p className="text-m">
// For more comfortable work with the general plan, size it to the
// full screen.
// </p>
// </div>
// </div>
// <div className="flex gap-8">
// <Button
// icon={<LeftArrowSliderIcon />}
// buttonType="fab"
// className="text-black"
// />
// <div className="flex items-center gap-3">
// <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
// <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
// <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
// <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
// <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
// </div>
// <Button
// icon={<RightArrowSliderIcon />}
// buttonType="fab"
// className="text-black"
// />
// </div>
// </div>
// </div>;
};
export default MobileHelpModal;
client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const ButtomPanelCompassVirtualTour = () => {
style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
src="/images/masterplan/compass.png"
alt="compass"
className=""
className="zoom-280"
/>
</div>
</div>
client/src/components/virtualTour/LabelMarker.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
return (
<>
{
<Html position={sphereLink.labelPosition} center>
<Html position={sphereLink.labelPosition} center className="zoom-280">
{sphereLink.type === "default" && (
<WalkHereMarker sphereLink={sphereLink} apartment={apartment} />
)}
client/src/components/virtualTour/VirtualTourSidebar.tsx
+8 -12
View File
@@ -103,9 +103,9 @@ const VirtualTourSidebar = ({
return (
<div className="absolute w-screen h-screen grid z-[99999997] pointer-events-none select-none">
<div className="h-screen py-[72px] px-3 w-[360px]">
<div className="h-screen py-[202px] px-3 w-[1012.5px]">
<div className="bg-white w-full rounded-2xl p-5 flex flex-col relative rounded-ee-none">
<div className="flex items-center justify-between pb-[18px] border-b gap-4">
<div className="flex items-center justify-between pb-4 border-b gap-4">
<Button
icon={<LeftArrowIcon />}
buttonType="secondary"
@@ -113,7 +113,7 @@ const VirtualTourSidebar = ({
onClick={handleOnBackClick}
/>
{/* <p className="text-[#0D1922] font-semibold leading-6 text-left text-xl"> */}
<p className="text-[#0D1922] font-semibold text-subheadline-s leading-6 text-left">
<p className="text-[#0D1922] font-semibold text-subheadline-s text-[56.25px] leading-[78.75px] text-left">
{apartment
? `${apartment?.Unit_Type}, ${Math.round(
apartment?.Total_Area_Sqft
@@ -152,16 +152,12 @@ const VirtualTourSidebar = ({
isActive ? "my-4" : ""
} relative flex justify-center`}
>
<img
src={appartmentSphere?.map}
alt=""
className="max-h-[300px]"
/>
<img src={appartmentSphere?.map} alt="" className="h-[840px]" />
<div
className="absolute"
className="absolute zoom-280"
style={{
top: `${selectedSphere?.mapPosition[1]}px`,
left: `${selectedSphere?.mapPosition[0]}px`,
top: `${selectedSphere?.mapPosition[1] || 0}px`,
left: `${selectedSphere?.mapPosition[0] || 0}px`,
transform: `rotate(${-currentCompassRotate + 90}deg)`,
}}
>
@@ -234,7 +230,7 @@ const VirtualTourSidebar = ({
className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]"
>
<div className="flex justify-center items-center gap-2">
<div className="relative">
<div className="relative text-[45px]">
<div
className={`transition-opacity duration-300 ${
!isActive ? "opacity-100" : "opacity-0"
client/src/components/virtualTour/VirtualTourTopPanel.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ const VirtualTourTopPanel = () => {
return (
<>
<div
className={`absolute top-[62px] left-0 z-[99999998] w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
className={`absolute top-[157px] left-0 z-[99999998] w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
>
<div className="flex gap-2 col-span-1 col-start-12 justify-end">
{isFullscreen ? (
client/src/components/virtualTour/VirtualTourWrapper.tsx
+8 -4
View File
@@ -1,5 +1,5 @@
import { OrbitControls, Html } from "@react-three/drei";
import { Suspense, useEffect, useRef } from "react";
import { Fragment, Suspense, useEffect, useRef } from "react";
import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
import useCompass from "../../store/useCompass";
import SphereTour from "./SphereTour";
@@ -42,16 +42,20 @@ const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
selectedSphere && sphere.id === selectedSphere.id;
return (
<>
<Fragment key={sphere.id}>
{isLabelContains &&
sphere.links.map((sphereLink) => (
<LabelMarker sphereLink={sphereLink} apartment={appartment} />
<LabelMarker
sphereLink={sphereLink}
apartment={appartment}
key={sphereLink.id}
/>
))}
<SphereTour
sphere={sphere}
selectedSphere={selectedSphere || appartment.spheres[0]}
/>
</>
</Fragment>
);
})}
<OrbitControls
client/src/consts/initialMasterplanFilters.ts
+26 -21
View File
@@ -11,7 +11,7 @@ const initialSliders: IMultirangeSlider[] = [
maxValue: 2408888,
title: "Cost",
unit: "AED",
id: "1",
id: "sld-1",
isDisabled: true,
},
{
@@ -21,7 +21,7 @@ const initialSliders: IMultirangeSlider[] = [
maxValue: 1058,
title: "Total Area",
unit: "Sqrt",
id: "2",
id: "sld-2",
},
{
minValue: 5,
@@ -29,34 +29,39 @@ const initialSliders: IMultirangeSlider[] = [
endValue: 31,
maxValue: 31,
title: "Floor",
id: "3",
id: "sld-3",
},
];
const initialAparmentTypeCheckboxes: ICheckbox[] = [
{
title: "Studio Flex",
id: "1",
id: "chk-1",
disabled: false,
selected: false,
value: "Studio Flex",
},
{
title: "Studio Squared",
id: "2",
id: "chk-2",
selected: false,
value: "Studio Squared",
},
{ title: "1 Bedroom", id: "3", selected: false, value: "1 BR Squared" },
{ title: "2 Bedroom", id: "4", selected: false, value: "2 BR Squared" },
{ title: "1 Bedroom", id: "chk-3", selected: false, value: "1 BR Squared" },
{ title: "2 Bedroom", id: "chk-4", selected: false, value: "2 BR Squared" },
];
const initialViewCheckboxes: ICheckbox[] = [
{ title: "Burj Khalifa", id: "1", selected: false, value: "BK" },
{ title: "Amenties", id: "2", selected: false, value: "Amenities" },
{ title: "Downtown", id: "3", selected: false, value: "DT" },
{ title: "Canal", id: "4", selected: false, value: "Canal" },
{ title: "Business Bay", id: "5", selected: false, value: "Business Bay" },
{ title: "Burj Khalifa", id: "vw-chk-1", selected: false, value: "BK" },
{ title: "Amenties", id: "vw-chk-2", selected: false, value: "Amenities" },
{ title: "Downtown", id: "vw-chk-3", selected: false, value: "DT" },
{ title: "Canal", id: "vw-chk-4", selected: false, value: "Canal" },
{
title: "Business Bay",
id: "vw-chk-5",
selected: false,
value: "Business Bay",
},
{
title: "Park",
id: "6",
@@ -66,27 +71,27 @@ const initialViewCheckboxes: ICheckbox[] = [
];
const initialSwitchers: ISwitcher[] = [
{ id: "1", title: "Not the first floor", isSwitched: false },
{ id: "2", title: "Not the top floor", isSwitched: false },
{ id: "swc-1", title: "Not the first floor", isSwitched: false },
{ id: "swc-2", title: "Not the top floor", isSwitched: false },
];
const initialRoveHomeCheckboxes: ICheckbox[] = [
{
title: "Downtown",
id: "1",
id: "rov-chk-1",
disabled: true,
selected: false,
value: "Rove Home Downtown",
},
{
title: "Marasi Drive",
id: "2",
id: "rov-chk-2",
selected: false,
value: "Rove Home Marasi Drive",
},
{
title: "Dubai Marina",
id: "3",
id: "rov-chk-3",
selected: false,
disabled: true,
value: "Rove Home Dubai Marina",
@@ -95,25 +100,25 @@ const initialRoveHomeCheckboxes: ICheckbox[] = [
const initialSortList: ISort[] = [
{
id: "1",
id: "sort-1",
title: "Ascending price",
isSelected: true,
value: "asc_price",
},
{
id: "2",
id: "sort-2",
title: "Decreasing price",
isSelected: false,
value: "decr_price",
},
{
id: "3",
id: "sort-3",
title: "Ascending Squares",
isSelected: false,
value: "asc_sqr",
},
{
id: "4",
id: "sort-4",
title: "Ascending Floor",
isSelected: false,
value: "asc_floor",
client/src/index.css
+1 -1
View File
@@ -218,7 +218,7 @@ html {
.text-subheadline-l {
font-family: "Usual", sans-serif;
font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px);
font-size: 67.5px;
line-height: 135%;
}
client/src/pages/Company.tsx
+3 -8
View File
@@ -1,4 +1,3 @@
import { isMobile } from "react-device-detect";
import OurStory from "../components/companyPage/OurStory";
import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
import OurValues from "../components/companyPage/OurValues/OurValues";
@@ -6,17 +5,13 @@ import Footer from "../components/Footer";
const Company = () => {
return (
<section
className={`xl:pt-16 pt-10 font-usual ${
isMobile ? "pt-24" : ""
} select-none `}
>
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4 pt-10 xl:pt-16">
<section className={`font-usual pt-[112.5px] select-none `}>
<h1 className="uppercase text-[112.5px] leading-[112.5px] pb-[112.5px] px-4 pt-16">
IRTH is a privately held real estate investment platform part of a large
local family conglomerate from Dubai
</h1>
<OurStory />
<h1 className="uppercase text-headline-s xl:rubber-headline-indent xl:pb-16 pb-10 xl:px-6 px-4">
<h1 className="uppercase text-[112.5px] pb-[112.5px] px-4 leading-[112.5px]">
IRTHS’s real estate portfolio is spread across numerous projects, below
is a snapshot of some of our current and previous investments
</h1>
client/src/types/slide.ts
+8
View File
@@ -0,0 +1,8 @@
interface ISlider {
src: string;
id: string;
desc: string;
title: string;
}
export type { ISlider };
client/tailwind.config.js
+5
View File
@@ -12,6 +12,7 @@ export default {
2: "4.8px",
},
padding: {
5: "56.25px",
8: "90px",
6: "67.5px",
1: "11.25px",
@@ -20,9 +21,12 @@ export default {
2: "22.5px",
16: "180px",
14: "157.5px",
7: "56px",
},
margin: {
5: "56.25px",
14: "157.5px",
7: "56px",
8: "90px",
6: "67.5px",
1: "11.25px",
@@ -45,6 +49,7 @@ export default {
16: "180px",
},
height: {
12: "135px",
6: "57.6px",
3: "33.75px",
16: "180px",