sections fix about marasi drive

This commit is contained in:
2025-06-18 17:24:48 +05:00
parent 4e27a63d83
commit b10dea1591
3 changed files with 28 additions and 25 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
VITE_API_URL=http://192.168.1.122:4002
VITE_API_URL=http://192.168.1.168:4002
# VITE_API_URL=http://194.26.138.94:4002
+26 -23
View File
@@ -26,7 +26,7 @@ function AboutMarasiDrive() {
<img
src="/images/about-complex/marasi-drive/main_c.jpg"
alt=""
className="object-cover max-2xl:hidden w-full"
className="object-cover max-2xl:hidden w-full h-full"
/>
<img
src="/images/about-complex/marasi-drive/main-tablet_c.jpg"
@@ -77,8 +77,8 @@ function AboutMarasiDrive() {
</p>
</div>
</section>
<section className="2xl:sticky relative 2xl:top-[-275%] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[5.347vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8 flex flex-col gap-[11.667vw] bg-white w-full overflow-clip">
<div className="flex flex-col 2xl:gap-[4.444vw] md:max-2xl:gap-12 gap-10">
<div className="2xl:sticky relative 2xl:top-[-275%], top-[-135vw] bg-white w-full overflow-clip">
<section className="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 flex flex-col 2xl:gap-[4.444vw] md:max-2xl:gap-12 gap-10">
<div className="flex flex-col 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
<h2 className="font-mixcase-unmixed md:text-h1 text-[28px] leading-none text-center max-md:whitespace-pre-line ">
{`What makes
@@ -90,9 +90,9 @@ function AboutMarasiDrive() {
destination for artful inspiration and cleverly activated spaces.`}
</p>
</div>
<div className="flex gap-[0.556vw]">
<div className="flex max-2xl:flex-wrap max-2xl:justify-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:w-[93.75vw]">
{marasiDriveFeatures.map(({ image, name }) => (
<div key={name}>
<div key={name} className="md:max-2xl:w-[30.208vw]">
<img
src={image}
alt={name}
@@ -101,9 +101,9 @@ function AboutMarasiDrive() {
</div>
))}
</div>
</div>
<div className="flex flex-col 2xl:gap-[4.444vw]">
<div className="flex flex-col gap-[2.222vw] items-center">
</section>
<section className="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">
<h2 className="font-mixcase-unmixed text-h1 text-center">
Expandable Living Solutions
</h2>
@@ -111,7 +111,7 @@ function AboutMarasiDrive() {
{`ORI introduces a revolutionary solution to apartment living,
where space is not just a constraint but an opportunity.`}
</p>
<div className="flex gap-[0.556vw]">
<div className="flex 2xl:gap-[0.556vw] gap-2">
{["Simple", "Safe", "Effortless"].map((text) => (
<TextBox key={text} text={text} />
))}
@@ -128,8 +128,8 @@ function AboutMarasiDrive() {
</div>
))}
</div>
</div>
<div className="flex flex-col 2xl:gap-[4.444vw]">
</section>
<section className="flex flex-col 2xl:gap-[4.444vw] 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] items-center">
<h2 className="font-mixcase-unmixed text-h1 text-center">
Inspired interiors
@@ -142,10 +142,10 @@ function AboutMarasiDrive() {
</p>
</div>
<MarasiDriveInteriorsSlider />
</div>
</section>
<section className="sticky pt-[9.444vw] px-[2.222vw] pb-[5.347vw] flex flex-col gap-[11.667vw] bg-white w-full overflow-clip">
<div className="flex flex-col 2xl:gap-[4.444vw]">
</section>
</div>
<div className="2xl:sticky bg-white w-full overflow-clip">
<section className="flex flex-col 2xl:gap-[4.444vw] 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 items-center 2xl:gap-[2.222vw]">
<h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
{`A home for the young
@@ -162,8 +162,11 @@ function AboutMarasiDrive() {
src="/images/about-complex/marasi-drive/business_bay.jpg"
alt=""
/>
</div>
<div className="h-[calc(27.639vw*5)]" ref={target}>
</section>
<section
className="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}
>
<div className="flex flex-col 2xl:gap-[4.444vw] sticky top-[5vw]">
<div className="flex flex-col items-center 2xl:gap-[2.222vw]">
<h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
@@ -177,8 +180,8 @@ function AboutMarasiDrive() {
</div>
<MarariDriveNeighboursSlider scrollYProgress={scrollYProgress} />
</div>
</div>
<div className="flex flex-col gap-[3.333vw]">
</section>
<section className="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">
<div className="flex flex-col gap-[2.222vw] items-center">
<h2 className="text-h1 font-mixcase-unmixed">
Rove around the city
@@ -201,8 +204,8 @@ function AboutMarasiDrive() {
/>
</div>
</div>
</div>
<div className="flex items-stretch justify-center gap-[1.111vw] px-[10.278vw]">
</section>
<section className="flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:py-[9.444vw] md:max-2xl:py-[104px] md:mx-2xl:px-6 max-md:pt-20 max-md:pb-12 px-4">
<div>
<img
src="/images/about-complex/marasi-drive/podium.png"
@@ -247,8 +250,8 @@ function AboutMarasiDrive() {
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</div>
);
}
+1 -1
View File
@@ -14,7 +14,7 @@ function Footer() {
const { setModal } = useModalStore();
return (
<footer className="z-1a 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl border-t border-[#E2E2DC] bg-white">
<footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl border-t border-[#E2E2DC] bg-white">
<img
src="/images/logo.svg"
className="2xl:w-[5.972vw] w-[86px] cursor-pointer"