fix: add webhook logo and card component flexibility

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

@@ -2,6 +2,7 @@ import { Card } from "@formbricks/ui";
 import Image from "next/image";
 import JsLogo from "@/images/jslogo.png";
 import ZapierLogo from "@/images/zapier-small.png";
+import webhook from "@/images/webhook.png";
 
 export default function IntegrationsPage({ params }) {
   return (
@@ -11,26 +12,33 @@ export default function IntegrationsPage({ params }) {
       <div className="grid grid-cols-3 gap-6">
         <Card
           docsHref="https://formbricks.com/docs/getting-started/nextjs-app"
+          docsText="Docs"
+          docsNewTab={true}
           label="Javascript Widget"
           description="Integrate Formbricks into your Webapp"
-          newTab={true}
           icon={<Image src={JsLogo} alt="Javascript Logo" />}
         />
         <Card
           docsHref="https://formbricks.com/docs/integrations/zapier"
+          docsText="Docs"
+          docsNewTab={true}
           connectHref="https://zapier.com/apps/formbricks/integrations"
+          connectText="Connect"
+          connectNewTab={true}
           label="Zapier"
           description="Integrate Formbricks with 5000+ apps via Zapier"
-          newTab={true}
           icon={<Image src={ZapierLogo} alt="Zapier Logo" />}
         />
         <Card
           connectHref={`/environments/${params.environmentId}/integrations/custom-webhook`}
+          connectText="Add Webhooks"
+          connectNewTab={false}
           docsHref="https://formbricks.com/docs/webhook-api/overview"
+          docsText="Docs"
+          docsNewTab={true}
           label="Custom Webhook"
           description="Trigger Webhooks based on actions in your surveys"
-          newTab={false}
-          icon={<Image src={JsLogo} alt="Javascript Logo" />}
+          icon={<Image src={webhook} alt="Javascript Logo" />}
         />
       </div>
     </div>