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

Compare commits

base: zojgame/IRTH-Touch:497cb6aa44ca80b8b09c16ad24affda7d140f81d
Branches Tags
zojgame/IRTH-Touch:master
...
compare: zojgame/IRTH-Touch:02505df229319b0399407149b81f107ce9692e7b
Branches Tags
zojgame/IRTH-Touch:master

2 Commits
497cb6aa44 ... 02505df229

Author SHA1 Message Date
zojgame 02505df229 aprt and skygarden desc 2024-07-02 18:04:49 +05:00
zojgame 5bad67dbb6 map page scaling 2024-07-02 14:41:15 +05:00
39 changed files with 315 additions and 266 deletions
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
+15 -13
View File
@@ -10,22 +10,24 @@ 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">
<Button
text="Disclaimer"
buttonType="special"
className="pl-2"
icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick}
isCircleRounded
/>
<Button text="Privacy Policy" buttonType="special" isCircleRounded />
</div>
<div className="flex gap-[22.5px] pb-6 pl-6">
<Button
text="Disclaimer"
buttonType="special"
className="pl-2"
icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick}
isCircleRounded
/>
<Button text="Privacy Policy" buttonType="special" isCircleRounded />
</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/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
+4 -4
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 (
@@ -43,9 +43,9 @@ const Button = ({
type={type}
disabled={disabled}
onClick={onClick}
className={`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={`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/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/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/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/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
+18 -23
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,13 +61,13 @@ 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
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"
@@ -78,7 +78,7 @@ const ComplexTopPanel = () => {
icon={<FilterIcon />}
buttonType="primary"
text="Filters"
onClick={handleOnFiltersClick}
onClick={handleOnMobileFiltersClick}
/>
<Button
className="lg:hidden flex"
@@ -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/complexPage/SequenceSlider.tsx
+38 -18
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,27 +129,47 @@ 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;
setTop(_top);
} else {
const _top = screenHeight / 2.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
const _top = screenHeight / 4.5;
setTop(_top);
const _left = screenHeight - screenWidth;
const _width = screenHeight + _left;
setWidth(_width);
setLeft(_left);
}
setWidth(_width);
setLeft(_left);
}
function handleOnSequenceClick(): void {
navigate("./wing");
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
+64 -78
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,10 +11,8 @@ 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 { isMobile } from "react-device-detect";
import FloorsHighlighting from "./FloorsHighlighting";
import MobileFloorDescription from "./MobileFloorDescription";
import WingFloorModal from "../../modals/mobile/WingFloorModal";
@@ -32,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);
@@ -110,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);
}
@@ -122,68 +115,70 @@ 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 - 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,
]);
}
}
const _top = screenWidth / 2 - screenHeight / 2;
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);
}
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;
setTop(_top);
// <640
} else {
const _top = screenHeight / 2.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
const _top = screenHeight / 4.5;
setTop(_top);
const _left = screenHeight - screenWidth;
const _width = screenHeight + _left;
setWidth(_width);
setLeft(_left);
}
setWidth(_width);
setLeft(_left);
}
const handleOnExploreFloorClick = (
@@ -220,13 +215,6 @@ const SequenceWing = () => {
};
}, []);
useEffect(() => {
if (!isSidebar) {
setIsFloorSidebar(false);
setIsSkygardenSidebar(false);
}
}, [isSidebar]);
useEffect(() => {
const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`;
const perPage = 1000;
@@ -280,13 +268,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 +284,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
+1 -7
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} />
)}
<AuthDesktop isAuth={isAuth} userName={userName} />
</>
);
};
client/src/components/header/Header/DesktopHeader.tsx
+2 -3
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">
<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/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/NavbarTabDesktop.tsx
+3 -3
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 ${
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]"
@@ -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-[22.5px] select-none touch-none pointer-events-none`}
>
{isFullscreen ? (
<Button
client/src/components/masterplanPage/map/Map.tsx
+6 -6
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,10 +45,10 @@ 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 ${
extraClass={`transition-all duration-300 ease-in-out ${
hoveredMarker ? "brightness-[.7]" : ""
}`}
/>
client/src/components/masterplanPage/map/Marker.tsx
+2 -2
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
@@ -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/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/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/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/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
+8 -2
View File
@@ -50,6 +50,10 @@ html {
}
@layer components {
.zoom-280 {
zoom: 280%;
}
.desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026;
}
@@ -175,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 {
@@ -191,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/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;
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: [],
};