inmake/IRTH-2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2024-09-10 19:18:51 +05:00
parent 708ed301a9
commit b4be66dcb3
13 changed files with 225 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/public/images/pages/AboutProject/units/mobile/1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

client/public/images/pages/AboutProject/units/mobile/2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

client/public/images/pages/AboutProject/units/mobile/3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

client/public/images/pages/AboutProject/units/mobile/4.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

client/src/components/AboutProject/AdvantageCard.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ function AdvantageCard({ title, image }: Props) {
return (
<div className="space-y-3 ">
<div className="flex">
<img src={image} alt="" className="aspect-video rounded-2xl w-full object-cover pointer-events-none" />
<img src={image} alt="" className="object-cover w-full pointer-events-none aspect-video rounded-2xl" />
</div>
<div className="flex items-center gap-1">
client/src/components/AboutProject/PlaceCard.tsx
+3 -3
View File
@@ -6,15 +6,15 @@ interface Props {
function AboutProjectPlaceCard({ title, desc, image }: Props) {
return (
<div className="bg-white rounded-2xl flex flex-col gap-2 p-3">
<div className="flex flex-col justify-between gap-2 p-3 bg-white max-lg:h-44 rounded-2xl snap-center max-lg:aspect-square">
<div className="space-y-1">
<div className="flex items-center gap-1">
<div className="w-3 h-3 bg-[#00BED7] rounded-full"></div>
<p className="leading-[20px]">{title}</p>
<p className="leading-[20px] text-[#0D1922]">{title}</p>
</div>
<p className="text-[#73787C] text-sm leading-[20px]">{desc}</p>
</div>
<img src={image} alt="" className="w-16 h-16 self-end rounded-xl pointer-events-none" />
<img src={image} alt="" className="self-end w-16 h-16 pointer-events-none rounded-xl" />
</div>
);
}
client/src/components/AboutProject/SliderMobile.tsx
+115
View File
@@ -0,0 +1,115 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useRef, useState } from "react";
import { useSwipeable } from "react-swipeable";
const slides = [
{
image: "/images/pages/AboutProject/slider/1.jpg",
title: "Rove Home",
desc1:
"Rove Home branded residences are an extension of the Rove Hotels brand. These branded residences are for hassle-free living, with personalized expressions of your ideal living environment. ",
desc2:
"We’ve handpicked prime locations to ensure you get the very best. From interiors that uplift and energise, and amenities that are thoughtful and engaging to contemporarily stylish yet cosy apartments, we decided that this is the kind of place where we’d like to live – so we set out to build exactly that. We think you’ll agree.",
},
{
image: "/images/pages/AboutProject/slider/2.jpg",
title: "A home for the young and young-at-heart",
desc1:
"The dynamic essence of Rove comes to life at an all new address - Marasi Drive, Business Bay. Enjoy an urban living experience beyond the ordinary. Join us on this exciting journey as we unfold innovations transforming your daily moments into unforgettable living experiences in true Rove style. ",
desc2:
"Enjoy every facet of contemporary lifestyle living, prioritizing value, efficiency, and a vibrant atmosphere. It is more than just a home.",
},
{
image: "/images/pages/AboutProject/slider/3.jpg",
title: "Marasi Drive",
desc1:
"In the heart of Dubai’s Business Bay, Marasi Drive offers a captivating canal-side stroll in a vibrant central district, blending residential, commercial, and leisure amenities seamlessly. ",
desc2:
"Marasi Drive’s proximity to Downtown Dubai, grants easy access to its iconic attractions, its strategic location ensures seamless connectivity to Al Khail Road and Sheikh Zayed Road, facilitating effortless travel across the city and beyond",
},
{
image: "/images/pages/AboutProject/slider/4.jpg",
title: "Unique and innovative",
desc1:
"At Rove Home Marasi Drive, you can feel the exhilaration in the atmosphere! We’ve expertly crafted an urban oasis where captivating design, vibrant art, and cutting-edge technology come together seamlessly. ",
desc2:
"Our commitment to shaping a space that tickles your artistic sensibilities and ignites your love for innovation is unparalleled. It’s a place that would surely excite and delight Rovers like no other!",
},
];
function SliderMobile() {
const [selectedIndex, setSelectedIndex] = useState<number>(0);
const [width, setWidth] = useState(0);
const refImages = useRef<HTMLDivElement>(null);
const handlers = useSwipeable({
onSwipedLeft: next,
onSwipedRight: prev,
trackMouse: true,
});
function next() {
if (selectedIndex === slides.length - 1) return;
setSelectedIndex((prev) => (prev + 1) % slides.length);
}
function prev() {
if (selectedIndex === 0) return;
setSelectedIndex((prev) => (prev - 1 + slides.length) % slides.length);
}
useEffect(() => {
setWidth(refImages.current!.clientWidth);
}, []);
return (
<div className="space-y-4">
<div
{...handlers}
className="overflow-hidden transition-all duration-300 rounded-2xl"
>
<div
ref={refImages}
className="flex transition-all duration-300"
style={{
transform: `translateX(-${width * selectedIndex}px)`,
}}
>
{slides.map(({ image }, index) => (
<img
key={index}
src={image}
alt=""
className="object-cover aspect-[4/3] pointer-events-none"
/>
))}
</div>
<div className="p-4 space-y-3 bg-white rounded-b-2xl max-sm:min-h-[262px]">
<p className="text-[#00BED7] text-xl font-semibold">
{slides[selectedIndex].title}
</p>
<p className="text-[#73787C] text-xs">
{slides[selectedIndex].desc1}
</p>
<p className="text-[#73787C] text-xs">
{slides[selectedIndex].desc2}
</p>
</div>
</div>
<div className="flex justify-center gap-1 ">
{slides.map((_, index) => (
<div
key={index}
className={`h-2 rounded-full transition-all duration-300 ${
index === selectedIndex
? "bg-[#0D1922] w-6"
: "bg-[#0D1922]/40 w-2"
}`}
></div>
))}
</div>
</div>
);
}
export default SliderMobile;
client/src/components/AboutProject/UnitCard.tsx
+23 -10
View File
@@ -1,3 +1,5 @@
import { isMobile } from "react-device-detect";
interface Props {
title: string;
desc1: string;
@@ -5,32 +7,43 @@ interface Props {
square: number;
price: number;
image: string;
imageMobile: string;
}
function UnitCard({ title, desc1, desc2, square, price, image }: Props) {
function UnitCard({
title,
desc1,
desc2,
square,
price,
image,
imageMobile,
}: Props) {
return (
<div className="grid grid-cols-2">
<div className="p-10 flex flex-col justify-between gap-4 bg-white rounded-2xl">
<div className="relative grid sm:grid-cols-2">
<div className="relative z-20 flex flex-col justify-between gap-8 p-8 bg-white z- lg:p-10 rounded-2xl">
<div className="space-y-4">
<p className="text-2xl text-[#0D1922] font-semibold">{title}</p>
<div className="space-y-2.5 leading-[20px]">
<p className="sm:text-2xl text-xl text-[#0D1922] font-semibold">
{title}
</p>
<div className="space-y-2.5 leading-[20px] text-xs sm:text-sm lg:text-base">
<p>{desc1}</p>
<p>{desc2}</p>
</div>
</div>
<div className="space-y-1">
<p className="text-sm text-[#0D1922]">{square} Sqft</p>
<p className="text-xl text-[#00BED7] font-semibold">
<p className="sm:text-sm text-xs text-[#0D1922]">{square} Sqft</p>
<p className="sm:text-xl text-[#00BED7] font-semibold">
AED {Intl.NumberFormat("ar-AE").format(price)}
</p>
</div>
</div>
<div className="relative">
<div className="absolute h-full w-[10%] -translate-x-[50%] bg-white rounded-r-2xl"></div>
<div className="max-sm:hidden absolute sm:h-full h-[10%] sm:w-[10%] w-full sm:-translate-x-[50%] max-sm:-translate-y-[50%] bg-white sm:rounded-r-2xl rounded-b-2xl"></div>
<img
src={image}
src={isMobile ? imageMobile : image}
alt=""
className="w-full h-full aspect-square object-cover rounded-r-2xl pointer-events-none"
className="max-sm:-translate-y-[10%] object-cover w-full h-full pointer-events-none sm:aspect-square aspect-[16/10] sm:rounded-r-2xl rounded-b-2xl"
/>
</div>
</div>
client/src/components/modals/NavbarModal.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ function NavbarModal() {
}, []);
return (
<div className="fixed top-[56px] left-0 w-full h-[calc(100vh-56px)] bg-[#F3F3F2] z-[99999999] sm:p-4 p-3 space-y-4 overflow-y-auto">
<div className="fixed top-[56px] left-0 w-full h-[calc(100dvh-56px)] bg-[#F3F3F2] z-[99999999] sm:p-4 p-3 space-y-4 overflow-y-auto">
<div className="grid sm:grid-cols-2 gap-2 border-b border-[#E2E2DC] pb-4">
<div className="flex flex-col gap-2">
<a
client/src/components/modals/UnitModal.tsx
+2 -2
View File
@@ -205,7 +205,7 @@ function UnitModal({ unit, type }: Props) {
return (
<div
className={`fixed top-0 left-0 w-full overflow-y-scroll h-screen pt-[56px] z-40 backdrop-blur select-none`}
className={`fixed top-0 left-0 w-full overflow-y-scroll h-dvh pt-[56px] z-40 backdrop-blur select-none`}
>
<div className="flex justify-end min-h-full">
<div className="bg-[#F3F3F2] lg:p-6 p-4 max-w-[1240px] w-full sm:space-y-20 space-y-10">
@@ -424,7 +424,7 @@ function UnitModal({ unit, type }: Props) {
?.imageDesc
}
alt=""
className="lg:max-h-[644px] h-full rounded-2xl pointer-events-none object-cover max-sm:aspect-square"
className="lg:max-h-[644px] sm:h-full rounded-2xl pointer-events-none object-cover max-sm:aspect-square"
/>
{/* <div
className="lg:max-h-[644px] sm:h-full max-sm:aspect-square bg-center bg-no-repeat bg-cover rounded-2xl"
client/src/pages/AboutPage.tsx
+7 -6
View File
@@ -6,12 +6,13 @@ const AboutPage = () => {
Welcome to IRTH – a name etched in legacy
</p>
<div className="space-y-6">
<div className="relative rounded-2xl overflow-hidden bg-gray-900 flex items-center justify-center">
<div className="relative flex items-center justify-center overflow-hidden bg-gray-900 rounded-2xl">
<video
src="/videos/About/IRTH 1_HIGHRES.mp4"
muted
autoPlay
loop
playsInline
></video>
</div>
<div className="grid sm:grid-cols-2 gap-4 text-[#73787C] lg:leading-[27px] leading-[21.6px] lg:text-xl">
@@ -63,7 +64,7 @@ const AboutPage = () => {
<img
src="/images/pages/About/1.jpg"
alt=""
className="rounded-2xl pointer-events-none"
className="pointer-events-none rounded-2xl"
/>
<div className="space-y-1">
<div className="flex items-center gap-1">
@@ -79,8 +80,8 @@ const AboutPage = () => {
Our foundation is built upon three core values
</p>
<div className="space-y-6">
<div className="grid md:grid-cols-3 lg:gap-4 gap-3">
<div className="lg:space-y-9 sm:space-y-6 space-y-6 lg:p-10 p-5 bg-white rounded-2xl">
<div className="grid gap-3 md:grid-cols-3 lg:gap-4">
<div className="p-5 space-y-6 bg-white lg:space-y-9 sm:space-y-6 lg:p-10 rounded-2xl">
<p className="lg:text-2xl sm:text-xl text-[#0D1922] font-semibold leading-[32.4px]">
Trust
</p>
@@ -98,7 +99,7 @@ const AboutPage = () => {
</p>
</div>
</div>
<div className="lg:space-y-9 sm:space-y-6 space-y-6 lg:p-10 p-5 bg-white rounded-2xl">
<div className="p-5 space-y-6 bg-white lg:space-y-9 sm:space-y-6 lg:p-10 rounded-2xl">
<p className="lg:text-2xl sm:text-xl text-[#0D1922] font-semibold leading-[32.4px]">
Strength
</p>
@@ -115,7 +116,7 @@ const AboutPage = () => {
</p>
</div>
</div>
<div className="lg:space-y-9 sm:space-y-6 space-y-6 lg:p-10 p-5 bg-white rounded-2xl">
<div className="p-5 space-y-6 bg-white lg:space-y-9 sm:space-y-6 lg:p-10 rounded-2xl">
<p className="lg:text-2xl sm:text-xl text-[#0D1922] font-semibold leading-[32.4px]">
Agility
</p>
client/src/pages/AboutProjectsPage.tsx
+55 -43
View File
@@ -7,26 +7,27 @@ import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
import Logo2Icon from "../components/icons/Logo2Icon";
import ConsultantCard from "../components/AboutProject/ConsultantCard";
import Slider from "../components/AboutProject/Slider";
import SliderMobile from "../components/AboutProject/SliderMobile";
function AboutProjectsPage() {
const navigate = useNavigate();
return (
<div className="mt-[58px] py-16 space-y-[100px] select-none">
<div className="px-6 space-y-16">
<p className="text-[56px] text-[#0D1922] font-mixcase -tracking-[1.68px] leading-none">
<div className="mt-[58px] sm:py-16 py-10 sm:space-y-[100px] space-y-20 select-none">
<div className="px-4 space-y-16 lg:px-6">
<p className="lg:text-[56px] sm:text-[40px] text-[28px] text-[#0D1922] font-mixcase -tracking-[1.68px] leading-none">
Rove Home this residence a complete ecosystem that has everything
you’ll ever need. This isn’t just where you’ll live.
<br />
It’s where you’ll thrive.
</p>
<div className="flex gap-6">
<div className="min-w-[25%] w-[25%] flex flex-col justify-between gap-6">
<div className="space-y-6">
<div className="flex gap-6 max-lg:flex-col">
<div className="max-lg:order-last lg:min-w-[25%] lg:w-[25%] flex flex-col justify-between gap-6">
<div className="space-y-3 lg:space-y-6">
<p className="text-xs font-semibold text-[#73787C]">
ABOUT ROVE HOME
</p>
<p className="text-2xl font-semibold">
<p className="text-xl font-semibold sm:text-2xl">
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{" "}
@@ -43,23 +44,28 @@ function AboutProjectsPage() {
<img
src="/images/pages/AboutProject/1.jpg"
alt=""
className="aspect-[21/9] h-full w-full rounded-2xl object-cover pointer-events-none"
className="aspect-[16/10] lg:aspect-[21/9] h-full w-full rounded-2xl object-cover pointer-events-none"
/>
</div>
</div>
</div>
<div className="mx-6 relative h-screen">
<Slider />
<div className="relative mx-4 lg:mx-6 sm:h-screen">
<span className="max-sm:hidden">
<Slider />
</span>
<span className="sm:hidden">
<SliderMobile />
</span>
</div>
<div className="px-6 space-y-[140px]">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-6">
<p className="text-xs text-[#73787C] font-semibold">
<div className="lg:px-6 px-4 lg:space-y-[140px] sm:space-y-[100px] space-y-20">
<div className="grid w-screen gap-4 -mx-6 lg:grid-cols-2">
<div className="flex flex-col space-y-4 lg:space-y-6 max-lg:order-last">
<p className="text-xs text-[#73787C] font-semibold px-3">
ROVE AROUND THE CITY
</p>
<div className="grid grid-cols-2 gap-x-4 gap-y-2">
<div className="flex grid-cols-2 max-lg:px-4 max-lg:overflow-x-auto max-lg:w-screen lg:grid lg:gap-x-4 gap-x-2 gap-y-2 snap-x snap-mandatory">
<PlaceCard
title="Burj Khalifa"
desc="10 mins"
@@ -114,18 +120,18 @@ function AboutProjectsPage() {
/>
</div>
</div>
<div className="relative">
<div className="relative px-3">
<img
src="/images/pages/AboutProject/map.jpg"
alt=""
className="pointer-events-none"
/>
<div className="bg-gradient-to-r from-[#f3f3f2] to-transparent to-20% w-full h-full absolute top-0 left-0"></div>
<div className="max-lg:hidden bg-gradient-to-r from-[#f3f3f2] to-transparent to-20% w-full h-full absolute top-0 left-0"></div>
</div>
</div>
<div className="space-y-6">
<div className="space-y-3 sm:space-y-6">
<p className="text-xs text-[#73787C]">ADVANTAGES</p>
<div className="grid grid-cols-2 gap-x-4 gap-y-14">
<div className="grid sm:grid-cols-2 gap-x-4 lg:gap-y-14 sm:gap-y-6 gap-y-5">
<AdvantageCard
title="Community"
image="/images/pages/AboutProject/advantages/1.jpg"
@@ -149,13 +155,13 @@ function AboutProjectsPage() {
</div>
</div>
<div className="space-y-16">
<p className="text-[56px] text-[#0D1922] font-mixcase -tracking-[1.68px] leading-[56px]">
<p className="lg:text-[56px] sm:text-[40px] text-[28px] text-[#0D1922] font-mixcase -tracking-[1.68px] leading-none">
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.
</p>
<div className="space-y-6">
<p className="text-2xl font-semibold w-[40%]">
<p className="sm:text-2xl text-xl font-semibold lg:w-[40%]">
ORI introduces a revolutionary solution to apartment living, where
space is not just a constraint but an opportunity.
</p>
@@ -173,30 +179,32 @@ function AboutProjectsPage() {
<p className="text-[#0D1922]">Effortless</p>
</div>
</div>
<div className="flex gap-4 -translate-x-6 pl-6 pr-2">
<div className="flex gap-3 max-sm:flex-col lg:gap-4">
<img
src="/images/pages/AboutProject/interiors/1.jpg"
alt=""
className="w-[40%] object-cover rounded-2xl pointer-events-none"
/>
<img
src="/images/pages/AboutProject/interiors/2.jpg"
alt=""
className="w-[20%] object-cover rounded-2xl pointer-events-none"
/>
<img
src="/images/pages/AboutProject/interiors/3.jpg"
alt=""
className="w-[40%] object-cover rounded-2xl pointer-events-none"
className="lg:w-[40%] sm:w-[65%] object-cover rounded-2xl pointer-events-none max-sm:aspect-square"
/>
<div className="flex gap-3 lg:gap-4 max-lg:flex-col">
<img
src="/images/pages/AboutProject/interiors/2.jpg"
alt=""
className="lg:w-[40%] max-lg:h-1/2 object-cover rounded-2xl pointer-events-none max-sm:aspect-square"
/>
<img
src="/images/pages/AboutProject/interiors/3.jpg"
alt=""
className="lg:w-[calc(60%-16px)] max-lg:h-1/2 object-cover rounded-2xl pointer-events-none max-sm:aspect-square"
/>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<div className="space-y-3 lg:space-y-4">
<p className="text-xs text-[#73787C] font-semibold">
UNITS DESCRIPTION
</p>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-3 lg:gap-4 lg:grid-cols-2">
<UnitCard
title="Studio flex"
desc1="Live in the future, today. In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living."
@@ -204,6 +212,7 @@ function AboutProjectsPage() {
square={341}
price={1048888}
image="/images/pages/AboutProject/units/1.jpg"
imageMobile="/images/pages/AboutProject/units/mobile/1.jpg"
/>
<UnitCard
title="Studio²"
@@ -212,6 +221,7 @@ function AboutProjectsPage() {
square={390}
price={1138888}
image="/images/pages/AboutProject/units/2.jpg"
imageMobile="/images/pages/AboutProject/units/mobile/2.jpg"
/>
<UnitCard
title="1 Bedroom"
@@ -220,6 +230,7 @@ function AboutProjectsPage() {
square={609}
price={1668888}
image="/images/pages/AboutProject/units/3.jpg"
imageMobile="/images/pages/AboutProject/units/mobile/3.jpg"
/>
<UnitCard
title="2 Bedroom²"
@@ -228,24 +239,25 @@ function AboutProjectsPage() {
square={891}
price={2408888}
image="/images/pages/AboutProject/units/4.jpg"
imageMobile="/images/pages/AboutProject/units/mobile/4.jpg"
/>
</div>
</div>
<div className="space-y-16">
<p className="text-[56px] text-[#0D1922] font-mixcase leading-[56px] -tracking-[1.68px]">
<div className="space-y-10 lg:space-y-16">
<p className="lg:text-[56px] sm:text-[40px] text-[28px] text-[#0D1922] font-mixcase leading-none -tracking-[1.68px]">
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.
</p>
<div className="space-y-6">
<div className="space-y-3 lg:space-y-6">
<p className="text-xs text-[#73787C] font-semibold">
ABOUT THE DEVELOPER
</p>
<div className="flex gap-4">
<div className="min-w-[25%] w-[25%] p-10 bg-white flex flex-col gap-6 justify-between rounded-2xl">
<div className="flex gap-2 sm:gap-4 max-lg:flex-col">
<div className="lg:min-w-[25%] lg:w-[25%] sm:p-10 p-6 bg-white flex flex-col lg:gap-6 gap-4 justify-between rounded-2xl">
<div className="space-y-6">
<Logo2Icon />
<div className="space-y-4">
<div className="space-y-4 max-sm:text-sm">
<p>
IRTH’s vision is long-term, supported with a proactive
approach, swift actions, strong financial backing, and
@@ -263,13 +275,13 @@ function AboutProjectsPage() {
</p>
</div>
</div>
<Button2 onClick={() => navigate("/about")}>Learn more</Button2>
<Button2 onClick={() => navigate("/about")} className="max-lg:min-w-48 min-w-40">Learn more</Button2>
</div>
<div className="w-full">
<img
src="/images/pages/AboutProject/3.jpg"
alt=""
className="rounded-2xl aspect-[21/9] object-cover object-bottom pointer-events-none"
className="rounded-2xl lg:aspect-[21/9] sm:aspect-[16/10] h-full aspect-square object-cover object-bottom pointer-events-none"
/>
</div>
</div>
client/src/pages/SearchPage.tsx
+18 -3
View File
@@ -407,7 +407,7 @@ function SearchPage() {
return (
<div className="pt-[58px] flex select-none relative">
<div
className={`lg:p-6 p-4 min-w-[360px] lg:w-[360px] w-full h-[calc(100vh-56px)] top-0 left-0 max-lg:mt-[56px] sm:space-y-6 space-y-4 border-r border-[#E2E2DC] max-lg:fixed z-10 bg-[#F3F3F2] max-lg:overflow-y-auto ${
className={`lg:p-6 p-4 min-w-[360px] lg:w-[360px] w-full h-[calc(100dvh-56px)] top-0 left-0 max-lg:mt-[56px] sm:space-y-6 space-y-4 border-r border-[#E2E2DC] max-lg:fixed z-10 bg-[#F3F3F2] max-lg:overflow-y-auto ${
!showFilters ? "max-lg:hidden" : ""
}`}
>
@@ -677,7 +677,7 @@ function SearchPage() {
</div>
</div>
</div>
<div className="space-y-3 lg:space-y-4">
<div className="space-y-3 lg:space-y-4 border-b border-[#E2E2DC] pb-12">
<p className="text-[#0D1922] text-sm">View</p>
<div className="grid grid-cols-1 gap-2 lg:grid-cols-1 sm:grid-cols-2">
<div className="flex items-center justify-between p-3 bg-white rounded-lg">
@@ -832,11 +832,26 @@ function SearchPage() {
</div>
</div>
</div>
<div className="pb-2 space-y-6 lg:hidden">
<div className="flex items-center justify-between">
<p className="text-[#00BED7]">{filteredUnits.length} apartments found</p>
<button
className="flex items-center gap-2 py-3"
onClick={refreshFilters}
>
<RestartIcon className="w-5 h-5" />
Reset filters
</button>
</div>
<Button3 className="w-full" onClick={() => setShowFilters(false)}>
Show Apartments
</Button3>
</div>
</div>
<div className="w-full p-4 lg:p-6">
<div className="space-y-6">
<div className="flex max-lg:flex-col gap-6 justify-between pb-4 border-b border-[#E2E2DC]">
<p className="text-2xl font-semibold">
<p className="text-xl font-semibold lg:text-2xl">
<span className="text-[#0D1922]">Units</span>{" "}
{filteredUnits.length}
</p>