inmake/irth-new-client-120
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Marasi Drive about rework

Browse Source
This commit is contained in:
C4rnivore
2026-01-20 13:08:02 +05:00
parent 6b81b2995b
commit bd9b29b8de
8 changed files with 12 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/about-complex/marasi-drive/main-mobile_c.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 127 KiB

public/images/about-complex/marasi-drive/main-tablet_c.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 289 KiB

public/images/about-complex/marasi-drive/main_bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 MiB

public/images/about-complex/marasi-drive/main_c.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 397 KiB

src/components/AboutMarasiDrive.tsx
+9 -21
View File
@@ -28,25 +28,11 @@ function AboutMarasiDrive() {
return (
<div className="relative">
<div className="2xl:sticky relative 2xl:top-[4.444vw]">
<section className="w-full bg-white 2xl:h-[calc(100dvh-4.444vw)] md:max-2xl:h-[calc(100dvh-64px)] h-[calc(100dvh-56px)] max-md:h-[calc(100vw*1.62)] 2xl:p-[2.222vw] 2xl:pt-[5vw] md:max-2xl:p-6 md:max-2xl:pt-10 p-4 pt-8 flex flex-col justify-between">
<div className="absolute inset-0">
<img
src="/images/about-complex/marasi-drive/main_c.jpg"
alt=""
className="object-cover max-2xl:hidden w-full h-full"
/>
<img
src="/images/about-complex/marasi-drive/main-tablet_c.jpg"
alt=""
className="object-cover md:max-2xl:block hidden w-full"
/>
<img
src="/images/about-complex/marasi-drive/main-mobile_c.jpg"
alt=""
className="object-cover md:hidden max-md:w-[100%]"
/>
</div>
<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: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,6 +57,7 @@ function AboutMarasiDrive() {
</p>
</div>
</section>
<section>
<div className="space-y-6 bg-white px-4 py-8 md:hidden">
<h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line ">
@@ -84,6 +71,7 @@ function AboutMarasiDrive() {
</p>
</div>
</section>
</div>
<div className="2xl:sticky relative 2xl:top-[-134vw]">
<section className="bg-white w-full overflow-clip 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">
@@ -100,11 +88,11 @@ function AboutMarasiDrive() {
</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">
{marasiDriveFeatures.map(({ image, name }) => (
<div key={name} className="relative md:max-2xl: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] max-md:!aspect-[328/287] max-md:rounded-2xl md:max-2xl:rounded-[3.125vw]"
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>
</div>
src/components/MarasiDriveInteriorsSliderMobile.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ function MarasiDriveInteriorsSliderMobile(){
return(
<>
<div ref={interiorsRef} className="flex min-md: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">
<img
src/components/MarasiDriveMapMobile.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ function MarasiDriveMapMobile() {
const containerRef = useRef<HTMLDivElement>(null);
return (
<div className="min-2xl:hidden relative flex flex-col">
<div className="hidden relative max-md:flex flex-col">
<div className="max-md:aspect-[328/544] md:max-2xl:aspect[1/1] max-2xl:mb-4">
<img
src="/images/about-complex/marasi-drive/map/map.png"
src/components/MarasiDriveNeighboursSliderMobile.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ function MarasiDriveNeighboursSliderMobile(){
return(
<>
<div ref={neighboursRef} className="flex min-md: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">
<img