inmake/irth-new-client-120
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tailwind4->3

Browse Source
This commit is contained in:
Lanskikh
2025-07-29 13:23:43 +05:00
parent 3ba60ce204
commit e7d362e3b5
41 changed files with 387 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AmentitiesCard.tsx
+2 -2
View File
@@ -11,11 +11,11 @@ function AmentitiesBadge({ icon, title }: AmentitiesCardProps) {
className={clsx(
"2xl:space-y-[0.883vw] space-y-3",
!icon &&
"2xl:px-[1.111vw] 2xl:py-[0.417vw] px-4 py-1.5 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring ring-[#E2E2DC]"
"2xl:px-[1.111vw] 2xl:py-[0.417vw] px-4 py-1.5 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring-1 ring-[#E2E2DC]"
)}
>
{icon && (
<div className="2xl:size-[2.778vw] size-10 text-[#0D1922] rounded-full overflow-hidden 2xl:ring-[0.069vw] ring ring-[#E2E2DC]">
<div className="2xl:size-[2.778vw] size-10 text-[#0D1922] rounded-full overflow-hidden 2xl:ring-[0.069vw] ring-[0.069vw] ring-[#E2E2DC]">
{icon}
</div>
)}
src/components/Compass.tsx
+2 -2
View File
@@ -5,12 +5,12 @@ interface CompassProps {
function Compass({ imgStyle }: CompassProps) {
return (
<div>
<div className="bg-[#0D1922]/40 2xl:w-[7.222vw] w-26 aspect-square pointer-events-none absolute 2xl:left-[2.222vw] md:max-2xl:bottom-4 left-4 2xl:bottom-[2.222vw] max-md:hidden rounded-full backdrop-blur-lg">
<div className="bg-[#0D1922] bg-opacity-40 2xl:w-[7.222vw] w-[104px] aspect-square pointer-events-none absolute 2xl:left-[2.222vw] md:max-2xl:bottom-4 left-4 2xl:bottom-[2.222vw] max-md:hidden rounded-full backdrop-blur-lg">
<img src="/images/map/compass.png" style={imgStyle} />
</div>
<img
src="/images/map/compass-mobile.png"
className="min-w-10 w-10 pointer-events-none absolute left-4 bottom-4 md:hidden"
className="min-w-10 md:hidden absolute bottom-4 left-4 w-10 pointer-events-none"
/>
</div>
);
src/components/FloorPlanDubaiMarina39_40.tsx
+2 -2
View File
@@ -107,8 +107,8 @@ function FloorPlanDubaiMarina39_40Unit({
handleMouseEnter();
}}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
"fill-transparent hover:fill-[#00BED7] opacity-40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7] opacity-40"
)}
d={d}
/>
src/components/FloorPlanDubaiMarina41_42.tsx
+2 -2
View File
@@ -160,8 +160,8 @@ function FloorPlanDubaiMarina41_42Unit({
handleMouseEnter();
}}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
"fill-transparent hover:fill-[#00BED7] opacity-40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7] opacity-40"
)}
d={d}
/>
src/components/FloorPlanDubaiMarina7_38.tsx
+2 -2
View File
@@ -160,8 +160,8 @@ export function FloorPlanDubaiMarina7_38Unit({
handleMouseEnter();
}}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
"fill-transparent hover:fill-[#00BED7] opacity-40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7] opacity-40"
)}
d={d}
/>
src/components/FloorPlanDubaiMarina7_38Comb.tsx
+2 -2
View File
@@ -202,8 +202,8 @@ function FloorPlanDubaiMarina7_38CombUnit({
handleMouseEnter();
}}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40"
"fill-transparent hover:fill-[#00BED7] opacity-40 isolate cursor-pointer transition-colors",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7] opacity-40"
)}
d={d}
/>
src/components/FloorPlanMarasiDriveEast.tsx
+2 -2
View File
@@ -1261,8 +1261,8 @@ function MarasiDriveEastFloorPlanUnit({
}}
d={d}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/20 transition-all cursor-pointer",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/20"
"fill-transparent hover:fill-[#00BED7] opacity-20 transition-all cursor-pointer",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7] opacity-20"
)}
/>
</g>
src/components/FloorPlanMarasiDriveWestLower.tsx
+2 -2
View File
@@ -1299,8 +1299,8 @@ function MarasiDriveWestLowerFloorPlanUnit({
}}
d={d}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/20"
"fill-transparent hover:fill-[#00BED7] opacity-20 transition-[fill] cursor-pointer",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7] opacity-20"
)}
/>
</g>
src/components/FloorPlanMarasiDriveWestUpper.tsx
+2 -2
View File
@@ -1274,8 +1274,8 @@ function MarasiDriveWestUpperFloorPlanUnit({
}}
d={d}
className={clsx(
"fill-transparent hover:fill-[#00BED7]/20 transition-all cursor-pointer",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/20"
"fill-transparent hover:fill-[#00BED7] opacity-20 transition-all cursor-pointer",
selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7] opacity-20"
)}
/>
</g>
src/components/FloorPopup.tsx
+10 -14
View File
@@ -34,15 +34,15 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
return (
<div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="font-medium text-h5">
<p className="text-h5 font-medium">
{amentiesCount ? title : `${title.split(" ").at(-1)} floor`}
</p>
{complexName === "marasi-drive" && !amentiesCount && (
<p className="text-[#0D1922]/40 text-s">{title.split(" ")[0]} Wing</p>
<p className="text-s opacity-40">{title.split(" ")[0]} Wing</p>
)}
</div>
<div className="flex 2xl:gap-[0.278vw] gap-1">
<p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s text-[#0D1922]/70">
<p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s opacity-70">
{amentiesCount !== null
? `${amentiesCount?.total} Amenties`
: `${
@@ -58,7 +58,7 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
} apartments`}
</p>
{!amentiesCount && (
<div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216]/8 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
<div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216] bg-opacity-[8%] 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
<span className="2xl:size-[0.833vw] size-3 text-[#30B216]">
<HumanIcon />
</span>
@@ -82,10 +82,10 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
].types
).map(([unitType, count]) => (
<div className="flex 2xl:gap-[0.556vw] gap-2" key={unitType}>
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:size-[1.111vw] size-4">
{count}
</p>
<p className="text-caption-m text-[#0D1922]/70">
<p className="text-caption-m opacity-70">
{formattedUnitTypes.get(unitType)}
</p>
</div>
@@ -94,22 +94,18 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
<>
{amentiesCount?.indoor && (
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:size-[1.111vw] size-4">
{amentiesCount.indoor}
</p>
<p className="text-caption-m text-[#0D1922]/70">
Indoor Amenties
</p>
<p className="text-caption-m opacity-70">Indoor Amenties</p>
</div>
)}
{amentiesCount?.outdoor && (
<div className="flex 2xl:gap-[0.556vw] gap-2">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:size-[1.111vw] size-4">
{amentiesCount.outdoor}
</p>
<p className="text-caption-m text-[#0D1922]/70">
Outdoor Amenties
</p>
<p className="text-caption-m opacity-70">Outdoor Amenties</p>
</div>
)}
</>
src/components/FloorSelect.tsx
+1 -1
View File
@@ -653,7 +653,7 @@ function FloorSelect({
)}
ref={rootRef}
>
<div className="h-full w-full overflow-hidden relative">
<div className="overflow-hidden relative w-full h-full">
<svg
ref={containerRef}
xmlns="http://www.w3.org/2000/svg"
src/components/Footer.tsx
+13 -13
View File
@@ -24,7 +24,7 @@ function Footer() {
alt="IRTH"
/>
<p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12">
<p className="2xl:max-w-[17.083vw] text-s opacity-40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12">
For more information, visit
<br />
our website:{" "}
@@ -34,14 +34,14 @@ function Footer() {
</p>
<div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
<p className="text-s text-[#0D1922]/40">Follow us for more:</p>
<p className="text-s opacity-40">Follow us for more:</p>
<div className="flex 2xl:gap-[0.278vw] gap-1">
<Link
to={"https://www.youtube.com/@IRTHgroup"}
target="_blank"
className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded"
>
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
<div className="2xl:size-[2.222vw] md:max-2xl:size-8 size-9 opacity-70">
<YoutubeIcon />
</div>
</Link>
@@ -50,7 +50,7 @@ function Footer() {
target="_blank"
className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded"
>
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
<div className="2xl:size-[2.222vw] md:max-2xl:size-8 size-9 opacity-70">
<InstagramIcon />
</div>
</Link>
@@ -59,7 +59,7 @@ function Footer() {
target="_blank"
className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded"
>
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
<div className="2xl:size-[2.222vw] md:max-2xl:size-8 size-9 opacity-70">
<FacebookIcon />
</div>
</Link>
@@ -68,7 +68,7 @@ function Footer() {
target="_blank"
className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded"
>
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
<div className="2xl:size-[2.222vw] md:max-2xl:size-8 size-9 opacity-70">
<LinkedInIcon />
</div>
</Link>
@@ -77,7 +77,7 @@ function Footer() {
target="_blank"
className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded"
>
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
<div className="2xl:size-[2.222vw] md:max-2xl:size-8 size-9 opacity-70">
<TwitterIcon />
</div>
</Link>
@@ -87,19 +87,19 @@ function Footer() {
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1">
<Link
to={"/"}
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] opacity-70"
>
Map
</Link>
<Link
to={"/unit-types"}
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] opacity-70"
>
Unit Types
</Link>
<Link
to={"/about"}
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
className="md:text-btn-l text-btn-m flex-1 content-center md:my-4 my-[13px] opacity-70"
>
About IRTH
</Link>
@@ -108,7 +108,7 @@ function Footer() {
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start justify-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2">
<Link
to={"/favorites"}
className="md:text-btn-l text-btn-m content-center md:my-4 my-[13px] text-[#0D1922]/70 relative flex-1"
className="md:text-btn-l text-btn-m content-center md:my-4 my-[13px] opacity-70 relative flex-1"
>
Favorites
{!!favoriteUnits.length && (
@@ -119,7 +119,7 @@ function Footer() {
</Link>
<Link
to={"/search"}
className="md:text-btn-l text-btn-m content-center md:my-4 my-[13px] text-[#0D1922]/70 flex-1"
className="md:text-btn-l text-btn-m content-center md:my-4 my-[13px] opacity-70 flex-1"
>
Search
</Link>
@@ -128,7 +128,7 @@ function Footer() {
<div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
<button
className="md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
className="md:text-caption-m text-caption-s max-2xl:text-[#73787C] opacity-70"
onClick={() => setModal(<PrivacyPolicyModal />)}
>
Privacy Policy
src/components/Header.tsx
+18 -18
View File
@@ -36,7 +36,7 @@ function Header() {
return (
<>
<header className="sticky top-0 left-0 w-full h-14 md:max-2xl:h-16 2xl:h-[4.444vw] flex items-center justify-center bg-white ring ring-[#E2E2DC] z-2">
<header className="sticky top-0 left-0 w-full h-14 md:max-2xl:h-16 2xl:h-[4.444vw] flex items-center justify-center bg-white ring-[0.069vw] ring-[#E2E2DC] z-[2]">
<div className="flex 2xl:gap-[1.111vw] gap-4 flex-1">
<div
className="2xl:px-[2.222vw] 2xl:py-[1.111vw] md:max-2xl:px-6 max-md:px-4 py-4 cursor-pointer"
@@ -45,14 +45,14 @@ function Header() {
<img
src="/images/logo.svg"
alt="logo"
className="2xl:w-[5.972vw] w-22"
className="2xl:w-[5.972vw] w-[88px]"
/>
</div>
<div className="flex 2xl:gap-[0.278vw] gap-1 items-center max-md:hidden">
<span className="2xl:size-[1.389vw] size-5 text-[#0D1922]/40">
<span className="2xl:size-[1.389vw] size-5 opacity-40">
<LocationIcon />
</span>
<p className="text-s text-[#0D1922]/40">Dubai</p>
<p className="text-s opacity-40">Dubai</p>
</div>
</div>
<div className="max-2xl:order-2">
@@ -80,7 +80,7 @@ function Header() {
</span>
</Button>
</div>
<div className="flex justify-end flex-1">{/* <ProfileBar /> */}</div>
<div className="flex flex-1 justify-end">{/* <ProfileBar /> */}</div>
</header>
<AnimatePresence mode="wait">
{opened && (
@@ -91,11 +91,11 @@ function Header() {
animate={{ opacity: 1, y: "0%" }}
exit={{ opacity: 0, y: "-100%" }}
transition={{ duration: 0.3 }}
className="2xl:hidden fixed z-1 left-0 md:top-16 top-14 md:p-4 p-3 w-full md:rounded-b-2xl flex flex-col gap-10 bg-white overflow-y-auto max-h-[calc(100dvh-56px)] pointer-events-auto ring ring-[#E2E2DC]"
className="2xl:hidden fixed z-[1] left-0 md:top-16 top-14 md:p-4 p-3 w-full md:rounded-b-2xl flex flex-col gap-10 bg-white overflow-y-auto max-h-[calc(100dvh-56px)] pointer-events-auto ring-[0.069vw] ring-[#E2E2DC]"
>
<div className="space-y-4">
<p className="text-h3 font-medium">Projects</p>
<div className="flex gap-2 flex-wrap max-md:flex-col items-start">
<div className="max-md:flex-col flex flex-wrap gap-2 items-start">
{projects.map(({ img, title }, index) => {
const name = title
.split(" ")
@@ -108,13 +108,13 @@ function Header() {
key={index}
to={`/complex/${name}`}
className={clsx(
"p-1 pr-5 flex gap-2 items-center flex-nowrap ring rounded-[40px]",
"p-1 pr-5 flex gap-2 items-center flex-nowrap ring-[0.069vw] rounded-[40px] transition-[box-shadow,opacity,color]",
pathname.endsWith(name)
? "ring-[#00BED7] text-[#00BED7]"
: "ring-[#E2E2DC] text-[#0D1922]/70"
: "ring-[#E2E2DC] opacity-70"
)}
>
<img src={img} alt={title} className="w-10 h-10" />
<img src={img} alt={title} className="size-10" />
<span className="text-s">{title}</span>
</Link>
);
@@ -122,7 +122,7 @@ function Header() {
<Link
to="/"
className={clsx(
"px-5 py-3.5 content-center ring rounded-[40px] text-s text-[#0D1922]/70",
"px-5 py-3.5 content-center ring-[0.069vw] rounded-[40px] text-s opacity-70 transition-[box-shadow,color]",
pathname === "/"
? "ring-[#00BED7] text-[#00BED7]"
: "ring-[#E2E2DC]"
@@ -132,7 +132,7 @@ function Header() {
</Link>
</div>
</div>
<nav className="grid md:grid-cols-2 md:gap-4 gap-2">
<nav className="md:grid-cols-2 md:gap-4 grid gap-2">
<NavItem href={"/unit-types"} title={"Unit Types"} />
<NavItem href={"/about"} title={"About IRTH"} />
<NavItem href={"/favorites"} title={"Favorites"} />
@@ -140,11 +140,11 @@ function Header() {
</nav>
<hr className="border-[#E2E2DC]" />
<div className="space-y-6">
<p className="font-medium text-h3">Brochures</p>
<p className="text-h3 font-medium">Brochures</p>
<div className="p-[0.278vw] flex md:gap-[1.111vw] gap-6 justify-stretch items-stretch max-md:flex-col">
<div className="flex-1 space-y-4">
<p className="text-s font-medium">Rove Home Marasi Drive</p>
<div className="flex gap-2 flex-col">
<div className="flex flex-col gap-2">
<BrochureButton
title={"Main Brochure"}
link="/files/brochures/marasi-drive/Main Brochure.pdf"
@@ -169,7 +169,7 @@ function Header() {
</div>
<div className="flex-1 space-y-4">
<p className="text-s font-medium">Rove Home Downtown</p>
<div className="flex gap-2 flex-col">
<div className="flex flex-col gap-2">
<BrochureButton
title={"Main Brochure"}
link="/files/brochures/downtown/Main Brochure.pdf"
@@ -202,7 +202,7 @@ function Header() {
</div>
<div className="flex-1 space-y-4">
<p className="text-s font-medium">Rove Home Dubai Marina</p>
<div className="flex gap-2 flex-col">
<div className="flex flex-col gap-2">
<BrochureButton
title={"Main Brochure"}
link="/files/brochures/dubai-marina/Main Brochure.pdf"
@@ -235,8 +235,8 @@ function Header() {
</div>
</div>
</div>
<div className="pt-6 p-4 flex justify-between items-end bottom-0 left-0 w-full bg-white">
<p className="text-s text-[#0D1922]/40 w-fit">
<div className="flex bottom-0 left-0 justify-between items-end p-4 pt-6 w-full bg-white">
<p className="text-s w-fit opacity-40">
For more information, visit our
<br />
website:{" "}
src/components/Map.tsx
+2 -2
View File
@@ -553,7 +553,7 @@ function Map({ maxZoom = 1 }: MapProps) {
return (
<div
ref={containerRef}
className="touch-none relative h-full overflow-hidden select-none"
className="touch-none overflow-hidden relative h-full select-none"
style={{ cursor: isDragging ? "grabbing" : "grab" }}
onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd}
@@ -642,7 +642,7 @@ function Map({ maxZoom = 1 }: MapProps) {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute pointer-events-none left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 backdrop-blur-md bg-[#0D1922]/40 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[0.833vw] space-y-3 2xl:px-[1.667vw] 2xl:py-[1.111vw] px-6 py-4 text-white 2xl:max-w-[13.611vw] max-w-[196px] w-full"
className="absolute pointer-events-none left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 backdrop-blur-md bg-[#0D1922] bg-opacity-40 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[0.833vw] space-y-3 2xl:px-[1.667vw] 2xl:py-[1.111vw] px-6 py-4 text-white 2xl:max-w-[13.611vw] max-w-[196px] w-full"
>
<div className="flex items-center justify-center 2xl:gap-[1.111vw] gap-4">
<span className="2xl:size-[3.333vw] size-12">
src/components/Marker.tsx
+2 -2
View File
@@ -30,10 +30,10 @@ function Marker({
id="marker"
key={marker.id}
className={clsx(
"absolute -translate-x-1/2 -translate-y-1/2 cursor-pointer will-change-[transform,filter,scale,translate] transition-[transform,filter,scale,translate] select-none duration-300 max-sm:scale-70 scale-80",
"absolute -translate-x-1/2 -translate-y-1/2 cursor-pointer will-change-[transform,filter,scale,translate] transition-[transform,filter,scale,translate] select-none duration-300 max-sm:[scale:70%] [scale:80%]",
hoveredMarker
? hoveredMarker.id === marker.id
? "max-sm:scale-80 scale-90"
? "max-sm:[scale:80%] [scale:90%]"
: "brightness-[80%]"
: "",
lastHoveredMarker?.id === marker.id ? "z-10" : ""
src/components/PopupContainer.tsx
+5 -6
View File
@@ -60,15 +60,14 @@ function PopupContainer() {
{popup}
<div
className={clsx(
"max-md:hidden absolute 2xl:border-[0.556vw_0px_0.486vw_0.556vw] border-[8px_0px_7px_8px] [border-color:_transparent_transparent_transparent_#fff]",
side === "left" &&
"top-1/2 -translate-y-1/2 left-full -translate-x-px",
"max-md:hidden absolute 2xl:border-[0.556vw_0px_0.486vw_0.556vw] [border-width:8px_0px_7px_8px] [border-color:_transparent_transparent_transparent_#fff]",
side === "left" && "top-1/2 [y:-50%] left-full [x:1px]",
side === "right" &&
"top-1/2 -translate-y-1/2 right-full translate-x-px rotate-180",
"top-1/2 [y:-50%] right-full [x:1px] [rotate:180deg]",
side === "top" &&
"left-1/2 translate-x-full top-full -translate-y-px rotate-90 origin-top-left",
"left-1/2 [x:100%] top-full [y:1px] [rotate:90deg] origin-top-left",
side === "bottom" &&
"left-1/2 translate-x-full bottom-full translate-y-px -rotate-90 origin-bottom-left"
"left-1/2 [x:100%] bottom-full [y:1px] [rotate:-90deg] origin-bottom-left"
)}
/>
</motion.div>
src/components/ProjectSelect.tsx
+6 -6
View File
@@ -29,8 +29,8 @@ function ProjectSelect<T extends boolean = false>({
{withAll && (
<div
className={clsx(
"2xl:rounded-[2.778vw] rounded-[40px] 2xl:py-[0.972vw] 2xl:px-[1.389vw] md:max-2xl:px-5 md:max-2xl:py-3.5 text-s 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer",
!selectedProject ? "ring-[#00BED7]" : "ring-[#E2E2DC]"
"2xl:rounded-[2.778vw] rounded-[40px] 2xl:py-[0.972vw] 2xl:px-[1.389vw] md:max-2xl:px-5 md:max-2xl:py-3.5 text-s 2xl:ring-[0.069vw] ring transition-[box-shadow,opacity] cursor-pointer",
!selectedProject ? "ring-[#00BED7]" : "ring-[#E2E2DC] opacity-70"
)}
onClick={() => setSelectedProject(null)}
>
@@ -55,10 +55,10 @@ function ProjectSelect<T extends boolean = false>({
/>
<p
className={clsx(
"2xl:mr-[1.111vw] mr-6",
selectedProject &&
selectedProject.title !== project.title &&
"text-[#0D1922]/70"
"2xl:mr-[1.111vw] mr-6 transition-opacity",
((selectedProject && selectedProject.title !== project.title) ||
!selectedProject) &&
"opacity-70"
)}
>
{project.title}
src/components/SelectedComplexCard.tsx
+3 -3
View File
@@ -59,7 +59,7 @@ function SelectedComplexCard({
{marker.numberOfUnits} Apartments
</p>
</div>
<div className="rounded px-2 py-0.5 flex items-center justify-center gap-1 bg-[#30B216]/8">
<div className="rounded px-2 py-0.5 flex items-center justify-center gap-1 bg-[#30B216] bg-opacity-[8%]">
<span className="text-[#30B216] size-3">
<HumanIcon />
</span>
@@ -70,11 +70,11 @@ function SelectedComplexCard({
<hr className="border-[#E2E2DC] h-px" />
<div className="space-y-2">
{unitTypes?.map((unitType) => (
<div key={unitType} className="flex items-center gap-2">
<div key={unitType} className="flex gap-2 items-center">
<div className="rounded-full flex justify-center items-center size-4 bg-[#00BED7] text-white text-caption-s font-mono">
4
</div>
<p className="opacity-70 text-caption-m">
<p className="text-caption-m opacity-70">
{formattedUnitTypes.get(unitType)}
</p>
</div>
src/components/SequenceSlider.tsx
+10 -10
View File
@@ -92,19 +92,19 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
handlers.ref(el);
rootRef.current = el;
}}
className="relative h-full overflow-hidden"
className="overflow-hidden relative h-full"
>
<AnimatePresence>
{imageLoaded < FRAME_COUNT && (
<motion.div
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-white z-1"
className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-white z-[1]"
>
<img
src={`/images/loader.png`}
alt=""
className="w-16 h-16 animate-spin"
className="size-16 animate-spin"
/>
<p className="text-[#00BED7] text-m">
{Math.round((imageLoaded / FRAME_COUNT) * 100)}%
@@ -120,7 +120,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
window.innerWidth < 768 ? "mobile" : "desktop"
}/${index}.jpg`}
alt=""
className="absolute object-cover w-full h-full pointer-events-none"
className="object-cover absolute w-full h-full pointer-events-none"
style={{
opacity: index === currentIndex ? 1 : 0,
}}
@@ -142,7 +142,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
muted
loop
playsInline
className="absolute object-cover w-full h-full"
className="object-cover absolute w-full h-full"
onLoad={handleLoadVideo}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
@@ -160,7 +160,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 4096 1752"
className="absolute top-0 left-0 max-2xl:hidden w-full h-full"
className="max-2xl:hidden absolute top-0 left-0 w-full h-full"
preserveAspectRatio="xMidYMid slice"
>
<path
@@ -208,7 +208,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
<Button
onlyIcon
variant="secondary"
className="absolute top-1/2 -translate-y-1/2 2xl:left-[31.111vw] md:max-2xl:left-[8.854vw] left-4 !bg-[#0D1922]/40 backdrop-blur-md"
className="absolute top-1/2 -translate-y-1/2 2xl:left-[31.111vw] md:max-2xl:left-[8.854vw] left-4 !bg-[#0D1922] !bg-opacity-40 backdrop-blur-md"
roundedFull
disabled={isAnimating || !isShowVideo}
onClick={() => handleSwipe("prev")}
@@ -220,7 +220,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
<Button
onlyIcon
variant="secondary"
className="absolute top-1/2 -translate-y-1/2 2xl:right-[31.111vw] md:max-2xl:right-[8.854vw] right-4 !bg-[#0D1922]/40 backdrop-blur-md"
className="absolute top-1/2 -translate-y-1/2 2xl:right-[31.111vw] md:max-2xl:right-[8.854vw] right-4 !bg-[#0D1922] !bg-opacity-40 backdrop-blur-md"
roundedFull
disabled={isAnimating || !isShowVideo}
onClick={() => handleSwipe("next")}
@@ -232,14 +232,14 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
<Compass
imgStyle={{
transform: `rotate(${
currentIndex*3 + (complexName === "dubai-marina" ? 90 : 0)
currentIndex * 3 + (complexName === "dubai-marina" ? 90 : 0)
}deg)`,
}}
/>
<Button
variant="cta"
size={innerWidth < 768 ? "medium" : "small"}
className="absolute left-1/2 -translate-x-1/2 md:bottom-6 bottom-4 2xl:hidden w"
className="md:bottom-6 2xl:hidden absolute bottom-4 left-1/2 -translate-x-1/2"
onClick={() => navigate("floors")}
>
Select a floor
src/components/Slider.tsx
+5 -5
View File
@@ -50,7 +50,7 @@ function Slider({
<AnimatePresence custom={direction} initial={false}>
<motion.div
key={currentSlide}
className="absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-1"
className="absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-[1]"
style={{
backgroundImage: `url(${dubaiMarinaSlider[categoryName][currentSlide].image})`,
}}
@@ -63,12 +63,12 @@ function Slider({
}}
/>
</AnimatePresence>
<div className="relative z-1 w-full h-full flex flex-col justify-between p-6">
<div className="z-[1] flex relative flex-col justify-between p-6 w-full h-full">
<div className="flex flex-col gap-4">
<AnimatePresence mode="wait">
<motion.h3
key={`title-${currentSlide}`}
className="text-h3 text-white max-md:text-h5"
className="text-h3 max-md:text-h5 text-white"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -96,7 +96,7 @@ function Slider({
onlyIcon
onClick={handlePreviousSlide}
disabled={currentSlide === 0}
className="disabled:!text-[#0D1922]/40 disabled:!bg-[#fff]/80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
className="disabled:!text-opacity-40 disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
>
<span className="size-5">
<ArrowLeftIcon />
@@ -112,7 +112,7 @@ function Slider({
disabled={
currentSlide === dubaiMarinaSlider[categoryName].length - 1
}
className="disabled:!text-[#0D1922]/40 disabled:!bg-[#fff]/80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
className="disabled:!text-opacity-40 disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
>
<span className="size-5">
<ArrowRightIcon />
src/components/UnitPopup.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ function UnitPopup({
<div className="2xl:size-[0.278vw] size-1 rounded-full bg-[#E2E2DC]" />
<p className="text-caption-s opacity-70">{unitNumber}</p>
</div>
<div className="2xl:p-[0.208vw] p-[3px] 2xl:rounded-[0.278vw] rounded bg-[#30B216]/8 flex 2xl:gap-[0.278vw] gap-1 w-fit">
<div className="2xl:p-[0.208vw] p-[3px] 2xl:rounded-[0.278vw] rounded bg-[#30B216] bg-opacity-[8%] flex 2xl:gap-[0.278vw] gap-1 w-fit">
<span className="2xl:size-[0.833vw] size-3 text-[#30B216]">
<HumanIcon />
</span>
src/components/UnitSlider.tsx
+5 -5
View File
@@ -85,7 +85,7 @@ function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) {
exit={{
opacity: 0,
}}
className="shrink-0 w-full 2xl:p-[2.222vw] p-6"
className="w-full 2xl:p-[2.222vw] p-6 [flex-shrink:0]"
>
<UnitTypeImageWithMarkers
complexName={complexName}
@@ -124,7 +124,7 @@ function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) {
exit={{
opacity: 0,
}}
className="shrink-0 w-full 2xl:p-[2.222vw] p-6"
className="w-full 2xl:p-[2.222vw] p-6 [flex-shrink:0]"
>
<UnitTypeImageWithMarkers
complexName={complexName}
@@ -165,7 +165,7 @@ function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) {
exit={{
opacity: 0,
}}
className="shrink-0 w-full 2xl:p-[2.222vw] p-6"
className="w-full 2xl:p-[2.222vw] p-6 [flex-shrink:0]"
>
<UnitTypeImageWithMarkers
complexName={complexName}
@@ -189,7 +189,7 @@ function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) {
</motion.div>
</AnimatePresence>
)}
<div className="w-full shrink-0">
<div className="w-full [flex-shrink:0]">
<img
src={`/images/interiors/${complexName}/${
complexName === "marasi-drive"
@@ -206,7 +206,7 @@ function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) {
/>
</div>
{unit && !unit.unitNo.endsWith("-C") && (
<div className="w-full h-full shrink-0 2xl:p-[2.222vw] p-6">
<div className="w-full h-full [flex-shrink:0] 2xl:p-[2.222vw] p-6">
<svg className="aspect-video">
<OnFloorMask unit={unit} />
</svg>
src/components/UnitTypeCard.tsx
+4 -4
View File
@@ -7,18 +7,18 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
<Link
target="_blank"
to={`/unit-types/${project.slug}/${type.slug}`}
className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw] hover:-translate-y-2 transition-[translate,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw] hover:-translate-y-2 transition-[transform,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
>
<div className="space-y-1 2xl:space-y-[0.278vw]">
<p className="text-s text-[#00BED7]">{project.title}</p>
<div className="flex items-center gap-2 2xl:gap-[0.556vw]">
{type.wing && (
<>
<p className="text-caption-m text-[#0D1922]/70">{type.wing}</p>
<p className="text-caption-m opacity-70">{type.wing}</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
</>
)}
<p className="text-caption-m text-[#0D1922]/70">{type.floors}</p>
<p className="text-caption-m opacity-70">{type.floors}</p>
</div>
</div>
<div className="2xl:p-[1.111vw] 2xl:rounded-[0.556vw]">
@@ -31,7 +31,7 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
/>
</div>
<div className="space-y-1 2xl:space-y-[0.278vw]">
<p className="text-s text-[#0D1922]/70">{type.area}</p>
<p className="text-s opacity-70">{type.area}</p>
<p className="text-h4 font-medium">{type.name}</p>
</div>
</Link>
src/components/UnitTypeItem.tsx
+6 -22
View File
@@ -30,10 +30,10 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
<UnitSlider unitTypeVariant={type.slug} complexName={project.slug} />
<div className="flex flex-col justify-between 2xl:w-[21.944vw] flex-shrink-0">
<div className="2xl:space-y-[1.667vw] space-y-6">
<div className="flex items-start justify-between">
<div className="flex justify-between items-start">
<div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
<p className="font-medium md:text-h3 text-h4">{type.name}</p>
<p className="2xl:rounded-[1.667vw] rounded-3xl 2xl:px-[0.833vw] 2xl:py-[0.278vw] px-3 py-1 outline outline-[#E2E2DC] text-[#0D1922]/70 text-caption-m w-fit">
<p className="md:text-h3 text-h4 font-medium">{type.name}</p>
<p className="2xl:rounded-[1.667vw] rounded-3xl 2xl:px-[0.833vw] 2xl:py-[0.278vw] px-3 py-1 ring-[0.069vw] ring-[#E2E2DC] opacity-70 text-caption-m w-fit">
Up to {type.area}
</p>
</div>
@@ -48,11 +48,11 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
<div className="flex items-center 2xl:gap-[0.556vw]">
{type.wing && (
<>
<p className="text-s text-[#0D1922]/70">{type.wing}</p>
<p className="text-s opacity-70">{type.wing}</p>
<div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
</>
)}
<p className="text-s text-[#0D1922]/70">{type.floors}</p>
<p className="text-s opacity-70">{type.floors}</p>
</div>
</div>
<hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
@@ -69,7 +69,7 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
<VideoModal src="/videos/unit-types/marasi-drive/studio_flex.mp4" />
)
}
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring ring-[#E2E2DC] cursor-pointer w-full"
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring-[0.069vw] ring-[#E2E2DC] cursor-pointer w-full"
>
<div className="lg:space-y-[0.278vw] space-y-1 flex-1">
<p className="text-h5 font-medium">ORI Cloud Bed</p>
@@ -82,22 +82,6 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
</div>
</button>
)}
{/* {type.video && (
<div className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.833vw] rounded-xl outline outline-[#E2E2DC] flex 2xl:gap-[0.556vw] justify-between">
<div className="2xl:space-y-[0.278vw] space-y-1">
<p className="text-h5 font-medium">ORI Cloud Bed</p>
<p className="text-s text-[#00BED7]">
Live in the future, today
</p>
</div>
<Button variant="secondary" onlyIcon>
<span className="2xl:size-[1.389vw] size-5 text-[#0D1922]">
<PlayIcon />
</span>
</Button>
</div>
)} */}
<div className="2xl:space-y-[0.556vw] md:max-2xl:flex md:max-2xl:gap-2 max-md:space-y-2">
<p className="text-caption-m">{type.desc[0]}</p>
<p className="text-caption-m">{type.desc[1]}</p>
src/components/UnitTypesSelect.tsx
+2 -2
View File
@@ -32,10 +32,10 @@ function UnitTypesSelect({
)
}
className={clsx(
"2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer text-s",
"2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] cursor-pointer text-s",
selectedUnitTypes.includes(unitType)
? "ring-[#00BED7]"
: "ring-[#E2E2DC] text-[#0D1922]/70"
: "ring-[#E2E2DC] text-opacity-70"
)}
>
{formattedUnitTypes.get(unitType)}
src/components/WeatherWidget.tsx
+2 -2
View File
@@ -17,13 +17,13 @@ export default function WeatherWidget({
const dayPart = format(dubaiDate, "a");
return (
<div className="absolute left-[2.222vw] top-[2.222vw] rounded-2xl space-y-4 min-w-50 w-[8.333vw] p-4 font-medium text-white bg-black/40 pointer-events-none max-[1440px]:hidden backdrop-blur-2xl">
<div className="absolute left-[2.222vw] top-[2.222vw] rounded-2xl space-y-4 min-w-[200px] w-[8.333vw] p-4 font-medium text-white bg-black bg-opacity-40 pointer-events-none max-[1440px]:hidden backdrop-blur-2xl">
<div>
<div className="flex justify-between">
<p>{day}</p>
<p>{time}</p>
</div>
<div className="opacity-60 flex justify-between">
<div className="flex justify-between opacity-60">
<p>
{date} {month}
</p>
src/components/modals/PrivacyPolicyModal.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
function PrivacyPolicyModal() {
return (
<div className="2xl:rounded-[1.111vw] bg-white md:rounded-2xl 2xl:p-[1.667vw] 2xl:w-[38.889vw] md:max-2xl:w-140 p-6 flex flex-col 2xl:gap-[1.667vw] gap-6">
<h3 className="2xl:text-h3 text-h4 font-medium max-w-[32.222vw] max-md:max-w-70">
<div className="2xl:rounded-[1.111vw] bg-white md:rounded-2xl 2xl:p-[1.667vw] 2xl:w-[38.889vw] md:max-2xl:w-[560px] p-6 flex flex-col 2xl:gap-[1.667vw] gap-6">
<h3 className="2xl:text-h3 text-h4 font-medium max-w-[32.222vw] max-md:max-w-[280px]">
Privacy Policy for IRTH Group and its companies:
</h3>
<hr className="border-[#E2E2DC]" />
@@ -15,7 +15,7 @@ function PrivacyPolicyModal() {
<div className="space-y-2">
<p className="text-caption-m">Information We Collect:</p>
<ul className="text-caption-s list-disc ml-5">
<ul className="text-caption-s ml-5 list-disc">
<li>
Personal Information: We may collect personal information such as
your name, contact details, and address when you voluntarily
@@ -34,7 +34,7 @@ function PrivacyPolicyModal() {
<div className="space-y-2">
<p className="text-caption-m">How We Use Your Information:</p>
<ul className="text-caption-s list-disc ml-5">
<ul className="text-caption-s ml-5 list-disc">
<li>
To Provide Services:We use your personal information to deliver
the services you request, such as facilitating property
src/components/ui/Badge.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ function Badge({ variant, text, className }: BadgeProps) {
className={clsx(
"2xl:rounded-[0.278vw] rounded-lg 2xl:px-[0.556vw] 2xl:py-[0.139vw] px-2 py-1 w-fit",
variant === "primary" && "bg-[#00BED7] text-white",
variant === "secondary" && "bg-[#F3F3F2] text-[#0D1922]/70",
variant === "secondary" && "bg-[#F3F3F2] text-opacity-70",
className
)}
>
src/components/ui/BrochureButton.tsx
+2 -4
View File
@@ -25,10 +25,8 @@ export default function BrochureButton({
className="w-full !justify-between group"
onClick={handleDownload}
>
<span className="text-nowrap text-caption-m group-hover:text-[#0D1922] transition-colors duration-300">
{title}
</span>
<span className="2xl:size-[1.389vw] size-5 text-[#0D1922]/70 group-hover:text-[#0D1922] transition-colors duration-300">
<span className="text-nowrap text-caption-m duration-300">{title}</span>
<span className="2xl:size-[1.389vw] size-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
<DownloadIcon />
</span>
</Button>
src/components/ui/Button.tsx
+5 -5
View File
@@ -26,7 +26,7 @@ function Button({
ref={ref}
{...props}
className={clsx(
"transition-all flex items-center justify-center disabled:text-[#0D1922]/40 disabled:bg-[#0D1922]/8 disabled:!cursor-default select-none text-btn-s",
"transition-all flex items-center justify-center disabled:text-opacity-40 disabled:bg-[#0D1922] disabled:bg-opacity-[8%] disabled:!cursor-default select-none text-btn-s",
variant !== "link" && [
size === "large" &&
(onlyIcon
@@ -43,13 +43,13 @@ function Button({
],
variant === "link" && "text-sm text-black/50 w-fit",
variant === "cta" &&
"bg-[#00BED7] hover:!bg-[#0AB3C9] text-white disabled:!bg-[#0D1922]/8 disabled:!text-[#0D1922]/40",
"bg-[#00BED7] hover:!bg-[#0AB3C9] text-white disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-opacity-40",
variant === "primary" &&
"bg-[#F3F3F2] hover:!bg-[#E2E2DC] disabled:!bg-[#0D1922]/8 disabled:!text-[#0D1922]/40",
"bg-[#F3F3F2] hover:!bg-[#E2E2DC] disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-opacity-40",
variant === "secondary" &&
"bg-white hover:!bg-white/80 text-[#0D1922]/70 disabled:!bg-[#0D1922]/8 disabled:!text-[#0D1922]/40",
"bg-white hover:!bg-white hover:bg-opacity-80 text-opacity-70 disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-opacity-40",
variant === "tertiary" &&
"text-xs leading-[135%] text-[#0D1922]/70 !px-0 hover:!text-[#0D1922] disabled:!bg-transparent",
"text-xs leading-[135%] text-opacity-70 !px-0 hover:!text-opacity-100 disabled:!bg-transparent",
roundedFull ? "rounded-full" : "2xl:rounded-[0.833vw] rounded-xl",
className
)}
src/components/ui/MultiRangeSlider.tsx
+2 -2
View File
@@ -99,10 +99,10 @@ function MultiRangeSlider({
<div className="2xl:space-y-[0.556vw] space-y-2">
<p className="text-s text-[#0D1922]/70">{label}</p>
<div className="bg-white/80 2xl:rounded-[0.833vw] rounded-xl relative 2xl:px-[1.111vw] 2xl:py-[0.972vw] px-4 py-3.5 flex justify-between 2xl:ring-[0.069vw] ring-1 ring-[#E2E2DC]">
<p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
<p className={clsx("text-s", disabled && "text-opacity-40")}>
{Intl.NumberFormat("en").format(Math.ceil(value[0]))}
</p>
<p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
<p className={clsx("text-s", disabled && "text-opacity-40")}>
{Intl.NumberFormat("en").format(Math.ceil(value[1]))}
</p>
<div className="absolute bottom-0 left-0 w-full 2xl:px-[1.111vw] px-4 translate-y-1/2">
src/index.css
+49 -45
View File
@@ -1,6 +1,8 @@
@import url("/fonts/Usual/stylesheet.css");
@import url("/fonts/Mixcase/stylesheet.css");
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
@theme {
--breakpoint-2xl: 1440px;
@@ -17,62 +19,64 @@ button {
outline: none;
}
@utility text-h1 {
@apply 2xl:text-[3.889vw] md:max-2xl:text-[56px] text-[28px] leading-none;
}
@layer utilities {
.text-h1 {
@apply 2xl:text-[3.889vw] md:max-2xl:text-[56px] text-[28px] leading-none;
}
@utility text-h15 {
@apply 2xl:text-[2.778vw] text-[40px] leading-[135%];
}
.text-h15 {
@apply 2xl:text-[2.778vw] text-[40px] leading-[135%];
}
@utility text-h2 {
@apply 2xl:text-[2.222vw] text-[32px] leading-[125%];
}
.text-h2 {
@apply 2xl:text-[2.222vw] text-[32px] leading-[125%];
}
@utility text-h3 {
@apply 2xl:text-[1.667vw] text-[24px] leading-[135%];
}
.text-h3 {
@apply 2xl:text-[1.667vw] text-[24px] leading-[135%];
}
@utility text-h4 {
@apply 2xl:text-[1.389vw] text-[20px] leading-[120%];
}
.text-h4 {
@apply 2xl:text-[1.389vw] text-[20px] leading-[120%];
}
@utility text-h5 {
@apply 2xl:text-[0.972vw] text-sm leading-[125%];
}
.text-h5 {
@apply 2xl:text-[0.972vw] text-sm leading-[125%];
}
@utility text-l {
@apply 2xl:text-[1.389vw] text-[20px] leading-[135%];
}
.text-l {
@apply 2xl:text-[1.389vw] text-[20px] leading-[135%];
}
@utility text-m {
@apply 2xl:text-[1.111vw] leading-[125%];
}
.text-m {
@apply 2xl:text-[1.111vw] leading-[125%];
}
@utility text-s {
@apply 2xl:text-[0.972vw] text-sm leading-[140%];
}
.text-s {
@apply 2xl:text-[0.972vw] text-sm leading-[140%];
}
@utility text-btn-l {
@apply 2xl:text-[1.111vw] leading-none;
}
.text-btn-l {
@apply 2xl:text-[1.111vw] leading-none;
}
@utility text-btn-m {
@apply 2xl:text-[0.972vw] text-sm leading-none;
}
.text-btn-m {
@apply 2xl:text-[0.972vw] text-sm leading-none;
}
@utility text-btn-s {
@apply 2xl:text-[0.833vw] text-xs leading-none;
}
.text-btn-s {
@apply 2xl:text-[0.833vw] text-xs leading-none;
}
@utility text-caption-m {
@apply 2xl:text-[0.833vw] text-xs leading-[135%];
}
.text-caption-m {
@apply 2xl:text-[0.833vw] text-xs leading-[135%];
}
@utility text-caption-s {
@apply 2xl:text-[0.694vw] text-[10px] leading-[135%];
}
.text-caption-s {
@apply 2xl:text-[0.694vw] text-[10px] leading-[135%];
}
@utility font-mixcase-unmixed {
font-family: "Mixcase Unmixed", sans-serif;
.font-mixcase-unmixed {
font-family: "Mixcase Unmixed", sans-serif;
}
}
src/pages/AboutIRTHPage.tsx
+4 -4
View File
@@ -27,7 +27,7 @@ function AboutIRTHPage() {
return (
<div className="2xl:px-[2.222vw] md:max-2xl:px-[3.125vw] px-4">
<div className="2xl:pt-[4.444vw] md:max-2xl:pt-[clamp(56px,7.292vw,64px)] pt-[clamp(40px,11.111vw,56px))] 2xl:pb-[2.222vw] md:max-2xl:pb-4 pb-4a 2xl:space-y-[5.556vw] md:max-2xl:space-y-[clamp(40px,5.208vw,80px)] space-y-10">
<div className="2xl:pt-[4.444vw] md:max-2xl:pt-[clamp(56px,7.292vw,64px)] pt-[clamp(40px,11.111vw,56px))] 2xl:pb-[2.222vw] md:max-2xl:pb-4 2xl:space-y-[5.556vw] md:max-2xl:space-y-[clamp(40px,5.208vw,80px)] space-y-10">
<div className="flex justify-between items-center">
<h1 className="2xl:max-w-[42.083vw] font-mixcase-unmixed tracking-[-0.07em] 2xl:text-[5vw] md:max-2xl:text-[clamp(56px,3.125vw,72px)] text-[clamp(40px,11.111vw,56px)] leading-none">
Welcome to IRTH
@@ -104,7 +104,7 @@ function AboutIRTHPage() {
<div className="2xl:space-y-[1.667vw] space-y-6">
<div className="flex 2xl:gap-[1.111vw] md:max-2xl:gap-[clamp(8px,1.042vw,16px)] gap-2 max-2xl:flex-col">
<div className="2xl:p-[2.222vw] md:max-2xl:p-[clamp(24px,3.125vw,32px)] p-6 2xl:space-y-[2.222vw] md:max-2xl:flex bg-[#F3F3F2] 2xl:rounded-[1.667vw] rounded-2xl flex-1 max-md:space-y-6">
<h3 className="2xl:text-h2 md:max-2xl:text-h3 text-h4 font-medium max-2xl:flex-1">
<h3 className="2xl:text-h2 md:max-2xl:text-h3 text-h4 max-2xl:flex-1 font-medium">
Trust
</h3>
<div className="2xl:space-y-[0.833vw] md:max-2xl:space-y-3 space-y-[clamp(8px,2.222vw,12px)] md:max-2xl:max-w-[54.688vw] opacity-70">
@@ -122,7 +122,7 @@ function AboutIRTHPage() {
</div>
</div>
<div className="2xl:p-[2.222vw] md:max-2xl:p-[clamp(24px,3.125vw,32px)] p-6 2xl:space-y-[2.222vw] md:max-2xl:flex bg-[#F3F3F2] 2xl:rounded-[1.667vw] rounded-2xl flex-1 max-md:space-y-6">
<h3 className="2xl:text-h2 md:max-2xl:text-h3 text-h4 font-medium max-2xl:flex-1">
<h3 className="2xl:text-h2 md:max-2xl:text-h3 text-h4 max-2xl:flex-1 font-medium">
Strength
</h3>
<div className="2xl:space-y-[0.833vw] md:max-2xl:space-y-3 space-y-[clamp(8px,2.222vw,12px)] md:max-2xl:max-w-[54.688vw] opacity-70">
@@ -139,7 +139,7 @@ function AboutIRTHPage() {
</div>
</div>
<div className="2xl:p-[2.222vw] md:max-2xl:p-[clamp(24px,3.125vw,32px)] p-6 2xl:space-y-[2.222vw] md:max-2xl:flex bg-[#F3F3F2] 2xl:rounded-[1.667vw] rounded-2xl flex-1 max-md:space-y-6">
<h3 className="2xl:text-h2 md:max-2xl:text-h3 text-h4 font-medium max-2xl:flex-1">
<h3 className="2xl:text-h2 md:max-2xl:text-h3 text-h4 max-2xl:flex-1 font-medium">
Agility
</h3>
<div className="2xl:space-y-[0.833vw] md:max-2xl:space-y-3 space-y-[clamp(8px,2.222vw,12px)] md:max-2xl:max-w-[54.688vw] opacity-70">
src/pages/SearchPage.tsx
+11 -7
View File
@@ -291,23 +291,27 @@ function SearchPage() {
<AnimatePresence>
{showButtons && (
<motion.div
initial={{opacity:0}}
animate={{opacity:1}}
exit={{opacity:0}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className={clsx(
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all z-2",
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all z-[2]",
footerReached && !hasNextPage
? "top-[calc(100dvh-17.222vw)] translate-y-0"
: "top-[calc(100dvh-2.222vw)] -translate-y-full"
)}
>
<Button variant="cta" onClick={() => setFiltersInModal(true)} className="relative">
<Button
variant="cta"
onClick={() => setFiltersInModal(true)}
className="relative"
>
<span className="2xl:size-[1.111vw] size-4 text-white">
<FiltersIcon />
</span>
<span className="text-caption-m">Filters</span>
{!!activeFiltersCount && (
<div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 h-4 text-caption-s bg-white text-[#00BED7] flex justify-center items-center font-mono ring ring-[#E2E2DC]">
<div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 h-4 text-caption-s bg-white text-[#00BED7] flex justify-center items-center font-mono ring-[0.069vw] ring-[#E2E2DC]">
{activeFiltersCount}
</div>
)}
@@ -319,7 +323,7 @@ function SearchPage() {
window.location.href = "/search";
}}
>
<span className="2xl:size-[1.111vw] size-4 text-[#0D1922]/70">
<span className="2xl:size-[1.111vw] size-4 text-opacity-70">
<RestartIcon />
</span>
<span className="text-caption-m">Reset</span>
src/pages/UnitPage.tsx
+1 -1
View File
@@ -163,7 +163,7 @@ function UnitPage() {
<VideoModal src="/videos/unit-types/marasi-drive/studio_flex.mp4" />
)
}
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring ring-[#E2E2DC] cursor-pointer w-full"
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring-[0.069vw] ring-[#E2E2DC] cursor-pointer w-full"
>
<div className="lg:space-y-[0.278vw] space-y-1 flex-1">
<p className="text-h5 font-medium">ORI Cloud Bed</p>
src/pages/UnitTypeItemPage.tsx
-4
View File
@@ -19,10 +19,6 @@ function UnitTypeItemPage() {
setUnitType(unitType);
}, [unitTypeSlug]);
useEffect(() => {
console.log(unitType);
}, [unitType]);
if (unitType) {
return (
<div>