[Probat] A/B test: GetStartedButton

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@probat/react": "^0.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/components/GetStartedButton.experiment.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface GetStartedButtonProps {
+  label?: string
+  large?: boolean
+}
+
+const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Try It Free — No Credit Card Needed', large = true }) => {
+  return (
+    <button
+      className={`btn btn-primary${large ? ' btn-large' : ''}`}
+      style={{ boxShadow: '0 4px 14px rgba(0, 0, 0, 0.15)', transition: 'box-shadow 0.2s ease, transform 0.2s ease' }}
+      onMouseEnter={(e) => { e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.25)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
+      onMouseLeave={(e) => { e.currentTarget.style.boxShadow = '0 4px 14px rgba(0, 0, 0, 0.15)'; e.currentTarget.style.transform = 'translateY(0)'; }}
+    >
+      {label}
+    </button>
+  )
+}
+
+export default GetStartedButton

src/components/GetStartedButton.original.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface GetStartedButtonProps {
+  label?: string
+  large?: boolean
+}
+
+const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Free', large = false }) => {
+  return (
+    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
+      {label}
+    </button>
+  )
+}
+
+export default GetStartedButton

src/components/GetStartedButton.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
+"use client";
+import { ProbatProviderClient, Experiment } from "@probat/react";
+import OriginalComponent from "./GetStartedButton.original";
+import ExperimentVariant from "./GetStartedButton.experiment";
 
-interface GetStartedButtonProps {
-  label?: string
-  large?: boolean
-}
-
-const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Free', large = false }) => {
+export default function GetStartedButton(props: any) {
   return (
-    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
-      {label}
-    </button>
-  )
+    <ProbatProviderClient userId="f3a91e3e-da2b-4b49-a487-8202d07182c0">
+      <Experiment
+        id="ddd02693-9e89-4922-a8f9-bcdd9ec9e620"
+        control={<OriginalComponent {...props} />}
+        variants={{ experiment: <ExperimentVariant {...props} /> }}
+      />
+    </ProbatProviderClient>
+  );
 }
-
-export default GetStartedButton