[Experiment exp_GetStartedButton_20260307_e8f4a2b1] High Contrast CTA with Urgency Copy (V1)

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@probat/react": "^0.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/components/GetStartedButton.tsx

@@ -1,16 +1,36 @@
+import { Experiment } from '@probat/react';
 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>
-  )
+const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Start Building Now - Free', large = false }) => {
+  const handleClick = () => {
+    // Track button click event
+    if (typeof window !== 'undefined' && (window as any).trackEvent) {
+      (window as any).trackEvent('cta_click', { variant: 'V1', label })
+    }
+  }
+
+    return (
+    <Experiment
+      id="exp_GetStartedButton_20260307_e8f4a2b1"
+      control={
+        <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
+              {label}
+            </button>
+      }
+      variants={{
+        V1: (
+          <button className={`btn btn-primary${large ? ' btn-large' : ''}`} onClick={handleClick}>
+                {label}
+              </button>
+        ),
+      }}
+    />
+  );
 }
 
 export default GetStartedButton

src/index.css

@@ -46,10 +46,12 @@ body {
 .btn-primary {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
+  font-weight: 700;
+  box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
 }
 
 .btn-primary:hover {
-  transform: translateY(-2px);
+  transform: translateY(-2px) scale(1.02);
   box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
 }