Added Agitate part

src/Components/Card.tsx

@@ -0,0 +1,29 @@
+interface IProps {
+  title: string;
+  description: string;
+  image: string;
+}
+
+const Card = ({ title, description, image }: IProps) => {
+  const defaultImgClasses = `w-full h-20 mt-5`;
+  const imgClasses = image ? defaultImgClasses : `${defaultImgClasses} hidden`;
+
+  return (
+    <div className="mt-5 xl:mt-0 flex flex-1 bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
+      <div className="w-full font-medium flex-col md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark">
+        <object type="image/svg+xml" data={image} className={imgClasses} aria-label={title}></object>
+        <h1 className="mt-2 lg:mt-6 text-3xl xl:text-5xl">{title}</h1>
+        <h2 className="px-2 mb-2 mt-3 italic text-xl xl:text-3xl font-medium text-gray-300">
+          {description.split("\n").map((line, i) => (
+            <span key={i}>
+              {line}
+              <br />
+            </span>
+          ))}
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

src/Components/Navbar/Navbar.tsx

@@ -19,9 +19,9 @@ export default () => {
 
   window.addEventListener("scroll", changeColor);
 
-  // Replace javascript:void(0) path with your path
   const navigation = [
     { title: t("navbar.services"), path: "Services" },
+    { title: t("navbar.optimization"), path: "Optimization" },
     { title: t("navbar.advantages"), path: "Advantages" },
     { title: t("navbar.contact"), path: "Contact" },
   ];

src/Components/Pages/Optimization/CardContainer.tsx

@@ -0,0 +1,32 @@
+import Card from "../../Card";
+import yourself from "../../../assets/Yourself.svg"
+import staff from "../../../assets/staff.svg"
+import agency from "../../../assets/agency.svg"
+import { useTranslation } from "react-i18next";
+
+const CardContainer = () => {
+
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-10 lg:mt-32 flex gap-10 flex-col h-full lg:flex-row px-10 lg:px-32 1920:margin-calc">
+      <Card
+        title={t("optimization.cards.card1.title")}
+        description={t("optimization.cards.card1.description")}
+        image={yourself}
+      />
+      <Card
+        title={t("optimization.cards.card2.title")}
+        description={t("optimization.cards.card2.description")}
+        image={staff}
+      />
+      <Card
+        title={t("optimization.cards.card3.title")}
+        description={t("optimization.cards.card3.description")}
+        image={agency}
+      />
+    </div>
+  );
+};
+
+export default CardContainer;

src/Components/Pages/Optimization/Optimization.tsx

@@ -0,0 +1,18 @@
+import CardContainer from './CardContainer'
+import { useTranslation } from 'react-i18next'
+
+const Optimization = () => {
+  const { t } = useTranslation('optimization')
+  return (
+    <div className="header-text">
+      <h1>
+        <span className="gold-text">"</span>
+        {t("optimization.heading.part1")} <br /> {t("optimization.heading.part2")}
+        <span className="gold-text">"</span>
+      </h1>
+      <CardContainer />
+    </div>
+  )
+}
+
+export default Optimization

src/Components/Pages/Results/Card.tsx

@@ -1,24 +0,0 @@
-interface IProps {
-  title: string;
-  description: string;
-}
-
-const Card = ({ title, description }: IProps) => {
-  return (
-    <div className="mt-5 xl:mt-0 flex bg-gradient-to-b from-gold-light to-gold-dark p-0.5 shadow-lg">
-      <div className="w-full font-medium md:px-4 py-1 bg-gradient-to-br from-custom-bglight to-custom-bgdark">
-        <h1 className="mt-2 lg:mt-6 text-3xl xl:text-5xl">{title}</h1>
-        <h2 className="mb-2 mt-3 italic text-xl xl:text-3xl font-medium text-gray-300">
-          {description.split("\n").map((line, i) => (
-            <span key={i}>
-              {line}
-              <br />
-            </span>
-          ))}
-        </h2>
-      </div>
-    </div>
-  );
-};
-
-export default Card;

src/Components/Pages/Results/CardContainer.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import Card from "./Card";
+import Card from "../../Card";
 
 const CardContainer = () => {
   const { t } = useTranslation();
@@ -9,18 +9,22 @@ const CardContainer = () => {
       <Card
         title={t("results.cards.card1.title")}
         description={t("results.cards.card1.description")}
+        image=""
       />
       <Card
         title={t("results.cards.card2.title")}
         description={t("results.cards.card2.description")}
+        image=""
       />
       <Card
         title={t("results.cards.card3.title")}
         description={t("results.cards.card3.description")}
+        image=""
       />
       <Card
         title={t("results.cards.card4.title")}
         description={t("results.cards.card4.description")}
+        image=""
       />
     </div>
   );