Merge branch 'main' of github.com:formbricks/formbricks

apps/formbricks-com/components/shared/BreakerCTA.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@formbricks/ui";
 import { useRouter } from "next/router";
 import clsx from "clsx";
+import { usePlausible } from "next-plausible";
 
 interface Props {
   teaser: string;
@@ -13,6 +14,7 @@ interface Props {
 
 export default function BreakerCTA({ inverted = false, teaser, headline, subheadline, cta, href }: Props) {
   const router = useRouter();
+  const plausible = usePlausible();
   return (
     <div
       className={clsx(
@@ -23,7 +25,12 @@ export default function BreakerCTA({ inverted = false, teaser, headline, subhead
       )}>
       <div className="relative px-4 py-8 sm:px-6 sm:pt-8 sm:pb-12 lg:px-8 lg:pt-12">
         <div className="xs:block xs:absolute xs:right-10 hidden md:top-1/2 md:-translate-y-1/2">
-          <Button variant="highlight" onClick={() => router.push(`${href}`)}>
+          <Button
+            variant="highlight"
+            onClick={() => {
+              plausible("openDemo");
+              router.push(`${href}`);
+            }}>
             {cta}
           </Button>
         </div>

apps/formbricks-com/components/shared/EarlyBirdDeal.tsx

@@ -2,9 +2,11 @@ import { useRouter } from "next/router";
 import { Button } from "@formbricks/ui";
 import Image from "next/image";
 import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
+import { usePlausible } from "next-plausible";
 
 export default function EarlyBirdDeal() {
   const router = useRouter();
+  const plausible = usePlausible();
   return (
     <div className="bg-brand-dark relative mx-4 max-w-7xl overflow-hidden rounded-xl p-6 pb-16 sm:p-8 sm:pb-16 md:py-8 md:px-12 lg:mx-0 lg:flex lg:items-center">
       <div className="lg:w-0 lg:flex-1 ">
@@ -21,8 +23,10 @@ export default function EarlyBirdDeal() {
         <div className="mt-6">
           <Button
             variant="secondary"
-            target="_blank"
-            onClick={() => router.push("https://app.formbricks.com/auth/signup")}>
+            onClick={() => {
+              plausible("openEarlyBird");
+              window.open("https://app.formbricks.com/auth/signup", "_blank")?.focus();
+            }}>
             Get Early Bird Deal
           </Button>
         </div>

apps/formbricks-com/components/shared/HeaderPMF.tsx

@@ -6,9 +6,11 @@ import { Fragment } from "react";
 import { Button } from "@formbricks/ui";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
+import { usePlausible } from "next-plausible";
 
 export default function Header() {
   const router = useRouter();
+  const plausible = usePlausible();
   return (
     <Popover className="relative" as="header">
       <div className="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start ">
@@ -43,14 +45,22 @@ export default function Header() {
         </Popover.Group>
         <div className="hidden flex-1 items-center justify-end md:flex">
           <ThemeSelector className="relative z-10 mr-5" />
-          <Button variant="secondary" className="ml-2" href="https://app.formbricks.com/demo" target="_blank">
+          <Button
+            variant="secondary"
+            className="ml-2"
+            onClick={() => {
+              plausible("openDemo");
+              window.open("https://app.formbricks.com/demo", "_blank")?.focus();
+            }}>
             Try Demo
           </Button>
           <Button
             variant="highlight"
             className="ml-2"
-            href="https://app.formbricks.com/auth/signup"
-            target="_blank">
+            onClick={() => {
+              plausible("openSignUp");
+              window.open("https://app.formbricks.com/auth/signup", "_blank")?.focus();
+            }}>
             Sign Up
           </Button>
         </div>

apps/formbricks-com/pages/pmf.tsx

@@ -13,9 +13,11 @@ import PipelinesDark from "@/images/pipelines-dark.png";
 import PreSegmentationDark from "@/images/pre-segmentation-dark.png";
 import PmfDummy from "@/components/docs/PmfDummy";
 import EarlyBirdDeal from "@/components/shared/EarlyBirdDeal";
+import { usePlausible } from "next-plausible";
 
 export default function GetStartedPage() {
   const router = useRouter();
+  const plausible = usePlausible();
   return (
     <LayoutPMF
       title="Measure Product-Market Fit continuously"
@@ -38,14 +40,21 @@ export default function GetStartedPage() {
         </p>
 
         <div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
-          <Button variant="secondary" href="https://app.formbricks.com/demo" target="_blank">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              plausible("openDemo");
+              window.open("https://app.formbricks.com/demo", "_blank")?.focus();
+            }}>
             Try it out
           </Button>
           <Button
             variant="highlight"
             className="ml-3"
-            href="https://app.formbricks.com/auth/signup"
-            target="_blank">
+            onClick={() => {
+              plausible("openSignUp");
+              window.open("https://app.formbricks.com/auth/signup", "_blank")?.focus();
+            }}>
             Sign Up
           </Button>
         </div>