From 8cd1b51174696d00f59fb72364be83e9175ac6e8 Mon Sep 17 00:00:00 2001
From: Steven Enamakel <enamakel@vezures.xyz>
Date: Wed, 28 Jan 2026 00:45:28 +0530
Subject: [PATCH] Update onboarding steps for improved clarity and user
 engagement

- Modified button styles in the Onboarding component for a cleaner look.
- Changed default selected option in AnalyticsStep from 'maximumPrivacy' to 'shareAnalytics' to better reflect user preferences.
- Updated titles and descriptions in AnalyticsStep and GetStartedStep for clearer messaging and enhanced user understanding.
- Improved overall layout and text for a more cohesive onboarding experience.

These changes aim to streamline the onboarding process, making it more intuitive and engaging for users.
---
 src/pages/onboarding/Onboarding.tsx           |  2 +-
 src/pages/onboarding/steps/AnalyticsStep.tsx  | 55 ++++++++-----------
 src/pages/onboarding/steps/GetStartedStep.tsx | 19 ++-----
 3 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index 43864c1a4..9323c03f1 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -52,7 +52,7 @@ const Onboarding = () => {
         {currentStep > 1 && (
           <button
             onClick={handleBack}
-            className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
+            className="mt-6 outline-none border-none w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
           >
             ← Back
           </button>
diff --git a/src/pages/onboarding/steps/AnalyticsStep.tsx b/src/pages/onboarding/steps/AnalyticsStep.tsx
index 3c7ca667f..333f73920 100644
--- a/src/pages/onboarding/steps/AnalyticsStep.tsx
+++ b/src/pages/onboarding/steps/AnalyticsStep.tsx
@@ -5,7 +5,7 @@ interface AnalyticsStepProps {
 }
 
 const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
-  const [selectedOption, setSelectedOption] = useState('maximumPrivacy');
+  const [selectedOption, setSelectedOption] = useState('shareAnalytics');
 
   return (
     <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
@@ -18,21 +18,19 @@ const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
 
       <div className="space-y-4 mb-4">
         <div
-          className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${
-            selectedOption === 'shareAnalytics'
-              ? 'border-primary-500 bg-primary-500/20'
-              : 'border-stone-700 bg-black/50 hover:border-stone-600'
-          }`}
+          className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${selectedOption === 'shareAnalytics'
+            ? 'border-primary-500 bg-primary-500/20'
+            : 'border-stone-700 bg-black/50 hover:border-stone-600'
+            }`}
           onClick={() => setSelectedOption('shareAnalytics')}
         >
           <div className="flex items-start space-x-4">
             <div className="flex items-center justify-center mt-0.5">
               <div
-                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
-                  selectedOption === 'shareAnalytics'
-                    ? 'border-primary-500 bg-primary-500'
-                    : 'border-stone-600 bg-black'
-                }`}
+                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${selectedOption === 'shareAnalytics'
+                  ? 'border-primary-500 bg-primary-500'
+                  : 'border-stone-600 bg-black'
+                  }`}
               >
                 {selectedOption === 'shareAnalytics' && (
                   <div className="w-2 h-2 bg-white rounded-full"></div>
@@ -40,30 +38,29 @@ const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
               </div>
             </div>
             <div>
-              <h3 className="font-semibold mb-1 text-sm">Securely Share Analytics</h3>
+              <h3 className="font-semibold mb-1 text-sm">Share Anonymized Usage Data</h3>
               <p className="opacity-70 text-xs leading-relaxed">
-                Share anonymized usage data to help us improve features and performance. All data is encrypted and cannot be traced back to you.
+                Share anonymized usage data to help us improve features and performance of the app.
+                This helps us improve the app for you and for others.
               </p>
             </div>
           </div>
         </div>
 
         <div
-          className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${
-            selectedOption === 'maximumPrivacy'
-              ? 'border-primary-500 bg-primary-500/20'
-              : 'border-stone-700 bg-black/50 hover:border-stone-600'
-          }`}
+          className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${selectedOption === 'maximumPrivacy'
+            ? 'border-primary-500 bg-primary-500/20'
+            : 'border-stone-700 bg-black/50 hover:border-stone-600'
+            }`}
           onClick={() => setSelectedOption('maximumPrivacy')}
         >
           <div className="flex items-start space-x-4">
             <div className="flex items-center justify-center mt-0.5">
               <div
-                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
-                  selectedOption === 'maximumPrivacy'
-                    ? 'border-primary-500 bg-primary-500'
-                    : 'border-stone-600 bg-black'
-                }`}
+                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${selectedOption === 'maximumPrivacy'
+                  ? 'border-primary-500 bg-primary-500'
+                  : 'border-stone-600 bg-black'
+                  }`}
               >
                 {selectedOption === 'maximumPrivacy' && (
                   <div className="w-2 h-2 bg-white rounded-full"></div>
@@ -71,16 +68,10 @@ const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
               </div>
             </div>
             <div>
-              <h3 className="font-semibold mb-1 text-sm">Maximum Privacy</h3>
+              <h3 className="font-semibold mb-1 text-sm">Don't Collect Anything</h3>
               <p className="opacity-70 text-xs leading-relaxed">
-                Keep all your data completely private. We won't collect any usage analytics, ensuring total anonymity.
+                We won't collect any usage analytics, ensuring total anonymity. Keep all your data completely private.
               </p>
-              <div className="flex items-center space-x-1 mt-2">
-                <svg className="w-4 h-4 text-primary-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 1L5 6v4c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V6l-5-5z"/>
-                </svg>
-                <span className="text-primary-400 text-xs font-medium">Recommended for privacy</span>
-              </div>
             </div>
           </div>
         </div>
@@ -96,7 +87,7 @@ const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => {
       <div className="p-4 bg-stone-800/50 rounded-xl border border-stone-700">
         <div className="flex items-start space-x-2">
           <svg className="w-5 h-5 text-sage-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd"/>
+            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
           </svg>
           <div>
             <p className="font-medium text-sm">You can change this setting anytime</p>
diff --git a/src/pages/onboarding/steps/GetStartedStep.tsx b/src/pages/onboarding/steps/GetStartedStep.tsx
index 62f2a72d2..0bd6416bb 100644
--- a/src/pages/onboarding/steps/GetStartedStep.tsx
+++ b/src/pages/onboarding/steps/GetStartedStep.tsx
@@ -22,12 +22,12 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
       <div className="text-center mb-4">
         <div className="w-16 h-16 mx-auto mb-4 bg-blue-500 rounded-full flex items-center justify-center">
           <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
           </svg>
         </div>
         <h1 className="text-xl font-bold mb-2">Get Started</h1>
         <p className="opacity-70 text-sm">
-          Start messaging the bot to begin your crypto journey
+          Alright you're all set up, now let's get you started with the bot!
         </p>
       </div>
 
@@ -66,9 +66,9 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
               <span className="text-white font-bold text-xs">3</span>
             </div>
             <div>
-              <h3 className="font-semibold mb-1 text-sm">Cook! 🔥</h3>
+              <h3 className="font-semibold mb-1 text-sm">Watch the Magic Happen 🪄</h3>
               <p className="opacity-70 text-xs">
-                The bot will help you with research, analysis, and staying on top of the crypto market
+                Your assistant will automatically start connecting to your accounts and tools to help you get more done.
               </p>
             </div>
           </div>
@@ -80,16 +80,9 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
         className="w-full flex items-center justify-center space-x-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-semibold py-2.5 text-sm rounded-xl transition-all duration-300 hover:shadow-medium mb-3"
       >
         <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+          <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
         </svg>
-        <span>Open Telegram Bot</span>
-      </button>
-
-      <button
-        onClick={onComplete}
-        className="w-full py-2.5 opacity-60 hover:opacity-100 font-medium text-sm transition-opacity"
-      >
-        Skip for now
+        <span>Let's Cook! 🔥</span>
       </button>
     </div>
   );