Fix typos in "Amenities" across multiple components and data files; refactor related code for consistency. Update brochure links and improve layout in AboutHQ and AboutMarasiDrive components.

2026-01-21 17:47:31 +05:00
parent fe75e9aea0
commit 8ed33a13b1
18 changed files with 84 additions and 111 deletions
@@ -53,7 +53,7 @@ export default function AboutHQ() {
                    {`Welcome to the office you
                    actually want to show up for`}
                    </h4>
-                    <p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
+                    <p className="opacity-70 text-s 2xl:w-1/4 md:max-2xl:w-1/3">
                    HQ by Rove was born out of a question: what if the
                    office could feel alive again? Now, the first
                    ever hospitality-branded office building in Dubai is here to
@@ -65,12 +65,12 @@ export default function AboutHQ() {
                </section>

                <section>
-                <div className="space-y-6 bg-white px-4 py-8 md:hidden">
+                <div className="px-4 py-8 space-y-6 bg-white md:hidden">
                    <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line ">
                    {`Welcome to the office you
                    actually want to show up for`}
                    </h4>
-                    <p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
+                    <p className="opacity-70 text-s 2xl:w-1/4 md:max-2xl:w-1/3">
                    HQ by Rove was born out of a question: what if the
                    office could feel alive again? Now, the first
                    ever hospitality-branded office building in Dubai is here to
@@ -91,7 +91,7 @@ export default function AboutHQ() {
                    <h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line max-md:mb-[24px] md:max-2xl:mb-8 opacity-100">
                    <span className="opacity-40">More than an office,</span> <br className="2xl:hidden" /> a lifestyle.
                    </h2>
-                    <p className="text-s opacity-70 whitespace-pre-line text-center max-md:whitespace-normal max-md:mb-12 md:max-2xl:mb-16">
+                    <p className="text-center whitespace-pre-line opacity-70 text-s max-md:whitespace-normal max-md:mb-12 md:max-2xl:mb-16">
                    {`Living rooms became boardrooms, kitchens became creative hubs.
                        But as the world returned, the office didn’t keep up. HQ by Rove is the
                        answer - an office with a living touch.`}
@@ -286,7 +286,7 @@ export default function AboutHQ() {
            {marasiDriveMapCards.map((card) => (
              <MarasiDriveMapCard {...card} key={card.title} />
            ))}
-            <div className="col-start-3 col-span-full row-start-1 row-span-full">
+            <div className="col-span-full col-start-3 row-span-full row-start-1">
              <img
                src="/images/about-complex/marasi-drive/map/map.png"
                alt=""
@@ -308,7 +308,7 @@ export default function AboutHQ() {
          </div>
          <div className="px-[2.778vw] flex flex-col gap-[3.333vw] max-2xl:px-0 md:max-2xl:gap-[6.25vw]">
            <div className="space-y-[1.111vw]">
-              <h2 className="whitespace-pre-line text-h2 font-medium max-2xl:mb-4">
+              <h2 className="font-medium whitespace-pre-line text-h2 max-2xl:mb-4">
                {`Work looks different here`}
              </h2>
              <p className="opacity-40 text-s max-md:mb-[32px] md:max-2xl:max-w-[57.943vw]">
@@ -327,7 +327,7 @@ export default function AboutHQ() {
                />
                <BrochureButton
                  title={"Technical Brochure"}
-                  link="/files/marasi-drive/Amenties Brochure.pdf"
+                  link="/files/marasi-drive/Amenities Brochure.pdf"
                />
              </div>
            </div>
@@ -53,7 +53,7 @@ function AboutMarasiDrive() {
              {`A home for the young
            and young in heart`}
            </h4>
-            <p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
+            <p className="opacity-70 text-s 2xl:w-1/4 md:max-2xl:w-1/3">
              The dynamic essence of Rove comes to life at our new location in
              Marasi Drive, Business Bay. Enjoy an urban living experience
              beyond the ordinary.
@@ -62,12 +62,12 @@ function AboutMarasiDrive() {
        </section>

        <section>
-          <div className="space-y-6 bg-white px-4 py-8 md:hidden">
+          <div className="px-4 py-8 space-y-6 bg-white md:hidden">
            <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line ">
              {`A home for the young
            and young in heart`}
            </h4>
-            <p className="text-s opacity-70">
+            <p className="opacity-70 text-s">
              The dynamic essence of Rove comes to life at our new location in
              Marasi Drive, Business Bay. Enjoy an urban living experience
              beyond the ordinary.
@@ -79,11 +79,11 @@ function AboutMarasiDrive() {
      <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">
          <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 max-md:whitespace-pre-line">
+            <h2 className="text-center font-mixcase-unmixed text-h1 max-md:whitespace-pre-line">
              {`What makes
              a Rove Home?`}
            </h2>
-            <p className="opacity-70 text-s whitespace-pre-line text-center max-md:whitespace-normal">
+            <p className="text-center whitespace-pre-line opacity-70 text-s max-md:whitespace-normal">
              {`Experience the difference with Rove Home where modern amenities, trendy
              interiors, and smart features cater to your unique style. Rove Home is your
              destination for artful inspiration and cleverly activated spaces.`}
@@ -118,11 +118,11 @@ function AboutMarasiDrive() {
        </section>
        <section className="bg-white w-full overflow-clip 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 max-md:whitespace-pre-line">
+            <h2 className="text-center font-mixcase-unmixed text-h1 max-md:whitespace-pre-line">
              {`Expandable living 
              solutions`}
            </h2>
-            <p className="text-s opacity-70 whitespace-pre-line text-center max-md:whitespace-normal">
+            <p className="text-center whitespace-pre-line opacity-70 text-s max-md:whitespace-normal">
              {`ORI introduces a revolutionary solution to apartment living,
              where space is not just a constraint but an opportunity.`}
            </p>
@@ -158,10 +158,10 @@ function AboutMarasiDrive() {
        </section>
        <section className="bg-white w-full overflow-clip flex flex-col 2xl:gap-[4.444vw] gap-12 2xl:pt-[9.444vw] 2xl:pb-[15vw] 2xl:px-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 max-md:pb-8 max-md:gap-0">
          <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">
+            <h2 className="text-center font-mixcase-unmixed text-h1">
              Inspired interiors
            </h2>
-            <p className="text-s opacity-70 whitespace-pre-line text-center max-md:whitespace-normal max-md:mb-10">
+            <p className="text-center whitespace-pre-line opacity-70 text-s max-md:whitespace-normal max-md:mb-10">
              {`Smart, flexible designs maximize every inch. The ORI Cloud Bed
                expands space by 33%, while the Flexibed transforms living areas
                into bedrooms. Multipurpose layouts adapt effortlessly—blending
@@ -173,14 +173,14 @@ function AboutMarasiDrive() {
        </section>
      </div>
      
-      <div className="2xl:sticky relative">
+      <div className="relative 2xl:sticky">
        <section className="bg-white w-full overflow-clip 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 items-center 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6">
-            <h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
+            <h2 className="text-center whitespace-pre-line font-mixcase-unmixed text-h1">
              {`A home for the young
              and young in heart`}
            </h2>
-            <p className="text-s opacity-70 whitespace-pre-line text-center max-md:whitespace-normal">
+            <p className="text-center whitespace-pre-line opacity-70 text-s max-md:whitespace-normal">
              {`The dynamic essence of Rove comes to life at our new
              location in Marasi Drive, Business Bay. Enjoy an urban
              living experience beyond the ordinary.`}
@@ -201,7 +201,7 @@ function AboutMarasiDrive() {
              <h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line max-md:mb-[24px] md:max-2xl:mb-8">
                {`Explore the neighbourhood`}
              </h2>
-              <p className="text-s opacity-70 whitespace-pre-line text-center max-md:whitespace-normal max-md:mb-12 md:max-2xl:mb-16">
+              <p className="text-center whitespace-pre-line opacity-70 text-s max-md:whitespace-normal max-md:mb-12 md:max-2xl:mb-16">
                {`With Dubai's trendiest spots right at your doorstep, explore nearby
              entertainment and dining experiences in just 15 minutes. Live your best life
              at Rove Home Marasi Drive!`}
@@ -229,7 +229,7 @@ function AboutMarasiDrive() {
            {marasiDriveMapCards.map((card) => (
              <MarasiDriveMapCard {...card} key={card.title} />
            ))}
-            <div className="col-start-3 col-span-full row-start-1 row-span-full">
+            <div className="col-span-full col-start-3 row-span-full row-start-1">
              <img
                src="/images/about-complex/marasi-drive/map/map.png"
                alt=""
@@ -249,7 +249,7 @@ function AboutMarasiDrive() {
          </div>
          <div className="px-[2.778vw] flex flex-col gap-[3.333vw] max-2xl:px-0 md:max-2xl:gap-[6.25vw]">
            <div className="space-y-[1.111vw]">
-              <h2 className="whitespace-pre-line text-h2 font-medium max-2xl:mb-4">
+              <h2 className="font-medium whitespace-pre-line text-h2 max-2xl:mb-4">
                {`Live Different
                with Rove Home`}
              </h2>
@@ -268,8 +268,8 @@ function AboutMarasiDrive() {
                  link="/files/marasi-drive/Main Brochure.pdf"
                />
                <BrochureButton
-                  title={"Amenties Brochure"}
-                  link="/files/marasi-drive/Amenties Brochure.pdf"
+                  title={"Amenities Brochure"}
+                  link="/files/marasi-drive/Amenities Brochure.pdf"
                />
                <BrochureButton
                  title={"Technical Brochure"}
@@ -14,19 +14,19 @@ interface FloorPopupProps {
  onSelect: (floor: string) => void;
 }

-function getAmentiesCount(complexName: string, title: string) {
-  const amenties = projects.find(
+function getAmenitiesCount(complexName: string, title: string) {
+  const amenities = projects.find(
    (proj) => proj.slug === complexName
-  )?.amentiesFloors;
-  return amenties?.find((amenty) => amenty.title === title);
+  )?.amenitiesFloors;
+  return amenities?.find((amenity) => amenity.title === title);
 }

 function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
  const { setPopup } = usePopupStore();
-  const amentiesCount = useMemo(
+  const amenitiesCount = useMemo(
    () =>
      Number.isNaN(+title.at(-1)!)
-        ? getAmentiesCount(complexName, title)
+        ? getAmenitiesCount(complexName, title)
        : null,
    [title, complexName]
  );
@@ -35,16 +35,16 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
    <div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
      <div className="flex 2xl:gap-[0.556vw] gap-2">
        <p className="text-h5 font-medium">
-          {amentiesCount ? title : `${title.split(" ").at(-1)} floor`}
+          {amenitiesCount ? title : `${title.split(" ").at(-1)} floor`}
        </p>
-        {complexName === "marasi-drive" && !amentiesCount && (
+        {complexName === "marasi-drive" && !amenitiesCount && (
          <p className="text-s opacity-40">{title.split(" ")[0]} Wing</p>
        )}
      </div>
      <div className="flex 2xl:gap-[0.278vw] gap-1">
        <p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s opacity-70">
-          {amentiesCount !== null
-            ? `${amentiesCount?.total} Amenties`
+          {amenitiesCount !== null
+            ? `${amenitiesCount?.total} Amenities`
            : `${
                complexName === "marasi-drive" && data
                  ? data[
@@ -57,7 +57,7 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
                  : data?.others.totalUnits
              } apartments`}
        </p>
-        {!amentiesCount && (
+        {!amenitiesCount && (
          <div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216] bg-opacity-[8%] 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
            <span className="2xl:size-[0.833vw] size-3 text-[#30B216]">
              <HumanIcon />
@@ -66,12 +66,12 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
          </div>
        )}
      </div>
-      {((amentiesCount?.indoor && amentiesCount?.outdoor) ||
-        !amentiesCount) && (
+      {((amenitiesCount?.indoor && amenitiesCount?.outdoor) ||
+        !amenitiesCount) && (
        <hr className="border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
      )}
      <div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
-        {!amentiesCount && data ? (
+        {!amenitiesCount && data ? (
          Object.entries(
            data[
              title.split(" ")[0] === "East"
@@ -92,20 +92,20 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
          ))
        ) : (
          <>
-            {amentiesCount?.indoor && (
+            {amenitiesCount?.indoor && (
              <div className="flex 2xl:gap-[0.556vw] gap-2">
                <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:size-[1.111vw] size-4">
-                  {amentiesCount.indoor}
+                  {amenitiesCount.indoor}
                </p>
-                <p className="text-caption-m opacity-70">Indoor Amenties</p>
+                <p className="text-caption-m opacity-70">Indoor Amenities</p>
              </div>
            )}
-            {amentiesCount?.outdoor && (
+            {amenitiesCount?.outdoor && (
              <div className="flex 2xl:gap-[0.556vw] gap-2">
                <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:size-[1.111vw] size-4">
-                  {amentiesCount.outdoor}
+                  {amenitiesCount.outdoor}
                </p>
-                <p className="text-caption-m opacity-70">Outdoor Amenties</p>
+                <p className="text-caption-m opacity-70">Outdoor Amenities</p>
              </div>
            )}
          </>
@@ -13,7 +13,7 @@ function GroundDubaiMarina() {
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
          <p className="text-h4 font-medium">Ground Level</p>
-          <Badge variant="secondary" text="14 Amenties" />
+          <Badge variant="secondary" text="14 Amenities" />
        </div>
        <div className="bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
          <img
@@ -15,7 +15,7 @@ function PodiumDubaiMarina() {
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
          <p className="text-h4 font-medium">Podium</p>
-          <Badge variant="secondary" text="14 Amenties" />
+          <Badge variant="secondary" text="14 Amenities" />
        </div>
        <div className="flex items-center 2xl:gap-[1.667vw] gap-6">
          <AmenitiesBadge count={3} type="Indoor" />
@@ -30,7 +30,7 @@ function RooftopDubaiMarina() {
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
          <p className="text-h4 font-medium">Sky 44 - Rooftop</p>
-          <Badge variant="secondary" text="14 Amenties" />
+          <Badge variant="secondary" text="14 Amenities" />
        </div>
        <div className="bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
          <img
@@ -21,7 +21,7 @@ function GroundMarasiDrive() {
      <div className="space-y-[1.667vw]">
        <div className="space-y-[0.556vw] border-b border-[#E2E2DC] pb-[1.667vw]">
          <p className="text-h4 font-medium">Ground Level</p>
-          <Badge variant="secondary" text="7 Amenties" />
+          <Badge variant="secondary" text="7 Amenities" />
        </div>
        <div className="bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
          <img
@@ -52,7 +52,7 @@ function GroundMarasiDrive() {
        </div>
      </div>
      <div className="space-y-[1.667vw]">
-        <p className="font-medium text-h4">Amenties</p>
+        <p className="font-medium text-h4">Amenities</p>
        <div className="grid md:grid-cols-4 grid-cols-3 gap-[1.111vw]">
          <AmentitiesBadge icon={<RoveCafe />} title="Rove Café" />
          <AmentitiesBadge icon={<LoungingSpaceIcon />} title="Lobby Lounge" />
@@ -41,7 +41,7 @@ function PodiumMarasiDrive() {
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
          <p className="text-h4 font-medium">Podium Level</p>
-          <Badge variant="secondary" text="27 Amenties" />
+          <Badge variant="secondary" text="27 Amenities" />
        </div>
        <div className="flex items-center 2xl:gap-[1.667vw] gap-6">
          <AmenitiesBadge count={13} type="Indoor" />
@@ -76,7 +76,7 @@ function PodiumMarasiDrive() {
        </div>
      </div>
      <div className="2xl:space-y-[1.667vw] space-y-6">
-        <p className="font-medium text-h4">Indoor Amenties</p>
+        <p className="font-medium text-h4">Indoor Amenities</p>
        <div className="grid md:grid-cols-4 grid-cols-3 2xl:gap-[1.111vw] gap-4">
          <AmentitiesBadge icon={<LoungeIcon />} title="Indoor Lounge" />
          <AmentitiesBadge icon={<MonkeyBarsIcon />} title="Monkey Bars" />
@@ -110,7 +110,7 @@ function PodiumMarasiDrive() {
      </div>
      <hr className="border-[#E2E2DC] h-[0.069vw]" />
      <div className="2xl:space-y-[1.667vw] space-y-6">
-        <p className="font-medium text-h4">Outdoor Amenties</p>
+        <p className="font-medium text-h4">Outdoor Amenities</p>
        <div className="grid md:grid-cols-4 grid-cols-3 2xl:gap-x-[1.111vw] 2xl:gap-y-[1.667vw] gap-x-4 gap-y-6">
          <AmentitiesBadge
            icon={<UrbanBeachPoolIcon />}
@@ -23,7 +23,7 @@ function RooftopMarasiDrive() {
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
          <p className="text-h4 font-medium">Rooftop</p>
-          <Badge variant="secondary" text="10 Amenties" />
+          <Badge variant="secondary" text="10 Amenities" />
        </div>
        <div className="bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
          <img
@@ -54,7 +54,7 @@ function RooftopMarasiDrive() {
        </div>
      </div>
      <div className="2xl:space-y-[1.667vw] space-y-6">
-        <p className="font-medium text-h4">Amenties</p>
+        <p className="font-medium text-h4">Amenities</p>
        <div className="grid md:grid-cols-4 grid-cols-3 2xl:gap-[1.111vw] gap-4">
          <AmentitiesBadge icon={<StargazingIcon />} title="Stargazing Point" />
          <AmentitiesBadge icon={<BBQTerraceIcon />} title="BBQ Terrace" />
@@ -32,7 +32,7 @@ function SkyGardenMarasiDrive() {
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
          <p className="text-h4 font-medium">Sky Garden</p>
-          <Badge variant="secondary" text="15 Amenties" />
+          <Badge variant="secondary" text="15 Amenities" />
        </div>
        <div className="flex items-center 2xl:gap-[1.667vw] gap-4">
          <AmenitiesBadge count={3} type="Indoor" />
@@ -67,7 +67,7 @@ function SkyGardenMarasiDrive() {
        </div>
      </div>
      <div className="2xl:space-y-[1.667vw] space-y-6">
-        <p className="font-medium text-h4">Indoor Amenties</p>
+        <p className="font-medium text-h4">Indoor Amenities</p>
        <div className="grid md:grid-cols-4 grid-cols-3 2xl:gap-[1.111vw] gap-4">
          <AmentitiesBadge icon={<PoolIcon />} title="Indoor Lap Pool" />
          <AmentitiesBadge icon={<WellnessIcon />} title="Wellness Features" />
@@ -76,7 +76,7 @@ function SkyGardenMarasiDrive() {
      </div>
      <hr className="border-[#E2E2DC] h-[0.069vw]" />
      <div className="2xl:space-y-[1.667vw] space-y-6">
-        <p className="font-medium text-h4">Outdoor Amenties</p>
+        <p className="font-medium text-h4">Outdoor Amenities</p>
        <div className="grid grid-cols-3 2xl:gap-x-[1.111vw] 2xl:gap-y-[1.667vw] gap-x-4 gap-y-6">
          <AmentitiesBadge icon={<PingPongIcon />} title="Padel Pong" />
          <AmentitiesBadge icon={<SunLoungeIcon />} title="Sun Lounging Deck" />
@@ -37,7 +37,7 @@ export default function BrochuresDropdown() {
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ bounce: 0, duration: 0.3 }}
-            className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[40vw] w-[50vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
+            className="max-2xl:hidden p-[1.111vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[21%] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
          >
            {projectBrochures.map((project, index) => (
              <ProjectBrochuresList
@@ -16,8 +16,8 @@ export default function ProjectBrochuresList({
  const isMobile = variant === "mobile";

  return (
-    <div className="flex-1 space-y-4">
-      <p className="font-medium text-s">{projectTitle}</p>
+    <div className={clsx("space-y-3", isMobile ? "flex-1" : "2xl:w-[15.278vw] w-[220px]")}>
+      <p className="font-semibold whitespace-nowrap text-s">{projectTitle}</p>
      <div
        className={clsx(
          "flex flex-col",
@@ -22,10 +22,10 @@ export default function BrochureButton({
    <Button
      variant="primary"
      size="large"
-      className="w-full !justify-between group"
+      className="w-full !justify-between !2xl:px-[1.389vw] !px-5 !2xl:py-[0.972vw] !py-3.5 group"
      onClick={handleDownload}
    >
-      <span className="text-nowrap text-caption-m duration-300">{title}</span>
+      <span className="text-nowrap text-btn-m duration-300">{title}</span>
      <span className="2xl:size-[1.389vw] size-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
        <DownloadIcon />
      </span>