495 lines
20 KiB
TypeScript
495 lines
20 KiB
TypeScript
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.jpg",
|
||
id: "1",
|
||
},
|
||
{
|
||
title: "Rove-Inspired design",
|
||
image: "/images/aboutCompany/advantages/2.jpg",
|
||
id: "2",
|
||
},
|
||
{
|
||
title: "Fully loaded amenities",
|
||
image: "/images/aboutCompany/advantages/3.jpg",
|
||
id: "3",
|
||
},
|
||
{
|
||
title: "Add-on services",
|
||
image: "/images/aboutCompany/advantages/4.jpg",
|
||
id: "4",
|
||
},
|
||
{
|
||
title: "Central urban location",
|
||
image: "/images/aboutCompany/advantages/5.jpg",
|
||
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",
|
||
];
|
||
|
||
function AboutProjectsPage() {
|
||
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 select-none`}
|
||
>
|
||
<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
|
||
key={item.id}
|
||
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)]"
|
||
>
|
||
<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="relative col-span-full xl:col-start-5 order-1 xl:order-2">
|
||
<img
|
||
src="/images/aboutCompany/Map.jpg"
|
||
alt=""
|
||
className="w-full"
|
||
/>
|
||
<div className="bg-gradient-to-r from-[#f3f3f2] to-transparent to-20% w-full h-full absolute top-0 left-0"></div>
|
||
</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
|
||
key={adv.id}
|
||
className={`flex flex-col ${styles} xl:col-span-4 sm:col-span-6 col-span-full`}
|
||
>
|
||
<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]">Unavailable</p>
|
||
</div>
|
||
</div>
|
||
<img
|
||
src="/images/aboutCompany/unitsDescription/1.jpg"
|
||
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.jpg"
|
||
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]">Unvailiable</p>
|
||
</div>
|
||
</div>
|
||
<img
|
||
src="/images/aboutCompany/unitsDescription/3.jpg"
|
||
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.jpg"
|
||
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 AboutProjectsPage;
|