inmake/irth-new-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client

Browse Source
This commit is contained in:
inmake
2025-06-23 17:31:50 +05:00
parent 735e8ad797 a525a4a948
commit b44fce2109
4 changed files with 156 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AboutMarasiDrive.tsx
+12 -3
View File
@@ -3,13 +3,14 @@ import {
marasiDriveDescriptionBadges,
marasiDriveMapCards,
} from "../data/aboutMarasiDrive";
import MarariDriveNeighboursSlider from "./MarasiDriveNeighboursSlider";
import MarariDriveNeighboursSliderDesktop from "./MarasiDriveNeighboursSliderDesktop";
import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider";
import TextBox from "./ui/TextBox";
import { useRef } from "react";
import { useScroll } from "motion/react";
import MarasiDriveMapCard from "./MarasiDriveMapCard";
import BrochureButton from "./ui/BrochureButton";
import MarasiDriveNeighboursSliderTablet from "./MarasiDriveNeighboursSliderTablet";
function AboutMarasiDrive() {
const target = useRef<HTMLDivElement>(null);
@@ -178,11 +179,16 @@ function AboutMarasiDrive() {
/>
</section>
<section
className="bg-white w-full overflow-clip h-[calc(27.639vw*5)] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8"
className="bg-white w-full overflow-clip 2xl:h-[calc(27.639vw*5)] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8"
ref={target}
>
<<<<<<< HEAD
<div className="flex flex-col 2xl:gap-[4.444vw] md:max-2xl:gap-16 gap-12 2xl:sticky top-[5vw]">
<div className="flex flex-col items-center 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6">
=======
<div className="flex flex-col 2xl:gap-[4.444vw] 2xl:sticky top-[5vw]">
<div className="flex flex-col items-center 2xl:gap-[2.222vw]">
>>>>>>> a525a4a9481a4a4b333e73abb9a0e85f94286184
<h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
{`Explore the neighbourhood`}
</h2>
@@ -192,7 +198,10 @@ function AboutMarasiDrive() {
at Rove Home Marasi Drive!`}
</p>
</div>
<MarariDriveNeighboursSlider scrollYProgress={scrollYProgress} />
<MarariDriveNeighboursSliderDesktop
scrollYProgress={scrollYProgress}
/>
<MarasiDriveNeighboursSliderTablet />
</div>
</section>
<section className="bg-white w-full overflow-clip flex flex-col gap-[3.333vw] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8">
src/components/MarasiDriveInteriorsSlider.tsx
+39 -13
View File
@@ -24,21 +24,40 @@ function MarasiDriveInteriorsSlider() {
});
return (
<div className="relative 2xl:mb-[15vw]" {...handlers}>
<div className="relative max-md:hidden 2xl:mb-[15vw]" {...handlers}>
<motion.div
className="flex items-center gap-[6.667vw] min-h-[38.333vw]"
className="flex items-center 2xl:gap-[6.667vw] gap-[12.5vw] 2xl:min-h-[38.333vw] min-h-[calc(58.333vw*9/10)]"
animate={{
transform: `translateX(calc(5vw - ${currentIndex - 1} * 27.222vw))`,
transform:
innerWidth >= 1440
? `translateX(calc(5vw - ${currentIndex - 1} * 27.222vw))`
: `translateX(calc(-33.333vw + 12px - ${
currentIndex - 1
} * 51.042vw))`,
}}
>
<AnimatePresence>
{marasiDriveInspiredInteriors.map(({ image, name }, index) => (
<motion.div
animate={{
width: index === currentIndex ? "31.111vw" : "20.556vw",
width:
innerWidth >= 1440
? index === currentIndex
? "31.111vw"
: "20.556vw"
: index === currentIndex
? "58.333vw"
: "38.542vw",
}}
exit={{
width: index !== currentIndex ? "31.111vw" : "20.556vw",
width:
innerWidth >= 1440
? index !== currentIndex
? "31.111vw"
: "20.556vw"
: index !== currentIndex
? "58.333vw"
: "38.542vw",
}}
key={name}
className="shrink-0"
@@ -46,9 +65,16 @@ function MarasiDriveInteriorsSlider() {
<motion.img
src={image}
alt={name}
className="object-cover rounded-[1.667vw] pointer-events-none"
className="object-cover 2xl:rounded-[1.667vw] rounded-[3.125vw] pointer-events-none max-2xl:aspect-[12/9]"
animate={{
marginBottom: index !== currentIndex ? "1.667vw" : "2.222vw",
marginBottom:
innerWidth >= 1440
? index !== currentIndex
? "1.667vw"
: "2.222vw"
: index !== currentIndex
? "32px"
: "24px",
}}
onClick={() => setCurrentIndex(index)}
/>
@@ -68,25 +94,25 @@ function MarasiDriveInteriorsSlider() {
onlyIcon
disabled={currentIndex === 0}
onClick={() => setCurrentIndex(Math.max(currentIndex - 1, 0))}
className="!bg-[#F3F3F2] absolute 2xl:left-[27.778vw] top-[15.833vw]"
className="absolute 2xl:left-[27.778vw] left-[12.5vw] 2xl:top-[15.833vw] max-2xl:bottom-1/2"
>
<span className="2xl:size-[1.389vw] size-5 text-[#0D1922] in-disabled:text-[#0D1922]/40">
<div className="2xl:size-[1.389vw] size-5">
<ChevronLeftIcon />
</span>
</div>
</Button>
<Button
onlyIcon
disabled={currentIndex === marasiDriveInspiredInteriors.length - 1}
className="absolute 2xl:right-[27.778vw] top-[15.833vw]"
className="absolute 2xl:left-[65vw] left-[79.167vw] 2xl:top-[15.833vw] max-2xl:bottom-1/2"
onClick={() =>
setCurrentIndex(
Math.min(currentIndex + 1, marasiDriveInspiredInteriors.length - 1)
)
}
>
<span className="2xl:size-[1.389vw] size-5">
<div className="2xl:size-[1.389vw] size-5">
<ChevronRightIcon />
</span>
</div>
</Button>
</div>
);
src/components/MarasiDriveNeighboursSlider.tsx → src/components/MarasiDriveNeighboursSliderDesktop.tsx
+5 -5
View File
@@ -6,7 +6,7 @@ import {
} from "motion/react";
import { marasiDriveNeighbours } from "../data/aboutMarasiDrive";
function MarariDriveNeighboursSlider({
function MarariDriveNeighboursSliderDesktop({
scrollYProgress,
}: {
scrollYProgress: MotionValue<number>;
@@ -39,20 +39,20 @@ function MarariDriveNeighboursSlider({
return (
<motion.div
className="flex items-center 2xl:gap-[4.965vw] min-h-[27.639vw]"
className="flex items-center 2xl:gap-[4.965vw] gap-[9.375vw] 2xl:min-h-[27.639vw] max-2xl:hidden"
style={{ x }}
>
<AnimatePresence>
{marasiDriveNeighbours.map(({ name, image }, index) => (
<motion.div
key={name}
className="flex flex-col shrink-0 items-center gap-[1.667vw]"
className="flex flex-col shrink-0 items-center 2xl:gap-[1.667vw] gap-6"
style={{ width: [width1, width2, width3, width4][index] }}
>
<img
src={image}
alt={name}
className="2xl:rounded-[1.667vw] aspect-[290/205] object-cover w-full pointer-events-none"
className="2xl:rounded-[1.667vw] rounded-[3.125vw] aspect-[290/205] object-cover w-full pointer-events-none"
/>
<p className={"text-h4 text-center font-medium"}>{name}</p>
</motion.div>
@@ -62,4 +62,4 @@ function MarariDriveNeighboursSlider({
);
}
export default MarariDriveNeighboursSlider;
export default MarariDriveNeighboursSliderDesktop;
src/components/MarasiDriveNeighboursSliderTablet.tsx
+100
View File
@@ -0,0 +1,100 @@
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { useSwipeable } from "react-swipeable";
import { marasiDriveNeighbours } from "../data/aboutMarasiDrive";
import Button from "./ui/Button";
import ChevronLeftIcon from "./icons/ChevronLeftIcon";
import clsx from "clsx";
import ChevronRightIcon from "./icons/ChevronRightIcon";
function MarasiDriveNeighboursSliderTablet() {
const [currentIndex, setCurrentIndex] = useState(1);
const handlers = useSwipeable({
onSwipedLeft: () =>
setCurrentIndex(
Math.min(currentIndex + 1, marasiDriveNeighbours.length - 1)
),
onSwipedRight: () => setCurrentIndex(Math.max(currentIndex - 1, 0)),
preventScrollOnSwipe: true,
touchEventOptions: {
passive: false,
},
trackMouse: true,
});
return (
<div
className="relative hidden md:max-2xl:block min-h-[calc(47.135vw*11/9)]"
{...handlers}
>
<motion.div
className="flex items-center gap-[9.375vw]"
animate={{
transform: `translateX(calc(-31.641vw - 24px - ${
currentIndex - 1
} * 47.135vw))`,
}}
>
<AnimatePresence>
{marasiDriveNeighbours.map(({ image, name }, index) => (
<motion.div
animate={{
width: index === currentIndex ? "69.141vw" : "37.76vw",
}}
exit={{
width: index !== currentIndex ? "69.141vw" : "37.76vw",
}}
key={name}
className="shrink-0 flex flex-col"
>
<motion.img
src={image}
alt={name}
className="object-cover rounded-[3.125vw] pointer-events-none aspect-[12/9] object-center"
animate={{
marginBottom: index !== currentIndex ? "32px" : "24px",
}}
onClick={() => setCurrentIndex(index)}
/>
<p
className={clsx(
"text-h4 text-center font-medium",
index !== currentIndex && "opacity-40"
)}
>
{name}
</p>
</motion.div>
))}
</AnimatePresence>
</motion.div>
<Button
onlyIcon
disabled={currentIndex === 0}
onClick={() => setCurrentIndex(Math.max(currentIndex - 1, 0))}
className="absolute left-[8.203vw] bottom-1/2"
>
<span className="size-5">
<ChevronLeftIcon />
</span>
</Button>
<Button
onlyIcon
disabled={currentIndex === marasiDriveNeighbours.length - 1}
className="absolute left-[83.594vw] bottom-1/2"
onClick={() =>
setCurrentIndex(
Math.min(currentIndex + 1, marasiDriveNeighbours.length - 1)
)
}
>
<span className="size-5">
<ChevronRightIcon />
</span>
</Button>
</div>
);
}
export default MarasiDriveNeighboursSliderTablet;