about irth completed
This commit is contained in:
@@ -6,11 +6,14 @@ import Button from "./ui/Button";
|
||||
import "react-loading-skeleton/dist/skeleton.css";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
import { formattedUnitTypes } from "../data/formattedUnitTypes";
|
||||
import { Link } from "react-router";
|
||||
import { complexNamesSlugs } from "../data/complexNamesSlugs";
|
||||
|
||||
function UnitCard({ unit }: { unit: IUnit }) {
|
||||
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
|
||||
|
||||
function handleFavorite() {
|
||||
function handleFavorite(e: React.MouseEvent<HTMLButtonElement>) {
|
||||
e.preventDefault();
|
||||
if (favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
|
||||
setFavoriteUnits(
|
||||
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
|
||||
@@ -21,7 +24,12 @@ function UnitCard({ unit }: { unit: IUnit }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl flex flex-col justify-between 2xl:gap-[1.111vw] gap-4 bg-white 2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]">
|
||||
<Link
|
||||
to={`/complex/${
|
||||
complexNamesSlugs[unit.project as keyof typeof complexNamesSlugs]
|
||||
}/${unit.unitNo}`}
|
||||
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl flex flex-col justify-between 2xl:gap-[1.111vw] gap-4 bg-white 2xl:aspect-[332/396] md:max-2xl:aspect-[352/396] aspect-[328/396]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="2xl:space-y-[0.278vw] space-y-1">
|
||||
<p className="text-s text-[#00BED7]">
|
||||
@@ -67,7 +75,7 @@ function UnitCard({ unit }: { unit: IUnit }) {
|
||||
}).format(unit.salesPrice)}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
function FilledPlayIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 48 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M48 28 0 55.713V.287z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default FilledPlayIcon;
|
||||
@@ -0,0 +1,10 @@
|
||||
function PauseIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x={5} y={3} width={5} height={18} rx={1} fill="currentColor" />
|
||||
<rect x={14} y={3} width={5} height={18} rx={1} fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default PauseIcon;
|
||||
@@ -3,7 +3,7 @@ function PlayIcon() {
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M15.685 9.785a.25.25 0 0 1 .053.387l-.053.043-9.556 5.733a.25.25 0 0 1-.379-.215V4.267a.25.25 0 0 1 .314-.243l.065.028z"
|
||||
stroke="#0D1922"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.5}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export const complexNamesSlugs = {
|
||||
"Rove Home Dubai Marina": "dubai-marina",
|
||||
"Rove Home Marasi Drive": "marasi-drive",
|
||||
};
|
||||
+7
-2
@@ -8,7 +8,7 @@ import ModalContainer from "./components/ModalContainer.tsx";
|
||||
import ComplexPage from "./pages/ComplexPage.tsx";
|
||||
import FloorsPage from "./pages/FloorsPage.tsx";
|
||||
import UnitTypesPage from "./pages/UnitTypesPage.tsx";
|
||||
import AboutPage from "./pages/AboutPages.tsx";
|
||||
import AboutIRTHPage from "./pages/AboutIRTHPage.tsx";
|
||||
import FavoritesPage from "./pages/FavouritesPage.tsx";
|
||||
import SearchPage from "./pages/SearchPage.tsx";
|
||||
import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
|
||||
@@ -16,6 +16,7 @@ import { queryClient } from "./lib/queryClient.ts";
|
||||
import AboutComplexPage from "./pages/AboutComplexPage.tsx";
|
||||
import UnitTypeItemPage from "./pages/UnitTypeItemPage.tsx";
|
||||
import TestPage from "./pages/TestPage.tsx";
|
||||
import UnitPage from "./pages/UnitPage.tsx";
|
||||
|
||||
const route = createBrowserRouter([
|
||||
{
|
||||
@@ -31,7 +32,7 @@ const route = createBrowserRouter([
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
element: <AboutPage />,
|
||||
element: <AboutIRTHPage />,
|
||||
},
|
||||
{
|
||||
path: "/favorites",
|
||||
@@ -62,6 +63,10 @@ const route = createBrowserRouter([
|
||||
path: "/complex/:complexName/floors",
|
||||
element: <FloorsPage />,
|
||||
},
|
||||
{
|
||||
path: "/complex/:complexName/:unitNumber",
|
||||
element: <UnitPage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import PauseIcon from "../components/icons/PauseIcon";
|
||||
import FilledPlayIcon from "../components/icons/FilledPlayIcon";
|
||||
import clsx from "clsx";
|
||||
|
||||
function AboutIRTHPage() {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (videoRef.current) {
|
||||
const video = videoRef.current;
|
||||
video.addEventListener("play", () => {
|
||||
setIsPlaying(true);
|
||||
});
|
||||
video.addEventListener("pause", () => {
|
||||
setIsPlaying(false);
|
||||
});
|
||||
return () => {
|
||||
video.removeEventListener("play", () => {});
|
||||
video.removeEventListener("pause", () => {});
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
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="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
|
||||
<br />
|
||||
<span className="text-[#00BED7]">- a name etched in legacy</span>
|
||||
</h1>
|
||||
<div className="space-y-[1.111vw] max-w-[31.042vw] max-2xl:hidden opacity-70">
|
||||
<p className="text-m">
|
||||
Founded by the AlShamsi family, IRTH is a privately held real
|
||||
estate investment platform. Based on the philosophy of value
|
||||
creation, innovation and building world-class living experiences,
|
||||
IRTH is founded on a promise of solid commitment to excellence,
|
||||
trust, and quality.
|
||||
</p>
|
||||
<p className="text-m">
|
||||
IRTH embodies the essence of legacy, anchoring its roots in the
|
||||
heart of a vibrant Dubai. As a part of a distinguished local
|
||||
family conglomerate, we draw strength from a heritage spanning
|
||||
over a century.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative 2xl:aspect-[1376/640] md:max-lg:aspect-[720/334] aspect-[328/200] 2xl:rounded-[1.667vw] rounded-2xl overflow-hidden group">
|
||||
<video
|
||||
src="/videos/About/IRTH 1_HIGHRES.mp4"
|
||||
className="object-cover w-full h-full"
|
||||
ref={videoRef}
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
/>
|
||||
<button
|
||||
className={clsx(
|
||||
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer group-hover:opacity-100 opacity-0 transition-opacity duration-300",
|
||||
!isPlaying && "opacity-100"
|
||||
)}
|
||||
onClick={() => {
|
||||
if (videoRef.current) {
|
||||
if (!isPlaying) videoRef.current?.play();
|
||||
else videoRef.current.pause();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="text-[#D9D9D9] 2xl:w-[4.444vw] 2xl:h-[4.444vw] md:max-2xl:w-16 md:max-2xl:h-16 w-8 h-8">
|
||||
{isPlaying ? <PauseIcon /> : <FilledPlayIcon />}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="2xl:hidden opacity-70 flex md:gap-[2.083vw] max-md:flex-col gap-[2.222vw] -mt-[clamp(24px,3.125vw,64px)]">
|
||||
<p className="md:text-m text-s">
|
||||
Founded by the AlShamsi family, IRTH is a privately held real estate
|
||||
investment platform. Based on the philosophy of value creation,
|
||||
innovation and building world-class living experiences, IRTH is
|
||||
founded on a promise of solid commitment to excellence, trust, and
|
||||
quality.
|
||||
</p>
|
||||
<p className="md:text-m text-s">
|
||||
IRTH embodies the essence of legacy, anchoring its roots in the
|
||||
heart of a vibrant Dubai. As a part of a distinguished local family
|
||||
conglomerate, we draw strength from a heritage spanning over a
|
||||
century.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="2xl:pt-[7.222vw] md:max-2xl:pt-[104px] pt-[clamp(64px,17.778vw,104px)] 2xl:pb-[2.222vw] 2xl:space-y-[3.333vw] md:max-2xl:space-y-12 space-y-[clamp(32px,8.889vw,40px)]">
|
||||
<h2 className="font-mixcase-unmixed 2xl:text-[3.889vw] md:max-2xl:text-[clamp(40px,5.208vw,56px)] text-[clamp(24px,6.667vw,40px)] leading-none tracking-[-0.07em]">
|
||||
Our foundation is built upon
|
||||
<br className="" />
|
||||
three core values
|
||||
</h2>
|
||||
<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">
|
||||
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">
|
||||
<p className="md:text-m text-s">
|
||||
Trust is the cornerstone of IRTH's foundation. We uphold an
|
||||
unshakeable commitment to transparency, integrity, and ethical
|
||||
practices in every facet of our operations.
|
||||
</p>
|
||||
<p className="md:text-m text-s">
|
||||
Through open communication and responsible stewardship, we
|
||||
build enduring relationships with our stakeholders and
|
||||
business partners, ensuring that trust is at the heart of
|
||||
every interaction.
|
||||
</p>
|
||||
</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">
|
||||
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">
|
||||
<p className="text-m">
|
||||
Strength isn't just a physical attribute; it's a reflection of
|
||||
our resilience, determination, and unwavering resolve.
|
||||
</p>
|
||||
<p className="text-m">
|
||||
At IRTH, we harness the strength of our heritage, experience,
|
||||
and expertise to overcome challenges and seize opportunities.
|
||||
With a robust foundation, we stand strong, poised to create
|
||||
lasting impact and achieve remarkable results.
|
||||
</p>
|
||||
</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">
|
||||
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">
|
||||
<p className="text-m">
|
||||
In a rapidly evolving landscape, adaptability is paramount.
|
||||
IRTH embraces agility as a guiding principle, allowing us to
|
||||
swiftly respond to changing dynamics and emerging trends.
|
||||
</p>
|
||||
<p className="text-m">
|
||||
Our flexible mindset empowers us to navigate complexities,
|
||||
explore new avenues, and innovate with confidence, ensuring
|
||||
that we remain at the forefront of progress.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="md:text-h3 text-h4 font-medium 2xl:max-w-[53.056vw]">
|
||||
These principles serve as our guiding light, propelling us forward
|
||||
as a prominent player in the realm of real estate investment.
|
||||
We proudly stand among the elite establishments within the UAE,
|
||||
a testament to our unwavering commitment to excellence
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="2xl:pt-[7.222vw] md:max-2xl:pt-[104px] pt-[clamp(64px,17.778vw,104px)] 2xl:pb-[5.556vw] md:max-2xl:pb-20 pb-[clamp(64px,17.778vw,80px)] 2xl:space-y-[3.333vw] md:max-2xl:space-y-[clamp(40px,5.208vw,48px)] space-y-[clamp(24px,6.667vw,40px)]">
|
||||
<h2 className="font-mixcase-unmixed 2xl:text-[3.889vw] md:max-2xl:text-[clamp(40px,5.208vw,56px)] text-[clamp(24px,6.667vw,40px)] leading-none">
|
||||
Our Portfolio
|
||||
</h2>
|
||||
<div className="flex 2xl:gap-[1.111vw] gap-8 max-2xl:flex-col">
|
||||
<Link to={"/"} className="2xl:gap-y-[0.833vw] gap-y-3 flex flex-col">
|
||||
<img
|
||||
src="/images/about/dubai-marina.png"
|
||||
alt=""
|
||||
className="2xl:rounded-[1.111vw] rounded-2xl"
|
||||
/>
|
||||
<div className="2xl:space-y-[0.278vw]">
|
||||
<div className="flex 2xl:gap-[0.278vw] gap-1 items-center">
|
||||
<div className="bg-[#00BED7] 2xl:w-[0.833vw] w-3 aspect-square rounded-full" />
|
||||
<p className="text-m">Rove Home Dubai Marina</p>
|
||||
</div>
|
||||
<p className="text-s opacity-70">Dubai</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={"/"} className="2xl:gap-y-[0.833vw] gap-y-3 flex flex-col">
|
||||
<img
|
||||
src="/images/about/marasi-drive.png"
|
||||
alt=""
|
||||
className="2xl:rounded-[1.111vw] rounded-2xl"
|
||||
/>
|
||||
<div className="2xl:space-y-[0.278vw]">
|
||||
<div className="flex 2xl:gap-[0.278vw] gap-1 items-center">
|
||||
<div className="bg-[#00BED7] 2xl:w-[0.833vw] w-3 aspect-square rounded-full" />
|
||||
<p className="text-m">Rove Home Marasi Drive</p>
|
||||
</div>
|
||||
<p className="text-s opacity-70">Dubai</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={"/"} className="2xl:gap-y-[0.833vw] gap-y-3 flex flex-col">
|
||||
<img
|
||||
src="/images/about/downtown.png"
|
||||
alt=""
|
||||
className="2xl:rounded-[1.111vw] rounded-2xl"
|
||||
/>
|
||||
<div className="2xl:space-y-[0.278vw]">
|
||||
<div className="flex 2xl:gap-[0.278vw] gap-1 items-center">
|
||||
<div className="bg-[#00BED7] 2xl:w-[0.833vw] w-3 aspect-square rounded-full" />
|
||||
<p className="text-m">Rove Home Downtown</p>
|
||||
</div>
|
||||
<p className="text-s opacity-70">Dubai</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutIRTHPage;
|
||||
@@ -1,149 +0,0 @@
|
||||
function AboutPage() {
|
||||
return (
|
||||
<div className="mt-14 lg:px-6 px-4 sm:py-16 py-8 lg:space-y-[140px] sm:space-y-[120px] space-y-[80px] select-none">
|
||||
<div className="space-y-10">
|
||||
<p className="lg:text-[56px] sm:text-[40px] text-[28px] lg:leading-[56px] sm:leading-[40px] leading-[28px] text-[#0D1922] font-mixcase -tracking-[1.68px]">
|
||||
Welcome to IRTH – a name etched in legacy
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
<div className="relative flex items-center justify-center overflow-hidden bg-gray-900 rounded-2xl">
|
||||
<video
|
||||
src="/videos/About/IRTH 1_HIGHRES.mp4"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
playsInline
|
||||
></video>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-2 gap-4 text-[#73787C] lg:leading-[27px] leading-[21.6px] lg:text-xl">
|
||||
<p>
|
||||
IRTH is a privately held real estate investment platform. Based on
|
||||
the philosophy of value creation, innovation and building
|
||||
world-class living experiences, IRTH is founded on a promise of
|
||||
solid commitment to excellence, trust, and quality.
|
||||
</p>
|
||||
<p>
|
||||
IRTH embodies the essence of legacy, anchoring its roots in the
|
||||
heart of a vibrant Dubai. As a part of a distinguished local
|
||||
family conglomerate, we draw strength from a heritage spanning
|
||||
over a century.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid lg:grid-cols-2 gap-10 border-t border-b border-[#E2E2DC] py-6">
|
||||
<div className="flex flex-col justify-between gap-6">
|
||||
<div className="space-y-10 text-[#73787C] leading-[27px]">
|
||||
<p className="lg:text-[56px] sm:text-[40px] text-[28px] lg:leading-[56px] sm:leading-[40px] leading-[28px] text-[#0D1922] font-mixcase -tracking-[1.68px]">
|
||||
Our Portfolio
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-4 lg:text-xl lg:leading-[27px] leading-[21.6px]">
|
||||
<p>
|
||||
IRTH group’s real estate portfolio is spread across various
|
||||
sectors and countries. With thorough market research, IRTH
|
||||
identifies promising investment opportunities that yield high
|
||||
returns and continues to grow its property portfolio in key
|
||||
markets such as the United Arab Emirates and Europe.
|
||||
</p>
|
||||
<p>
|
||||
In 2023, IRTH announced its partnership with Rove Hotels, to
|
||||
build ROVE HOME branded residences. With key developments at
|
||||
prime locations, IRTH continues to build on its legacy - founded
|
||||
on a solid commitment to excellence, trust and quality lifestyle
|
||||
living.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="lg:text-2xl text-xl font-semibold lg:leading-[32.4px] leading-[28px]">
|
||||
We take pride in offering the best-in-class locations and properties
|
||||
for value-based investment opportunities - setting new standards in
|
||||
the real estate market in the region.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<img
|
||||
src="/images/about/1.jpg"
|
||||
alt=""
|
||||
className="pointer-events-none rounded-2xl"
|
||||
/>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="min-w-3 min-h-3 w-3 h-3 bg-[#00BED7] rounded-full"></div>
|
||||
<p className="text-[#0D1922] leading-[20px]">Nef Kandilli</p>
|
||||
</div>
|
||||
<p className="text-xs text-[#73787C] font-semibold">Istanbul</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-10">
|
||||
<p className="lg:text-[56px] sm:text-[40px] text-[28px] lg:leading-[56px] sm:leading-[40px] leading-[28px] text-[#0D1922] font-mixcase -tracking-[1.68px]">
|
||||
Our foundation is built upon three core values
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-3 md:grid-cols-3 lg:gap-4">
|
||||
<div className="p-5 space-y-6 bg-white lg:space-y-9 sm:space-y-6 lg:p-10 rounded-2xl">
|
||||
<p className="lg:text-2xl sm:text-xl text-[#0D1922] font-semibold leading-[32.4px]">
|
||||
Trust
|
||||
</p>
|
||||
<div className="space-y-3 lg:text-sm text-xs text-[#73787C] leading-[19.6px]">
|
||||
<p>
|
||||
Trust is the cornerstone of IRTH's foundation. We uphold an
|
||||
unshakeable commitment to transparency, integrity, and ethical
|
||||
practices in every facet of our operations.
|
||||
</p>
|
||||
<p>
|
||||
Through open communication and responsible stewardship, we
|
||||
build enduring relationships with our stakeholders and
|
||||
business partners, ensuring that trust is at the heart of
|
||||
every interaction.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 space-y-6 bg-white lg:space-y-9 sm:space-y-6 lg:p-10 rounded-2xl">
|
||||
<p className="lg:text-2xl sm:text-xl text-[#0D1922] font-semibold leading-[32.4px]">
|
||||
Strength
|
||||
</p>
|
||||
<div className="space-y-3 lg:text-sm text-xs text-[#73787C] leading-[19.6px]">
|
||||
<p>
|
||||
Strength isn't just a physical attribute; it's a reflection of
|
||||
our resilience, determination, and unwavering resolve.
|
||||
</p>
|
||||
<p>
|
||||
At IRTH, we harness the strength of our heritage, experience,
|
||||
and expertise to overcome challenges and seize opportunities.
|
||||
With a robust foundation, we stand strong, poised to create
|
||||
lasting impact and achieve remarkable results.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 space-y-6 bg-white lg:space-y-9 sm:space-y-6 lg:p-10 rounded-2xl">
|
||||
<p className="lg:text-2xl sm:text-xl text-[#0D1922] font-semibold leading-[32.4px]">
|
||||
Agility
|
||||
</p>
|
||||
<div className="space-y-3 lg:text-sm text-xs text-[#73787C] leading-[19.6px]">
|
||||
<p>
|
||||
In a rapidly evolving landscape, adaptability is paramount.
|
||||
IRTH embraces agility as a guiding principle, allowing us to
|
||||
swiftly respond to changing dynamics and emerging trends.
|
||||
</p>
|
||||
<p>
|
||||
Our flexible mindset empowers us to navigate complexities,
|
||||
explore new avenues, and innovate with confidence, ensuring
|
||||
that we remain at the forefront of progress.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="lg:w-1/2 lg:text-2xl sm:text-xl font-semibold lg:leading-[32.4px] sm:leading-[28px] leading-[18.4px]">
|
||||
These principles serve as our guiding light, propelling us forward
|
||||
as a prominent player in the realm of real estate investment. We
|
||||
proudly stand among the elite establishments within the UAE, a
|
||||
testament to our unwavering commitment to excellence
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutPage;
|
||||
@@ -0,0 +1,104 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router";
|
||||
import { api } from "../api/ky";
|
||||
import { IUnit } from "../types/IUnit";
|
||||
import ShareIcon from "../components/icons/ShareIcon";
|
||||
import Button from "../components/ui/Button";
|
||||
import FilledHeartIcon from "../components/icons/FilledHeartIcon";
|
||||
import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
|
||||
import HeartIcon from "../components/icons/HeartIcon";
|
||||
import PlayIcon from "../components/icons/PlayIcon";
|
||||
import { useEffect } from "react";
|
||||
|
||||
function UnitPage() {
|
||||
const params = useParams<{ complexName: string; unitNumber: string }>();
|
||||
|
||||
useEffect(() => {
|
||||
console.log(params);
|
||||
}, [params]);
|
||||
|
||||
const { data: unit } = useQuery({
|
||||
queryKey: ["unit", params.complexName, params.unitNumber],
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(`units/${params.unitNumber}?project=${params.complexName}`)
|
||||
.json<IUnit>(),
|
||||
});
|
||||
|
||||
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
|
||||
|
||||
function handleFavorite() {
|
||||
if (!unit) return;
|
||||
if (favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id))
|
||||
setFavoriteUnits(
|
||||
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
|
||||
);
|
||||
else setFavoriteUnits([...favoriteUnits, unit]);
|
||||
}
|
||||
|
||||
if (!unit) return null;
|
||||
|
||||
return (
|
||||
<div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
|
||||
<div className="bg-[#F3F3F2] 2xl:aspect-[1028/664] md:max-2xl:aspect-[720/616] aspect-square 2xl:w-[71.389vw] w-full 2xl:rounded-[1.111vw] md:max-2xl:rounded-2xl rounded-xl" />
|
||||
<div className="flex flex-col justify-between flex-1">
|
||||
<div className="2xl:space-y-[1.667vw] space-y-6">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="2xl:space-y-[1.111vw] space-y-4">
|
||||
<h3 className="text-h3 font-medium">{unit.unitType}</h3>
|
||||
<div className="2xl:space-y-[0.556vw] space-y-2">
|
||||
<p className="text-s text-[#00BED7]">{unit.project}</p>
|
||||
<div className="flex items-center 2xl:gap-[0.556vw]">
|
||||
{unit.wing && (
|
||||
<>
|
||||
<p className="text-s opacity-70">{unit.wing}</p>
|
||||
<div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
|
||||
</>
|
||||
)}
|
||||
<p className="text-s opacity-70">Floor {unit.floor}</p>
|
||||
<div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
|
||||
<p className="text-s opacity-70">{unit.unitNo}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="tertiary" onlyIcon onClick={handleFavorite}>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
||||
{favoriteUnits.some(
|
||||
(favoriteUnit) => favoriteUnit.id === unit.id
|
||||
) ? (
|
||||
<FilledHeartIcon />
|
||||
) : (
|
||||
<HeartIcon />
|
||||
)}
|
||||
</span>
|
||||
</Button>
|
||||
<Button variant="tertiary" onlyIcon>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
||||
<ShareIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
|
||||
<div className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.883vw] rounded-xl flex items-center justify-between 2xl:gap-[0.556vw] gap-2 2xl:ring-[0.069vw] ring ring-[#E2E2DC]">
|
||||
<div className="2xl:space-y-[0.278vw] space-y-1">
|
||||
<h5 className="text-h5 font-medium">ORI Cloud Bed</h5>
|
||||
<p className="text-s text-[#00BED7]">Live in the future, today</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5"
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UnitPage;
|
||||
@@ -12,4 +12,5 @@ export interface IUnit {
|
||||
noOfParkingSpace: number;
|
||||
salesPrice: number;
|
||||
balconyArea: number;
|
||||
wing?: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user