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 = ({ label = 'Get Started Free', large = false }) => { - return ( - - ) + const handleClick = () => { + // Track button click for experiment analytics + console.log('GetStartedButton clicked - V2 Icon-Enhanced CTA'); + } + + return ( + + {label} + + } + variants={{ + V2: ( + + ), + }} + /> + ); } 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; }