zapier subpage

apps/web/app/environments/[environmentId]/integrations/IntegrationsPageTitle.tsx

@@ -17,7 +17,7 @@ const IntegrationPageTitle: React.FC<IntegrationPageTitleProps> = ({ title, icon
 
         <div className="my-4 flex items-baseline">
           {icon && <div className="h-6 w-6">{icon}</div>}
-          <h1 className="ml-3 text-2xl font-bold text-slate-600">{title}</h1>
+          <h1 className="ml-3 text-2xl font-bold text-slate-800">{title}</h1>
         </div>
       </div>
       {/* <div className="flex items-center space-x-2">

apps/web/app/environments/[environmentId]/integrations/page.tsx

@@ -1,6 +1,7 @@
 import { Card } from "@formbricks/ui";
 import Image from "next/image";
 import JsLogo from "@/images/jslogo.png";
+import ZapierLogo from "@/images/zapier-small.png";
 
 export default function IntegrationsPage({ params }) {
   return (
@@ -14,6 +15,12 @@ export default function IntegrationsPage({ params }) {
           description="Integrate Formbricks into your Webapp"
           icon={<Image src={JsLogo} alt="Javascript Logo" />}
         />
+        <Card
+          href={`/environments/${params.environmentId}/integrations/zapier`}
+          title="Zapier"
+          description="Integrate Formbricks with 5000+ apps via Zapier"
+          icon={<Image src={ZapierLogo} alt="Zapier Logo" />}
+        />
       </div>
     </div>
   );

apps/web/app/environments/[environmentId]/integrations/zapier/page.tsx

@@ -0,0 +1,15 @@
+import ZapierLogo from "@/images/zapier-small.png";
+import Image from "next/image";
+import IntegrationPageTitle from "../IntegrationsPageTitle";
+
+export default function JsIntegrationPage({ params }) {
+  return (
+    <div>
+      <IntegrationPageTitle
+        environmentId={params.environmentId}
+        title="Zapier Integration"
+        icon={<Image src={ZapierLogo} alt="Zapier Logo" />}
+      />
+    </div>
+  );
+}