[Probat] A/B test: Features

src/components/Features.experiment.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import './Features.css';
+
+interface Feature {
+  icon: string
+  title: string
+  description: string
+}
+
+const Features: React.FC = () => {
+  const features: Feature[] = [
+    {
+      icon: '⚡',
+      title: 'Lightning Fast',
+      description: 'Built for speed with optimized performance and minimal loading times.'
+    },
+    {
+      icon: '🔒',
+      title: 'Secure',
+      description: 'Enterprise-grade security with end-to-end encryption and compliance.'
+    },
+    {
+      icon: '📱',
+      title: 'Responsive',
+      description: 'Perfect experience across all devices and screen sizes.'
+    },
+    {
+      icon: '🎨',
+      title: 'Customizable',
+      description: 'Fully customizable themes and components to match your brand.'
+    },
+    {
+      icon: '🚀',
+      title: 'Scalable',
+      description: 'Grows with your business from startup to enterprise scale.'
+    },
+    {
+      icon: '💬',
+      title: 'Support',
+      description: '24/7 customer support with dedicated success managers.'
+    }
+  ]
+
+  return (
+    <section className="features" id="features">
+      <div className="container">
+        <div className="section-header">
+          <h2 className="section-title">Everything You Need to Launch Faster</h2>
+          <p className="section-description">
+            Discover the features that make our platform the best choice for your needs.
+          </p>
+        </div>
+
+        <div className="features-grid">
+          {features.map((feature, index) => (
+            <div key={index} className="feature-card">
+              <div className="feature-icon">
+                {feature.icon}
+              </div>
+              <h3 className="feature-title">{feature.title}</h3>
+              <p className="feature-description">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features;

src/components/Features.original.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import './Features.css';
+
+interface Feature {
+  icon: string
+  title: string
+  description: string
+}
+
+const Features: React.FC = () => {
+  const features: Feature[] = [
+    {
+      icon: '⚡',
+      title: 'Lightning Fast',
+      description: 'Built for speed with optimized performance and minimal loading times.'
+    },
+    {
+      icon: '🔒',
+      title: 'Secure',
+      description: 'Enterprise-grade security with end-to-end encryption and compliance.'
+    },
+    {
+      icon: '📱',
+      title: 'Responsive',
+      description: 'Perfect experience across all devices and screen sizes.'
+    },
+    {
+      icon: '🎨',
+      title: 'Customizable',
+      description: 'Fully customizable themes and components to match your brand.'
+    },
+    {
+      icon: '🚀',
+      title: 'Scalable',
+      description: 'Grows with your business from startup to enterprise scale.'
+    },
+    {
+      icon: '💬',
+      title: 'Support',
+      description: '24/7 customer support with dedicated success managers.'
+    }
+  ]
+
+  return (
+    <section className="features" id="features">
+      <div className="container">
+        <div className="section-header">
+          <h2 className="section-title">Why Choose Us?</h2>
+          <p className="section-description">
+            Discover the features that make our platform the best choice for your needs.
+          </p>
+        </div>
+
+        <div className="features-grid">
+          {features.map((feature, index) => (
+            <div key={index} className="feature-card">
+              <div className="feature-icon">
+                {feature.icon}
+              </div>
+              <h3 className="feature-title">{feature.title}</h3>
+              <p className="feature-description">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features;

src/components/Features.tsx

@@ -1,70 +1,16 @@
-import React from "react";
-import './Features.css';
-
-interface Feature {
-  icon: string
-  title: string
-  description: string
-}
-
-const Features: React.FC = () => {
-  const features: Feature[] = [
-    {
-      icon: '⚡',
-      title: 'Lightning Fast',
-      description: 'Built for speed with optimized performance and minimal loading times.'
-    },
-    {
-      icon: '🔒',
-      title: 'Secure',
-      description: 'Enterprise-grade security with end-to-end encryption and compliance.'
-    },
-    {
-      icon: '📱',
-      title: 'Responsive',
-      description: 'Perfect experience across all devices and screen sizes.'
-    },
-    {
-      icon: '🎨',
-      title: 'Customizable',
-      description: 'Fully customizable themes and components to match your brand.'
-    },
-    {
-      icon: '🚀',
-      title: 'Scalable',
-      description: 'Grows with your business from startup to enterprise scale.'
-    },
-    {
-      icon: '💬',
-      title: 'Support',
-      description: '24/7 customer support with dedicated success managers.'
-    }
-  ]
+"use client";
+import { ProbatProviderClient, Experiment } from "@probat/react";
+import OriginalComponent from "./Features.original";
+import ExperimentVariant from "./Features.experiment";
 
+export default function Features(props: any) {
   return (
-    <section className="features" id="features">
-      <div className="container">
-        <div className="section-header">
-          <h2 className="section-title">Why Choose Us?</h2>
-          <p className="section-description">
-            Discover the features that make our platform the best choice for your needs.
-          </p>
-        </div>
-
-        <div className="features-grid">
-          {features.map((feature, index) => (
-            <div key={index} className="feature-card">
-              <div className="feature-icon">
-                {feature.icon}
-              </div>
-              <h3 className="feature-title">{feature.title}</h3>
-              <p className="feature-description">{feature.description}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
+    <ProbatProviderClient userId="a016e79e-d87f-4fe5-8dd9-c9c26fd43fdd">
+      <Experiment
+        id="df20618b-919b-404c-bbbc-7ddd627d19fc"
+        control={<OriginalComponent {...props} />}
+        variants={{ experiment: <ExperimentVariant {...props} /> }}
+      />
+    </ProbatProviderClient>
+  );
 }
-
-export default Features;