about masterpan page
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 662 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -1,4 +1,4 @@
|
||||
import { NumericFormat, PatternFormat } from "react-number-format";
|
||||
import { PatternFormat } from "react-number-format";
|
||||
import ChevronDownIcon from "./icons/ChevronDownIcon";
|
||||
|
||||
interface IOptions {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
import { useLayoutEffect, useRef, useState } from "react";
|
||||
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { Image } from "../../types/image";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import Button from "../Button";
|
||||
@@ -27,27 +27,6 @@ const LivingSolutionSlider = () => {
|
||||
const [imageWidth, setImageWidth] = useState(0);
|
||||
const imageRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!imageRef.current?.src) return;
|
||||
const width = imageRef.current.width;
|
||||
setImageWidth(width);
|
||||
}, [imageRef.current, window.innerWidth]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const screenWidth = window.innerWidth;
|
||||
const gapOffset = getGapOffset(screenWidth);
|
||||
|
||||
const _rightImageOffset =
|
||||
screenWidth > 1280
|
||||
? `${"calc(clamp(315px, 7.0317rem + 19.0319vw, 485px)"} + ${
|
||||
// ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${
|
||||
selectedImageIndex * (imageWidth + gapOffset)
|
||||
}px)`
|
||||
: `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`;
|
||||
|
||||
setRightImageOffset(_rightImageOffset);
|
||||
}, [imageWidth, selectedImageIndex, window.innerWidth]);
|
||||
|
||||
const handlers = useSwipeable({
|
||||
onSwipedLeft: next,
|
||||
onSwipedRight: prev,
|
||||
@@ -66,6 +45,27 @@ const LivingSolutionSlider = () => {
|
||||
setSelectedImageIndex((prev) => prev - 1);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!imageRef.current) return;
|
||||
const width = imageRef.current.width;
|
||||
setImageWidth(width);
|
||||
}, [imageRef.current?.width]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const screenWidth = window.innerWidth;
|
||||
const gapOffset = getGapOffset(screenWidth);
|
||||
|
||||
const _rightImageOffset =
|
||||
screenWidth > 1280
|
||||
? `${"calc(clamp(315px, 7.0317rem + 19.0319vw, 485px)"} + ${
|
||||
// ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${
|
||||
selectedImageIndex * (imageWidth + gapOffset)
|
||||
}px)`
|
||||
: `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`;
|
||||
|
||||
setRightImageOffset(_rightImageOffset);
|
||||
}, [imageWidth, selectedImageIndex, window.innerWidth]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 " {...handlers}>
|
||||
<div
|
||||
|
||||
@@ -11,7 +11,7 @@ const desktopCols = 4;
|
||||
const laptopCols = 2;
|
||||
|
||||
const SimilarSlider = () => {
|
||||
const [cards, setCards] = useState(layoutsCards);
|
||||
const [cards] = useState(layoutsCards);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const cardRef = useRef<HTMLDivElement | null>(null);
|
||||
const [cardWidth, setCardWidth] = useState(0);
|
||||
|
||||
+355
-155
@@ -2,7 +2,6 @@ import { isMobile } from "react-device-detect";
|
||||
import Footer from "../components/Footer";
|
||||
import Button from "../components/Button";
|
||||
import LeftArrowIcon from "../components/icons/LeftArrowIcon";
|
||||
import { Project } from "../types/project";
|
||||
import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlider";
|
||||
|
||||
interface ICityItem {
|
||||
@@ -109,26 +108,6 @@ const advantages: IAdvantages[] = [
|
||||
},
|
||||
];
|
||||
|
||||
interface IUnitDesc {
|
||||
title: string;
|
||||
desc: string;
|
||||
id: string;
|
||||
sqft: number;
|
||||
aed: number;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const unitsDesc: IUnitDesc[] = [
|
||||
{
|
||||
id: "1",
|
||||
image: "/images/aboutCompany/unitsDescription/1.png",
|
||||
aed: 1048888,
|
||||
title: "Studio flex",
|
||||
sqft: 341,
|
||||
desc: "Live in the future, today. In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living. Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
|
||||
},
|
||||
];
|
||||
|
||||
const advStyles = [
|
||||
"xl:col-start-3 xl:col-end-7",
|
||||
"xl:col-span-4",
|
||||
@@ -139,155 +118,376 @@ const advStyles = [
|
||||
|
||||
const AboutComplex = () => {
|
||||
return (
|
||||
<section
|
||||
className={`xl:pt-16 pt-10 font-usual ${
|
||||
isMobile ? "pt-24" : ""
|
||||
} grid grid-cols-12`}
|
||||
>
|
||||
<div className="flex px-6 py-4 col-span-full h-16 relative">
|
||||
<div className="fixed">
|
||||
<Button text="Masterplan" icon={<LeftArrowIcon />} buttonType="cta" />
|
||||
<>
|
||||
<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-50">
|
||||
<Button
|
||||
text="Masterplan"
|
||||
icon={<LeftArrowIcon />}
|
||||
buttonType="cta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
{/* 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] col-span-1 uppercase">
|
||||
About rove home
|
||||
<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>
|
||||
<div className="col-start-3 col-span-full grid grid-cols-10 gap-6 pb-[100px]">
|
||||
{/* RoveHome roof */}
|
||||
<div className="col-span-full">
|
||||
<img
|
||||
src="/images/aboutCompany/rovehome.png"
|
||||
src="/images/aboutCompany/rovehome_roof.png"
|
||||
alt=""
|
||||
className="col-span-full"
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="col-span-4 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>
|
||||
{/* 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>
|
||||
</div>
|
||||
<div className="col-span-full">
|
||||
<img src="/images/aboutCompany/rovehome_roof.png" alt="" />
|
||||
</div>
|
||||
<div className="col-span-full px-6 grid grid-cols-12 pt-[100px]">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] col-span-1 uppercase">
|
||||
ROVE AROUND THE CITY
|
||||
</div>
|
||||
<div className="col-start-3 col-span-full grid grid-cols-10 gap-6 ">
|
||||
<div className="col-span-4 grid grid-cols-4 gap-4">
|
||||
{roveAroundTheCity.map((item) => (
|
||||
<div
|
||||
className="col-span-2 bg-white rounded-lg flex flex-col p-3"
|
||||
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 className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
|
||||
<div className="xl:col-span-4 grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full">
|
||||
{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"
|
||||
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>
|
||||
<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 col-start-5">
|
||||
<img src="/images/aboutCompany/Map.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-full grid grid-cols-12 px-6 gap-x-4 pt-[140px]">
|
||||
<div className="uppercase text-[#73787C] font-semibold col-span-1 pb-3 text-caption-m">
|
||||
ADVANTAGES
|
||||
</div>
|
||||
<p className="text-subheadline-m font-semibold col-start-3 col-span-full pb-6 text-[#00BED7]">
|
||||
What makes a rove home?
|
||||
</p>
|
||||
{advantages.map((adv, index) => {
|
||||
const styles = `${advStyles[index]} sm:col-start-1 ${
|
||||
index === advantages.length - 1 ? "" : "pb-14"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col ${styles} col-span-4 col-start-1`}
|
||||
key={adv.id}
|
||||
>
|
||||
))}
|
||||
</div>
|
||||
<div className="col-span-full xl:col-start-5 order-1 xl:order-2">
|
||||
<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>
|
||||
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6 pt-[140px]">
|
||||
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] col-span-2 uppercase col-start-1">
|
||||
EXPANDABLE LIVING SOLUTIONS
|
||||
</div>
|
||||
<div className="flex flex-col gap-6 col-start-3 col-span-4">
|
||||
<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>
|
||||
<div className="col-span-full px-6 grid grid-cols-12 pt-[100px]">
|
||||
<div className="text-caption-m font-semibold text-[#73787C] col-span-1 uppercase">
|
||||
ROVE AROUND THE CITY
|
||||
</div>
|
||||
<div className="col-start-3 col-span-full grid grid-cols-10 gap-6">
|
||||
{unitsDesc.map((unit) => (
|
||||
<div className="col-span-5 grid relative grid-cols-5">
|
||||
<div className="col-span-3 h-full bg-white rounded-se-lg rounded-ee-lg">
|
||||
sdfsdfdsfsd
|
||||
</div>
|
||||
<img
|
||||
src={unit.image}
|
||||
src="/images/aboutCompany/Map.png"
|
||||
alt=""
|
||||
className="absolute right-0 top-0 -z-40"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="col-span-5"></div>
|
||||
<div className="col-span-5"></div>
|
||||
<div className="col-span-5"></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
|
||||
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 />
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user