inmake/irth-new-client-120
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-120

Browse Source
This commit is contained in:
C4rnivore
2026-01-20 17:48:55 +05:00
parent 26f73a1011 7b06eede27
commit 440704593b
12 changed files with 143 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AboutDubaiMarina.tsx
+2 -2
View File
@@ -93,7 +93,7 @@ function AboutDubaiMarina() {
{`Own the last slice of
Dubai Marina, ROVE Style`}
</h4>
<p className="text-s text-[#0D1922B2] max-md:whitespace-pre-line min-2xl:whitespace-pre-line max-2xl:w-[34vw]">
<p className="text-s text-[#0D1922B2] max-md:whitespace-pre-line 2xl:whitespace-pre-line max-2xl:w-[34vw]">
{`With an extended playlist of life-enhancing
amenities, Rove Home is a complete ecosystem
that has everything you'll ever need.`}
@@ -108,7 +108,7 @@ function AboutDubaiMarina() {
zIndex: 1,
}}
>
<div className="w-full min-md:overflow-x-hidden">
<div className="w-full md:overflow-x-hidden">
<div className="flex flex-col items-center gap-[2.222vw] w-full max-md:py-[8.889vw] max-md:px-[4.444vw] max-2xl:p-6">
<div className="space-y-8 md:hidden self-start">
<h4 className="text-h4 text-[#00BED7] font-[500] whitespace-pre-line">
src/components/AboutMarasiDrive.tsx
+30 -13
View File
@@ -29,10 +29,13 @@ function AboutMarasiDrive() {
<div className="relative">
<div className="2xl:sticky relative 2xl:top-[4.444vw]">
<section className="w-full 2xl:h-[calc(100dvh-4.444vw)] relative md:h-[calc(100dvh-4rem)] h-[calc(100dvh-3.15rem)] flex flex-col justify-between bg-white 2xl:p-[2.222vw] 2xl:pt-[5vw] md:max-2xl:p-6 md:max-2xl:pt-10 p-4 pt-8 overflow-hidden">
<div className="2xl:size-[140vw] md:size-[130vw] size-[120vw] rounded-full absolute 2xl:top-1/2 2xl:left-[104vw] md:top-[100%] left-1/2 top-[100%] md:left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#F3F3F2]"/>
<img src="/images/about-complex/marasi-drive/main_bg.png" alt="" className="absolute 2xl:top-[-23vw] 2xl:w-[80vw] 2xl:right-0 md:top-[-7vw] md:right-[-10vw] max-md:bottom-[0] right-[-10vw]" />
<div className="2xl:size-[140vw] md:size-[130vw] size-[120vw] rounded-full absolute 2xl:top-1/2 2xl:left-[104vw] md:top-[100%] left-1/2 top-[100%] md:left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#F3F3F2]" />
<img
src="/images/about-complex/marasi-drive/main_bg.png"
alt=""
className="absolute 2xl:top-[-23vw] 2xl:w-[80vw] 2xl:right-0 md:top-[-7vw] md:right-[-10vw] max-md:bottom-[0] right-[-10vw]"
/>
<div className="2xl:space-y-[1.667vw] md:max-2xl:space-y-6 space-y-4 relative">
<h1 className="2xl:text-[5vw] md:max-2xl:text-7xl text-[32px] leading-none tracking-[-0.07em] font-mixcase-unmixed font-medium whitespace-pre-line">
{`Rove Home
@@ -71,7 +74,6 @@ function AboutMarasiDrive() {
</p>
</div>
</section>
</div>
<div className="2xl:sticky relative 2xl:top-[-134vw]">
@@ -87,19 +89,32 @@ function AboutMarasiDrive() {
destination for artful inspiration and cleverly activated spaces.`}
</p>
</div>
<div ref={homeSliderRef} className="flex max-2xl:flex-wrap max-2xl:justify-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:w-[93.75vw] max-md:flex-row max-md:flex-nowrap max-md:overflow-x-scroll max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4">
<div
ref={homeSliderRef}
className="flex max-2xl:flex-wrap max-2xl:justify-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:w-[93.75vw] max-md:flex-row max-md:flex-nowrap max-md:overflow-x-scroll max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4"
>
{marasiDriveFeatures.map(({ image, name }) => (
<div key={name} className="relative 2xl:w-full md:w-[30.208vw] max-md:w-full max-md:max-w-[530px] max-md:flex-shrink-0 max-md:snap-center">
<div
key={name}
className="relative 2xl:w-full md:w-[30.208vw] max-md:w-full max-md:max-w-[530px] max-md:flex-shrink-0 max-md:snap-center"
>
<img
src={image}
alt={name}
className="object-cover object-center 2xl:rounded-[1.667vw] md:aspect-[232/316] max-md:!aspect-[328/287] max-md:rounded-2xl md:max-2xl:rounded-[3.125vw]"
/>
<span className="md:hidden absolute bottom-[16px] text-white text-h5 left-1/2 -translate-x-1/2 text-center text-nowrap">{name}</span>
<span className="md:hidden absolute bottom-[16px] text-white text-h5 left-1/2 -translate-x-1/2 text-center text-nowrap">
{name}
</span>
</div>
))}
</div>
<CustomScrollBar containerRef={homeSliderRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden" />
<CustomScrollBar
containerRef={homeSliderRef}
inlinePadding={16}
trackStyle="md:hidden"
thumbStyle="md:hidden"
/>
</section>
<section className="bg-white w-full overflow-clip flex flex-col 2xl:gap-[4.444vw] gap-12 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">
<div className="flex flex-col 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
@@ -154,7 +169,7 @@ function AboutMarasiDrive() {
</p>
</div>
<MarasiDriveInteriorsSlider />
<MarasiDriveInteriorsSliderMobile/>
<MarasiDriveInteriorsSliderMobile />
</section>
</div>
@@ -222,10 +237,10 @@ function AboutMarasiDrive() {
/>
</div>
</div>
<MarasiDriveMapMobile/>
<MarasiDriveMapMobile />
</section>
<section className="bg-white w-full overflow-clip flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] md:max-2xl:py-[104px] md:mx-2xl:px-6 max-md:pt-20 max-md:pb-12 px-4 max-2xl:flex-col-reverse md:max-2xl:gap-[6.25vw] md:max-2xl:px-6">
<div >
<div>
<img
src="/images/about-complex/marasi-drive/podium.png"
className="object-cover size-full rounded-[1.667vw] max-md:mt-[48px] max-md:aspect-[328/400] max-md:rounded-[6.667vw] md:max-2xl:rounded-[3.125vw] md:max-2xl:aspect-[720/400]"
@@ -244,7 +259,9 @@ function AboutMarasiDrive() {
</p>
</div>
<div className="space-y-[1.111vw]">
<h5 className="text-h5 font-medium max-md:mb-[16px] md:max-2xl:mb-[2.083vw]">Download our brochures</h5>
<h5 className="text-h5 font-medium max-md:mb-[16px] md:max-2xl:mb-[2.083vw]">
Download our brochures
</h5>
<div className="space-y-[0.833vw] max-md:space-y-[3.333vw] md:max-2xl:space-y-[1.563vw]">
<BrochureButton
title={"Main Brochure"}
src/components/MarasiDriveInteriorsSliderMobile.tsx
+34 -21
View File
@@ -2,28 +2,41 @@ import { marasiDriveInspiredInteriors } from "../data/aboutMarasiDrive";
import CustomScrollBar from "./ui/ScrollBar";
import { useRef } from "react";
function MarasiDriveInteriorsSliderMobile(){
const interiorsRef = useRef<HTMLDivElement>(null)
function MarasiDriveInteriorsSliderMobile() {
const interiorsRef = useRef<HTMLDivElement>(null);
return(
<>
<div ref={interiorsRef} className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4">
{marasiDriveInspiredInteriors.map(({ image, name }) => (
<div key={name} className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center">
<img
src={image}
alt={name}
className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
/>
<div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">{name}</div>
</div>
))}
return (
<>
<div
ref={interiorsRef}
className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4"
>
{marasiDriveInspiredInteriors.map(({ image, name }) => (
<div
key={name}
className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center"
>
<img
src={image}
alt={name}
className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
/>
<div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">
{name}
</div>
<CustomScrollBar containerRef={interiorsRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden"/>
</>
)
</div>
))}
</div>
{/* ))} */}
{/* </div> */}
<CustomScrollBar
containerRef={interiorsRef}
inlinePadding={16}
trackStyle="md:hidden"
thumbStyle="md:hidden"
/>
</>
);
}
export default MarasiDriveInteriorsSliderMobile;
export default MarasiDriveInteriorsSliderMobile;
src/components/MarasiDriveMapMobile.tsx
+6 -1
View File
@@ -36,7 +36,12 @@ function MarasiDriveMapMobile() {
</div>
))}
</div>
<CustomScrollBar containerRef={containerRef} inlinePadding={16} trackStyle="min-2xl:hidden max-2xl:translate-y-5" thumbStyle="min-2xl:hidden"/>
<CustomScrollBar
containerRef={containerRef}
inlinePadding={16}
trackStyle="2xl:hidden max-2xl:translate-y-5"
thumbStyle="2xl:hidden"
/>
</div>
);
}
src/components/MarasiDriveNeighboursSliderMobile.tsx
+32 -20
View File
@@ -2,27 +2,39 @@ import { marasiDriveNeighbours } from "../data/aboutMarasiDrive";
import { useRef } from "react";
import CustomScrollBar from "./ui/ScrollBar";
function MarasiDriveNeighboursSliderMobile(){
const neighboursRef = useRef<HTMLDivElement>(null);
function MarasiDriveNeighboursSliderMobile() {
const neighboursRef = useRef<HTMLDivElement>(null);
return(
<>
<div ref={neighboursRef} className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4">
{marasiDriveNeighbours.map(({ image, name }) => (
<div key={name} className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center">
<img
src={image}
alt={name}
className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
/>
<div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">{name}</div>
</div>
))}
return (
<>
<div
ref={neighboursRef}
className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4"
>
{marasiDriveNeighbours.map(({ image, name }) => (
<div
key={name}
className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center"
>
<img
src={image}
alt={name}
className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
/>
<div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">
{name}
</div>
<CustomScrollBar containerRef={neighboursRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden"/>
</>
)
</div>
))}
</div>
<CustomScrollBar
containerRef={neighboursRef}
inlinePadding={16}
trackStyle="md:hidden"
thumbStyle="md:hidden"
/>
</>
);
}
export default MarasiDriveNeighboursSliderMobile
export default MarasiDriveNeighboursSliderMobile;
src/components/Slider.tsx
+2 -2
View File
@@ -96,7 +96,7 @@ function Slider({
onlyIcon
onClick={handlePreviousSlide}
disabled={currentSlide === 0}
className="disabled:!text-opacity-40 disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
className="disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
>
<span className="size-5">
<ArrowLeftIcon />
@@ -112,7 +112,7 @@ function Slider({
disabled={
currentSlide === dubaiMarinaSlider[categoryName].length - 1
}
className="disabled:!text-opacity-40 disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
className="disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
>
<span className="size-5">
<ArrowRightIcon />
src/components/SliderMobile.tsx
+26 -26
View File
@@ -1,11 +1,11 @@
import { motion, useScroll, useTransform } from 'framer-motion';
import Slider from './Slider';
import { useRef } from 'react';
import { motion, useScroll, useTransform } from "framer-motion";
import Slider from "./Slider";
import { useRef } from "react";
function SliderMobile() {
const sliderMobileRef = useRef(null);
const { scrollYProgress } = useScroll({
target: sliderMobileRef,
offset: ['start start', 'end end'],
offset: ["start start", "end end"],
});
const opacityFirstSlide = useTransform(
@@ -27,78 +27,78 @@ function SliderMobile() {
return (
<div
className='min-md:hidden flex flex-col gap-[6.667vw]'
className="md:hidden flex flex-col gap-[6.667vw]"
ref={sliderMobileRef}
>
<motion.div
className='sticky top-[18vw] h-full flex flex-col gap-[6.667vw]'
className="sticky top-[18vw] h-full flex flex-col gap-[6.667vw]"
style={{ opacity: opacityFirstSlide }}
>
<div className='h-[2px] bg-gray-300 w-full'></div>
<div className="h-[2px] bg-gray-300 w-full"></div>
<h5
className={
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center р-10'
"text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center р-10"
}
>
Wellness
</h5>
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
<p className="text-m text-center text-[#0D1922]/70 mt-[-2.222vw]">
Unlock your inner zen in our wellness playground
</p>
<Slider categoryName='Wellness' />
<Slider categoryName="Wellness" />
</motion.div>
<motion.div
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
className="sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white"
style={{ opacity: opacitySecondSlide }}
>
<div className='h-[2px] bg-gray-300 w-full'></div>
<div className="h-[2px] bg-gray-300 w-full"></div>
<h5
className={
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
"text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center"
}
>
Fitness
</h5>
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
<p className="text-m text-center text-[#0D1922]/70 mt-[-2.222vw]">
Cancel all your membership. Your new home has it all
</p>
<Slider categoryName='Fitness' />
<Slider categoryName="Fitness" />
</motion.div>
<motion.div
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
className="sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white"
style={{ opacity: opacityThirdSlide }}
>
<div className='h-[2px] bg-gray-300 w-full'></div>
<div className="h-[2px] bg-gray-300 w-full"></div>
<h5
className={
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
"text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center"
}
>
Community
</h5>
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
<p className="text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10">
Connect. Engage. Thrive.
</p>
<Slider categoryName='Community' />
<Slider categoryName="Community" />
</motion.div>
<motion.div
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] z-1 bg-white'
className="sticky h-full top-[18vw] flex flex-col gap-[6.667vw] z-1 bg-white"
style={{ opacity: opacityFourthSlide }}
>
<div className='h-[2px] bg-gray-300 w-full'></div>
<div className="h-[2px] bg-gray-300 w-full"></div>
<h5
className={
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
"text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center"
}
>
Convenience
</h5>
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
<p className="text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10">
Your smart living hub
</p>
<Slider categoryName='Convenience' />
<Slider categoryName="Convenience" />
</motion.div>
<div className='h-[40vw]'></div>
<div className="h-[40vw]"></div>
</div>
);
}
src/components/UnitTypesSelect.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ function UnitTypesSelect({
"2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] cursor-pointer text-s",
selectedUnitTypes.includes(unitType)
? "ring-[#00BED7]"
: "ring-[#E2E2DC] text-opacity-70"
: "ring-[#E2E2DC] text-[#0D1922]/70"
)}
>
{formattedUnitTypes.get(unitType)}
src/components/ui/Badge.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ function Badge({ variant, text, className }: BadgeProps) {
className={clsx(
"2xl:rounded-[0.278vw] rounded-lg 2xl:px-[0.556vw] 2xl:py-[0.139vw] px-2 py-1 w-fit",
variant === "primary" && "bg-[#00BED7] text-white",
variant === "secondary" && "bg-[#F3F3F2] text-opacity-70",
variant === "secondary" && "bg-[#F3F3F2] text-[#0D1922]/70",
className
)}
>
src/components/ui/Button.tsx
+6 -6
View File
@@ -26,7 +26,7 @@ function Button({
ref={ref}
{...props}
className={clsx(
"transition-all flex items-center justify-center disabled:text-opacity-40 disabled:bg-[#0D1922] disabled:bg-opacity-[8%] disabled:!cursor-default select-none text-btn-s",
"transition-all flex items-center justify-center disabled:text-[#0D1922]/40 disabled:bg-[#0D1922] disabled:bg-opacity-[8%] disabled:!cursor-default select-none text-btn-s",
variant !== "link" && [
size === "large" &&
(onlyIcon
@@ -34,8 +34,8 @@ function Button({
: "2xl:px-[1.111vw] 2xl:py-[0.833vw] 2xl:gap-[0.556vw] px-4 py-3 gap-2"),
size === "medium" &&
(onlyIcon
? "2xl:p-[0.694vw] p-2.5"
: "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] px-3 py-2.5 gap-1"),
? "2xl:p-[0.694vw] p-[10px]"
: "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] px-3 py-[10px] gap-1"),
size === "small" &&
(onlyIcon
? "2xl:p-[0.556vw] p-2"
@@ -43,13 +43,13 @@ function Button({
],
variant === "link" && "text-sm text-black/50 w-fit",
variant === "cta" &&
"bg-[#00BED7] hover:!bg-[#0AB3C9] text-white disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-opacity-40",
"bg-[#00BED7] hover:!bg-[#0AB3C9] text-white disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-[#0D1922]/40",
variant === "primary" &&
"bg-[#F3F3F2] active:!bg-[#00BED7] active:!text-[#FFFFFF] hover:!bg-[#E2E2DC] disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:!text-[#0D1922]/40",
variant === "secondary" &&
"bg-white hover:!bg-white hover:bg-opacity-80 text-opacity-70 disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-[#0D1922]/40",
"bg-white hover:!bg-white hover:bg-opacity-80 text-[#0D1922]/70 disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-[#0D1922]/40",
variant === "tertiary" &&
"text-xs leading-[135%] text-opacity-70 !px-0 hover:!text-opacity-100 disabled:!bg-transparent",
"text-xs leading-[135%] text-[#0D1922]/70 !px-0 hover:!text-[#0D1922] disabled:!bg-transparent",
roundedFull ? "rounded-full" : "2xl:rounded-[0.833vw] rounded-xl",
className
)}
src/components/ui/MultiRangeSlider.tsx
+2 -2
View File
@@ -99,10 +99,10 @@ function MultiRangeSlider({
<div className="2xl:space-y-[0.556vw] space-y-2">
<p className="text-s text-[#0D1922]/70">{label}</p>
<div className="bg-white/80 2xl:rounded-[0.833vw] rounded-xl relative 2xl:px-[1.111vw] 2xl:py-[0.972vw] px-4 py-3.5 flex justify-between 2xl:ring-[0.069vw] ring-1 ring-[#E2E2DC]">
<p className={clsx("text-s", disabled && "text-opacity-40")}>
<p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
{Intl.NumberFormat("en").format(Math.ceil(value[0]))}
</p>
<p className={clsx("text-s", disabled && "text-opacity-40")}>
<p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
{Intl.NumberFormat("en").format(Math.ceil(value[1]))}
</p>
<div className="absolute bottom-0 left-0 w-full 2xl:px-[1.111vw] px-4 translate-y-1/2">
src/pages/SearchPage.tsx
+1 -1
View File
@@ -323,7 +323,7 @@ function SearchPage() {
window.location.href = "/search";
}}
>
<span className="2xl:size-[1.111vw] size-4 text-opacity-70">
<span className="2xl:size-[1.111vw] size-4 text-[#0D1922]/70">
<RestartIcon />
</span>
<span className="text-caption-m">Reset</span>