From d34647654a687f145d7d46a438571b889fe69f5f Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Mon, 22 Apr 2024 13:15:55 +0500
Subject: [PATCH] rubber text size

---
 src/components/Button.tsx                     |  2 +-
 .../companyPage/InvestmentPortfolio.tsx       |  6 +--
 src/components/companyPage/OurStory.tsx       | 12 +++--
 src/components/header/Auth/AuthDesktop.tsx    |  2 +-
 .../header/Header/DesktopHeader.tsx           |  2 +-
 src/index.css                                 | 51 +++++++++++++++++++
 src/pages/Company.tsx                         |  5 +-
 7 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index fe4a69e..00be012 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -24,7 +24,7 @@ const Button = ({
 
   return (
     <button
-      className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
+      className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
         className ? className : ""
       }`}
     >
diff --git a/src/components/companyPage/InvestmentPortfolio.tsx b/src/components/companyPage/InvestmentPortfolio.tsx
index e7ef4cb..08c3db8 100644
--- a/src/components/companyPage/InvestmentPortfolio.tsx
+++ b/src/components/companyPage/InvestmentPortfolio.tsx
@@ -11,7 +11,7 @@ const projectStyles = [
 const InvestmentPortfolio = () => {
   return (
     <div className="grid grid-cols-12 xl:px-6 px-4 gap-4 2xl:gap-y-14 xl:gap-y-12 sm:gap-y-3 gap-y-5">
-      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3">
+      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-4 pb-3 text-caption-m">
         OUR INVESTMENT PORTFOLIO
       </div>
       {projects.map((project, index) => {
@@ -31,9 +31,9 @@ const InvestmentPortfolio = () => {
             />
             <div className="flex gap-1 pt-3 items-center">
               <div className="rounded-full bg-[#00BED7] w-3 h-3"></div>
-              <div className="">{project.title}</div>
+              <div className="text-m">{project.title}</div>
             </div>
-            <div className="text-[12px] font-semibold text-[#73787C] pt-2">
+            <div className="caption-m font-semibold text-[#73787C] pt-2">
               {project.city}
             </div>
           </div>
diff --git a/src/components/companyPage/OurStory.tsx b/src/components/companyPage/OurStory.tsx
index e8d0506..b18b5a3 100644
--- a/src/components/companyPage/OurStory.tsx
+++ b/src/components/companyPage/OurStory.tsx
@@ -1,7 +1,8 @@
 const OurStory = () => {
   return (
     <div className="grid grid-cols-12 xl:px-6 px-4 gap-x-4">
-      <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full">
+      {/* <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full "> */}
+      <div className="uppercase text-[#73787C] font-semibold pb-3 xl:col-span-2 col-span-full text-caption-m">
         Our story
       </div>
       <div className="2xl:col-span-8 xl:col-span-9 col-span-full grid grid-cols-12 gap-x-4">
@@ -11,12 +12,14 @@ const OurStory = () => {
             alt="1"
             className="aspect-[7/5] rounded-2xl col-span-full object-cover"
           />
-          <p className="text-[#00BED7] font-semibold text-2xl xl:col-span-5 col-span-full pt-6">
+          {/* <p className="text-[#00BED7] font-semibold text-2xl xl:col-span-5 col-span-full pt-6 text-subheadline-s"> */}
+          <p className="text-[#00BED7] font-semibold xl:col-span-5 col-span-full pt-6 text-subheadline-s">
             IRTH is prominently positioned among the top tier establishments in
             United Arab Emirates, a family backed investment company with core
             values of trust, strength and agility.
           </p>
-          <div className="grid grid-cols-2 gap-4 text-sm 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]">
+          {/* <div className="grid grid-cols-2 gap-4 text-sm 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]"> */}
+          <div className="grid grid-cols-2 gap-4 text-s 2xl:col-span-3 xl:col-span-4 col-span-full xl:pt-6 pt-4 2xl:pb-14 xl:pb-12 sm:pb-10 pb-[52px] text-[#73787C]">
             <p className="xl:col-span-full sm:col-span-1 col-span-full">
               IRTH embodies the essence of legacy, anchoring its roots in the
               heart of a vibrant Dubai. As a part of a distinguished local
@@ -44,7 +47,8 @@ const OurStory = () => {
             alt="2"
             className="rounded-2xl object-cover 2xl:col-span-6 xl:col-span-7 sm:col-span-6 col-span-full 2xl:aspect-[7/4] xl:aspect-[14/9] sm:h-full aspect-[6.5/5.2] sm:order-2 order-3 "
           />
-          <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C]">
+          {/* <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C]"> */}
+          <div className="xl:col-start-3 grid col-span-full grid-cols-2 xl:gap-4 gap-3 sm:order-3 order-2 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-6 sm:pt-6 pt-20 text-[#73787C] text-s">
             <p className="sm:col-span-1 col-span-full">
               Our influence extends even further through strategic partnerships
               with esteemed local and international hospitality brands,
diff --git a/src/components/header/Auth/AuthDesktop.tsx b/src/components/header/Auth/AuthDesktop.tsx
index 28052c0..fb4b47a 100644
--- a/src/components/header/Auth/AuthDesktop.tsx
+++ b/src/components/header/Auth/AuthDesktop.tsx
@@ -7,7 +7,7 @@ interface AuthProps {
 
 const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
   return (
-    <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end">
+    <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end text-s">
       {isAuth ? (
         <>
           <p>{userName}</p>
diff --git a/src/components/header/Header/DesktopHeader.tsx b/src/components/header/Header/DesktopHeader.tsx
index d415936..7e68392 100644
--- a/src/components/header/Header/DesktopHeader.tsx
+++ b/src/components/header/Header/DesktopHeader.tsx
@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
 
 const DesktopHeader = () => (
-  <header className="bg-white w-full text-white sm:grid grid-cols-6 text-sm font-usual">
+  <header className="bg-white w-full text-white sm:grid grid-cols-6 font-usual text-m">
     <div className="flex gap-4 col-span-2">
       <Logo />
       <Location />
diff --git a/src/index.css b/src/index.css
index a1c1223..8ea5a17 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,3 +13,54 @@ body {
 .font-mixcase {
   font-family: "Mixcase", sans-serif;
 }
+
+@layer components {
+  .text-caption-s {
+    font-family: "Usual", sans-serif;
+    line-height: 135%;
+    /* clamp(10px, 0.6774rem + 0.3226vi, 12px); */
+  }
+
+  .text-caption-m {
+    font-family: "Usual", sans-serif;
+    line-height: 135%;
+    font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
+  }
+
+  .text-s {
+    font-family: "Usual", sans-serif;
+    line-height: 140%;
+    font-size: clamp(12px, 0.01rem + 0.93vw, 16px);
+  }
+
+  .text-m {
+    font-family: "Usual", sans-serif;
+    line-height: 125%;
+    font-size: clamp(13px, 0.01rem + 0.99vw, 19px);
+  }
+
+  .text-subheadline-s {
+    font-family: "Usual", sans-serif;
+    line-height: 140%;
+    font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
+  }
+
+  .text-subheadline-m {
+    font-family: "Usual", sans-serif;
+    line-height: 135%;
+    /* clamp(20px, 0.6774rem + 0.3226vi, 28px); */
+  }
+
+  .text-subheadline-l {
+    font-family: "Usual", sans-serif;
+    line-height: 135%;
+    /* clamp(32px, 0.6774rem + 0.3226vi, 48px); */
+  }
+
+  .text-headline-s {
+    font-family: "Mixcase", sans-serif;
+    line-height: 100%;
+    letter-spacing: -0.03em;
+    font-size: clamp(44px, -0.257rem + 3.7559vw, 68px);
+  }
+}
diff --git a/src/pages/Company.tsx b/src/pages/Company.tsx
index 46705c6..fd643bb 100644
--- a/src/pages/Company.tsx
+++ b/src/pages/Company.tsx
@@ -5,12 +5,13 @@ import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
 const Company = () => {
   return (
     <section className={`xl:py-16 py-10 font-usual ${isMobile ? "pt-24" : ""}`}>
-      <h1 className="uppercase font-mixcase xl:text-[56px] sm:text-[40px] xl:leading-[56px] sm:leading-[40px] text-[28px] leading-[28px] xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
+      {/* <h1 className="uppercase font-mixcase xl:text-[56px] sm:text-[40px] xl:leading-[56px] sm:leading-[40px] text-[28px] leading-[28px] xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4"> */}
+      <h1 className="uppercase text-headline-s xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
         IRTH is a privately held real estate investment platform part of a large
         local family conglomerate from Dubai
       </h1>
       <OurStory />
-      <h1 className="uppercase font-mixcase xl:text-[56px] sm:text-[40px] xl:leading-[56px] sm:leading-[40px] text-[28px] leading-[28px] xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
+      <h1 className="uppercase text-headline-s xl:indent-[261px] xl:pb-16 pb-10 xl:px-6 px-4">
         IRTHS’s real estate portfolio is spread across numerous projects, below
         is a snapshot of some of our current and previous investments
       </h1>