Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client-120

src/components/AboutMarasiDrive.tsx

@@ -28,24 +28,13 @@ 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">
@@ -71,6 +60,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 ">
@@ -105,12 +95,12 @@ function AboutMarasiDrive() {
             {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"
+                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}

src/components/MarasiDriveInteriorsSliderMobile.tsx

@@ -9,7 +9,7 @@ function MarasiDriveInteriorsSliderMobile() {
     <>
       <div
         ref={interiorsRef}
-        className="flex 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"
+        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
@@ -27,6 +27,8 @@ function MarasiDriveInteriorsSliderMobile() {
           </div>
         ))}
       </div>
+      {/* ))} */}
+      {/* </div> */}
       <CustomScrollBar
         containerRef={interiorsRef}
         inlinePadding={16}

src/components/MarasiDriveMapMobile.tsx

@@ -6,7 +6,7 @@ function MarasiDriveMapMobile() {
   const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="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

@@ -9,7 +9,7 @@ function MarasiDriveNeighboursSliderMobile() {
     <>
       <div
         ref={neighboursRef}
-        className="flex 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"
+        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