Added translations to integrations

frontend/components/integrations/FrameworkIntegrationSection.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "next-i18next";
 
 import FrameworkIntegration from "./FrameworkIntegration";
 
@@ -15,24 +16,26 @@ interface Props {
 }
 
 const FrameworkIntegrationSection = ({ frameworks }: Props) => {
-    return (
-      <>
-        <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
-          <h1 className="font-semibold text-3xl">Framework Integrations</h1>
-          <p className="text-base text-gray-400">
-            Click on a framework to get the setup instructions.
-          </p>
-        </div>
-        <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
-          {frameworks.map((framework) => (
-            <FrameworkIntegration 
-              framework={framework}
-              key={`framework-integration-${framework.slug}`}
-            />
-          ))}
-        </div>
-      </>
-    );
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+        <h1 className="font-semibold text-3xl">{t("integrations:framework-integrations")}</h1>
+        <p className="text-base text-gray-400">
+          {t("integrations:click-to-setup")}
+        </p>
+      </div>
+      <div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
+        {frameworks.map((framework) => (
+          <FrameworkIntegration 
+            framework={framework}
+            key={`framework-integration-${framework.slug}`}
+          />
+        ))}
+      </div>
+    </>
+  );
 }
 
 export default FrameworkIntegrationSection;