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

aprt and skygarden desc

Browse Source
This commit is contained in:
zojgame
2024-07-02 18:04:49 +05:00
parent 5bad67dbb6
commit 02505df229
23 changed files with 162 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ButtomPanel.tsx
+1 -3
View File
@@ -10,8 +10,7 @@ const ButtomPanel = () => {
};
return (
<div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
<div className="flex flex-col gap-2">
<div className="flex gap-2 pb-6 pl-6">
<div className="flex gap-[22.5px] pb-6 pl-6">
<Button
text="Disclaimer"
buttonType="special"
@@ -22,7 +21,6 @@ const ButtomPanel = () => {
/>
<Button text="Privacy Policy" buttonType="special" isCircleRounded />
</div>
</div>
<div className="p-6">
<div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
<img
client/src/components/ButtomPanelCompass.tsx
+4 -3
View File
@@ -15,15 +15,16 @@ const ButtomPanelCompass = () => {
return (
<div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
<div className="flex flex-col gap-2">
<div className="flex gap-2 pb-6 pl-6">
<div className="flex gap-[22.5px] pb-6 pl-6">
<Button
text="Disclaimer"
buttonType="special"
isCircleRounded
className="pl-2"
icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick}
/>
<Button text="Privacy Policy" buttonType="special" />
<Button text="Privacy Policy" buttonType="special" isCircleRounded />
</div>
</div>
<div className="p-6">
@@ -32,7 +33,7 @@ const ButtomPanelCompass = () => {
style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
src="/images/masterplan/compass.png"
alt="compass"
className="transition-transform duration-[750ms] ease-in-out"
className="transition-transform duration-[750ms] ease-in-out w-[292.5px] h-[292.5px]"
/>
</div>
</div>
client/src/components/Button.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ const Button = ({
const textColor = textColors[buttonType];
const border = borders[buttonType];
const padding = paddings[buttonType];
const rounded = isCircleRounded ? "rounded-full" : "rounded-lg";
const rounded = isCircleRounded ? "rounded-full" : "rounded-[8px]";
const disabledStyle = disabled ? "bg-[#0D192214] text-gray-400" : "";
return (
@@ -44,7 +44,7 @@ const Button = ({
disabled={disabled}
onClick={onClick}
className={`zoom-280 min-w-10 max-h-10 ${rounded} ${
icon && !text ? "p-[10px]" : padding
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/Checkbox.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
return (
<div
onClick={() => onClick(checkbox.id)}
className={`flex justify-between bg-white p-3 rounded-lg transition-[background] duration-300 ease-in-out select-none ${
className={` zoom-280 flex justify-between bg-white p-3 rounded-lg transition-[background] duration-300 ease-in-out select-none ${
checkbox.disabled
? "pointer-events-none touch-none"
: "hover:bg-[#F3F3F2] cursor-pointer"
client/src/components/MultiRangeSlider.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const MultiRangeSlider = ({
}, [multirangeSlider.endValue]);
return (
<div className="">
<div className="zoom-280">
<div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
<div className="flex justify-between">
<NumericFormat
client/src/components/Switch.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ const Switch = ({ switcher, onClick }: ISwitchProps) => {
return (
<div
className={`w-10 h-6 relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
className={`w-10 h-6 zoom-280 relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
}`}
onClick={handleOnClick}
client/src/components/complexPage/ComplexTopPanel.tsx
+12 -17
View File
@@ -65,9 +65,9 @@ const ComplexTopPanel = () => {
<img src="../images/top_shadow.png" className="w-screen" alt="" />
</div>
<div
className={`absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
className={`absolute top-[172px] left-0 z-20 w-full p-[45px] grid grid-cols-12 select-none touch-none pointer-events-none`}
>
<div className="flex gap-2 sm:col-span-5 col-span-7">
<div className="flex gap-[22.5px] col-span-8">
<Button
icon={<LeftArrowSliderIcon />}
buttonType="cta"
@@ -94,21 +94,7 @@ const ComplexTopPanel = () => {
onClick={handleOnAboutComplexClick}
/>
</div>
<div className="flex flex-col sm:col-start-6 col-start-8 sm:col-span-4 col-span-4 text-white text-center items-start ">
<div
className={`text-center duration-300 ease-in-out transition-opacity hidden lg:block ${
isSidebar ? "opacity-0" : "opacity-100"
}`}
>
<h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
ROVE Home Marasi Drive
</h2>
{/* <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
Select a wing
</p> */}
</div>
</div>
<div className="flex gap-2 col-span-1 col-start-12 justify-end">
<div className="flex gap-[22.5px] col-span-1 col-start-12 justify-end">
{isFullscreen ? (
<Button
buttonType="fab"
@@ -131,6 +117,15 @@ const ComplexTopPanel = () => {
isCircleRounded
/>
</div>
<div className="flex flex-col col-start-1 col-span-4 text-white text-center items-start text-[53.25px] pt-[45px]">
<div
className={`text-center duration-300 ease-in-out transition-opacity`}
>
<h2 className="font-semibold text-[56.5px] drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
ROVE Home Marasi Drive
</h2>
</div>
</div>
</div>
</>
);
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+29 -19
View File
@@ -18,22 +18,22 @@ const MobileFloorDescription = ({
return (
<>
<div
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[328px] pointer-events-auto`}
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[816px]`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<div className="flex flex-col">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
className={`text-[#0D1922] font-semibold duration-300 ease-in-out text-[33.6px]ubheadline-s text-[48px]`}
>
{descriptionFloor?.floor} Floor
</p>
<div className="flex gap-2 items-center">
<p className="text-[#73787C] font-semibold text-caption-m">
<p className="text-[#73787C] font-semibold text-[29px]">
{descriptionFloor?.wing}
</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="font-semibold text-caption-m text-[#00BED7]">
<p className="font-semibold text-[29px] text-[#00BED7]">
{floorApartments.length} units
</p>
</div>
@@ -43,8 +43,8 @@ const MobileFloorDescription = ({
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">
<div className="min-w-6 min-h-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center py-[9.3px] px-[20px] ">
{
floorApartments.filter(
(apart) => apart.Unit_Type === "Studio Flex"
@@ -52,13 +52,17 @@ const MobileFloorDescription = ({
}
</p>
</div>
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
<p className="text-[33.6px] text-[#73787C] w-full">
Studio Flex
</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
<p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable
</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<div className="min-w-6 min-h-6 h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
{
floorApartments.filter(
@@ -67,13 +71,15 @@ const MobileFloorDescription = ({
}
</p>
</div>
<p className="text-s text-[#73787C]">Studio</p>
<p className="text-[33.6px] text-[#73787C]">Studio</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
<p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable
</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<div className="min-w-6 min-h-6 h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
{
floorApartments.filter(
@@ -82,13 +88,15 @@ const MobileFloorDescription = ({
}
</p>
</div>
<p className="text-s text-[#73787C]">1 Bedroom</p>
<p className="text-[33.6px] text-[#73787C]">1 Bedroom</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
<p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable
</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<div className="min-w-6 min-h-6 h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
{
floorApartments.filter(
@@ -97,22 +105,24 @@ const MobileFloorDescription = ({
}
</p>
</div>
<p className="text-s text-[#73787C] text-nowrap">
<p className="text-[33.6px] text-[#73787C] text-nowrap">
2 Bedroom, Type A
</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
<p className="text-[33.6px] text-[#0D1922] text-nowrap">
Unvailiable
</p>
</div>
<Button
onClick={onClick}
buttonType="cta"
className="justify-center"
text="Explore"
icon={<RightArrowSliderIcon />}
iconPos="right"
onClick={onClick}
/>
</div>
<div className="w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute -top-[35px] left-[0px]"></div>
<div className="w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute -top-[98px] z-[99999] left-[0px]"></div>
</div>
</div>
</>
client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
+19 -11
View File
@@ -12,13 +12,13 @@ const MobileSkygardenDescription = ({
return (
<>
<div
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[240px] pointer-events-auto`}
className={`bg-white rounded-2xl flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-fit pointer-events-auto p-[57px]`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<div className="flex flex-col">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
className={`text-[#0D1922] font-semibold text-[48px] duration-300 ease-in-out`}
>
Sky Garden
</p>
@@ -28,21 +28,29 @@ const MobileSkygardenDescription = ({
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">8</p>
<div className="min-w-6 min-h-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="py-[9.3px] px-[20px] flex justify-center items-center">
8
</p>
</div>
<p className="text-s text-[#73787C] w-full">Indoor</p>
<p className="text-[33.6px] text-[#73787C] w-full">Indoor</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
<p className="text-[33.6px] text-[#0D1922] text-nowrap">
3 amenties
</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">8</p>
<div className="min-w-6 min-h-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center py-[9.3px] px-[20px]">
8
</p>
</div>
<p className="text-s text-[#73787C] w-full">Studio</p>
<p className="text-[33.6px] text-[#73787C] w-full">Studio</p>
</div>
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
<p className="text-[33.6px] text-[#0D1922] text-nowrap">
14 amenties
</p>
</div>
<Button
buttonType="cta"
@@ -53,7 +61,7 @@ const MobileSkygardenDescription = ({
onClick={onClick}
/>
</div>
<div className="w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute -top-[35px] left-[0px]"></div>
<div className="w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute -top-[89px] left-[0px]"></div>
</div>
</div>
</>
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+4 -70
View File
@@ -2,13 +2,8 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent, useEffect, useState } from "react";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import useWingSidebar from "../../../store/useWingSidebar";
import useModal from "../../../store/useModal";
import {
laptopWidth,
mobileWidht,
descriptions,
} from "../../../consts/masterplan";
import { descriptions } from "../../../consts/masterplan";
import { updateAccessToken } from "../../../api/updateAccessToken";
import { IAparmentRes } from "../../../types/apartmentsRes";
import useMasterplanFilters from "../../../store/useMasterplanFilters";
@@ -16,7 +11,6 @@ import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilt
import { pageInitial } from "../../../consts/initialMasterplanFilters";
import { useDebounce } from "@uidotdev/usehooks";
import { getFilteredApartments } from "../../../calc/getFilteredApartments";
import LoaderModal from "../../modals/LoaderModal";
import FloorNumbers from "./FloorNumbers";
import WingSignatures from "./WingSignatures";
import FloorsHighlighting from "./FloorsHighlighting";
@@ -31,7 +25,7 @@ const SequenceWing = () => {
const [width, setWidth] = useState<number>(0);
const [top, setTop] = useState<number>(0);
const [left, setLeft] = useState<number>(0);
const { isSidebar, setIsSidebar } = useWingSidebar();
// const { isSidebar, setIsSidebar } = useWingSidebar();
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
const [currentHoveredFloor, setHoverCurrentFloor] =
useState<null | IDesctiptionFloor>(null);
@@ -109,7 +103,7 @@ const SequenceWing = () => {
) {
const isFloorClicked = Boolean(e.target.dataset.id);
if (isFloorClicked) {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
setMousePos([e.clientX - 364, e.clientY + Math.abs(top) - 20]);
} else {
setIsDescriptionFloorMobile(false);
}
@@ -121,41 +115,14 @@ const SequenceWing = () => {
// detect mouse pos
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
if (screenWidth > laptopWidth) {
const _top = screenWidth / 2 - screenHeight / 2;
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 - 640 + _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,
]);
}
}
setMousePos([e.clientX + 1184, e.clientY + Math.abs(_top) + 50]);
//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 handleOnMouseDown(e: MouseEvent | any) {
@@ -214,32 +181,6 @@ const SequenceWing = () => {
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
) => {
@@ -274,13 +215,6 @@ const SequenceWing = () => {
};
}, []);
useEffect(() => {
if (!isSidebar) {
setIsFloorSidebar(false);
setIsSkygardenSidebar(false);
}
}, [isSidebar]);
useEffect(() => {
const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`;
const perPage = 1000;
client/src/components/header/Header/DesktopHeader.tsx
+1 -2
View File
@@ -1,13 +1,12 @@
import Auth from "../Auth/Auth";
import Logo from "../../Logo";
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 items-center">
<div className="flex gap-4 col-span-2">
<Logo />
<Location />
{/* <Location /> */}
</div>
<Navbar />
<Auth isAuth={false} />
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
@@ -13,11 +13,11 @@ const NavbarTabDesktop = ({
}: NavbarTabProps) => {
return (
<button
className="px-4 text-[#73787C] hover:text-black relative w-fit h-full"
className="px-[45px] text-[#73787C] hover:text-black relative w-fit h-full"
onClick={() => onClick(tab)}
>
<div
className={`border-b-2 h-full flex items-center transition-all duration-300 text-[38.4px] ${
className={`border-b-2 h-full flex items-center transition-all duration-300 text-[45px] ${
isSelected
? "border-b-[#00BED7]"
: "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
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-[172px] 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-[22.5px] select-none touch-none pointer-events-none`}
>
{isFullscreen ? (
<Button
client/src/components/masterplanPage/map/Marker.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
const Marker = (props: MarkerComponentProps) => {
const { setHoveredMarker, hoveredMarker } = useMarker();
const [markerScale, setMarkerScale] = useState(1);
const [markerScale, setMarkerScale] = useState(0.5);
const navigate = useNavigate();
const currentMarker = markers.find(
(marker) => marker.itemNumber === props.itemNumber
client/src/components/masterplanPage/map/ZoomControlls.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const ZoomControlls = () => {
};
return (
<div className="absolute top-1/2 right-4 z-50 flex flex-col gap-2">
<div className="absolute top-1/2 right-4 z-50 flex flex-col gap-[22.5px]">
<Button
buttonType="primary"
icon={<ZoomIcon />}
client/src/components/modals/DisclaimerModal.tsx
+9 -9
View File
@@ -9,29 +9,29 @@ const DisclaimerModal = () => {
return (
<div className="absolute z-[99999999] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
<div className="bg-white rounded-lg col-span-4 col-start-5 py-[37px] px-8">
<div className=" w-full h-1 flex justify-between">
<div className="h-[2px] bg-[#00BED7] w-1/3 rounded-full"></div>
<button onClick={handleOnCloseClick}>
<div className="bg-white rounded-[38.4px] w-[1184px] col-start-4 pt-[45px] pb-[90px] px-[90px]">
<div className=" w-full h-[67.5px] flex justify-between items-center">
<div className="h-[4.8px] bg-[#00BED7] w-[350px] rounded-full "></div>
<button onClick={handleOnCloseClick} className="zoom-280">
<CrossIcon />
</button>
</div>
<h2 className="text-subheadline-m font-semibold py-6">Disclaimer</h2>
<h2 className="text-[57.6px] font-semibold pb-6">Disclaimer</h2>
<div className="flex flex-col gap-4">
<p className="text-caption-m">
<p className="text-[33.75px]">
This masterplan has been designed solely to provide an impression of
the Rove Home projects as well as the approximate location of
existing and proposed facilities, services, and destinations and is
not intended for any other purpose.
</p>
<p className="text-caption-m">
<p className="text-[33.75px]">
All elements including the interior design used in the units and
images shown in the virtual tour are only for illustration. The
pictures of the proposed residential units, furniture, landscaping,
amenities, color schemes, fixtures, and accessories among all other
items are illustrative to showcase the units.
</p>
<p className="text-caption-m">
<p className="text-[33.75px]">
IRTH does not make any representation or give any warranty
concerning the future developments shown, or the current or future
amenities, location, or existence of any facilities, services, and
@@ -39,7 +39,7 @@ const DisclaimerModal = () => {
any other information are approximate and for indicative purposes
only and are not to scale.
</p>
<p className="text-caption-m">
<p className="text-[33.75px]">
IRTH gives notice that this virtual tour (including units,
amenities, plans of the property) does not constitute any part of a
sale offer or sale and purchase contract.
client/src/components/modals/ZoomHintModal.tsx
+3 -3
View File
@@ -43,17 +43,17 @@ const ZoomHint = () => {
return (
<div
className={`absolute z-10 m-auto top-[calc(50%-60px)] left-[calc(50%-140px)] flex flex-col items-center bg-[#0D192266] backdrop-blur-md p-4 text-white gap-3 rounded-lg transition-opacity duration-300 ${
className={`absolute z-10 m-auto top-[calc(50%-60px)] left-[calc(50%-334px)] flex flex-col items-center bg-[#0D192266] backdrop-blur-md p-4 text-white gap-[33.75px] rounded-lg transition-opacity duration-300 ${
isTransparent ? "opacity-0" : "opacity-100"
}`}
ref={ref}
>
<div className="flex gap-4 items-center">
<div className="flex gap-4 items-center zoom-280">
<SearchPlusIcon />
<LineIcon />
<OpenFullscreenIcon />
</div>
<p>Zoom and Move to select a location</p>
<p className="text-[40px]">Zoom and Move to select a location</p>
</div>
);
};
client/src/components/modals/mobile/MasterplanFiltersModal.tsx
+16 -17
View File
@@ -120,13 +120,11 @@ const MasterplanFiltersModal = () => {
return (
<div
className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col gap-6"
className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-[67.5px] flex flex-col gap-[67.5px]"
{...handlers}
>
<div className="flex justify-between pb-6 border-b">
<h2 className="text-[#0D1922] text-subheadline-m font-semibold">
Filters
</h2>
<div className="flex justify-between pb-[67.5px] border-b-[2.8px]">
<h2 className="text-[#0D1922] text-[67.5px] font-semibold">Filters</h2>
<Button
buttonType="secondary"
isCircleRounded
@@ -136,8 +134,8 @@ const MasterplanFiltersModal = () => {
/>
</div>
<div className="flex flex-col w-full">
<p className="text-[#0D1922] text-s pb-4">Apartment type</p>
<div className="grid grid-cols-2 gap-2">
<p className="text-[#0D1922] text-[40px] pb-[45px]">Apartment type</p>
<div className="grid grid-cols-2 gap-[22.5px]">
{localApartmentTypeCheckboxes.map((checkbox) => (
<Checkbox
checkbox={checkbox}
@@ -147,12 +145,12 @@ const MasterplanFiltersModal = () => {
))}
</div>
</div>
<div className="grid grid-cols-2 gap-6 border-b pb-12">
<div className="grid grid-cols-2 gap-[67.5px] border-b-[2.8px] pb-[135px] pt-[67.5px]">
{localMultirangeSliders.map((slider) => (
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-[33.75px]">
<div className="flex justify-between items-center">
<p className="text-[#0D1922] text-s ">{slider.title}</p>
<p className="text-[#73787C] text-s">{slider.unit}</p>
<p className="text-[#0D1922] text-[40px]">{slider.title}</p>
<p className="text-[#73787C] text-[40px]">{slider.unit}</p>
</div>
<MultiRangeSlider
onChange={handleOnSliderValueChange}
@@ -160,18 +158,18 @@ const MasterplanFiltersModal = () => {
/>
</div>
))}
<div className="flex flex-col gap-2 pt-6">
<div className="flex flex-col gap-[22.5px] pt-[67.5px]">
{localSwitchers.map((switcher) => (
<div key={switcher.id} className="flex justify-between w-full">
<p className="text-s text-[#73787C]">{switcher.title}</p>
<p className="text-[40px] text-[#73787C]">{switcher.title}</p>
<Switch switcher={switcher} onClick={handleOnSwitcherClick} />
</div>
))}
</div>
</div>
<div className="flex flex-col w-full">
<p className="text-[#0D1922] text-s pb-4">Views</p>
<div className="grid grid-cols-2 gap-2">
<div className="flex flex-col w-full pb-[135px] border-b-[2.8px]">
<p className="text-[#0D1922] text-[40px] pb-[45px]">Views</p>
<div className="grid grid-cols-2 gap-[22.5px]">
{localViewCheckboxes.map((checkbox) => (
<Checkbox
checkbox={checkbox}
@@ -182,7 +180,8 @@ const MasterplanFiltersModal = () => {
</div>
</div>
<div className="flex justify-between">
<p className="text-[#00BED7] text-m">195 apartments found</p>
{/* <p className="text-[#00BED7] text-[45px]">195 apartments found</p> */}
<p className="text-[#00BED7] text-[45px]"></p>
<Button
icon={<ResetIcon />}
text="Reset filters"
client/src/components/modals/mobile/MobileModalWrapper.tsx
+3 -3
View File
@@ -35,9 +35,9 @@ const MobileModalWrapper = ({
return (
<div
className={`h-screen w-screen ${
isHeightScreen ? "" : "pt-20"
} absolute z-[99999998] top-0 transition-all duration-300 ease-in-out ${
isAnimate ? "" : "backdrop-blur-none"
isHeightScreen ? "" : "pt-[225px]"
} absolute z-[99999999] top-0 transition-all duration-300 ease-in-out ${
isAnimate ? "backdrop-blur-lg" : "backdrop-blur-none"
}`}
>
<div
client/src/consts/buttonStyles.ts
+9 -9
View File
@@ -22,22 +22,22 @@ const textColors: ButtonStyle = {
const borders: ButtonStyle = {
cta: "",
primary: "border border-[#ffffff] active:border-[#00BED7]",
secondary: " border border-[#E2E2DC] active:border-[#00BED7]",
primary: "border-[1px] border-[#ffffff] active:border-[#00BED7]",
secondary: " border-[1px] border-[#E2E2DC] active:border-[#00BED7]",
tertiary: "",
fab: "rounded-full",
favorite: "rounded-full border border-[#E2E2DC]",
favorite: "rounded-full border-[1px] border-[#E2E2DC]",
special: "rounded-full",
};
const paddings: ButtonStyle = {
cta: "py-3 px-6",
primary: "py-[10px] pr-6 pl-4",
secondary: "py-3 px-6",
tertiary: "py-1 px-3",
fab: "py-3 px-6",
cta: "py-[12px] px-[24px]",
primary: "py-[10px] pr-[24px] pl-4",
secondary: "py-[12px] px-[24px]",
tertiary: "py-[4px] px-[12px]",
fab: "py-[12px] px-[24px]",
favorite: "p-[10px]",
special: "py-1 px-3",
special: "py-[4px] px-[12px]",
};
export { textColors, backgroundColors, borders, paddings };
client/src/index.css
+4 -2
View File
@@ -179,7 +179,8 @@ html {
.text-caption-m {
font-family: "Usual", sans-serif;
line-height: 135%;
font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
/* font-size: clamp(12px, 0.4994rem + 0.313vw, 14px); */
font-size: 28.8px;
}
.text-s {
@@ -195,9 +196,10 @@ html {
}
.text-subheadline-s {
/* text-[48px] */
font-family: "Usual", sans-serif;
line-height: 140%;
font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
font-size: 48px;
}
.text-subheadline-m {
client/tailwind.config.js
+26 -1
View File
@@ -2,7 +2,32 @@
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
extend: {
borderWidth: {
DEFAULT: "2.4px",
},
padding: {
6: "67.5px",
1: "11.25px",
},
gap: {
2: "22.5px",
4: "45px",
8: "90px",
},
minHeight: {
6: "57.6px",
},
height: {
6: "57.6px",
},
minWidth: {
6: "57.6px",
},
fontSize: {
xs: "28.8px",
},
},
},
plugins: [],
};