sections fix about marasi drive
This commit is contained in:
@@ -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,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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user