⚠️ [Probat Preview] DO NOT MERGE — 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,31 @@
+import React from 'react'
+
+interface GetStartedButtonProps {
+  label?: string
+  large?: boolean
+}
+
+const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Start Your Free Trial', large = false }) => {
+  return (
+    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
+      {label} <span 
+        aria-hidden="true" 
+        style={{ 
+          marginLeft: '4px',
+          display: 'inline-block',
+          animation: 'slideRight 1.5s ease-in-out infinite'
+        }}
+      >
+        →
+      </span>
+      <style jsx>{`
+        @keyframes slideRight {
+          0%, 100% { transform: translateX(0px); }
+          50% { transform: translateX(3px); }
+        }
+      `}</style>
+    </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

@@ -5,10 +5,14 @@ interface GetStartedButtonProps {
   large?: boolean
 }
 
-const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Free', large = false }) => {
+const GetStartedButton: React.FC<GetStartedButtonProps> = ({ label = 'Get Started Now', large = true }) => {
   return (
-    <button className={`btn btn-primary${large ? ' btn-large' : ''}`}>
-      {label}
+    <button
+      className={`btn btn-primary${large ? ' btn-large' : ''}`}
+      style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: '2px' }}
+    >
+      <span>{label}</span>
+      <span style={{ fontSize: '0.7em', opacity: 0.85, fontWeight: 400 }}>Free forever · No credit card</span>
     </button>
   )
 }