investment portfolio section

src/components/companyPage/InvestmentPortfolio.tsx

@@ -0,0 +1,84 @@
+interface Project {
+  title: string;
+  city: string;
+  image: string;
+  id: string;
+}
+
+const projects: Project[] = [
+  {
+    title: "Nef Kandilli",
+    city: "Instanbul",
+    image: "./images/company/4.png",
+    id: "1",
+  },
+  {
+    title: "Résidence Seniors Palazzo Chessy",
+    city: "Paris",
+    image: "./images/company/5.png",
+    id: "2",
+  },
+  {
+    title: "5 Beaujon",
+    city: "Paris",
+    image: "./images/company/6.png",
+    id: "3",
+  },
+  {
+    title: "Edenwood Resort Privé",
+    city: "Paris",
+    image: "./images/company/7.png",
+    id: "4",
+  },
+  {
+    title: "Rove Home Downtown",
+    city: "Dubai",
+    image: "./images/company/8.png",
+    id: "5",
+  },
+];
+
+const projectStyles = [
+  "xl:col-start-3 xl:col-end-7",
+  "xl:col-span-4",
+  "xl:col-start-5 xl:col-end-9",
+  "xl:col-span-4",
+  "xl:col-start-3 xl:col-span-4",
+];
+
+const InvestmentPortfolio = () => {
+  return (
+    <div className="grid grid-cols-12 px-6 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">
+        OUR INVESTMENT PORTFOLIO
+      </div>
+      {projects.map((project, index) => {
+        const styles = `${projectStyles[index]} ${
+          index % 2 === 0 ? "sm:col-start-1" : "sm:col-start-7"
+        }`;
+
+        return (
+          <div
+            className={`flex flex-col ${styles} sm:col-span-6 col-span-full`}
+            key={project.id}
+          >
+            <img
+              src={project.image}
+              alt={project.title}
+              className="rounded-2xl object-cover aspect-[5/3]"
+            />
+            <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>
+            <div className="text-[12px] font-semibold text-[#73787C] pt-2">
+              {project.city}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default InvestmentPortfolio;

src/components/companyPage/OurStory.tsx

@@ -1,6 +1,6 @@
 const OurStory = () => {
   return (
-    <div className="flex 2xl:pr-[285px] xl:pr-[128px] xl:flex-row flex-col xl:px-6 px-4">
+    <div className="flex 2xl:pr-[285px] xl:pr-[128px] xl:flex-row flex-col xl:px-6 px-4 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
       <div className="xl:h-full uppercase text-[#73787C] font-semibold 2xl:w-[261px] xl:w-[208px] pb-3">
         Our story
       </div>

src/pages/Company.tsx

@@ -1,5 +1,6 @@
 import { isMobile } from "react-device-detect";
 import OurStory from "../components/companyPage/OurStory";
+import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
 
 const Company = () => {
   return (
@@ -9,6 +10,11 @@ const Company = () => {
         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">
+        IRTHS’s real estate portfolio is spread across numerous projects, below
+        is a snapshot of some of our current and previous investments
+      </h1>
+      <InvestmentPortfolio />
     </section>
   );
 };