about pc, tablet, mobile;

src/components/about/AboutSectionHeading.tsx

@@ -1,20 +1,23 @@
 import React from "react";
+import clsx from "clsx";
 
 interface AboutSectionHeadingProps {
   title: string;
-  description: string;
+  description: React.ReactNode;
+  className?: string;
 }
 
 export default function AboutSectionHeading({
   title,
   description,
+  className,
 }: AboutSectionHeadingProps) {
   return (
-    <div className="">
-      <div className="pt-[0.556vw] pr-[14.722vw] pb-[4.694vw] w-max float-left web-caption text-[#A7A08E]">
+    <div className={clsx("max-2xl:flex max-2xl:flex-col", className)}>
+      <div className="2xl:pt-[0.556vw] 2xl:pr-[14.722vw] 2xl:pb-[4.694vw] md:pb-[3.125vw] pb-[6.667vw] w-max float-left caption text-[#A7A08E] font-[Poppins]">
         {title}
       </div>
-      <p className="web-h2">{description}</p>
+      <p className="2xl:h2 md:h3 subheadline-m font-[NewYork]">{description}</p>
     </div>
   );
 }

src/components/about/ComunityCard.tsx

@@ -17,14 +17,16 @@ export default function ComunityCard({
   return (
     <div
       className={clsx(
-        "flex flex-col text-[#324D43] bg-[#F0EDE6] 2xl:rounded-[1.111vw] 2xl:p-[1.389vw] 2xl:gap-[2.222vw]",
+        "flex flex-col justify-between text-[#324D43] bg-[#F0EDE6] 2xl:rounded-[1.111vw] md:rounded-[2.083vw] rounded-[4.444vw] 2xl:p-[1.389vw] 2xl:gap-[2.222vw] md:gap-[4.167vw] gap-[6.667vw] md:p-[2.604vw] p-[4.444vw]",
         className
       )}
     >
-      <span className="size-[2.778vw] flex">{icon}</span>
-      <div className="flex flex-col gap-[0.556vw]">
-        <span className="web-number ">{number}</span>
-        <p className="text-s">{text}</p>
+      <span className="2xl:size-[2.778vw] md:size-[5.208vw] size-[6.667vw] flex">
+        {icon}
+      </span>
+      <div className="flex flex-col 2xl:gap-[0.556vw] md:gap-[1.042vw] gap-[2.222vw]">
+        <span className="2xl:number md:number h3 font-[NewYork]">{number}</span>
+        <p className="2xl:text-s md:text-s caption font-[Poppins]">{text}</p>
       </div>
     </div>
   );

src/components/about/accordeons/ShopInStyleAccordeonContent.tsx

@@ -1,20 +1,24 @@
-import React from "react";
-
 export default function ShopInStyleAccordeonContent() {
   return (
-    <div className="pl-[23.889vw] flex justify-between items-end">
-      <div className="w-[22.778vw]">
-        <p className="text-s text-[#324D4399]">
+    <div className="2xl:pl-[23.889vw] md:pl-0 flex max-md:flex-col justify-between items-end">
+      <div className="2xl:w-[22.778vw] md:w-[42.708vw] w-full">
+        <p className="text-s text-[#324D4399] font-[Poppins]">
           A world class shopping experience including a wide mix of
           multinational, local brands, anchor stores and traditional souks
           serving as a one stop destination.
         </p>
-        <hr className="my-[1.667vw] h-[1px] bg-[#ECE8DF]" />
-        <div className="text-[#324D43] text-s">
-          <div className="mb-[1.111vw]">Featuring more than</div>
-          <div className="web-number mb-[0.556vw]">229</div>
-          <div className="mb-[1.111vw]">retail stores</div>
-          <p>
+        <hr className="2xl:my-[1.667vw] md:my-[3.125vw] my-[6.667vw] h-[1px] bg-[#ECE8DF]" />
+        <div className="text-[#324D43] text-s font-[Poppins] max-md:mb-[6.667vw]">
+          <div className="2xl:mb-[1.111vw] md:mb-[2.083vw] mb-[4.444vw]">
+            Featuring more than
+          </div>
+          <div className="number max-md:!text-[17.778vw] 2xl:mb-[0.556vw] md:mb-[1.042vw] mb-[2.222vw] font-[NewYork]">
+            229
+          </div>
+          <div className="2xl:mb-[1.111vw] md:mb-[2.083vw] mb-[4.444vw] font-[Poppins]">
+            retail stores
+          </div>
+          <p className="font-[Poppins]">
             Baraha Town, with its numerous stores will be the ultimate fashion
             capital to its shoppers.
           </p>
@@ -22,7 +26,7 @@ export default function ShopInStyleAccordeonContent() {
       </div>
       <img
         src="/img/about/about_accordeon_1.png"
-        className="w-[23.611vw] aspect-[34/24] flex-shrink-0"
+        className="2xl:w-[23.611vw] md:w-[31.25vw] aspect-[34/24] max-md:aspect-[296/212] flex-shrink-0"
         alt=""
       />
     </div>

src/components/pages/AboutPage.tsx

@@ -0,0 +1,195 @@
+import AboutSectionHeading from "../about/AboutSectionHeading";
+import ComunityCard from "../about/ComunityCard";
+import LayoutIcon from "../../icons/LayoutIcon";
+import BedIcon from "../../icons/BedIcon";
+import LampIcon from "../../icons/LampIcon";
+import CarIcon from "../../icons/CarIcon";
+import ParkingIcon from "../../icons/ParkingIcon";
+import ShopIcon from "../../icons/ShopIcon";
+import Accordeon from "../../ui/Accordeon";
+import ShopInStyleAccordeonContent from "../about/accordeons/ShopInStyleAccordeonContent";
+
+export default function About() {
+  return (
+    <section className="2xl:space-y-[8.333vw] md:space-y-[10.417vw] space-y-[22.222vw] bg-[#F7F6F3]">
+      <AboutHero />
+      <AboutBaraha />
+      <BuildingCommunities />
+      <Accordeons />
+    </section>
+  );
+}
+
+function AboutHero() {
+  return (
+    <div className="bg-[url('/img/about/about_main.jpg')] [box-shadow:0_-100px_400px_rgba(0,0,0,0.9)_inset] flex flex-col justify-between items-center 2xl:pt-[1.667vw] md:pt-[2.083vw] pt-[4.444vw] 2xl:pb-[4.444vw] md:pb-[9.375vw] pb-[16.667vw] 2xl:rounded-b-[2.222vw] md:rounded-b-[4.167vw] rounded-b-[8.889vw] w-full 2xl:h-[95.5vh] md:h-[96.4vh] h-[94vh] bg-cover bg-center ">
+      <img
+        src="/img/about/baraha_logo.svg"
+        className="2xl:w-[13.681vw] md:w-[29.948vw] w-[45.556vw]"
+        alt=""
+      />
+      <div className="flex flex-col 2xl:gap-[2.778vw] md:gap-[3.646vw] gap-[6.667vw]">
+        <h1 className="2xl:h1 md:h2 h3 text-white text-center font-[NewYork]">
+          Your Journey to a Perfect&nbsp;Life <br className="max-md:hidden" />{" "}
+          Begins in&nbsp;Baraha&nbsp;Town.
+        </h1>
+        <span className="text-m max-md:text-s text-white text-center block font-[Poppins]">
+          Live, Shop, Work & Dine in the Vibrant Heart <br /> of Abu Hamour.
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function AboutBaraha() {
+  return (
+    <div className="2xl:space-y-[2.778vw] md:space-y-[4.167vw] space-y-[8.889vw] 2xl:px-[2.778vw] md:px-[3.125vw] px-[4.444vw]">
+      <AboutSectionHeading
+        title="ABOUT BARAHA"
+        description={
+          <>
+            Baraha Town is mixed-use development that
+            has&nbsp;been&nbsp;designed to bring retail, residential and
+            commercial offices into one easily accessible location with
+            fantastic transport links to the surrounding area.
+          </>
+        }
+        className="2xl:mb-0 md:mb-[4.167vw] mb-[6.667vw]"
+      />
+      <div className="flex flex-col 2xl:gap-[2.778vw] md:gap-[4.167vw] gap-[8.889vw]">
+        <div className="2xl:ml-[23.889vw] ml-0 flex flex-col 2xl:gap-[1.111vw] md:gap-[2.083vw] gap-[3.333vw] text-s 2xl:max-w-[23.611vw] md:max-w-[44.271vw] text-[#324D4399]">
+          <p className="font-[Poppins]">
+            A state-of-the-art town offering an aspirational journey to its
+            visitors. With its vibrant, colorful buildings, Baraha Town offers
+            the biggest retail, residential, and office spaces in a 3km radius.
+          </p>
+          <p className="font-[Poppins]">
+            Baraha Town will be home to various local and international brand
+            names.
+          </p>
+        </div>
+
+        <div className="flex items-start w-full gap-[1.111vw]">
+          <img
+            className="w-[22.778vw] aspect-[328/188] max-2xl:hidden block object-cover flex-shrink-0"
+            src="/img/about/about_1.png"
+            alt=""
+          />
+          <img
+            src="/img/about/about_2.png"
+            className="flex-1 min-w-0 object-cover md:rounded-[2.083vw] rounded-[4.444vw] md:aspect-[720/289] aspect-[328/289]"
+            alt=""
+          />
+        </div>
+
+        <div className="2xl:ml-[23.819vw] ml-0 flex flex-col gap-[1.111vw] 2xl:h3 md:subheadline-m text-[6.667vw] leading-[110%] text-[#324D4399]">
+          <p className="font-[NewYork]">
+            Baraha Town is more <br /> than a destination; <br />
+            <span className="text-[#324D43]">it’s a journey.</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BuildingCommunities() {
+  return (
+    <div className="2xl:space-y-[2.778vw] 2xl:px-[2.778vw] md:px-[3.125vw] px-[4.444vw]">
+      <AboutSectionHeading
+        title="BUILDING COMMUNITIES"
+        description={
+          <>
+            Baraha Town, with its collection of Retail Stores, <br />
+            Restaurants, Cafes, Hypermarket, Fitness Club,
+            <br /> Medical Clinic, Offices and Residential Apartments, will be
+            an ideal destination for those seeking a new journey.
+          </>
+        }
+        className="2xl:mb-0 md:mb-[4.167vw] mb-[8.889vw]"
+      />
+      <div className="grid 2xl:grid-cols-4 max-2xl:grid-cols-2 grid-rows-3  2xl:gap-[1.111vw] md:gap-[2.083vw] gap-[2.222vw]">
+        <ComunityCard
+          icon={<ShopIcon />}
+          number="356"
+          text="Text"
+          className=""
+        />
+        <ComunityCard
+          icon={<LayoutIcon />}
+          number="61"
+          text="Studio Apartments"
+        />
+        <ComunityCard
+          icon={<BedIcon />}
+          number="91"
+          text="1 Bedroom Apartments"
+        />
+        <ComunityCard
+          icon={<LampIcon />}
+          number="68"
+          text="Commercial Offices"
+        />
+        <ComunityCard
+          icon={<CarIcon />}
+          number="475"
+          text="Above-Ground Parking Spaces"
+          className="2xl:col-start-2 2xl:col-end-3 2xl:row-start-2 2xl:row-end-3"
+        />
+        <ComunityCard
+          icon={<ParkingIcon />}
+          number="1,470"
+          text="Basement Parking Spaces"
+          className="2xl:col-start-3 2xl:col-end-4 2xl:row-start-3 2xl:row-end-4"
+        />
+      </div>
+    </div>
+  );
+}
+
+function Accordeons() {
+  return (
+    <div className="2xl:px-[2.778vw]">
+      <div className="2xl:ml-[23.889vw] ml-0 flex flex-col 2xl:gap-[1.667vw] md:gap-[3.125vw] gap-[4.444vw] 2xl:mb-[4.444vw] md:mb-[4.167vw] mb-[8.889vw] 2xl:px-0 px-[4.444vw] md:px-[3.125vw]">
+        <h2 className="2xl:h2 md:h3 subheadline-m text-[#324D43] font-[NewYork]">
+          Your World, Reimagined
+        </h2>
+        <p className="text-s text-[#324D4399] 2xl:w-[19.583vw] md:w-[42.708vw] font-[Poppins]">
+          Step into Baraha Town, where every aspect <br /> of your daily life is
+          designed for inspiration <br /> and convenience.
+        </p>
+      </div>
+
+      <Accordeon
+        subtitle={"A World-Class Shopping Destination"}
+        label={"Shop in Style"}
+        content={<ShopInStyleAccordeonContent />}
+        open
+      />
+      <Accordeon
+        subtitle={"A World of Flavors on Your Doorstep"}
+        label={"Culinary Experience"}
+        content={<ShopInStyleAccordeonContent />}
+        className="translate-y-[-1px]"
+      />
+      <Accordeon
+        subtitle={"A hub for Baraha Town’s attractions."}
+        label={"Central Plaza"}
+        content={<ShopInStyleAccordeonContent />}
+        className="translate-y-[-2px]"
+      />
+      <Accordeon
+        subtitle={"Your Serene Escape in the City"}
+        label={"Lifestyle Living"}
+        content={<ShopInStyleAccordeonContent />}
+        className="translate-y-[-3px]"
+      />
+      <Accordeon
+        subtitle={"Achieve Perfect Work-Life Balance"}
+        label={"Contemporary Offices"}
+        content={<ShopInStyleAccordeonContent />}
+        className="translate-y-[-4px]"
+      />
+    </div>
+  );
+}

src/components/pages/ContactsPage.tsx

@@ -18,7 +18,7 @@ function ContactsPage() {
   return (
     <div className="2xl:p-[2.778vw_2.778vw_6.667vw] md:p-[24px_24px_96px] p-[16px_16px_88px]">
       <div className="2xl:grid grid-cols-2 2xl:gap-[1.111vw]">
-        <h2 className="2xl:web-h2 md:web-h3 text-2xl max-md:leading-[110%] md:max-2xl:max-w-[63.021vw] max-md:max-w-[328px] [font-family:New_York_Medium]">
+        <h2 className="2xl:h2 md:h3 text-2xl max-md:leading-[110%] md:max-2xl:max-w-[63.021vw] max-md:max-w-[328px] [font-family:New_York_Medium]">
           Enquire about joining this thriving community at the heart
           of Abu Hamour by contacting a member of our sales team today
         </h2>

src/index.css

@@ -21,19 +21,19 @@ body {
     @apply 2xl:text-[0.833vw] text-xs leading-[115%] tracking-[-4%];
   }
 
-  .web-h1 {
+  .h1 {
     @apply 2xl:text-[5.556vw] md:text-[10.417vw] text-[22.222vw] leading-[90%] tracking-[-4%];
   }
 
-  .web-h2 {
+  .h2 {
     @apply 2xl:text-[3.333vw] md:text-[6.25vw] text-[13.333vw] leading-[110%];
   }
 
-  .web-h3 {
+  .h3 {
     @apply 2xl:text-[2.222vw] md:text-[4.167vw] text-[8.889vw] leading-[110%] tracking-[-4%];
   }
 
-  .web-number {
+  .number {
     @apply 2xl:text-[4.444vw] md:text-[8.333vw] text-[8.889vw] md:leading-[100%] leading-[110%] tracking-[-4%];
   }
 
@@ -45,7 +45,11 @@ body {
     @apply 2xl:text-[0.972vw] md:text-[1.823vw] text-[3.889vw] leading-[130%] tracking-[-4%];
   }
 
-  .web-caption {
+  .caption {
     @apply 2xl:text-[0.833vw] text-xs leading-[130%];
   }
+
+  .subheadline-m {
+    @apply 2xl:text-[1.667vw] md:text-[3.125vw] text-[6.667vw] 2xl:leading-[120%] leading-[125%] tracking-[-4%];
+  }
 }

src/main.tsx

@@ -2,7 +2,7 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router";
 import DefaultLayout from "./components/layouts/DefaultLayout.tsx";
-import About from "./pages/About.tsx";
+import About from "./components/pages/AboutPage.tsx";
 import ContactsPage from "./components/pages/ContactsPage.tsx";
 
 const router = createBrowserRouter([

src/pages/About.tsx

@@ -1,194 +0,0 @@
-import AboutSectionHeading from "../components/about/AboutSectionHeading";
-import ComunityCard from "../components/about/ComunityCard";
-import LayoutIcon from "../icons/LayoutIcon";
-import BedIcon from "../icons/BedIcon";
-import LampIcon from "../icons/LampIcon";
-import CarIcon from "../icons/CarIcon";
-import ParkingIcon from "../icons/ParkingIcon";
-import ShopIcon from "../icons/ShopIcon";
-import Accordeon from "../ui/Accordeon";
-import { useState } from "react";
-import ShopInStyleAccordeonContent from "../components/about/accordeons/ShopInStyleAccordeonContent";
-
-export default function About() {
-  return (
-    <section className="2xl:space-y-[8.333vw] bg-[#F7F6F3]">
-      <AboutHero />
-      <AboutBaraha />
-      <BuildingCommunities />
-      <Accordeons />
-    </section>
-  );
-}
-
-function AboutHero() {
-  return (
-    <div className="bg-[url('/img/about/about_main.jpg')] flex flex-col justify-between items-center pt-[1.667vw] pb-[4.444vw] rounded-b-[2.222vw] w-full h-[95vh] bg-cover bg-center ">
-      <img src="/img/about/baraha_logo.svg" className="w-[13.681vw]" alt="" />
-      <div className="flex flex-col gap-[2.778vw]">
-        <h1 className="web-h1 text-white text-center">
-          Your Journey to a Perfect Life <br /> Begins in Baraha Town.
-        </h1>
-        <span className="text-m text-white text-center block">
-          Live, Shop, Work & Dine in the Vibrant Heart <br /> of Abu Hamour.
-        </span>
-      </div>
-    </div>
-  );
-}
-
-function AboutBaraha() {
-  return (
-    <div className="2xl:space-y-[2.778vw]  2xl:px-[2.778vw]">
-      <AboutSectionHeading
-        title="ABOUT BARAHA"
-        description="Baraha Town is mixed-use development that
-        has been designed to bring retail, residential and
-        commercial offices into one easily accessible location
-        with fantastic transport links to the surrounding area."
-      />
-      <div className="flex flex-col gap-[2.778vw]">
-        <div className="ml-[23.889vw] flex flex-col gap-[1.111vw] text-s max-w-[23.611vw] text-[#324D4399]">
-          <p>
-            A state-of-the-art town offering an aspirational journey to its
-            visitors. With its vibrant, colorful buildings, Baraha Town offers
-            the biggest retail, residential, and office spaces in a 3km radius.
-          </p>
-          <p>
-            Baraha Town will be home to various local and international brand
-            names.
-          </p>
-        </div>
-
-        <div className="flex items-start gap-[1.111vw]">
-          <img
-            className="w-[22.778vw] aspect-[328/188] object-cover"
-            src="/img/about/about_1.png"
-            alt=""
-          />
-          <img src="/img/about/about_2.png" alt="" />
-        </div>
-
-        <div className="ml-[23.889vw] flex flex-col gap-[1.111vw] web-h3 text-[#324D4399]">
-          <p>
-            Baraha Town is more <br /> than a destination; <br />
-            <span className="text-[#324D43]">it’s a journey.</span>
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BuildingCommunities() {
-  return (
-    <div className="2xl:space-y-[2.778vw] 2xl:px-[2.778vw]">
-      <AboutSectionHeading
-        title="BUILDING COMMUNITIES"
-        description="Baraha Town, with its collection of Retail Stores,
-          Restaurants, Cafes, Hypermarket, Fitness Club, Medical
-          Clinic, Offices and Residential Apartments, will be an
-          ideal destination for those seeking a new journey."
-      />
-      <div className="grid grid-cols-4 grid-rows-3 gap-[1.111vw] [grid-template-areas: '1_2_3_4'_'5_6_7_8'_'9_10_11_12']">
-        <ComunityCard
-          icon={<ShopIcon />}
-          number="356"
-          text="Text"
-          className=""
-        />
-        <ComunityCard
-          icon={<LayoutIcon />}
-          number="61"
-          text="Studio Apartments"
-        />
-        <ComunityCard
-          icon={<BedIcon />}
-          number="91"
-          text="1 Bedroom Apartments"
-        />
-        <ComunityCard
-          icon={<LampIcon />}
-          number="68"
-          text="Commercial Offices"
-        />
-        <ComunityCard
-          icon={<CarIcon />}
-          number="475"
-          text="Above-Ground Parking Spaces"
-          className="col-start-2 col-end-3 row-start-2 row-end-3"
-        />
-        <ComunityCard
-          icon={<ParkingIcon />}
-          number="1,470"
-          text="Basement Parking Spaces"
-          className="col-start-3 col-end-4 row-start-3 row-end-4"
-        />
-      </div>
-    </div>
-  );
-}
-
-function Accordeons() {
-  const [activeAccordeon, setActiveAccordeon] = useState<number | null>(0);
-
-  function handleAccordeonClick(index: number) {
-    if (activeAccordeon === index) {
-      setActiveAccordeon(null);
-    } else {
-      setActiveAccordeon(index);
-    }
-  }
-
-  return (
-    <div className=" 2xl:px-[2.778vw]">
-      <div className="ml-[23.889vw] flex flex-col gap-[1.667vw] mb-[4.444vw]">
-        <h2 className="web-h2 text-[#324D43]">Your World, Reimagined</h2>
-        <p className="text-s text-[#324D4399] w-[19.583vw]">
-          Step into Baraha Town, where every aspect <br /> of your daily life is
-          designed for inspiration <br /> and convenience.
-        </p>
-      </div>
-
-      <Accordeon
-        subtitle={"A World-Class Shopping Destination"}
-        label={"Shop in Style"}
-        content={<ShopInStyleAccordeonContent />}
-        open={activeAccordeon === 0}
-        onClick={() => handleAccordeonClick(0)}
-      />
-      <Accordeon
-        subtitle={"A World of Flavors on Your Doorstep"}
-        label={"Culinary Experience"}
-        content={<ShopInStyleAccordeonContent />}
-        className="translate-y-[-1px]"
-        open={activeAccordeon === 1}
-        onClick={() => handleAccordeonClick(1)}
-      />
-      <Accordeon
-        subtitle={"A hub for Baraha Town’s attractions."}
-        label={"Central Plaza"}
-        content={<ShopInStyleAccordeonContent />}
-        className="translate-y-[-2px]"
-        open={activeAccordeon === 2}
-        onClick={() => handleAccordeonClick(2)}
-      />
-      <Accordeon
-        subtitle={"Your Serene Escape in the City"}
-        label={"Lifestyle Living"}
-        content={<ShopInStyleAccordeonContent />}
-        className="translate-y-[-3px]"
-        open={activeAccordeon === 3}
-        onClick={() => handleAccordeonClick(3)}
-      />
-      <Accordeon
-        subtitle={"Achieve Perfect Work-Life Balance"}
-        label={"Contemporary Offices"}
-        content={<ShopInStyleAccordeonContent />}
-        className="translate-y-[-4px]"
-        open={activeAccordeon === 4}
-        onClick={() => handleAccordeonClick(4)}
-      />
-    </div>
-  );
-}

src/ui/Accordeon.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React from "react";
+import React, { useState } from "react";
 import ArrowUp from "../icons/ArrowUp";
 import { motion } from "framer-motion";
 
@@ -20,28 +20,36 @@ export default function Accordeon({
   open,
   onClick,
 }: AccordeonProps) {
-  function onAccordeonClick() {
+  const [isOpen, setIsOpen] = useState(open || false);
+
+  function handleAccordeonClick() {
+    setIsOpen(!isOpen);
     onClick?.();
   }
 
   return (
     <div
-      onClick={onAccordeonClick}
+      onClick={handleAccordeonClick}
       className={clsx(
-        "py-[3.333vw] border-y border-[#ECE8DF] hover:cursor-pointer",
+        "2xl:py-[3.333vw] md:py-[5.208vw] py-[6.667vw] 2xl:px-0 md:px-[3.125vw] px-[4.444vw] border-y border-[#ECE8DF] hover:cursor-pointer",
+        isOpen
+          ? "2xl:bg-[radial-gradient(circle_at_center,#F0EDE680_0%,#F0EDE600_80%)] md:bg-[linear-gradient(to_top,#F0EDE680_0%,#F0EDE600_100%)]"
+          : "bg-transparent",
         className
       )}
     >
-      <div className="relative pl-[23.889vw] flex items-center justify-between  ">
-        <p className="text-s text-[#324D4399] absolute left-0 top-1/2 -translate-y-1/2">
+      <div className="relative 2xl:pl-[23.889vw] flex flex-col 2xl:justify-between items-start justify-start md:gap-[1.563vw] gap-[3.333vw]">
+        <p className="text-s max-md:caption text-[#324D4399] 2xl:absolute 2xl:left-0 2xl:top-1/2 2xl:-translate-y-1/2 font-[Poppins]">
           {subtitle}
         </p>
-        <h3 className="web-h3 text-[#324D43] ">{label}</h3>
-        <div className="size-[1.111vw]">
+        <h3 className="2xl:h3 subheadline-m text-[#324D43] font-[NewYork]">
+          {label}
+        </h3>
+        <div className="2xl:size-[1.111vw] md:size-[2.083vw] size-[4.444vw] absolute right-0 top-1/2 -translate-y-1/2">
           <ArrowUp
             className={clsx(
               "transition-transform duration-300",
-              !open && "rotate-180"
+              !isOpen && "rotate-180"
             )}
           />
         </div>
@@ -50,13 +58,15 @@ export default function Accordeon({
       <motion.div
         initial={false}
         animate={{
-          height: open ? "auto" : 0,
-          opacity: open ? 1 : 0,
+          height: isOpen ? "auto" : 0,
+          opacity: isOpen ? 1 : 0,
         }}
         transition={{ duration: 0.3, ease: "easeInOut" }}
         style={{ overflow: "hidden" }}
       >
-        <div className="mt-[1.667vw]">{content}</div>
+        <div className="2xl:mt-[1.667vw] md:mt-[2.083vw] mt-[3.333vw]">
+          {content}
+        </div>
       </motion.div>
     </div>
   );