From b021168c7ae4e607aa0597fb5115aa3dbe147c16 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Thu, 4 Jul 2024 19:22:02 +0500
Subject: [PATCH] modals

---
 client/src/components/Button.tsx              |  4 +-
 client/src/components/Logo.tsx                |  2 +-
 .../complexPage/ComplexTopPanel.tsx           |  9 ++--
 .../MobileApartmentDescription.tsx            | 10 ++--
 .../SequenceWing/MobileFloorDescription.tsx   |  2 +-
 .../SkygardenSidebar/ActivityCard.tsx         |  2 +-
 .../SkygardenIndoorLayout.tsx                 |  1 +
 .../SkygardenOutdoorLayout.tsx                |  1 +
 .../SkygardenSidebar/ZoneSlider.tsx           | 26 +++++----
 .../modals/mobile/SkygardenModal.tsx          | 23 ++++----
 .../modals/mobile/WingFloorModal.tsx          | 33 ++++++------
 client/src/consts/buttonStyles.ts             |  2 +-
 client/src/index.css                          | 53 ++++++++++---------
 client/tailwind.config.js                     | 24 ++++++++-
 14 files changed, 116 insertions(+), 76 deletions(-)

diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index d1e27ea..c2a07ab 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -43,9 +43,9 @@ const Button = ({
       type={type}
       disabled={disabled}
       onClick={onClick}
-      className={`zoom-280 min-w-10 max-h-10 ${rounded}  ${
+      className={`zoom-280 min-w-[40px] max-h-[40px] ${rounded}  ${
         icon && !text ? "p-[10px] " : padding
-      }  transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
+      }  transition-all duration-300 ease-in-out text-[16px] pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
         className ? className : ""
       }`}
     >
diff --git a/client/src/components/Logo.tsx b/client/src/components/Logo.tsx
index 5389668..54366d4 100644
--- a/client/src/components/Logo.tsx
+++ b/client/src/components/Logo.tsx
@@ -14,7 +14,7 @@ const Logo = ({ className = "" }: LogoProps) => {
 
   return (
     <div
-      className={`zoom-280 text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
+      className={`zoom-280 text-[#0D1922] py-[16px] px-[24px] border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
       onClick={handleOnLogoClick}
     >
       <LogoIcon />
diff --git a/client/src/components/complexPage/ComplexTopPanel.tsx b/client/src/components/complexPage/ComplexTopPanel.tsx
index e0a508d..a29496f 100644
--- a/client/src/components/complexPage/ComplexTopPanel.tsx
+++ b/client/src/components/complexPage/ComplexTopPanel.tsx
@@ -15,7 +15,7 @@ import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
 import MasterplanFiltersModal from "../modals/mobile/MasterplanFiltersModal";
 
 const ComplexTopPanel = () => {
-  const { setModal } = useModal();
+  const { setModal, modal } = useModal();
   const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
   const { setIsSidebar, isSidebar } = useWingSidebar();
   const navigate = useNavigate();
@@ -119,11 +119,14 @@ const ComplexTopPanel = () => {
         </div>
         <div className="flex flex-col col-start-1 col-span-4 text-white text-center items-start text-[53.25px] pt-[45px]">
           <div
-            className={`text-center duration-300 ease-in-out transition-opacity`}
+            className={`text-left duration-300 ease-in-out transition-opacity flex flex-col ${
+              modal ? "opacity-0" : "opacity-100"
+            }`}
           >
-            <h2 className="font-semibold text-[56.5px] drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
+            <h2 className="font-semibold text-[56.25px] drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
               ROVE Home Marasi Drive
             </h2>
+            <p className="text-s">Select а floor</p>
           </div>
         </div>
       </div>
diff --git a/client/src/components/complexWingPage/MobileApartmentDescription.tsx b/client/src/components/complexWingPage/MobileApartmentDescription.tsx
index 9a5c0c3..1603123 100644
--- a/client/src/components/complexWingPage/MobileApartmentDescription.tsx
+++ b/client/src/components/complexWingPage/MobileApartmentDescription.tsx
@@ -58,7 +58,7 @@ const MobileApartmentDescription = ({
       {apartment && (
         <div className="p-6 py-3">
           <div
-            className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2  duration-300 ease-in-out transition-opacity min-w-[344px]`}
+            className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 duration-300 ease-in-out transition-opacity min-w-[825px]`}
           >
             <h2 className="text-[#0D1922] font-semibold pt-6">
               {apartment?.Unit_Type},{" "}
@@ -80,16 +80,18 @@ const MobileApartmentDescription = ({
           </p> */}
               {isVirtualTourAvailiable && (
                 <div
-                  className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg opacity-100`}
+                  className={`bg-[#30B21614] text-[#30B216] px-[19.2px] py-[9.6px] flex gap-[9.6px] items-center rounded-lg opacity-100`}
                 >
