our values section

src/components/companyPage/InvestmentPortfolio.tsx

@@ -10,7 +10,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="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 2xl:pb-[140px] xl:pb-[120px] pb-[100px]">
       <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>

src/components/companyPage/OurValues.tsx

@@ -0,0 +1,117 @@
+const OurValues = () => {
+  return (
+    <div className="grid grid-cols-12 xl:px-6 px-4 gap-4 xl:gap-y-6 gap-y-35">
+      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
+        our values
+      </div>
+      <div className="bg-white xl:col-start-3 xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
+        <div className="flex justify-between items-start pb-[50px]">
+          <p className="text-subheadline-l font-bold text-[#0D1922]">Trust</p>
+          <p className="text-caption-m font-semibold text-[#73787C]">(1)</p>
+        </div>
+        <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
+          <p>
+            Trust is the cornerstone of IRTH's foundation. We uphold an
+            unshakeable commitment to transparency, integrity, and ethical
+            practices in every facet of our operations.
+          </p>
+          <p>
+            Through open communication and responsible stewardship, we build
+            enduring relationships with our stakeholders and business partners,
+            ensuring that trust is at the heart of every interaction.
+          </p>
+        </div>
+      </div>
+      <div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
+        <div className="flex justify-between items-start pb-[50px]">
+          <p className="text-subheadline-l font-bold text-[#0D1922]">
+            Strength
+          </p>
+          <p className="text-caption-m font-semibold text-[#73787C]">(2)</p>
+        </div>
+        <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
+          <p>
+            Strength isn't just a physical attribute; it's a reflection of our
+            resilience, determination, and unwavering resolve.
+          </p>
+          <p>
+            At IRTH, we harness the strength of our heritage, experience, and
+            expertise to overcome challenges and seize opportunities. With a
+            robust foundation, we stand strong, poised to create lasting impact
+            and achieve remarkable results
+          </p>
+        </div>
+      </div>
+      <div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
+        <div className="flex justify-between items-start pb-[50px]">
+          <p className="text-subheadline-l font-bold text-[#0D1922]">Agility</p>
+          <p className="text-caption-m font-semibold text-[#73787C]">(3)</p>
+        </div>
+        <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
+          <p>
+            In a rapidly evolving landscape, adaptability is paramount. IRTH
+            embraces agility as a guiding principle, allowing us to swiftly
+            respond to changing dynamics and emerging trends.
+          </p>
+          <p>
+            Our flexible mindset empowers us to navigate complexities, explore
+            new avenues, and innovate with confidence, ensuring that we remain
+            at the forefront of progress.
+          </p>
+        </div>
+      </div>
+      <div className="text-subheadline-m font-semibold text-[#00BED7] xl:col-start-3 xl:col-span-6 col-span-full 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
+        These core values not only shape our identity but also drive our
+        actions, decisions, and aspirations as we shape the future of real
+        estate with dedication and purpose.
+      </div>
+      <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 border-y gap-4 sm:py-5 xl:py-6 xl:mb-[120px] 2xl:mb-[140px] mb-[100px]">
+        <div className="2xl:col-start-3 2xl:col-span-5 xl:col-span-6 xl:col-start-3 sm:col-start-4 sm:col-span-5 col-span-full order-2 xl:order-1 ">
+          <img
+            src="./images/company/9.png"
+            alt="9"
+            className="object-cover rounded-2xl w-full"
+          />
+        </div>
+        <div className="flex flex-col 2xl:col-start-8 xl:col-start-9 sm:col-start-1 sm:col-span-3 col-span-full order-1 xl:order-2 ">
+          <h2 className="text-subheadline-l font-bold xl:pb-2 pb-1">
+            Osman Celiker
+          </h2>
+          <div className="flex gap-1 items-center xl:pb-8 pb-6">
+            <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
+            <div className="text-m">Managing Director, IRTH</div>
+          </div>
+          <div className="text-[#73787C] text-s pb-4">
+            Osman Celiker, the Managing Director of IRTH, possesses a robust
+            history in real estate development, both on a local and
+            international scale.
+          </div>
+          <div className="text-[#73787C] text-s">
+            Osman oversees a skilled and seasoned development team responsible
+            for crafting remarkable projects. This team has brought to life many
+            local and international projects.
+          </div>
+        </div>
+      </div>
+      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
+        our values
+      </div>
+      <div className="grid xl:grid-cols-10 grid-cols-8 xl:col-span-10 col-span-full xl:col-start-3  border gap-6">
+        <div className="2xl:col-span-4 xl:col-span-5 col-span-6 text-[#00BED7] font-bold text-subheadline-m ">
+          Nestled at the pulsating core of Dubai, IRTH’s headquarters finds its
+          strategic abode within the iconic masterpiece, The Opus, envisioned by
+          the architectural virtuoso Zaha Hadid.
+        </div>
+        <div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s">
+          This exceptional location mirrors our commitment to being at the
+          forefront of innovation and design, reflecting the very essence of our
+          brand. Just as The Opus stands as a testament to architectural
+          brilliance, IRTH’s presence within it signifies our dedication to
+          crafting exceptional legacies within the world of real estate.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OurValues;

src/index.css

@@ -46,11 +46,13 @@ body {
 
   .text-subheadline-m {
     font-family: "Usual", sans-serif;
+    font-size: clamp(20px, 0.2477rem + 1.252vw, 28px);
     line-height: 135%;
   }
 
   .text-subheadline-l {
     font-family: "Usual", sans-serif;
+    font-size: clamp(32px, -0.0047rem + 2.5039vw, 48px);
     line-height: 135%;
   }
 

src/pages/Company.tsx

@@ -1,6 +1,7 @@
 import { isMobile } from "react-device-detect";
 import OurStory from "../components/companyPage/OurStory";
 import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
+import OurValues from "../components/companyPage/OurValues";
 
 const Company = () => {
   return (
@@ -16,6 +17,7 @@ const Company = () => {
         is a snapshot of some of our current and previous investments
       </h1>
       <InvestmentPortfolio />
+      <OurValues />
     </section>
   );
 };