Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,16 +1,26 @@
|
||||
import clsx from "clsx";
|
||||
|
||||
interface AmentitiesCardProps {
|
||||
icon: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
}
|
||||
|
||||
function AmentitiesCard({ icon, title }: AmentitiesCardProps) {
|
||||
function AmentitiesBadge({ icon, title }: AmentitiesCardProps) {
|
||||
return (
|
||||
<div className="space-y-[0.883vw]">
|
||||
<div className="w-[2.778vw] h-[2.778vw] text-[#0D1922] rounded-full ring ring-[#E2E2DC]">
|
||||
{icon}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"space-y-[0.883vw]",
|
||||
!icon &&
|
||||
"2xl:px-[1.111vw] 2xl:py-[0.417vw] px-4 py-1.5 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring ring-[#E2E2DC]"
|
||||
)}
|
||||
>
|
||||
{icon && (
|
||||
<div className="w-[2.778vw] h-[2.778vw] text-[#0D1922] rounded-full overflow-hidden ring ring-[#E2E2DC]">
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-caption-m">{title}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default AmentitiesCard;
|
||||
export default AmentitiesBadge;
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useState } from "react";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
import Button from "./ui/Button";
|
||||
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
|
||||
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
||||
|
||||
function AmentitiesContentSlider({ srcs }: { srcs: string[] }) {
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
const handlers = useSwipeable({
|
||||
onSwipedLeft: handleNext,
|
||||
onSwipedRight: handlePrev,
|
||||
preventScrollOnSwipe: true,
|
||||
touchEventOptions: {
|
||||
passive: false,
|
||||
},
|
||||
trackMouse: true,
|
||||
});
|
||||
|
||||
function handlePrev() {
|
||||
setCurrent((prev) => Math.max(0, prev - 1));
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
setCurrent((prev) => Math.min(srcs.length - 1, prev + 1));
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative -mx-[1.667vw] px-[1.667vw] overflow-hidden"
|
||||
{...handlers}
|
||||
>
|
||||
<div
|
||||
className="flex flex-nowrap gap-[1.111vw] transition-transform duration-300"
|
||||
style={{
|
||||
transform: `translateX(calc(${-current} * 100% + ${-current} * 1.111vw))`,
|
||||
}}
|
||||
>
|
||||
{srcs.map((src) => (
|
||||
<img
|
||||
src={src}
|
||||
className="rounded-[1.111vw] shrink-0 pointer-events-none"
|
||||
alt=""
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
onlyIcon
|
||||
variant="secondary"
|
||||
disabled={current === 0}
|
||||
className="absolute left-[2.778vw] top-1/2 -translate-y-1/2"
|
||||
onClick={handlePrev}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
||||
<ArrowLeftIcon />
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
onlyIcon
|
||||
variant="secondary"
|
||||
disabled={current === srcs.length - 1}
|
||||
className="absolute right-[2.778vw] top-1/2 -translate-y-1/2"
|
||||
onClick={handleNext}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
||||
<ArrowRightIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AmentitiesContentSlider;
|
||||
@@ -23,7 +23,7 @@ function FloorPopup({ title, position, data, complexName }: FloorMarkerProps) {
|
||||
transition={{ duration: 0.1 }}
|
||||
style={{ top: position[1], left: position[0] }}
|
||||
className={clsx(
|
||||
"absolute z-100 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen",
|
||||
"absolute z-1 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen",
|
||||
title.startsWith("West")
|
||||
? "translate-x-[calc(1.25vw)]"
|
||||
: "-translate-x-[calc(100%+1.25vw)]"
|
||||
|
||||
@@ -172,9 +172,12 @@ function FloorSelect({
|
||||
</div>
|
||||
{data &&
|
||||
hoveredFloor &&
|
||||
data.some(
|
||||
(data.some(
|
||||
({ floor }) => floor === +hoveredFloor!.split(" ").at(-1)!
|
||||
) && (
|
||||
) ||
|
||||
["Rooftop", "Ground Level", "Podium Level", "Sky Garden"].includes(
|
||||
hoveredFloor
|
||||
)) && (
|
||||
<FloorPopup
|
||||
title={hoveredFloor}
|
||||
position={position}
|
||||
|
||||
@@ -16,7 +16,7 @@ function FloorSidebar({
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"w-1/2 h-full max-h-full overflow-y-auto absolute right-0 top-0 bg-white z-10 transition-transform duration-300 p-[1.667vw]",
|
||||
"w-1/2 h-full max-h-full overflow-y-auto absolute right-0 top-0 bg-white transition-transform duration-300 p-[1.667vw]",
|
||||
isOpen ? "translate-x-0" : "translate-x-full"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
function VideoModal({ src }: { src: string }) {
|
||||
return (
|
||||
<div className="flex justify-center items-center">
|
||||
<video
|
||||
src={src}
|
||||
className="object-cover max-w-4/5 2xl:rounded-[0.833vw]"
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoModal;
|
||||
@@ -1,6 +1,13 @@
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import AmentitiesBadge from "../../AmentitiesCard";
|
||||
import PlayIcon from "../../icons/PlayIcon";
|
||||
import Badge from "../../ui/Badge";
|
||||
import Button from "../../ui/Button";
|
||||
import VideoModal from "../../VideoModal";
|
||||
|
||||
function GroundDubaiMarina() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="space-y-[2.222vw]">
|
||||
<div className="space-y-[1.667vw]">
|
||||
@@ -8,14 +15,57 @@ function GroundDubaiMarina() {
|
||||
<p className="text-h4 font-medium">Ground Level</p>
|
||||
<Badge variant="secondary" text="14 Amenties" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw] relative">
|
||||
<img
|
||||
src="/images/floor-plans/dubai-marina/ground.png"
|
||||
alt="podium"
|
||||
className="w-full"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw]"
|
||||
onlyIcon
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VideoModal src="/videos/dubai-marina/GroundDubaiMarina.mp4" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[1.111vw]">
|
||||
<h4 className="text-h4 font-medium">Amenities</h4>
|
||||
<div className="flex flex-wrap gap-[0.556vw]">
|
||||
{[
|
||||
"Residential Entrance",
|
||||
"Multifunctional Feature Staircase",
|
||||
"Lobby Lounge & Concierge",
|
||||
"Outdoor Landscape Seating Area",
|
||||
"Lift Lobby",
|
||||
"Rove Cafe & Energize Bar",
|
||||
"Organic Smart Gardens & Seating",
|
||||
"Co-working Area ",
|
||||
"24x7 Convenience Store",
|
||||
"WCs",
|
||||
"Visitor Parking",
|
||||
"EV Charging Stations",
|
||||
"Bicycle/Scooter Rental & Storage",
|
||||
"Drop-off Area",
|
||||
].map((amentity) => (
|
||||
<AmentitiesBadge key={amentity} title={amentity} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="/images/floor-plans/dubai-marina/ground/content.png"
|
||||
className="rounded-[1.111vw]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import AmentitiesBadge from "../../AmentitiesCard";
|
||||
import AmenitiesBadge from "../../icons/AmenitiesBadge";
|
||||
import PlayIcon from "../../icons/PlayIcon";
|
||||
import Badge from "../../ui/Badge";
|
||||
import Button from "../../ui/Button";
|
||||
import VideoModal from "../../VideoModal";
|
||||
import AmentitiesContentSlider from "../../AmentitiesContentSlider";
|
||||
|
||||
function PodiumDubaiMarina() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="space-y-[2.222vw]">
|
||||
<div className="space-y-[1.667vw]">
|
||||
@@ -13,14 +21,76 @@ function PodiumDubaiMarina() {
|
||||
<AmenitiesBadge count={3} type="Indoor" />
|
||||
<AmenitiesBadge count={12} type="Outdoor" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw] relative">
|
||||
<img
|
||||
src="/images/floor-plans/dubai-marina/podium.png"
|
||||
alt="podium"
|
||||
className="w-full"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw]"
|
||||
onlyIcon
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VideoModal src="/videos/dubai-marina/PodiumDubaiMarina.mp4" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[1.111vw]">
|
||||
<h4 className="text-h4 font-medium">Indoor Amenities</h4>
|
||||
<div className="flex flex-wrap gap-[0.556vw]">
|
||||
{[
|
||||
"Multipurpose Hall",
|
||||
"Gaming Lounge",
|
||||
"State-of-the-art Gym",
|
||||
"7m Climbing Wall",
|
||||
"Changing Rooms & Lockers",
|
||||
"Hydration Station",
|
||||
"Boutique Fitness Studio - Crank",
|
||||
"Rentable Guest Rooms",
|
||||
].map((amentity) => (
|
||||
<AmentitiesBadge key={amentity} title={amentity} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<hr className="border-[#E2E2DC] h-[0.069vw]" />
|
||||
<div className="space-y-[1.111vw]">
|
||||
<h4 className="text-h4 font-medium">Outdoor Amenities</h4>
|
||||
<div className="flex flex-wrap gap-[0.556vw]">
|
||||
{[
|
||||
"Semi-Olympic Leisure Pool",
|
||||
"Outdoor Cinema & Amphitheatre",
|
||||
"Water Feature Wall",
|
||||
"Multipurpose Fitness Pool",
|
||||
"Communal Gardens",
|
||||
"BBQ & Social Zone",
|
||||
"Popsicle Cart",
|
||||
"Gaming Lounge - Terrace",
|
||||
"Zen Library",
|
||||
"Co-working Area",
|
||||
"Multipurpose Hall with Terrace",
|
||||
"Marina View Chill Zone",
|
||||
"Outdoor Gym",
|
||||
].map((amentity) => (
|
||||
<AmentitiesBadge key={amentity} title={amentity} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<AmentitiesContentSlider
|
||||
srcs={[
|
||||
"/images/floor-plans/dubai-marina/podium/content1.png",
|
||||
"/images/floor-plans/dubai-marina/podium/content2.png",
|
||||
"/images/floor-plans/dubai-marina/podium/content3.png",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import AmentitiesBadge from "../../AmentitiesCard";
|
||||
import PlayIcon from "../../icons/PlayIcon";
|
||||
import Badge from "../../ui/Badge";
|
||||
import Button from "../../ui/Button";
|
||||
import VideoModal from "../../VideoModal";
|
||||
|
||||
function RooftopDubaiMarina() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="space-y-[2.222vw]">
|
||||
<div className="space-y-[1.667vw]">
|
||||
@@ -8,14 +15,57 @@ function RooftopDubaiMarina() {
|
||||
<p className="text-h4 font-medium">Sky 44 - Rooftop</p>
|
||||
<Badge variant="secondary" text="14 Amenties" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw] relative">
|
||||
<img
|
||||
src="/images/floor-plans/dubai-marina/rooftop.png"
|
||||
alt="podium"
|
||||
className="w-full"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw]"
|
||||
onlyIcon
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VideoModal src="/videos/dubai-marina/SkyDubaiMarina.mp4" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[1.111vw]">
|
||||
<h4 className="text-h4 font-medium">Amenities</h4>
|
||||
<div className="flex flex-wrap gap-[0.556vw]">
|
||||
{[
|
||||
"Sky Viewing Lounges",
|
||||
"Convertible Indoor Infinity Pool",
|
||||
"Marina View Amphitheatre",
|
||||
"Ultra Shield Oxygen Pod",
|
||||
"Aroma Steam Pod",
|
||||
"Reflexology Pool",
|
||||
"Cold Bucket Experience Shower Pod",
|
||||
"Experience Shower Pod",
|
||||
"Cold Plunge Pool",
|
||||
"Salt Steam Pod",
|
||||
"Finnish Sauna Pod",
|
||||
"Water Feature Wall",
|
||||
"Vitality Pool",
|
||||
"Changing Rooms and Lockers",
|
||||
].map((amentity) => (
|
||||
<AmentitiesBadge key={amentity} title={amentity} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="/images/floor-plans/dubai-marina/rooftop/content.png"
|
||||
className="rounded-[1.111vw]"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import AmentitiesCard from "../../AmentitiesCard";
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import AmentitiesBadge from "../../AmentitiesCard";
|
||||
import AmentitiesContentSlider from "../../AmentitiesContentSlider";
|
||||
import ConvenienceIcon from "../../icons/amentities/ConvenienceIcon";
|
||||
import CoworkingIcon from "../../icons/amentities/CoworkingIcon";
|
||||
import LoungingSpaceIcon from "../../icons/amentities/LoungingSpaceIcon";
|
||||
@@ -6,9 +8,14 @@ import LushLandscapeIcon from "../../icons/amentities/LushLandscapeIcon";
|
||||
import PrivateMeetingRoomsIcon from "../../icons/amentities/PrivateMeetingRoomsIcon";
|
||||
import RoveCafe from "../../icons/amentities/RoveCafe";
|
||||
import SoundproofMeetingPodsIcon from "../../icons/amentities/SoundproofMeetingPodsIcon";
|
||||
import PlayIcon from "../../icons/PlayIcon";
|
||||
import Badge from "../../ui/Badge";
|
||||
import Button from "../../ui/Button";
|
||||
import VideoModal from "../../VideoModal";
|
||||
|
||||
function GroundMarasiDrive() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="space-y-[2.222vw]">
|
||||
<div className="space-y-[1.667vw]">
|
||||
@@ -16,38 +23,63 @@ function GroundMarasiDrive() {
|
||||
<p className="text-h4 font-medium">Ground Level</p>
|
||||
<Badge variant="secondary" text="7 Amenties" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw] relative">
|
||||
<img
|
||||
src="/images/floor-plans/marasi-drive/ground.png"
|
||||
alt="podium"
|
||||
className="w-full"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw]"
|
||||
onlyIcon
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VideoModal src="/videos/marasi-drive/GroundMarasiDrive.mp4" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[1.667vw]">
|
||||
<p className="font-medium text-h4">Amenties</p>
|
||||
<div className="grid md:grid-cols-4 grid-cols-3 gap-[1.111vw]">
|
||||
<AmentitiesCard icon={<RoveCafe />} title="Rove Café" />
|
||||
<AmentitiesCard icon={<LoungingSpaceIcon />} title="Lobby Lounge" />
|
||||
<AmentitiesCard icon={<CoworkingIcon />} title="Coworking Space" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<RoveCafe />} title="Rove Café" />
|
||||
<AmentitiesBadge icon={<LoungingSpaceIcon />} title="Lobby Lounge" />
|
||||
<AmentitiesBadge icon={<CoworkingIcon />} title="Coworking Space" />
|
||||
<AmentitiesBadge
|
||||
icon={<LushLandscapeIcon />}
|
||||
title="Outdoor Terrace"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<PrivateMeetingRoomsIcon />}
|
||||
title="Private Meeting Rooms"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<ConvenienceIcon />}
|
||||
title="Convenience Store"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<SoundproofMeetingPodsIcon />}
|
||||
title="Soundproof Meeting Pods"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<AmentitiesContentSlider
|
||||
srcs={[
|
||||
"/images/floor-plans/marasi-drive/ground/content1.png",
|
||||
"/images/floor-plans/marasi-drive/ground/content2.png",
|
||||
"/images/floor-plans/marasi-drive/ground/content3.png",
|
||||
"/images/floor-plans/marasi-drive/ground/content4.png",
|
||||
"/images/floor-plans/marasi-drive/ground/content5.png",
|
||||
"/images/floor-plans/marasi-drive/ground/content6.png",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import AmentitiesCard from "../../AmentitiesCard";
|
||||
import AmentitiesBadge from "../../AmentitiesCard";
|
||||
import AmenitiesBadge from "../../icons/AmenitiesBadge";
|
||||
import ArcadeGameIcon from "../../icons/amentities/ArcadeGameIcon";
|
||||
import ChangingRoomIcon from "../../icons/amentities/ChangingRoomIcon";
|
||||
@@ -27,8 +27,15 @@ import IntegratedLapPoolIcon from "../../icons/amentities/IntegratedLapPoolIcon"
|
||||
import SunkenGardensIcon from "../../icons/amentities/SunkenGardensIcon";
|
||||
import GamingTerraceIcon from "../../icons/amentities/GamingTerraceIcon";
|
||||
import CoworkingIcon from "../../icons/amentities/CoworkingIcon";
|
||||
import Button from "../../ui/Button";
|
||||
import VideoModal from "../../VideoModal";
|
||||
import PlayIcon from "../../icons/PlayIcon";
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import AmentitiesContentSlider from "../../AmentitiesContentSlider";
|
||||
|
||||
function PodiumMarasiDrive() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="space-y-[2.222vw]">
|
||||
<div className="space-y-[1.667vw]">
|
||||
@@ -40,88 +47,124 @@ function PodiumMarasiDrive() {
|
||||
<AmenitiesBadge count={13} type="Indoor" />
|
||||
<AmenitiesBadge count={14} type="Outdoor" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw] relative">
|
||||
<img
|
||||
src="/images/floor-plans/marasi-drive/podium.png"
|
||||
alt="podium"
|
||||
className="w-full"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw]"
|
||||
onlyIcon
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VideoModal src="/videos/marasi-drive/PodiumMarasiDrive.mp4" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[1.667vw]">
|
||||
<p className="font-medium text-h4">Indoor Amenties</p>
|
||||
<div className="grid md:grid-cols-4 grid-cols-3 gap-[1.111vw]">
|
||||
<AmentitiesCard icon={<LoungeIcon />} title="Indoor Lounge" />
|
||||
<AmentitiesCard icon={<MonkeyBarsIcon />} title="Monkey Bars" />
|
||||
<AmentitiesCard icon={<KaraokeIcon />} title="Karaoke Room" />
|
||||
<AmentitiesCard icon={<ArcadeGameIcon />} title="Arcade Games" />
|
||||
<AmentitiesCard icon={<ClimbingWallIcon />} title="Climbing Wall" />
|
||||
<AmentitiesCard icon={<PlaystationIcon />} title="Playstation Deck" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<LoungeIcon />} title="Indoor Lounge" />
|
||||
<AmentitiesBadge icon={<MonkeyBarsIcon />} title="Monkey Bars" />
|
||||
<AmentitiesBadge icon={<KaraokeIcon />} title="Karaoke Room" />
|
||||
<AmentitiesBadge icon={<ArcadeGameIcon />} title="Arcade Games" />
|
||||
<AmentitiesBadge icon={<ClimbingWallIcon />} title="Climbing Wall" />
|
||||
<AmentitiesBadge
|
||||
icon={<PlaystationIcon />}
|
||||
title="Playstation Deck"
|
||||
/>
|
||||
<AmentitiesBadge
|
||||
icon={<FullyEquippedGymIcon />}
|
||||
title="Fully Equipped Gym"
|
||||
/>
|
||||
<AmentitiesCard icon={<ChangingRoomIcon />} title="Changing Rooms" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<ChangingRoomIcon />} title="Changing Rooms" />
|
||||
<AmentitiesBadge
|
||||
icon={<HammockMovieLoungeIcon />}
|
||||
title="Hammock Movie Lounge"
|
||||
/>
|
||||
<AmentitiesCard icon={<GuestRooms />} title="Guest Rooms" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<GuestRooms />} title="Guest Rooms" />
|
||||
<AmentitiesBadge
|
||||
icon={<MultiballInteractiveGamingIcon />}
|
||||
title="Multi Ball Interactive Gaming"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<MultiPurposeRoomWithKitchenIcon />}
|
||||
title="Multi-purpose Room for Kitchen"
|
||||
/>
|
||||
<AmentitiesCard icon={<GamingLoungeIcon />} title="Gaming Lounge" />
|
||||
<AmentitiesBadge icon={<GamingLoungeIcon />} title="Gaming Lounge" />
|
||||
</div>
|
||||
</div>
|
||||
<hr className="border-[#E2E2DC] h-[0.069vw]" />
|
||||
<div className="space-y-[1.667vw]">
|
||||
<p className="font-medium text-h4">Outdoor Amenties</p>
|
||||
<div className="grid md:grid-cols-4 grid-cols-3 gap-x-[1.111vw] gap-y-[1.667vw]">
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<UrbanBeachPoolIcon />}
|
||||
title="Urban Beach Pool"
|
||||
/>
|
||||
<AmentitiesCard icon={<JacuzziIcon />} title="Jacuzzi" />
|
||||
<AmentitiesCard icon={<YogaLoungeIcon />} title="Yoga Lounge" />
|
||||
<AmentitiesCard icon={<SunLoungeIcon />} title="Sun Lounging Pool" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<JacuzziIcon />} title="Jacuzzi" />
|
||||
<AmentitiesBadge icon={<YogaLoungeIcon />} title="Yoga Lounge" />
|
||||
<AmentitiesBadge icon={<SunLoungeIcon />} title="Sun Lounging Pool" />
|
||||
<AmentitiesBadge
|
||||
icon={<CascadingLeisurePoolIcon />}
|
||||
title="Cascading Leisure Pool"
|
||||
/>
|
||||
<AmentitiesCard icon={<AquaCyclingIcon />} title="AquaCycling" />
|
||||
<AmentitiesCard icon={<OpenAirGymIcon />} title="Open-Air Gym" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<AquaCyclingIcon />} title="AquaCycling" />
|
||||
<AmentitiesBadge icon={<OpenAirGymIcon />} title="Open-Air Gym" />
|
||||
<AmentitiesBadge
|
||||
icon={<RoveBeverageTruckIcon />}
|
||||
title="Rove Beverage Truck"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<CabanasWithDaybeds />}
|
||||
title="Cabanas with Daybeds"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<IntegratedLapPoolIcon />}
|
||||
title="Integrated Lap Pool"
|
||||
/>
|
||||
<AmentitiesCard icon={<SunkenGardensIcon />} title="Sunken Gardens" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<SunkenGardensIcon />}
|
||||
title="Sunken Gardens"
|
||||
/>
|
||||
<AmentitiesBadge
|
||||
icon={<MultiPurposeRoomWithKitchenIcon />}
|
||||
title="Outdoor Multi-Purpose Terrace"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<GamingTerraceIcon />}
|
||||
title="Outdoor Gaming Terrace"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<CoworkingIcon />}
|
||||
title="Outdoor Coworking Space"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<AmentitiesContentSlider
|
||||
srcs={[
|
||||
"/images/floor-plans/marasi-drive/podium/content1.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content2.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content3.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content4.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content5.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content6.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content7.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content8.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content9.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content10.png",
|
||||
"/images/floor-plans/marasi-drive/podium/content11.png",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import AmentitiesCard from "../../AmentitiesCard";
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import AmentitiesBadge from "../../AmentitiesCard";
|
||||
import BBQTerraceIcon from "../../icons/amentities/BBQTerraceIcon";
|
||||
import CabanasWithDaybeds from "../../icons/amentities/CabanasWithDaybeds";
|
||||
import CommunalDiningTablesRoundedIcon from "../../icons/amentities/CommunalDiningTablesRoundedIcon";
|
||||
@@ -9,9 +10,14 @@ import RooftopGardenIcon from "../../icons/amentities/RooftopGardenIcon";
|
||||
import StargazingIcon from "../../icons/amentities/StargazingIcon";
|
||||
import SunkenSeatingIcon from "../../icons/amentities/SunkenSeatingIcon";
|
||||
import ViewingDeckWithWingsIcon from "../../icons/amentities/ViewingDeckWithWingsIcon";
|
||||
import PlayIcon from "../../icons/PlayIcon";
|
||||
import Badge from "../../ui/Badge";
|
||||
import Button from "../../ui/Button";
|
||||
import VideoModal from "../../VideoModal";
|
||||
|
||||
function RooftopMarasiDrive() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="space-y-[2.222vw]">
|
||||
<div className="space-y-[1.667vw]">
|
||||
@@ -19,36 +25,60 @@ function RooftopMarasiDrive() {
|
||||
<p className="text-h4 font-medium">Rooftop</p>
|
||||
<Badge variant="secondary" text="10 Amenties" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw] relative">
|
||||
<img
|
||||
src="/images/floor-plans/marasi-drive/rooftop.png"
|
||||
alt="podium"
|
||||
className="w-full"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw]"
|
||||
onlyIcon
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VideoModal src="/videos/marasi-drive/RooftopMarasiDrive.mp4" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[1.667vw]">
|
||||
<p className="font-medium text-h4">Amenties</p>
|
||||
<div className="grid md:grid-cols-4 grid-cols-3 gap-[1.111vw]">
|
||||
<AmentitiesCard icon={<StargazingIcon />} title="Stargazing Point" />
|
||||
<AmentitiesCard icon={<BBQTerraceIcon />} title="BBQ Terrace" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<StargazingIcon />} title="Stargazing Point" />
|
||||
<AmentitiesBadge icon={<BBQTerraceIcon />} title="BBQ Terrace" />
|
||||
<AmentitiesBadge
|
||||
icon={<OutdoorKitchenIcon />}
|
||||
title="Outdoor Kitchen"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<CabanasWithDaybeds />}
|
||||
title="Cabanas with Daybeds"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<ViewingDeckWithWingsIcon />}
|
||||
title="Viewing Deck with Wings"
|
||||
/>
|
||||
<AmentitiesCard icon={<LoungingSpaceIcon />} title="Lounging Space" />
|
||||
<AmentitiesCard icon={<SunkenSeatingIcon />} title="Sunken Seating" />
|
||||
<AmentitiesCard icon={<FirePitIcon />} title="Firepit" />
|
||||
<AmentitiesCard icon={<RooftopGardenIcon />} title="Rooftop Garden" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<LoungingSpaceIcon />}
|
||||
title="Lounging Space"
|
||||
/>
|
||||
<AmentitiesBadge
|
||||
icon={<SunkenSeatingIcon />}
|
||||
title="Sunken Seating"
|
||||
/>
|
||||
<AmentitiesBadge icon={<FirePitIcon />} title="Firepit" />
|
||||
<AmentitiesBadge
|
||||
icon={<RooftopGardenIcon />}
|
||||
title="Rooftop Garden"
|
||||
/>
|
||||
<AmentitiesBadge
|
||||
icon={<CommunalDiningTablesRoundedIcon />}
|
||||
title="Communal Dining Tables"
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import AmentitiesCard from "../../AmentitiesCard";
|
||||
import useModalStore from "../../../stores/useModalStore";
|
||||
import AmentitiesBadge from "../../AmentitiesCard";
|
||||
import AmenitiesBadge from "../../icons/AmenitiesBadge";
|
||||
import AmphitheatreIcon from "../../icons/amentities/AmphitheatreIcon";
|
||||
import BoulderingWallIcon from "../../icons/amentities/BoulderingWallIcon";
|
||||
@@ -17,9 +18,14 @@ import RunningWheelIcon from "../../icons/amentities/RunningWheelIcon";
|
||||
import SunLoungeIcon from "../../icons/amentities/SunLoungeIcon";
|
||||
import SuspendedLoungingNetsIcon from "../../icons/amentities/SuspendedLoungingNetsIcon";
|
||||
import WellnessIcon from "../../icons/amentities/WellnessIcon";
|
||||
import PlayIcon from "../../icons/PlayIcon";
|
||||
import Badge from "../../ui/Badge";
|
||||
import Button from "../../ui/Button";
|
||||
import VideoModal from "../../VideoModal";
|
||||
|
||||
function SkyGardenMarasiDrive() {
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
return (
|
||||
<div className="space-y-[2.222vw]">
|
||||
<div className="space-y-[1.667vw]">
|
||||
@@ -31,55 +37,73 @@ function SkyGardenMarasiDrive() {
|
||||
<AmenitiesBadge count={3} type="Indoor" />
|
||||
<AmenitiesBadge count={12} type="Outdoor" />
|
||||
</div>
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw]">
|
||||
<div className="bg-[#F3F3F2] rounded-[1.111vw] p-[1.111vw] relative">
|
||||
<img
|
||||
src="/images/floor-plans/marasi-drive/sky-garden.png"
|
||||
alt="sky-garden"
|
||||
className="w-full"
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw]"
|
||||
onlyIcon
|
||||
size="small"
|
||||
onClick={() =>
|
||||
setModal(
|
||||
<VideoModal src="/videos/marasi-drive/SkyGardenMarasiDrive.mp4" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<PlayIcon />
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[1.667vw]">
|
||||
<p className="font-medium text-h4">Indoor Amenties</p>
|
||||
<div className="grid md:grid-cols-4 grid-cols-3 gap-[1.111vw]">
|
||||
<AmentitiesCard icon={<PoolIcon />} title="Indoor Lap Pool" />
|
||||
<AmentitiesCard icon={<WellnessIcon />} title="Wellness Features" />
|
||||
<AmentitiesCard icon={<ChangingRoomIcon />} title="Changing Rooms" />
|
||||
<AmentitiesBadge icon={<PoolIcon />} title="Indoor Lap Pool" />
|
||||
<AmentitiesBadge icon={<WellnessIcon />} title="Wellness Features" />
|
||||
<AmentitiesBadge icon={<ChangingRoomIcon />} title="Changing Rooms" />
|
||||
</div>
|
||||
</div>
|
||||
<hr className="border-[#E2E2DC] h-[0.069vw]" />
|
||||
<div className="space-y-[1.667vw]">
|
||||
<p className="font-medium text-h4">Outdoor Amenties</p>
|
||||
<div className="grid grid-cols-3 gap-x-[1.111vw] gap-y-[1.667vw]">
|
||||
<AmentitiesCard icon={<PingPongIcon />} title="Padel Pong" />
|
||||
<AmentitiesCard icon={<SunLoungeIcon />} title="Sun Lounging Deck" />
|
||||
<AmentitiesCard icon={<CinemaIcon />} title="Outdoor Cinema" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<PingPongIcon />} title="Padel Pong" />
|
||||
<AmentitiesBadge icon={<SunLoungeIcon />} title="Sun Lounging Deck" />
|
||||
<AmentitiesBadge icon={<CinemaIcon />} title="Outdoor Cinema" />
|
||||
<AmentitiesBadge
|
||||
icon={<BoulderingWallIcon />}
|
||||
title="Bouldering Wall"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<PingPongInTubeIcon />}
|
||||
title="Ping Pong in a Tube"
|
||||
/>
|
||||
<AmentitiesCard icon={<AmphitheatreIcon />} title="Amphitheatre" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge icon={<AmphitheatreIcon />} title="Amphitheatre" />
|
||||
<AmentitiesBadge
|
||||
icon={<CommunalDiningTablesIcon />}
|
||||
title="Communal Dining Tables"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<SuspendedLoungingNetsIcon />}
|
||||
title="Suspended Lounging Nets "
|
||||
/>
|
||||
<AmentitiesCard icon={<LushLandscapeIcon />} title="Lush Landscape" />
|
||||
<AmentitiesCard icon={<RunningWheelIcon />} title="Running Wheel" />
|
||||
<AmentitiesCard icon={<ChessIcon />} title="Chess Tables" />
|
||||
<AmentitiesCard icon={<ClimbingWallIcon />} title="Climbing Wall" />
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<LushLandscapeIcon />}
|
||||
title="Lush Landscape"
|
||||
/>
|
||||
<AmentitiesBadge icon={<RunningWheelIcon />} title="Running Wheel" />
|
||||
<AmentitiesBadge icon={<ChessIcon />} title="Chess Tables" />
|
||||
<AmentitiesBadge icon={<ClimbingWallIcon />} title="Climbing Wall" />
|
||||
<AmentitiesBadge
|
||||
icon={<CoworkingIcon />}
|
||||
title="Outdoor Coworking Space"
|
||||
/>
|
||||
<AmentitiesCard
|
||||
<AmentitiesBadge
|
||||
icon={<MultiPurposeIcon />}
|
||||
title="Multi-purpose Court"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user