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..b3219805 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 { @@ -5,12 +6,31 @@ interface GetStartedButtonProps { large?: boolean } -const GetStartedButton: React.FC = ({ label = 'Get Started Free', large = false }) => { - return ( - - ) +const GetStartedButton: React.FC = ({ 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 ( + + {label} + + } + variants={{ + V1: ( + + ), + }} + /> + ); } export default GetStartedButton diff --git a/src/index.css b/src/index.css index 32057c56..365e1b2c 100644 --- a/src/index.css +++ b/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); }