remove subpages, add Zapier link

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

@@ -1,103 +0,0 @@
-import DocsSidebar from "../DocsSidebar";
-import IntegrationPageTitle from "../IntegrationsPageTitle";
-import CodeBlock from "@/components/shared/CodeBlock";
-import JsLogo from "@/images/jslogo.png";
-import { WEBAPP_URL } from "@formbricks/lib/constants";
-import Image from "next/image";
-import Link from "next/link";
-
-export default function JsIntegrationPage({ params }) {
-  return (
-    <div>
-      <IntegrationPageTitle
-        environmentId={params.environmentId}
-        title="Javascript Integration"
-        icon={<Image src={JsLogo} alt="Javascript Logo" />}
-      />
-
-      <div className="flex justify-between gap-8">
-        <div>
-          <p className="mb-10 text-slate-800">
-            The Formbricks Javascript Widget is the easiest way to integrate Formbricks into your web
-            application. Once embedded, the SDK allows you to use all the Formbricks features like no code
-            actions, show in-app surveys and synchronizing your user data with Formbricks.
-          </p>
-          <div className="prose prose-slate">
-            <p className="text-lg font-semibold text-slate-800">Step 1: NPM Install</p>
-            <CodeBlock language="sh">npm install @formbricks/js --save</CodeBlock>
-            <p className="pt-4 text-lg font-semibold text-slate-800">Step 2: Initialize widget</p>
-            <p>Import Formbricks and initialize the widget in your Component (e.g. App.tsx):</p>
-            <CodeBlock language="js">{`import formbricks from "@formbricks/js";
-
-if (typeof window !== "undefined") {
-  formbricks.init({
-    environmentId: "${params.environmentId}",
-    apiHost: "${WEBAPP_URL}",
-    logLevel: "debug", // remove when in production
-  });
-}`}</CodeBlock>
-
-            <ul className="list-disc">
-              <li>
-                <span className="font-semibold">environmentId:</span> Used to identify the correct
-                environment: {params.environmentId} is yours.
-              </li>
-              <li>
-                <span className="font-semibold">apiHost:</span> This is the URL of your Formbricks backend.
-              </li>
-            </ul>
-            <p className="text-lg font-semibold text-slate-800">You&apos;re done 🎉</p>
-            <p>
-              Your app now communicates with Formbricks - sending events, and loading surveys automatically!
-            </p>
-
-            <ul className="list-disc text-slate-700">
-              <li>
-                <span className="font-semibold">Does your widget work? </span>
-                <span>Scroll to the top!</span>
-              </li>
-              <li>
-                <span className="font-semibold">
-                  Need a more detailed setup guide for React, Next.js or Vue.js?
-                </span>{" "}
-                <Link
-                  className="decoration-brand-dark"
-                  href="https://formbricks.com/docs/getting-started/quickstart"
-                  target="_blank">
-                  Check out the docs.
-                </Link>
-              </li>
-              <li>
-                <span className="font-semibold">Have a problem?</span>{" "}
-                <Link
-                  className="decoration-brand-dark"
-                  target="_blank"
-                  href="https://github.com/formbricks/formbricks/issues">
-                  Open an issue on GitHub
-                </Link>{" "}
-                or{" "}
-                <Link className="decoration-brand-dark" href="https://formbricks.com/discord" target="_blank">
-                  join Discord.
-                </Link>
-              </li>
-              <li>
-                <span className="font-semibold">
-                  Want to learn how to add user attributes, custom events and more?
-                </span>{" "}
-                <Link
-                  className="decoration-brand-dark"
-                  href="https://formbricks.com/docs/attributes/why"
-                  target="_blank">
-                  Dive into the docs.
-                </Link>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div>
-          <DocsSidebar />
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -3,21 +3,22 @@ import Image from "next/image";
 import JsLogo from "@/images/jslogo.png";
 import ZapierLogo from "@/images/zapier-small.png";
 
-export default function IntegrationsPage({ params }) {
+export default function IntegrationsPage() {
   return (
     <div>
       <h1 className="my-2 text-3xl font-bold text-slate-800">Integrations</h1>
       <p className="mb-6 text-slate-500">Connect Formbricks with your favorite tools.</p>
       <div className="grid grid-cols-3 gap-6">
         <Card
-          href={`/environments/${params.environmentId}/integrations/js`}
-          title="Javascript Widget"
+          docsHref="https://formbricks.com/docs/getting-started/nextjs-app"
+          label="Javascript Widget"
           description="Integrate Formbricks into your Webapp"
           icon={<Image src={JsLogo} alt="Javascript Logo" />}
         />
         <Card
-          href={`/environments/${params.environmentId}/integrations/zapier`}
-          title="Zapier"
+          docsHref="https://formbricks.com/docs/integrations/zapier"
+          connectHref="https://zapier.com/apps/formbricks/integrations"
+          label="Zapier"
           description="Integrate Formbricks with 5000+ apps via Zapier"
           icon={<Image src={ZapierLogo} alt="Zapier Logo" />}
         />

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

@@ -1,15 +0,0 @@
-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>
-  );
-}

packages/ui/components/Card.tsx

@@ -1,42 +1,31 @@
-import Link from "next/link";
+import { Button } from "./Button";
 
 interface CardProps {
-  onClick?: () => void;
-  href?: string;
-  title: string;
+  connectHref?: string;
+  docsHref?: string;
+  label: string;
   description: string;
   icon?: React.ReactNode;
-  className?: string;
-  children?: React.ReactNode;
 }
 
 export type { CardProps };
 
-export const Card: React.FC<CardProps> = ({
-  href,
-  onClick,
-  title,
-  description,
-  icon,
-  className = "",
-  children,
-}) =>
-  href ? (
-    <Link
-      href={href}
-      className={`hover:ring-brand-dark cursor-pointer rounded-lg bg-white p-8 text-left shadow-sm transition-all duration-150 ease-in-out hover:ring-1 ${className}`}>
-      <div className="float-right">{children}</div>
-      {icon && <div className="mb-6 h-8 w-8">{icon}</div>}
-      <h3 className="text-lg font-bold text-slate-800">{title}</h3>
-      <p className="text-xs text-slate-500">{description}</p>
-    </Link>
-  ) : (
-    <button
-      onClick={onClick}
-      className={`hover:ring-brand-dark cursor-pointer rounded-lg bg-white p-8 text-left shadow-sm transition-all duration-150 ease-in-out hover:ring-1 ${className}`}>
-      <div className="float-right">{children}</div>
-      {icon && <div className="mb-6 h-8 w-8">{icon}</div>}
-      <h3 className="text-lg font-bold text-slate-800">{title}</h3>
-      <p className="text-xs text-slate-500">{description}</p>
-    </button>
-  );
+export const Card: React.FC<CardProps> = ({ connectHref, docsHref, label, description, icon }) => (
+  <div className="rounded-lg bg-white p-8 text-left shadow-sm ">
+    {icon && <div className="mb-6 h-8 w-8">{icon}</div>}
+    <h3 className="text-lg font-bold text-slate-800">{label}</h3>
+    <p className="text-xs text-slate-500">{description}</p>
+    <div className="mt-4 flex space-x-2">
+      {connectHref && (
+        <Button href={connectHref} target="_blank" size="sm" variant="darkCTA">
+          Connect
+        </Button>
+      )}
+      {docsHref && (
+        <Button href={docsHref} target="_blank" size="sm" variant="secondary">
+          Docs
+        </Button>
+      )}
+    </div>
+  </div>
+);