Changed string values to use i18n

src/Components/Pages/Services/SocialMedia.tsx

@@ -3,14 +3,33 @@ import AlgorithmImg from "../../../assets/imgs/Algorithm.jpg";
 import ScheduleImg from "../../../assets/imgs/Schedule.jpg";
 import TargetImg from "../../../assets/imgs/Target.jpg";
 import ExpandImg from "../../../assets/imgs/Expand.jpg";
+import { useTranslation } from "react-i18next";
 
 const SocialMediaCards = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="h-full flex lg:mt-20 flex-col flex-wrap gap-4 xl:flex-row mx-4">
-      <Card title="Algorithm" description="Analise" imgSrc={AlgorithmImg} />
-      <Card title="Schedule" description="Content" imgSrc={ScheduleImg} />
-      <Card title="Target" description="Audience" imgSrc={TargetImg} />
-      <Card title="Expand" description="Platforms" imgSrc={ExpandImg} />
+      <Card
+        title={t("services.cards.social.card1.title")}
+        description={t("services.cards.social.card1.description")}
+        imgSrc={AlgorithmImg}
+      />
+      <Card
+        title={t("services.cards.social.card2.title")}
+        description={t("services.cards.social.card2.description")}
+        imgSrc={ScheduleImg}
+      />
+      <Card
+        title={t("services.cards.social.card3.title")}
+        description={t("services.cards.social.card3.description")}
+        imgSrc={TargetImg}
+      />
+      <Card
+        title={t("services.cards.social.card4.title")}
+        description={t("services.cards.social.card4.description")}
+        imgSrc={ExpandImg}
+      />
     </div>
   );
 };