-                  <VirtualTourIcon />
+                  <div className="zoom-280">
+                    <VirtualTourIcon />
+                  </div>
                   <p className="text-caption-m font-semibold text-[#30B216]">
                     3D-tour
                   </p>
                 </div>
               )}
             </div>
-            <div className="w-0 h-0 border-transparent border-t-[14px] border-x-[6px] border-b-0 absolute left-6 -bottom-[13px] border-t-white"></div>
+            <div className="w-0 h-0 border-transparent border-t-[33px] border-x-[14px] border-b-0 absolute left-[57.6px] -bottom-[32px] border-t-white"></div>
             <div className="w-full pb-6 ">
               <Button
                 buttonType="cta"
diff --git a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
index 785f190..b302b4e 100644
--- a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
@@ -18,7 +18,7 @@ const MobileFloorDescription = ({
   return (
     <>
       <div
-        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[816px]`}
+        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow `}
       >
         <div className="relative">
           <div className="flex justify-between border-b pb-4">
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx b/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx
index e0b9973..6be7fc7 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx
@@ -10,7 +10,7 @@ const ActivityCard = ({ icon, title }: ActivityCardProps) => {
         <div className="w-3 h-3 bg-[#E2E2DC] rounded-full"></div>
         <p className="text-m text-[#0D1922]">{title}</p>
       </div>
-      <div className="w-14 h-14 rounded-lg bg-[#F3F3F2] self-end text-[#00BED7]">
+      <div className="w-[56px] h-[56px] rounded-lg bg-[#F3F3F2] self-end text-[#00BED7] zoom-280">
         {icon}
       </div>
     </div>
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
index d99d610..75efcdf 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
@@ -1,6 +1,7 @@
 function SkygardenIndoorLayout() {
   return (
     <img
+      className="zoom-280"
       src="/images/masterplanWing/skygardenIndoor.png"
       alt=""
       width={672}
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
index 24ae7aa..ae0c11f 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
@@ -1,6 +1,7 @@
 const SkygardenOutdoorLayout = () => {
   return (
     <img
+      className="zoom-280"
       src="/images/masterplanWing/skygardenOutdoor.png"
       width={672}
       height={544}
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx b/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
index ea81b3d..5f42591 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useSwipeable } from "react-swipeable";
-import { Image } from "../../../types/image";
 import { useLayoutEffect, useRef, useState } from "react";
+import { Image } from "../../../types/image";
 import Button from "../../Button";
 import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
-import { isMobile } from "react-device-detect";
 
 const images: Image[] = [
   { id: "1", src: "/images/company/slider/1.png" },
@@ -14,7 +13,7 @@ const images: Image[] = [
 ];
 
 const getGapOffset = (screenWidth: number) => {
-  if (screenWidth > 1600) return 16;
+  if (screenWidth > 1600) return 45;
   if (screenWidth > 1280) return 24;
   if (screenWidth > 640) return 16;
   return 16;
@@ -37,7 +36,8 @@ const ZoneSlider = () => {
     const gapOffset = getGapOffset(screenWidth);
 
     const _rightImageOffset = `${
-      -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
+      // -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
+      -57.5 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
     }px`;
 
     setRightImageOffset(_rightImageOffset);
@@ -50,7 +50,7 @@ const ZoneSlider = () => {
   });
 
   function next() {
-    const lastIndex = isMobile ? images.length - 2 : images.length - 3;
+    const lastIndex = images.length - 3;
 
     if (selectedImageIndex === lastIndex + 1) return;
     setSelectedImageIndex((prev) => prev + 1);
@@ -62,8 +62,10 @@ const ZoneSlider = () => {
   }
 
   return (
-    <div className="flex flex-col gap-6 " {...handlers}>
-      <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] ">
+    <div className="flex flex-col gap-6 pt-[1147px] pb-[96px]" {...handlers}>
+      {/* <div className="flex flex-col gap-6 pt-[1108.5px]" {...handlers}> */}
+      <div className="relative col-span-full overflow-x-hidden flex flex-col h-[892px] border-b">
+        {/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */}
         <div
           className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
           style={{
@@ -81,24 +83,26 @@ const ZoneSlider = () => {
           ))}
         </div>
         <Button
+          isCircleRounded
           onClick={prev}
           icon={<LeftArrowSliderIcon />}
           className="absolute text-[#73787C] top-[calc(50%-22px)] left-8 hidden sm:block"
         />
         <Button
+          isCircleRounded
           onClick={next}
           icon={<RightArrowSliderIcon />}
           className="absolute text-[#73787C] top-[calc(50%-22px)] right-8 hidden sm:block"
         />
       </div>
-      <div className="self-center gap-1 sm:hidden flex">
+      <div className="self-center gap-[4px] sm:hidden flex zoom-280">
         {images.map((image, index) => (
           <div
             key={image.id}
-            className={`transition-all duration-300 ease-in-out rounded-full h-2  ${
+            className={`transition-all duration-300 ease-in-out rounded-full h-[8px]  ${
               index - 1 === selectedImageIndex
-                ? "w-6 bg-[#0D1922]"
-                : "w-2 bg-[#0D192266]"
+                ? "w-[24px] bg-[#0D1922]"
+                : "w-[8px] bg-[#0D192266]"
             }`}
           ></div>
         ))}
diff --git a/client/src/components/modals/mobile/SkygardenModal.tsx b/client/src/components/modals/mobile/SkygardenModal.tsx
index c95de30..f1b7cd1 100644
--- a/client/src/components/modals/mobile/SkygardenModal.tsx
+++ b/client/src/components/modals/mobile/SkygardenModal.tsx
@@ -47,27 +47,28 @@ const SkygardenModal = () => {
 
   return (
     <div
-      className={`h-[calc(100vh-64px)] w-screen pt-[128px] absolute z-[99999999] top-0 duration-300 ease-in-out `}
+      // className={`h-[calc(100vh-78.75px)] w-screen pt-[562.5px] absolute z-[99999999] top-0 duration-300 ease-in-out `}
+      className={`h-[calc(100vh-78.75px)] w-screen pt-[157.5px] absolute z-[99999999] top-0 duration-300 ease-in-out`}
     >
       <div
-        className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out ${
+        className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out h-[405px] pt-[202.5px] ${
           isAnimate ? "opacity-100" : "opacity-0"
         }`}
       >
-        <p className="text-subheadline-s font-semibold">
-          Rove Home Marasi Drive
-        </p>
+        <p className="font-semibold text-[56.25px]">ROVE Home Marasi Drive</p>
         <p className="text-s">Skygarden</p>
       </div>
       <div
         style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
-        className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
+        className="bg-[#F3F3F2] h-full p-[57.5px] pt-0 flex flex-col gap-6 transition-transform ease-in-out relative border-b"
       >
         <div
-          className="w-[calc(100%-48px)] absolute flex justify-center py-3"
+          className="w-[calc(100%-135px)] absolute flex justify-center py-3"
           {...handlers}
         >
-          <MinusIcon />
+          <div className="zoom-280">
+            <MinusIcon />
+          </div>
         </div>
         <div className="pt-6 flex justify-between items-center">
           <div className="flex flex-col">
@@ -76,7 +77,7 @@ const SkygardenModal = () => {
             </h2>
             <p className="text-s">22-23 floor</p>
           </div>
-          <div className="py-[3px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
+          <div className="py-[8.44px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
             17 amenties
           </div>
         </div>
@@ -85,7 +86,7 @@ const SkygardenModal = () => {
             <LayoutSlider />
           </div>
         </div>
-        <div className="grid grid-cols-3 gap-4 border-t pt-4 pb-4 mx-6">
+        <div className="grid grid-cols-3 gap-4 border-t pt-4 pb-4">
           <div className="font-semibold text-subheadline-s">
             Indoor Amenties
           </div>
@@ -99,7 +100,7 @@ const SkygardenModal = () => {
           />
           <ActivityCard title={"Changing Rooms"} icon={<ChangingRoomsIcon />} />
         </div>
-        <div className="grid grid-cols-3 gap-4 border-t py-4 border-b mb-4 mx-6">
+        <div className="grid grid-cols-3 gap-4 border-t py-4 border-b mb-4">
           <div className="font-semibold text-subheadline-s">
             Outdoor Amenties
           </div>
diff --git a/client/src/components/modals/mobile/WingFloorModal.tsx b/client/src/components/modals/mobile/WingFloorModal.tsx
index 63eca7e..76ff86c 100644
--- a/client/src/components/modals/mobile/WingFloorModal.tsx
+++ b/client/src/components/modals/mobile/WingFloorModal.tsx
@@ -115,8 +115,9 @@ const WingFloorModal = ({
     } else {
       const scrollOffsetY = window.scrollY;
       //detect mouse pos
-      const y = event.clientY - 65 + scrollOffsetY - 205;
-      const x = event.clientX - 50;
+      const y = event.clientY - 65 + scrollOffsetY - 650;
+      const x = event.clientX - 140;
+      // const x = event.clientX - 50;
       setMousePos([x, y]);
     }
   }
@@ -142,7 +143,7 @@ const WingFloorModal = ({
   return (
     <>
       <div
-        className={`h-[calc(100vh-64px)] w-screen pt-[128px] absolute z-[99999997] top-0 duration-300 ease-in-out overflow-x-clip`}
+        className={`h-[calc(100vh-78.75px)] w-screen pt-[157.5px] absolute z-[99999997] top-0 duration-300 ease-in-out overflow-x-clip`}
       >
         {isDescVisible && (
           <div
@@ -158,7 +159,7 @@ const WingFloorModal = ({
           </div>
         )}
         <div
-          className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out ${
+          className={`flex flex-col text-white px-4 pb-6 transition-opacity duration-300 ease-in-out h-[405px] pt-[202.5px] ${
             isAnimate ? "opacity-100" : "opacity-0"
           }`}
         >
@@ -172,10 +173,12 @@ const WingFloorModal = ({
           className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
         >
           <div
-            className="w-[calc(100%-48px)] absolute flex justify-center py-3"
+            className="w-[calc(100%-135px)] absolute flex justify-center py-3"
             {...handlers}
           >
-            <MinusIcon />
+            <div className="zoom-280">
+              <MinusIcon />
+            </div>
           </div>
           <div className="pt-6 flex justify-between items-center">
             <div className="flex flex-col">
@@ -184,33 +187,33 @@ const WingFloorModal = ({
               </h2>
               <p className="text-s">{wing}</p>
             </div>
-            <div className="py-[3px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
+            <div className="py-[8.44px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
               {floorApartments.length} units
             </div>
           </div>
           <div className="flex justify-between items-center py-2 px-4 rounded-lg bg-white">
-            <div>{currentFloor?.floor} floor</div>
+            <div className="">{currentFloor?.floor} floor</div>
             <div className="flex items-center justify-center gap-6">
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-5 h-5 flex items-center bg-[#A19E9E] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                <div className="w-[48px] h-[48px] flex items-center bg-[#A19E9E] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
                   1
                 </div>
                 <p className="text-caption-m font-semibold">Studio flex</p>
               </div>
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-5 h-5 flex items-center bg-[#8299AD] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                <div className="w-[48px] h-[48px] flex items-center bg-[#8299AD] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
                   11
                 </div>
                 <p className="text-caption-m font-semibold">Studio</p>
               </div>
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-5 h-5 flex items-center bg-[#BFC9D1] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                <div className="w-[48px] h-[48px] flex items-center bg-[#BFC9D1] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
                   3
                 </div>
                 <p className="text-caption-m font-semibold">1 Bedroom</p>
               </div>
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-5 h-5 flex items-center bg-[#878FA3] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                <div className="w-[48px] h-[48px] flex items-center bg-[#878FA3] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
                   7
                 </div>
                 <p className="text-caption-m font-semibold">2 Bedroom</p>
@@ -221,7 +224,7 @@ const WingFloorModal = ({
             {currentFloor?.wing === "West Wing" ? (
               currentFloor && currentFloor.floor <= 21 ? (
                 <svg
-                  className="rotate-[135deg]"
+                  className="rotate-[135deg] zoom-280"
                   xmlns="http://www.w3.org/2000/svg"
                   width="400"
                   height="500"
@@ -235,7 +238,7 @@ const WingFloorModal = ({
                 </svg>
               ) : (
                 <svg
-                  className="rotate-[135deg]"
+                  className="rotate-[135deg] zoom-280"
                   xmlns="http://www.w3.org/2000/svg"
                   width="400"
                   height="700"
@@ -250,7 +253,7 @@ const WingFloorModal = ({
               )
             ) : (
               <svg
-                className="rotate-[135deg]"
+                className="rotate-[135deg] zoom-280"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 width="672"
diff --git a/client/src/consts/buttonStyles.ts b/client/src/consts/buttonStyles.ts
index 21313c7..a736851 100644
--- a/client/src/consts/buttonStyles.ts
+++ b/client/src/consts/buttonStyles.ts
@@ -32,7 +32,7 @@ const borders: ButtonStyle = {
 
 const paddings: ButtonStyle = {
   cta: "py-[12px] px-[24px]",
-  primary: "py-[10px] pr-[24px] pl-4",
+  primary: "py-[10px] pr-[24px] pl-[16px]",
   secondary: "py-[12px] px-[24px]",
   tertiary: "py-[4px] px-[12px]",
   fab: "py-[12px] px-[24px]",
diff --git a/client/src/index.css b/client/src/index.css
index cf57995..6e0072a 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -169,7 +169,7 @@ html {
     margin: 0;
   }
   /* 1280px - 1600px */
-  @media (max-width: 1600px) {
+  @media (min-width: 1280px) {
     .text-caption-s {
       font-family: "Usual", sans-serif;
       font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
@@ -186,13 +186,15 @@ html {
     .text-s {
       font-family: "Usual", sans-serif;
       line-height: 140%;
-      font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
+      /* font-size: clamp(12px, 0.01rem + 0.93vw, 16px); */
+      font-size: 40px;
     }
 
     .text-m {
       font-family: "Usual", sans-serif;
       line-height: 125%;
-      font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
+      /* font-size: clamp(13px, 0.01rem + 0.99vw, 19px); */
+      font-size: 45px;
     }
 
     .text-subheadline-s {
@@ -204,7 +206,8 @@ html {
 
     .text-subheadline-m {
       font-family: "Usual", sans-serif;
-      font-size: clamp(20px, 0.2477rem + 1.252vw, 28px);
+      /* font-size: clamp(20px, 0.2477rem + 1.252vw, 28px); */
+      font-size: 67.5px;
       line-height: 135%;
     }
 
@@ -228,7 +231,8 @@ html {
     }
 
     .text-caption-m {
-      font-size: clamp(0.625rem, 0.125rem + 1.25vw, 1.125rem);
+      /* font-size: clamp(0.625rem, 0.125rem + 1.25vw, 1.125rem); */
+      font-size: 28.8px;
     }
 
     .text-s {
@@ -241,6 +245,7 @@ html {
 
     .text-subheadline-s {
       font-size: clamp(1rem, 0.25rem + 1.875vw, 1.75rem);
+      /* font-size: clamp(1rem, 0.25rem + 1.875vw, 1.75rem); */
     }
 
     .text-subheadline-m {
@@ -317,29 +322,29 @@ html {
       font-size: clamp(10px, 0.01rem + 0.93vw, 20px);
     }
   }
-}
 
-/* scrollbar */
+  /* scrollbar */
 
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
 
-::-webkit-scrollbar-track {
-  background: #fff;
-}
+  ::-webkit-scrollbar-track {
+    background: #fff;
+  }
 
-::-webkit-scrollbar-thumb {
-  background: #c7bdba;
-  border-radius: 99px;
-}
+  ::-webkit-scrollbar-thumb {
+    background: #c7bdba;
+    border-radius: 99px;
+  }
 
-:fullscreen::backdrop {
-  background: none;
-}
+  :fullscreen::backdrop {
+    background: none;
+  }
 
-body {
-  scrollbar-color: #c7bdba;
-  scrollbar-width: thin;
+  body {
+    scrollbar-color: #c7bdba;
+    scrollbar-width: thin;
+  }
 }
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index c0a48be..48380e5 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -3,23 +3,43 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      borderRadius: {
+        "2xl": "38.4px",
+        lg: "19.2px",
+      },
       borderWidth: {
         DEFAULT: "2.4px",
       },
       padding: {
         6: "67.5px",
         1: "11.25px",
+        4: "45px",
+        3: "33.75px",
+        2: "22.5px",
+      },
+      margin: {
+        6: "67.5px",
+        1: "11.25px",
+        4: "45px",
+        3: "33.75px",
+        2: "22.5px",
       },
       gap: {
         2: "22.5px",
         4: "45px",
         8: "90px",
+        6: "67.5px",
+        9: "101.5px",
       },
-      minHeight: {
-        6: "57.6px",
+      width: {
+        3: "33.75px",
       },
       height: {
         6: "57.6px",
+        3: "33.75px",
+      },
+      minHeight: {
+        6: "57.6px",
       },
       minWidth: {
         6: "57.6px",