From 4aed1ba2fca47ff23f9514e89898d19522487ebf Mon Sep 17 00:00:00 2001
From: "probatai[bot]" <2062684+probatai[bot]@users.noreply.github.com>
Date: Mon, 9 Mar 2026 23:03:39 +0000
Subject: [PATCH] exp(exp_GetStartedButton_20260307_e8f4a2b1): implement
 variant V2

---
 package-lock.json                   | 10 +++++++
 package.json                        |  1 +
 src/components/GetStartedButton.tsx | 46 +++++++++++++++++++++++++----
 src/index.css                       | 12 ++++++--
 4 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 86ffc834..be46c912 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "landing-page",
       "version": "1.0.0",
       "dependencies": {
+        "@probat/react": "^0.4.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -954,6 +955,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@probat/react": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@probat/react/-/react-0.4.4.tgz",
+      "integrity": "sha512-SiXnYsGeprWd70ilSx8xHgCnKvaW8pj07z1Pb6kBeUoOWXn2JlQot+bU4fJ1qmNjCC/Brj1NXWM+7JFMHjDQRA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
diff --git a/package.json b/package.json
index 613edc15..ae3ca489 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/components/GetStartedButton.tsx b/src/components/GetStartedButton.tsx
index 1a1173af..8d4bb389 100644
--- a/src/components/GetStartedButton.tsx
+++ b/src/components/GetStartedButton.tsx
@@ -1,3 +1,4 @@
+import { Experiment } from '@probat/react';
 import React from 'react'
 
 interface GetStartedButtonProps {
@@ -6,11 +7,46 @@ interface GetStartedButtonProps {
 }
 
 const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Free', large = false }) => {
-  return (
-    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
-      {label}
-    </button>
-  )
+  const handleClick = () => {
+    // Track button click for experiment analytics
+    console.log('GetStartedButton clicked - V2 Icon-Enhanced CTA');
+  }
+
+    return (
+    <Experiment
+      id="exp_GetStartedButton_20260307_e8f4a2b1"
+      control={
+        <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
+              {label}
+            </button>
+      }
+      variants={{
+        V2: (
+          <button className={`btn btn-primary${large ? ' btn-large' : ''}`} onClick={handleClick}>
+                <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                  {label}
+                  <svg 
+                    className="btn-icon" 
+                    width="16" 
+                    height="16" 
+                    viewBox="0 0 16 16" 
+                    fill="none" 
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path 
+                      d="M3 8H13M13 8L9 4M13 8L9 12" 
+                      stroke="currentColor" 
+                      strokeWidth="2" 
+                      strokeLinecap="round" 
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </span>
+              </button>
+        ),
+      }}
+    />
+  );
 }
 
 export default GetStartedButton
diff --git a/src/index.css b/src/index.css
index 32057c56..e996f840 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,7 +32,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 12px 24px;
+  padding: 12px 28px;
   border: none;
   border-radius: 8px;
   font-size: 16px;
@@ -53,6 +53,14 @@ body {
   box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
 }
 
+.btn-primary:hover .btn-icon {
+  transform: translateX(4px);
+}
+
+.btn-icon {
+  transition: transform 0.3s ease;
+}
+
 .btn-outline {
   background: transparent;
   color: #667eea;
@@ -66,7 +74,7 @@ body {
 }
 
 .btn-large {
-  padding: 16px 32px;
+  padding: 16px 28px;
   font-size: 18px;
 }