From 16ef9c5dceb7a6db902c5e4a80e90dc693349665 Mon Sep 17 00:00:00 2001
From: inmake <inmake.ru@gmail.com>
Date: Tue, 22 Apr 2025 13:22:50 +0500
Subject: [PATCH] upd

---
 src/components/Footer.tsx                     | 50 +++++++++----------
 src/components/FullScreenButton.tsx           |  4 +-
 src/components/Header.tsx                     | 28 +++++------
 src/components/Map.tsx                        | 18 +++----
 src/components/ModalContainer.tsx             |  2 +-
 src/components/PrivacyPolicyButton.tsx        |  2 +-
 src/components/SequenceSlider.tsx             | 15 +++---
 src/components/modals/DisclaimerModal.tsx     |  4 +-
 src/components/modals/PrivacyPolicyModal.tsx  | 16 +++---
 src/components/ui/Button.tsx                  | 14 +++---
 src/index.css                                 | 34 +++++++------
 src/layout/DefaultLayout.tsx                  |  2 +-
 src/layout/LayoutWithoutFooter.tsx            |  2 +-
 src/main.tsx                                  |  2 +-
 .../{UnitTypesPages.tsx => UnitTypesPage.tsx} |  0
 vite.config.ts                                |  2 +-
 16 files changed, 98 insertions(+), 97 deletions(-)
 rename src/pages/{UnitTypesPages.tsx => UnitTypesPage.tsx} (100%)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 15c69cb..e508485 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -7,17 +7,17 @@ import TwitterIcon from "./icons/TwitterIcon";
 
 function Footer() {
   return (
-    <footer className="lg:px-[2.222vw] lg:pb-[2.222vw] lg:pt-[2.778vw] md:max-lg:p-6 px-4 py-6 grid md:grid-cols-6 grid-cols-3 lg:grid-rows-2 lg:gap-x-[1.667vw] lg:gap-y-[1.111vw] max-lg:gap-y-6 lg:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC]">
+    <footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid md:grid-cols-6 grid-cols-3 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC]">
       <img
         src="/images/logo.svg"
-        className="lg:w-[5.972vw] w-[86px] cursor-pointer"
+        className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
         onClick={() => {
           window.location.href = "/";
         }}
         alt="IRTH"
       />
 
-      <p className="lg:max-w-[17.083vw] text-s text-[#0D1922]/40 lg:col-start-1 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-2 max-md:row-start-3 max-lg:pt-4 max-lg:border-t border-[#E2E2DC]">
+      <p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-4 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-2xl:pt-4 max-2xl:border-t border-[#E2E2DC]">
         For more information, visit
         <br />
         our website: 
@@ -26,77 +26,77 @@ function Footer() {
         </Link>
       </p>
 
-      <div className="lg:space-y-[0.833vw] space-y-3 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-3 max-md:row-start-4 max-lg:mb-9">
+      <div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-4 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-2xl:mb-9">
         <p className="text-s text-[#0D1922]/40">Follow us for more:</p>
-        <div className="flex lg:gap-[0.278vw] gap-1">
-          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+        <div className="flex 2xl:gap-[0.278vw] gap-1">
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <YoutubeIcon />
             </div>
           </div>
-          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <InstagramIcon />
             </div>
           </div>
-          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <FacebookIcon />
             </div>
           </div>
-          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <LinkedInIcon />
             </div>
           </div>
-          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
-            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <TwitterIcon />
             </div>
           </div>
         </div>
       </div>
 
-      <div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-4 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-4 col-start-1 max-lg:pt-4 max-lg:border-t">
-        <Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
+      <div className="2xl:border-l-[0.069vw] border-[#E2E2DC] 2xl:pl-[1.111vw] flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-4 col-start-1 max-2xl:pt-4 max-2xl:border-t">
+        <Link to={"/"} className="text-m flex-1 content-center max-2xl:py-2.5">
           Map
         </Link>
         <Link
           to={"/unit-types"}
-          className="text-m flex-1 content-center max-lg:py-2.5"
+          className="text-m flex-1 content-center max-2xl:py-2.5"
         >
           Unit Types
         </Link>
         <Link
           to={"/about-irth"}
-          className="text-m flex-1 content-center max-lg:py-2.5"
+          className="text-m flex-1 content-center max-2xl:py-2.5"
         >
           About IRTH
         </Link>
       </div>
 
-      <div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-5 lg:row-start-1 lg:row-span-2 max-lg:col-span-2 max-lg:pt-4 max-lg:border-t">
+      <div className="2xl:border-l-[0.069vw] border-[#E2E2DC] 2xl:pl-[1.111vw] flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-2xl:pt-4 max-2xl:border-t">
         <Link
           to={"/favorites"}
-          className="text-m flex-1 content-center max-lg:py-2.5"
+          className="text-m flex-1 content-center max-2xl:py-2.5"
         >
           Favorites
         </Link>
         <Link
           to={"/search"}
-          className="text-m flex-1 content-center max-lg:py-2.5"
+          className="text-m flex-1 content-center max-2xl:py-2.5"
         >
           Search
         </Link>
-        <Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
+        <Link to={"/"} className="text-m flex-1 content-center max-2xl:py-2.5">
           Brochures
         </Link>
       </div>
 
-      <div className="content-end lg:text-right lg:col-start-6 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-1 md:max-lg:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
+      <div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
         <Link
           to={"/"}
-          className="lg:text-caption-m text-caption-s max-lg:text-[#73787C]"
+          className="2xl:text-caption-m text-caption-s max-2xl:text-[#73787C]"
         >
           Privacy Policy
         </Link>
diff --git a/src/components/FullScreenButton.tsx b/src/components/FullScreenButton.tsx
index a4d07e7..dbc1391 100644
--- a/src/components/FullScreenButton.tsx
+++ b/src/components/FullScreenButton.tsx
@@ -34,10 +34,10 @@ function FullScreenButton({
       onlyIcon
       size="small"
       variant="secondary"
-      className="absolute lg:top-[1.667vw] lg:right-[1.667vw] top-4 right-4"
+      className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] top-4 right-4"
       onClick={handleClick}
     >
-      <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
+      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
         {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
       </span>
     </Button>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8915871..68ab3a7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -12,20 +12,20 @@ function Header() {
   }
 
   return (
-    <div className="sticky top-0 left-0 w-full h-[3.889vw] max-lg:h-14 max-md:h-16 flex items-center justify-center bg-white outline outline-[#E2E2DC]">
-      <div className="flex lg:gap-[1.111vw] gap-4 flex-1">
+    <div className="sticky top-0 left-0 w-full h-16 md:max-2xl:h-18 2xl:h-[4.444vw] flex items-center justify-center bg-white outline outline-[#E2E2DC]">
+      <div className="flex 2xl:gap-[1.111vw] gap-4 flex-1">
         <div
-          className="lg:px-[1.667vw] lg:py-[1.111vw] md:max-lg:p-4 max-md:px-4 max-md:py-5 cursor-pointer"
+          className="2xl:px-[1.667vw] 2xl:py-[1.111vw] md:max-2xl:p-4 max-md:px-4 max-md:py-5 cursor-pointer"
           onClick={handleLogoClick}
         >
           <img
             src="/images/logo.svg"
             alt="logo"
-            className="lg:w-[5.972vw] w-22"
+            className="2xl:w-[5.972vw] w-22"
           />
         </div>
-        <div className="flex lg:gap-[0.278vw] gap-1 items-center max-md:hidden">
-          <span className="lg:w-[1.389vw] w-5 text-[#0D1922]/40">
+        <div className="flex 2xl:gap-[0.278vw] gap-1 items-center max-md:hidden">
+          <span className="2xl:w-[1.389vw] w-5 text-[#0D1922]/40">
             <LocationIcon />
           </span>
           <p className="text-s text-[#0D1922]/40">Dubai</p>
@@ -43,8 +43,8 @@ export default Header;
 
 function NavBar() {
   return (
-    <div className="max-lg:order-2">
-      <nav className="flex lg:gap-[0.556vw] gap-2 items-center max-lg:hidden">
+    <div className="max-2xl:order-2">
+      <nav className="flex 2xl:gap-[0.556vw] gap-2 items-center max-2xl:hidden">
         <NavItem href={"/"} title={"Map"} />
         <NavItem href={"/unit-types"} title={"Unit Types"} />
         <NavItem href={"/about"} title={"About IRTH"} />
@@ -56,7 +56,7 @@ function NavBar() {
         onlyIcon
         variant="secondary"
         size="small"
-        className="lg:hidden !outline !outline-[#E2E2DC] mr-4"
+        className="2xl:hidden !outline !outline-[#E2E2DC] mr-4"
       >
         <span className="w-5 h-5 text-[#0D1922]">
           <BurgerIcon />
@@ -72,7 +72,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
       to={href}
       className={({ isActive }) =>
         clsx(
-          "text-m lg:px-[1.25vw] lg:py-[0.903vw] px-4.5 py-[13px] lg:rounded-[0.833vw] rounded-xl transition-colors duration-300",
+          "text-m 2xl:px-[1.25vw] 2xl:py-[0.903vw] px-4.5 py-[13px] 2xl:rounded-[0.833vw] rounded-xl transition-colors duration-300 !leading-none",
           isActive && "bg-[#00BED7] text-[#FFFFFF]"
         )
       }
@@ -84,7 +84,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
 
 function ProfileBar() {
   return (
-    <Button className="!bg-[#F3F3F2] lg:mr-[2.222vw] mr-4" variant="secondary">
+    <Button className="!bg-[#F3F3F2] 2xl:mr-[2.222vw] mr-4" variant="secondary">
       Login
     </Button>
   );
@@ -96,15 +96,15 @@ function BrochuresDropdown() {
   return (
     <div>
       <button
-        className="lg:px-[0.972vw] lg:py-[0.694vw] px-3.5 py-2.5 flex items-center"
+        className="2xl:px-[0.972vw] 2xl:py-[0.694vw] px-3.5 py-2.5 flex items-center"
         onClick={() => setOpened((prev) => !prev)}
       >
-        <p className="lg:px-[0.278vw] lg:py-[0.208vw] px-1 py-[3px]">
+        <p className="2xl:px-[0.278vw] 2xl:py-[0.208vw] px-1 py-[3px]">
           <span className="text-m">Brochures</span>
         </p>
         <span
           className={clsx(
-            "text-[#0D1922] lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 transition-transform duration-300",
+            "text-[#0D1922] 2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 transition-transform duration-300",
             opened && "rotate-180"
           )}
         >
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 53b7ff8..7ee43d7 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -652,13 +652,13 @@ function Map({ maxZoom = 1 }: MapProps) {
               exit={{ opacity: 0 }}
               className="absolute inset-0 flex items-center justify-center pointer-events-none"
             >
-              <div className="w-fit bg-[#0D1922]/40 lg:rounded-[0.556vw] rounded-lg backdrop-blur-sm lg:space-y-[0.833vw] space-y-3 lg:p-[1.111vw] p-4 text-white">
+              <div className="w-fit bg-[#0D1922]/40 2xl:rounded-[0.556vw] rounded-lg backdrop-blur-sm 2xl:space-y-[0.833vw] space-y-3 2xl:p-[1.111vw] p-4 text-white">
                 <div className="flex items-center justify-center gap-4">
-                  <span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
+                  <span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
                     <MoveIcon />
                   </span>
-                  <div className="w-px lg:h-[1.111vw] h-4 bg-white" />
-                  <span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
+                  <div className="w-px 2xl:h-[1.111vw] h-4 bg-white" />
+                  <span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
                     <TouchIcon />
                   </span>
                 </div>
@@ -672,13 +672,13 @@ function Map({ maxZoom = 1 }: MapProps) {
               exit={{ opacity: 0 }}
               className="absolute inset-0 flex items-center justify-center pointer-events-none"
             >
-              <div className="w-fit bg-[#0D1922]/40 lg:rounded-[0.556vw] rounded-lg backdrop-blur-sm lg:space-y-[0.833vw] space-y-3 lg:p-[1.111vw] p-4 text-white">
+              <div className="w-fit bg-[#0D1922]/40 2xl:rounded-[0.556vw] rounded-lg backdrop-blur-sm 2xl:space-y-[0.833vw] space-y-3 2xl:p-[1.111vw] p-4 text-white">
                 <div className="flex items-center justify-center gap-4">
-                  <span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
+                  <span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
                     <SearchIcon />
                   </span>
-                  <div className="w-px lg:h-[1.111vw] h-4 bg-white" />
-                  <span className="lg:w-[3.333vw] lg:h-[3.333vw] w-12 h-12">
+                  <div className="w-px 2xl:h-[1.111vw] h-4 bg-white" />
+                  <span className="2xl:w-[3.333vw] 2xl:h-[3.333vw] w-12 h-12">
                     <MoveIcon />
                   </span>
                 </div>
@@ -692,7 +692,7 @@ function Map({ maxZoom = 1 }: MapProps) {
         onFullScreenChange={setIsFullScreen}
         onClick={handleFullScreenClick}
       />
-      <div className="absolute lg:right-[1.667vw] lg:bottom-[1.667vw] right-4 bottom-4 flex lg:gap-[0.556vw] gap-2">
+      <div className="absolute 2xl:right-[1.667vw] 2xl:bottom-[1.667vw] right-4 bottom-4 flex 2xl:gap-[0.556vw] gap-2">
         <DisclaimerButton />
         <PrivacyPolicyButton />
       </div>
diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx
index 05836b1..fc73bdd 100644
--- a/src/components/ModalContainer.tsx
+++ b/src/components/ModalContainer.tsx
@@ -74,7 +74,7 @@ function ModalContainer() {
                     className="absolute top-[1.111vw] right-[1.111vw]"
                     onClick={() => setModal(null)}
                   >
-                    <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
+                    <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                       <CloseIcon />
                     </span>
                   </Button>
diff --git a/src/components/PrivacyPolicyButton.tsx b/src/components/PrivacyPolicyButton.tsx
index 80be40d..08a2f84 100644
--- a/src/components/PrivacyPolicyButton.tsx
+++ b/src/components/PrivacyPolicyButton.tsx
@@ -13,7 +13,7 @@ export default function PrivacyPolicyButton() {
       onlyIcon
       onClick={() => setModal(<PrivacyPolicyModal />)}
     >
-      <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
         <QuestionIcon />
       </span>
     </Button>
diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx
index 44f64b6..ec4c87e 100644
--- a/src/components/SequenceSlider.tsx
+++ b/src/components/SequenceSlider.tsx
@@ -109,7 +109,6 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
       <AnimatePresence>
         {imageLoaded < FRAME_COUNT && (
           <motion.div
-            initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-white"
@@ -168,19 +167,19 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
       </AnimatePresence>
       {imageLoaded === FRAME_COUNT && (
         <>
-          <div className="absolute flex lg:gap-[0.556vw] gap-2 lg:left-[1.667vw] lg:top-[1.667vw] left-4 top-4">
+          <div className="absolute flex 2xl:gap-[0.556vw] gap-2 2xl:left-[1.667vw] 2xl:top-[1.667vw] left-4 top-4">
             <Button
               onlyIcon
               variant="secondary"
               className="!bg-white"
               onClick={() => navigate("/")}
             >
-              <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
+              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                 <ArrowLeftIcon />
               </span>
             </Button>
             <Button variant="secondary" size="small" className="max-md:hidden">
-              <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5">
+              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                 <InfoIcon />
               </span>
               <span>About Complex</span>
@@ -199,24 +198,24 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
           <Button
             onlyIcon
             variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 lg:left-[1.111vw] left-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:left-[1.111vw] left-4"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("prev")}
           >
-            <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
               <ArrowLeftIcon />
             </span>
           </Button>
           <Button
             onlyIcon
             variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 lg:right-[1.111vw] right-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:right-[1.111vw] right-4"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("next")}
           >
-            <span className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
               <ArrowRightIcon />
             </span>
           </Button>
diff --git a/src/components/modals/DisclaimerModal.tsx b/src/components/modals/DisclaimerModal.tsx
index cfeef27..65dbcb1 100644
--- a/src/components/modals/DisclaimerModal.tsx
+++ b/src/components/modals/DisclaimerModal.tsx
@@ -1,7 +1,7 @@
 export default function DisclaimerModal() {
   return (
-    <div className="bg-white z-40 lg:rounded-[0.556vw] rounded-lg py-[37px] px-8 lg:w-[29.236vw] md:max-lg:w-[54.818vw] w-full">
-      <h2 className="text-subheadline-m font-semibold py-6 lg:border-t-[0.139vw] border-t-2 border-[#00BED7] w-fit">
+    <div className="bg-white z-40 2xl:rounded-[0.556vw] rounded-lg py-[37px] px-8 2xl:w-[29.236vw] md:max-2xl:w-[54.818vw] w-full">
+      <h2 className="text-subheadline-m font-semibold py-6 2xl:border-t-[0.139vw] border-t-2 border-[#00BED7] w-fit">
         Disclaimer
       </h2>
       <div className="flex flex-col gap-4">
diff --git a/src/components/modals/PrivacyPolicyModal.tsx b/src/components/modals/PrivacyPolicyModal.tsx
index aa488b1..ca9ed3f 100644
--- a/src/components/modals/PrivacyPolicyModal.tsx
+++ b/src/components/modals/PrivacyPolicyModal.tsx
@@ -1,9 +1,9 @@
 function PrivacyPolicyModal() {
   return (
-    <div className="lg:rounded-[1.111vw] bg-white rounded-2xl lg:p-[2.222vw] lg:w-[38.889vw] p-8">
-      <div className="bg-[#00BED7] lg:h-[0.139vw] h-0.5 lg:w-[8.646vw] lg:rounded-[0.208vw] rounded-[3px]" />
+    <div className="2xl:rounded-[1.111vw] bg-white rounded-2xl 2xl:p-[2.222vw] 2xl:w-[38.889vw] p-8">
+      <div className="bg-[#00BED7] 2xl:h-[0.139vw] h-0.5 2xl:w-[8.646vw] 2xl:rounded-[0.208vw] rounded-[3px]" />
       <h2 className="text-subheadline-m font-semibold py-6">
-        Privacy Policy for IRTH Group and its companies:
+        Privacy Policy for IRTH Group and its companies:
       </h2>
       <div className="space-y-4">
         <p className="text-caption-s">
@@ -17,13 +17,13 @@ function PrivacyPolicyModal() {
           <p className="text-caption-m">Information We Collect:</p>
           <ul className="text-caption-s list-disc ml-5">
             <li>
-              Personal Information: We may collect personal information such as
+              Personal Information: We may collect personal information such as
               your name, contact details, and address when you voluntarily
               provide it to us, such as when you register through a form or
               request information
             </li>
             <li>
-              Usage Information: We automatically collect certain information
+              Usage Information: We automatically collect certain information
               about your device and usage of our website, such as your IP
               address, browser type, operating system, pages visited, and time
               spent on each page. This information helps us analyze trends,
@@ -42,19 +42,19 @@ function PrivacyPolicyModal() {
               updates and notifications
             </li>
             <li>
-              To Improve Our Services: We analyze usage data to understand how
+              To Improve Our Services: We analyze usage data to understand how
               our website is accessed and used, identify areas for improvement,
               and enhance the user experience.
             </li>
             <li>
-              To Communicate with You: We may use your contact information to
+              To Communicate with You: We may use your contact information to
               communicate with you about properties, services, promotions, and
               updates. You can opt out of receiving marketing communications at
               any time by following the unsubscribe instructions provided in our
               emails or contacting us directly.
             </li>
             <li>
-              To Protect Our Rights: We may use your information to enforce our
+              To Protect Our Rights: We may use your information to enforce our
               terms of service, protect our rights, or comply with legal
               obligations.
             </li>
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 2a6c42c..dc187a3 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -30,16 +30,16 @@ function Button({
         variant !== "link" && [
           size === "large" &&
             (onlyIcon
-              ? "lg:p-[0.833vw] p-3"
-              : "lg:px-[1.111vw] lg:py-[0.833vw] lg:gap-[0.556vw] px-4 py-3 gap-2"),
+              ? "2xl:p-[0.833vw] p-3"
+              : "2xl:px-[1.111vw] 2xl:py-[0.833vw] 2xl:gap-[0.556vw] px-4 py-3 gap-2"),
           size === "medium" &&
             (onlyIcon
-              ? "lg:p-[0.694vw] p-2.5"
-              : "lg:px-[0.972vw] lg:py-[0.694vw] lg:gap-[0.278vw] px-3 py-2.5 gap-1"),
+              ? "2xl:p-[0.694vw] p-2.5"
+              : "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] px-3 py-2.5 gap-1"),
           size === "small" &&
             (onlyIcon
-              ? "lg:p-[0.694vw] p-2.5"
-              : "lg:px-[0.972vw] lg:py-[0.694vw] lg:gap-[0.278vw] lg:text-[0.833vw] px-3 py-2.5 gap-1 text-xs"),
+              ? "2xl:p-[0.694vw] p-2.5"
+              : "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] 2xl:text-[0.833vw] px-3 py-2.5 gap-1 text-xs"),
         ],
         variant === "link" && "text-sm text-black/50 w-fit",
         variant === "primary" &&
@@ -47,7 +47,7 @@ function Button({
         variant === "secondary" && "bg-white text-[#0D1922]/70",
         variant === "tertiary" &&
           "text-xs leading-[135%] text-[#0D1922]/70 !px-0 hover:text-[#0D1922] disabled:bg-transparent",
-        roundedFull ? "rounded-full" : "lg:rounded-[0.833vw] rounded-xl",
+        roundedFull ? "rounded-full" : "2xl:rounded-[0.833vw] rounded-xl",
         className
       )}
     >
diff --git a/src/index.css b/src/index.css
index a405e4b..7ef378e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,49 +2,51 @@
 @import "tailwindcss";
 
 @theme {
-  --breakpoint-lg: 1440px;
+  --breakpoint-2xl: 1440px;
 }
 
-body {
-  font-family: "Usual", sans-serif;
-  color: #0d1922;
-}
+@layer base {
+  body {
+    font-family: "Usual", sans-serif;
+    color: #0d1922;
+  }
 
-button {
-  cursor: pointer;
-  outline: none;
+  button {
+    cursor: pointer;
+    outline: none;
+  }
 }
 
 @layer utilities {
   .text-headline-l {
-    @apply lg:text-[clamp(56px,3.889vw,68px)] md:max-lg:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
+    @apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
   }
 
   .text-subheadline-l {
-    @apply lg:text-[clamp(40px,2.778vw,48px)] md:max-lg:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
+    @apply 2xl:text-[clamp(40px,2.778vw,48px)] md:max-2xl:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
   }
 
   .text-subheadline-m {
-    @apply lg:text-[clamp(24px,1.667vw,28px)] md:max-lg:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
+    @apply 2xl:text-[clamp(24px,1.667vw,28px)] md:max-2xl:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
   }
 
   .text-subheadline-s {
-    @apply lg:text-[clamp(20px,1.389vw,24px)] md:max-lg:text-[clamp(16px,2.315vw,20px)] leading-[140%];
+    @apply 2xl:text-[clamp(20px,1.389vw,24px)] md:max-2xl:text-[clamp(16px,2.315vw,20px)] leading-[140%];
   }
 
   .text-m {
-    @apply lg:text-[clamp(16px,1.111vw,19px)] md:max-lg:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
+    @apply 2xl:text-[clamp(16px,1.111vw,19px)] md:max-2xl:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
   }
 
   .text-s {
-    @apply lg:text-[clamp(14px,0.972vw,16px)] md:max-lg:text-[clamp(12px,1.737vw,14px)] text-xs leading-[140%];
+    @apply 2xl:text-[clamp(14px,0.972vw,16px)] md:max-2xl:text-[clamp(12px,1.737vw,14px)] text-xs leading-[140%];
   }
 
   .text-caption-m {
-    @apply lg:text-[clamp(12px,0.833vw,14px)] md:max-lg:text-[clamp(12px,1.563vw,18px)] text-[clamp(12px,3.333vw,18px)] leading-[135%];
+    @apply 2xl:text-[clamp(12px,0.833vw,14px)] md:max-2xl:text-[clamp(12px,1.563vw,18px)] text-[clamp(12px,3.333vw,18px)] leading-[135%];
   }
 
   .text-caption-s {
-    @apply lg:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
+    @apply 2xl:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
   }
 }
diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx
index ddd5088..b8c9c35 100644
--- a/src/layout/DefaultLayout.tsx
+++ b/src/layout/DefaultLayout.tsx
@@ -6,7 +6,7 @@ function DefaultLayout() {
   return (
     <div className="select-none flex flex-col">
       <Header />
-      <div className="h-[calc(100dvh-3.889vw)] max-lg:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
+      <div className="h-[calc(100dvh-64px)] md:max-2xl:h-[calc(100dvh-56px)] 2xl:h-[calc(100dvh-3.889vw)]">
         <Outlet />
       </div>
       <Footer />
diff --git a/src/layout/LayoutWithoutFooter.tsx b/src/layout/LayoutWithoutFooter.tsx
index 5683f18..55e585b 100644
--- a/src/layout/LayoutWithoutFooter.tsx
+++ b/src/layout/LayoutWithoutFooter.tsx
@@ -5,7 +5,7 @@ function LayoutWithoutFooter() {
   return (
     <div className="select-none flex flex-col">
       <Header />
-      <div className="h-[calc(100dvh-3.889vw)] max-lg:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
+      <div className="h-[calc(100dvh-3.889vw)] max-2xl:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
         <Outlet />
       </div>
     </div>
diff --git a/src/main.tsx b/src/main.tsx
index ab20cde..aa46ca4 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,7 +6,7 @@ import MainPage from "./pages/MainPage.tsx";
 import ModalContainer from "./components/ModalContainer.tsx";
 import ComplexPage from "./pages/ComplexPage.tsx";
 import FloorsPage from "./pages/FloorsPage.tsx";
-import UnitTypesPage from "./pages/UnitTypesPages.tsx";
+import UnitTypesPage from "./pages/UnitTypesPage.tsx";
 import AboutPage from "./pages/AboutPages.tsx";
 import FavouritesPage from "./pages/FavouritesPage.tsx";
 import SearchPage from "./pages/SearchPage.tsx";
diff --git a/src/pages/UnitTypesPages.tsx b/src/pages/UnitTypesPage.tsx
similarity index 100%
rename from src/pages/UnitTypesPages.tsx
rename to src/pages/UnitTypesPage.tsx
diff --git a/vite.config.ts b/vite.config.ts
index 5f9512c..bb4634f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,6 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   server: {
-    host: true,
+    // host: true,
   },
 });