Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client-120
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -29,9 +29,12 @@ 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]" />
|
||||
<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">
|
||||
@@ -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">
|
||||
@@ -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"}
|
||||
|
||||
@@ -3,27 +3,40 @@ import CustomScrollBar from "./ui/ScrollBar";
|
||||
import { useRef } from "react";
|
||||
|
||||
function MarasiDriveInteriorsSliderMobile() {
|
||||
const interiorsRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
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">
|
||||
<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">
|
||||
<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 className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<CustomScrollBar containerRef={interiorsRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden"/>
|
||||
{/* ))} */}
|
||||
{/* </div> */}
|
||||
<CustomScrollBar
|
||||
containerRef={interiorsRef}
|
||||
inlinePadding={16}
|
||||
trackStyle="md:hidden"
|
||||
thumbStyle="md:hidden"
|
||||
/>
|
||||
</>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default MarasiDriveInteriorsSliderMobile;
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,24 +5,36 @@ import CustomScrollBar from "./ui/ScrollBar";
|
||||
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">
|
||||
<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">
|
||||
<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 className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<CustomScrollBar containerRef={neighboursRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden"/>
|
||||
<CustomScrollBar
|
||||
containerRef={neighboursRef}
|
||||
inlinePadding={16}
|
||||
trackStyle="md:hidden"
|
||||
thumbStyle="md:hidden"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default MarasiDriveNeighboursSliderMobile
|
||||
export default MarasiDriveNeighboursSliderMobile;
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -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
|
||||
)}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user