client,server folders
This commit is contained in:
@@ -0,0 +1,497 @@
|
||||
import { isMobile } from "react-device-detect";
|
||||
import Footer from "../components/Footer";
|
||||
import Button from "../components/Button";
|
||||
import LeftArrowIcon from "../components/icons/LeftArrowIcon";
|
||||
import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlider";
|
||||
import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface ICityItem {
|
||||
time: number;
|
||||
title: string;
|
||||
id: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const roveAroundTheCity: ICityItem[] = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Burj Khalifa",
|
||||
time: 10,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/1.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "The Dubai Fountain",
|
||||
time: 10,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/2.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Dubai Mall",
|
||||
time: 8,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/3.png",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Dubai Opera",
|
||||
time: 11,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/4.png",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Marasi Promenade",
|
||||
time: 4,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/5.png",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Rove Downtown Hotel",
|
||||
time: 10,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/6.png",
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
title: "Rove City Walk Hotel",
|
||||
time: 12,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/7.png",
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
title: "City Walk",
|
||||
time: 12,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/8.png",
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
title: "Coca Cola arena",
|
||||
time: 14,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/9.png",
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
title: " Dubai International Airport",
|
||||
time: 10,
|
||||
image: "/images/aboutCompany/roveAroundTheCity/10.png",
|
||||
},
|
||||
];
|
||||
|
||||
interface IAdvantages {
|
||||
title: string;
|
||||
image: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
const advantages: IAdvantages[] = [
|
||||
{
|
||||
title: "Community",
|
||||
image: "/images/aboutCompany/advantages/1.png",
|
||||
id: "1",
|
||||
},
|
||||
{
|
||||
title: "Rove-Inspired design",
|
||||
image: "/images/aboutCompany/advantages/2.png",
|
||||
id: "2",
|
||||
},
|
||||
{
|
||||
title: "Fully loaded amenities",
|
||||
image: "/images/aboutCompany/advantages/3.png",
|
||||
id: "3",
|
||||
},
|
||||
{
|
||||
title: "Add-on services",
|
||||
image: "/images/aboutCompany/advantages/4.png",
|
||||
id: "4",
|
||||
},
|
||||
{
|
||||
title: "Central urban location",
|
||||
image: "/images/aboutCompany/advantages/5.png",
|
||||
id: "5",
|
||||
},
|
||||
];
|
||||
|
||||
const advStyles = [
|
||||
"xl:col-start-3 xl:col-end-7",
|
||||
"xl:col-span-4",
|
||||
"xl:col-start-5 xl:col-end-9",
|
||||
"xl:col-span-4",
|
||||
"xl:col-start-3 xl:col-span-4",
|
||||
];
|
||||
|
||||
const AboutComplex = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleOnBackClick = () => {
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className={`xl:pt-16 sm:pt-10 font-usual ${
|
||||
isMobile ? "pt-16" : ""
|
||||
} grid grid-cols-12`}
|
||||
>
|
||||
<div className="flex px-6 py-4 col-span-full h-16 relative">
|
||||
<div className="fixed z-[100]">
|
||||
<Button
|
||||
onClick={handleOnBackClick}
|
||||
text="Masterplan"
|
||||
icon={<LeftArrowIcon />}
|
||||
buttonType="cta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* About Rove Home */}
|
||||
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6">
|
||||
Rove Home this residence a complete ecosystem that has everything
|
||||
you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
|
||||
thrive.
|
||||
</h1>
|
||||
|
||||
<div className="col-span-full px-6 grid grid-cols-12">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 uppercase col-span-full pb-3">
|
||||
About rove home
|
||||
</div>
|
||||
<div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6 xl:pb-[100px] sm:pb-16 pb-20">
|
||||
<img
|
||||
src="/images/aboutCompany/rovehome.png"
|
||||
alt=""
|
||||
className="col-span-full"
|
||||
/>
|
||||
<div className="xl:col-span-4 sm:col-span-6 col-span-full text-l text-[#73787C]">
|
||||
Embrace Rove’s forever-young spirit at Rove Home, where inspiring
|
||||
design and vibrant art installations converge with an exceptional
|
||||
location and an extended playlist of life-enhancing{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* RoveHome roof */}
|
||||
<RoveHomeSlider />
|
||||
{/* Rove around the city */}
|
||||
<div className="col-span-full px-6 grid grid-cols-12 xl:pt-[100px] sm:pt-16 pt-14">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
|
||||
ROVE AROUND THE CITY
|
||||
</div>
|
||||
<div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
|
||||
<div className="xl:col-span-4 xl:grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full flex flex-nowrap overflow-x-scroll">
|
||||
{roveAroundTheCity.map((item) => (
|
||||
<div
|
||||
className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3 xl:min-w-full sm:min-w-[calc(25vw-24px)] min-w-[calc(50vw-30px)]"
|
||||
key={item.id}
|
||||
>
|
||||
<div className="flex gap-1 items-center">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<div className="text-[#0D1922] text-m">{item.title}</div>
|
||||
</div>
|
||||
<p className="text-s text-[#73787C]">{item.time} mins</p>
|
||||
<img className="w-16 h-16 self-end" src={item.image} alt="" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-span-full xl:col-start-5 order-1 xl:order-2">
|
||||
<img
|
||||
src="/images/aboutCompany/Map.png"
|
||||
alt=""
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Advantages */}
|
||||
<div className="col-span-full grid grid-cols-12 px-6 gap-x-4 xl:pt-[140px] sm:pt-16 pt-14">
|
||||
<div className="uppercase text-[#73787C] font-semibold xl:col-span-1 pb-3 text-caption-m col-span-full">
|
||||
ADVANTAGES
|
||||
</div>
|
||||
<p className="text-subheadline-m font-semibold xl:col-start-3 col-span-full xl:pb-6 text-[#00BED7] pb-3">
|
||||
What makes a rove home?
|
||||
</p>
|
||||
{advantages.map((adv, index) => {
|
||||
const styles = `${advStyles[index]} ${
|
||||
index === advantages.length - 1 ? "" : "xl:pb-14 pb-6"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col ${styles} xl:col-span-4 sm:col-span-6 col-span-full`}
|
||||
key={adv.id}
|
||||
>
|
||||
<img
|
||||
src={adv.image}
|
||||
alt={adv.title}
|
||||
className="rounded-2xl object-cover aspect-[5/3]"
|
||||
/>
|
||||
<div className="flex gap-1 pt-3 items-center">
|
||||
<div className="rounded-full bg-[#00BED7] w-3 h-3"></div>
|
||||
<div className="text-m">{adv.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* EXPANDABLE LIVING SOLUTIONS */}
|
||||
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6 xl:pt-[140px] sm:pt-[100px] pt-20">
|
||||
Live in the future, today. Designed to embody Rove’s unique look and
|
||||
feel, the interiors will feature intelligent and modular living
|
||||
solutions by ORI, never seen before in UAE and the region.
|
||||
</h1>
|
||||
<div className="col-span-full grid grid-cols-12 px-6">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase col-start-1 col-span-full pb-3">
|
||||
EXPANDABLE LIVING SOLUTIONS
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 xl:col-start-3 xl:col-span-4 col-span-full">
|
||||
<div className="text-[#00BED7] text-subheadline-m">
|
||||
ORI introduces a revolutionary solution to apartment living, where
|
||||
space is not just a constraint but an opportunity.{" "}
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
|
||||
<p className="text-[#0D1922] text-m">Simple</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
|
||||
<p className="text-[#0D1922] text-m">Safe</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
|
||||
<p className="text-[#0D1922] text-m">Effortless</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-full pt-6">
|
||||
<LivingSolutionSlider />
|
||||
</div>
|
||||
</div>
|
||||
{/* Units description */}
|
||||
<div className="col-span-full px-6 grid grid-cols-12 xl:pt-[140px] xm:pt-[100px] pt-[80px]">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
|
||||
UNITS DESCRIPTION
|
||||
</div>
|
||||
<div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
|
||||
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
|
||||
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
|
||||
<div>
|
||||
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
|
||||
Studio flex
|
||||
</h2>
|
||||
<p className="text-m text-[#73787C] pt-4">
|
||||
Live in the future, today. In Studio Flex explore the ORI
|
||||
Cloud Bed, optimizing your living space with functionality
|
||||
and smart living.
|
||||
</p>
|
||||
<p className="text-m text-[#73787C] mt-[10px]">
|
||||
Every inch is designed to provide more space for comfort and
|
||||
convenience. This feature increase your unit size by 33%
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-s text-[#0D1922]">341 Sqft</p>
|
||||
<p className="font-bold text-m text-[#00BED7]">
|
||||
AED 2,408,888
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/unitsDescription/1.png"
|
||||
alt=""
|
||||
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
|
||||
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
|
||||
<div>
|
||||
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
|
||||
Studio<sup>2</sup>
|
||||
</h2>
|
||||
<p className="text-m text-[#73787C] pt-4">
|
||||
In Studio 2 experience the Flexibed, a smart innovation for
|
||||
modern living. When folded, it unveils a spacious living
|
||||
room creating a cohesive space that blends both style and
|
||||
functionality.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-s text-[#0D1922]">390 Sqft</p>
|
||||
<p className="font-bold text-m text-[#00BED7]">
|
||||
AED 1,138,888
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/unitsDescription/2.png"
|
||||
alt=""
|
||||
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
|
||||
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
|
||||
<div>
|
||||
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
|
||||
1 Bedroom<sup>2</sup>
|
||||
</h2>
|
||||
<p className="text-m text-[#73787C] pt-4">
|
||||
In 1 Bedroom 2 double up your space with next generation
|
||||
features that enhance smart living.
|
||||
</p>
|
||||
<p className="text-m text-[#73787C] mt-[10px]">
|
||||
With pocket walls that disappear and a Flexibed that
|
||||
seamlessly converts, you can transform your living room into
|
||||
an extra bedroom, anytime you want!
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-s text-[#0D1922]">609 Sqft</p>
|
||||
<p className="font-bold text-m text-[#00BED7]">
|
||||
AED 1,668,888
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/unitsDescription/3.png"
|
||||
alt=""
|
||||
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
|
||||
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
|
||||
<div>
|
||||
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
|
||||
2 Bedroom<sup>2</sup>
|
||||
</h2>
|
||||
<p className="text-m text-[#73787C] pt-4">
|
||||
In 2 Bedroom 2 discover extra functionality with added space
|
||||
and maximum value.
|
||||
</p>
|
||||
<p className="text-m text-[#73787C] mt-[10px]">
|
||||
Whether you want to add a multipurpose spare room or double
|
||||
up your living space as a bedroom - every inch of space
|
||||
feels larger and works exactly how you want.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-s text-[#0D1922]">891 Sqft</p>
|
||||
<p className="font-bold text-m text-[#00BED7]">
|
||||
AED 2,408,888
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/unitsDescription/4.png"
|
||||
alt=""
|
||||
className="sm:col-span-2 col-span-full -z-10 w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] h-full mt-[-32px] sm:mt-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* About the developer */}
|
||||
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full xl:pb-16 sm:pb-10 pb-7 xl:pt-[140px] sm:pt-[100px] pt-20">
|
||||
Founded under Alshamsi family, IRTH is a real estate investment
|
||||
platform - based on the philosophy of value creation, innovation and
|
||||
building world-class living experiences.
|
||||
</h1>
|
||||
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 gap-6">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase">
|
||||
ABOUT THE DEVELOPER
|
||||
</div>
|
||||
<div className="xl:col-start-3 xl:col-span-3 text-[#73787C] flex-col flex justify-between col-span-5 gap-6">
|
||||
<div>
|
||||
<p className="text-m">
|
||||
IRTH’s vision is long-term, supported with a proactive approach,
|
||||
swift actions, strong financial backing, and high-quality
|
||||
projects - bridging the gap between ambition and success. IRTH
|
||||
continues seeking new opportunities and broadening horizons –
|
||||
thriving in any market situation through an extensive land bank
|
||||
and strategic partnerships.
|
||||
</p>
|
||||
<p className="text-m pt-4">
|
||||
At IRTH, we take pride in offering the best-inclass locations
|
||||
and properties for value-based investment opportunities -
|
||||
setting new standards in the real estate market in the region.
|
||||
We are IRTH – The Future of Real Estate.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
text="Learn more"
|
||||
buttonType="cta"
|
||||
className="justify-center w-fit px-[51px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="xl:col-start-7 xl:col-span-7 col-span-full">
|
||||
<img
|
||||
src="/images/aboutCompany/about_the_developer.png"
|
||||
alt=""
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* MAIN CONSULTANTS */}
|
||||
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 xl:pt-[140px] xl:pb-[140px] sm:pt-[100px] pt-20 pb-10">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase pb-3 col-span-full">
|
||||
MAIN CONSULTANTS
|
||||
</div>
|
||||
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 gap-4">
|
||||
<div className="xl:col-start-3 col-start-1 sm:col-span-2 col-span-4 bg-white rounded-2xl p-6 h-[280px] justify-between flex flex-col">
|
||||
<div className="flex gap-1 items-center">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<p className="text-m text-[#0D1922]">Architect</p>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/mainConsultants/1.png"
|
||||
alt=""
|
||||
className="self-end"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
|
||||
<div className="flex gap-1 items-center">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<p className="text-m text-[#0D1922]">Landscape architect</p>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/mainConsultants/2.png"
|
||||
alt=""
|
||||
className="self-end"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 bg-white rounded-2xl col-span-full p-6 h-[280px] justify-between flex flex-col xl:col-start-9 sm:col-start-7">
|
||||
<div className="flex gap-1 items-center">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<p className="text-m text-[#0D1922]">Art team</p>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/mainConsultants/3.png"
|
||||
alt=""
|
||||
className="self-end"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col xl:col-start-5 sm:col-start-3">
|
||||
<div className="flex gap-1 items-center">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<p className="text-m text-[#0D1922]">Id team</p>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/mainConsultants/4.png"
|
||||
alt=""
|
||||
className="self-end"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
|
||||
<div className="flex gap-1 items-center">
|
||||
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
|
||||
<p className="text-m text-[#0D1922]">Sales and marketing</p>
|
||||
</div>
|
||||
<img
|
||||
src="/images/aboutCompany/mainConsultants/5.png"
|
||||
alt=""
|
||||
className="self-end"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutComplex;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { isMobile } from "react-device-detect";
|
||||
import OurStory from "../components/companyPage/OurStory";
|
||||
import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
|
||||
import OurValues from "../components/companyPage/OurValues/OurValues";
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
const Company = () => {
|
||||
return (
|
||||
<section className={`xl:pt-16 pt-10 font-usual ${isMobile ? "pt-24" : ""}`}>
|
||||
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4 pt-10 xl:pt-16">
|
||||
IRTH is a privately held real estate investment platform part of a large
|
||||
local family conglomerate from Dubai
|
||||
</h1>
|
||||
<OurStory />
|
||||
<h1 className="uppercase text-headline-s xl:rubber-headline-indent xl:pb-16 pb-10 xl:px-6 px-4">
|
||||
IRTHS’s real estate portfolio is spread across numerous projects, below
|
||||
is a snapshot of some of our current and previous investments
|
||||
</h1>
|
||||
<InvestmentPortfolio />
|
||||
<OurValues />
|
||||
<Footer />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Company;
|
||||
@@ -0,0 +1,15 @@
|
||||
import ButtomPanelCompass from "../components/ButtomPanelCompass";
|
||||
import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
|
||||
import SequenceSlider from "../components/complexPage/SequenceSlider";
|
||||
|
||||
const Complex = () => {
|
||||
return (
|
||||
<div className="overflow-hidden h-screen w-screen">
|
||||
<ComplexTopPanel />
|
||||
<SequenceSlider path={"/images/sequence"} />
|
||||
<ButtomPanelCompass />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Complex;
|
||||
@@ -0,0 +1,15 @@
|
||||
import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
|
||||
import ButtomPanelCompass from "../components/ButtomPanelCompass";
|
||||
import SequenceWing from "../components/complexWingPage/SequenceWing";
|
||||
|
||||
const ComplexWing = () => {
|
||||
return (
|
||||
<div className="overflow-hidden h-screen w-screen ">
|
||||
<ComplexTopPanel />
|
||||
<SequenceWing />
|
||||
<ButtomPanelCompass />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComplexWing;
|
||||
@@ -0,0 +1,232 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { sortCardBy } from "../calc/sortCard";
|
||||
import Button from "../components/Button";
|
||||
import Footer from "../components/Footer";
|
||||
import TrashIcon from "../components/icons/TrashIcon";
|
||||
import SortButton from "../components/searchPage/SortButton";
|
||||
import { initialSortList } from "../consts/initialSearchPage";
|
||||
import { ILayoutCard } from "../types/layoutCard";
|
||||
import Switch from "../components/Switch";
|
||||
import { ISwitcher } from "../types/switcher";
|
||||
import FavoritesSlider from "../components/favoritesPage/FavoriteSlider";
|
||||
import FavoriteCardList from "../components/favoritesPage/FavoriteCardList";
|
||||
|
||||
const favoriteCards: ILayoutCard[] = [
|
||||
{
|
||||
id: "1",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "Studio Flex",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 10488888,
|
||||
square: 619,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1668888,
|
||||
square: 619,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1668888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1138888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "Studio Flex",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 10488888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1668888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1668888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1138888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "Studio Flex",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 10488888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1668888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "11",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1668888,
|
||||
square: 609,
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
roveHome: "Marasi Drive",
|
||||
apartmentType: "1 Bedroom",
|
||||
wing: "East Wing",
|
||||
floorStart: 11,
|
||||
floorEnd: 35,
|
||||
units: 234,
|
||||
cost: 1138888,
|
||||
square: 609,
|
||||
},
|
||||
];
|
||||
|
||||
const initialCollectionCompareSwitcher: ISwitcher = {
|
||||
id: "1",
|
||||
title: "collection/compare",
|
||||
isSwitched: false,
|
||||
};
|
||||
|
||||
const Favorites = () => {
|
||||
const [sortList, setSortList] = useState(initialSortList);
|
||||
const [cards, setCards] = useState(favoriteCards);
|
||||
const [switcher, setSwitcher] = useState(initialCollectionCompareSwitcher);
|
||||
|
||||
const handleOnSortClick = (sortId: string) => {
|
||||
const updatedSortList = sortList.map((sort) => {
|
||||
const isSelected = sort.id === sortId;
|
||||
return { ...sort, isSelected: isSelected };
|
||||
});
|
||||
setSortList(updatedSortList);
|
||||
};
|
||||
|
||||
const handleOnSwitchClick = () => {
|
||||
setSwitcher((prev) => {
|
||||
return { ...prev, isSwitched: !prev.isSwitched };
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const sortedCards = sortCardBy(sortList, favoriteCards);
|
||||
|
||||
setCards(sortedCards);
|
||||
}, [sortList]);
|
||||
|
||||
return (
|
||||
<div className="overflow-scroll h-screen w-screen pt-14">
|
||||
<div className="p-6 pb-16">
|
||||
<div className="pb-6">
|
||||
<div className="flex justify-between w-full items-center border-b pb-[11px]">
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
|
||||
<h2 className="text-[#0D1922]">Units</h2>
|
||||
<p className="text-[#73787C]">145</p>
|
||||
</div>
|
||||
<SortButton sortList={sortList} onClick={handleOnSortClick} />
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
buttonType="tertiary"
|
||||
icon={<TrashIcon />}
|
||||
className="text-[#73787C]"
|
||||
text="Remove all"
|
||||
/>
|
||||
<div className="flex gap-2 items-center text-s">
|
||||
<p
|
||||
className={`transition-all duration-300 ease-in-out ${
|
||||
!switcher.isSwitched ? "text-[#0D1922]" : "text-[#73787C]"
|
||||
}`}
|
||||
>
|
||||
Collection
|
||||
</p>
|
||||
<Switch switcher={switcher} onClick={handleOnSwitchClick} />
|
||||
<p
|
||||
className={`transition-all duration-300 ease-in-out ${
|
||||
switcher.isSwitched ? "text-[#0D1922]" : "text-[#73787C]"
|
||||
}`}
|
||||
>
|
||||
Compare
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{switcher.isSwitched ? (
|
||||
<FavoritesSlider cards={cards} />
|
||||
) : (
|
||||
<FavoriteCardList cards={cards} />
|
||||
)}
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Favorites;
|
||||
@@ -0,0 +1,24 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useEffect } from "react";
|
||||
import useModal from "../store/useModal";
|
||||
import Map from "../components/masterplanPage/map/Map";
|
||||
import TopPanel from "../components/masterplanPage/TopPanel";
|
||||
import ButtomPanel from "../components/ButtomPanel";
|
||||
import ZoomHint from "../components/modals/ZoomHintModal";
|
||||
|
||||
const Masterplan = () => {
|
||||
const { setModal } = useModal();
|
||||
useEffect(() => {
|
||||
setModal(<ZoomHint />);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden h-screen w-screen">
|
||||
<TopPanel />
|
||||
<Map />
|
||||
<ButtomPanel />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Masterplan;
|
||||
@@ -0,0 +1,17 @@
|
||||
import Footer from "../components/Footer";
|
||||
import LayoutOptions from "../components/searchPage/LayoutOptions";
|
||||
import SidebarFilters from "../components/searchPage/SidebarFilters";
|
||||
|
||||
const Search = () => {
|
||||
return (
|
||||
<div className="overflow-scroll h-screen w-screen pt-14">
|
||||
<div className="flex">
|
||||
<SidebarFilters />
|
||||
<LayoutOptions />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Search;
|
||||
@@ -0,0 +1,31 @@
|
||||
import Footer from "../components/Footer";
|
||||
import ButtonPanel from "../components/searchApartment/ButtonPanel";
|
||||
import ApartmentLayout from "../components/searchApartment/ApartmentLayout";
|
||||
import ApartmentSidebar from "../components/searchApartment/ApartmentSidebar";
|
||||
import SimilarSlider from "../components/searchApartment/SimilarSlider";
|
||||
import StudioDescriptionSection from "../components/searchApartment/StudioDescriptionSection";
|
||||
|
||||
const SearchApartment = () => {
|
||||
return (
|
||||
<div className="overflow-scroll h-screen w-screen pt-14">
|
||||
<div className="grid grid-cols-9 px-4 pt-6 pb-16 gap-4">
|
||||
<div className="flex flex-col lg:col-span-7 col-span-full">
|
||||
<ButtonPanel />
|
||||
<ApartmentLayout />
|
||||
</div>
|
||||
<div className="lg:col-span-2 rounded-lg col-span-full">
|
||||
<ApartmentSidebar />
|
||||
</div>
|
||||
<div className="col-span-full">
|
||||
<StudioDescriptionSection />
|
||||
</div>
|
||||
<div className="col-span-full">
|
||||
<SimilarSlider />
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchApartment;
|
||||
@@ -0,0 +1,17 @@
|
||||
import Footer from "../components/Footer";
|
||||
import ApartmentSidebar from "../components/searchParticularApartmentsPage/ApartmentSidebar";
|
||||
import Units from "../components/searchParticularApartmentsPage/Units";
|
||||
|
||||
const SearchParticularApartments = () => {
|
||||
return (
|
||||
<div className="overflow-scroll h-screen w-screen pt-14">
|
||||
<div className="flex">
|
||||
<ApartmentSidebar />
|
||||
<Units />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchParticularApartments;
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { useParams } from "react-router-dom";
|
||||
import VirtualTourWrapper from "../components/virtualTour/VirtualTourWrapper";
|
||||
import { IAppartmentSphere } from "../types/apartmentSphere";
|
||||
import _appartment from "../data/appartments.json";
|
||||
import VirtualTourTopPanel from "../components/virtualTour/VirtualTourTopPanel";
|
||||
import ButtomPanelCompassVirtualTour from "../components/virtualTour/ButtomPanelCompassVirualTour";
|
||||
import VirtualTourSidebar from "../components/virtualTour/VirtualTourSidebar";
|
||||
|
||||
const appartments = _appartment as IAppartmentSphere[];
|
||||
|
||||
const VirtualTour = () => {
|
||||
const [currentAppartment, setCurrentAppartment] =
|
||||
useState<null | IAppartmentSphere>(null);
|
||||
|
||||
const { appartmentTypeId } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
const _currentAppartment = appartments.find(
|
||||
(app) => app.id === appartmentTypeId
|
||||
);
|
||||
if (_currentAppartment) {
|
||||
setCurrentAppartment(_currentAppartment);
|
||||
}
|
||||
}, [appartmentTypeId]);
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden h-screen w-screen">
|
||||
<VirtualTourTopPanel />
|
||||
<VirtualTourSidebar currentAppartment={currentAppartment} />
|
||||
<Canvas>
|
||||
{currentAppartment && (
|
||||
<VirtualTourWrapper appartment={currentAppartment} />
|
||||
)}
|
||||
</Canvas>
|
||||
<ButtomPanelCompassVirtualTour />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VirtualTour;
|
||||
Reference in New Issue
Block a user