Update onboarding flow to include new FeaturesStep and adjust step sequence

- Added a new FeaturesStep component to showcase key features of AlphaHuman. - Updated the Onboarding component to include the new FeaturesStep, increasing total steps from 4 to 5. - Rearranged the sequence of steps to enhance user engagement and clarity. - Improved messaging in the ConnectStep and GetStartedStep for better user understanding. These changes aim to provide a more comprehensive onboarding experience, highlighting the features of the application while ensuring a smooth transition through the steps.
2026-07-30 23:14:37 +00:00 · 2026-01-28 01:01:46 +05:30
parent f8afb1eeab
commit d7989ee6df
5 changed files with 73 additions and 14 deletions
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ProgressIndicator from '../../components/ProgressIndicator';
+import FeaturesStep from './steps/FeaturesStep';
 import PrivacyStep from './steps/PrivacyStep';
 import AnalyticsStep from './steps/AnalyticsStep';
 import ConnectStep from './steps/ConnectStep';
@@ -9,7 +10,7 @@ import GetStartedStep from './steps/GetStartedStep';
 const Onboarding = () => {
  const navigate = useNavigate();
  const [currentStep, setCurrentStep] = useState(1);
-  const totalSteps = 4;
+  const totalSteps = 5;

  const handleNext = () => {
    if (currentStep < totalSteps) {
@@ -32,15 +33,17 @@ const Onboarding = () => {
  const renderStep = () => {
    switch (currentStep) {
      case 1:
-        return <PrivacyStep onNext={handleNext} />;
+        return <FeaturesStep onNext={handleNext} />;
      case 2:
-        return <AnalyticsStep onNext={handleNext} />;
+        return <PrivacyStep onNext={handleNext} />;
      case 3:
-        return <ConnectStep onNext={handleNext} />;
+        return <AnalyticsStep onNext={handleNext} />;
      case 4:
+        return <ConnectStep onNext={handleNext} />;
+      case 5:
        return <GetStartedStep onComplete={handleComplete} />;
      default:
-        return <PrivacyStep onNext={handleNext} />;
+        return <FeaturesStep onNext={handleNext} />;
    }
  };

@@ -68,7 +68,8 @@ const ConnectStep = ({ onNext }: ConnectStepProps) => {
      <div className="text-center mb-4">
        <h1 className="text-xl font-bold mb-2">Connect Accounts</h1>
        <p className="opacity-70 text-sm">
-          To get the most out of AlphaHuman, we need to connect at least one account to your assistant.
+          To get the most out of AlphaHuman, you need to connect at least one account to your assistant. The more
+          accounts you connect, the more powerful the intelligence will be.
        </p>
      </div>

@@ -0,0 +1,60 @@
+import PrivacyFeatureCard from '../../../components/PrivacyFeatureCard';
+
+interface FeaturesStepProps {
+  onNext: () => void;
+}
+
+const FeaturesStep = ({ onNext }: FeaturesStepProps) => {
+  const features = [
+    {
+      title: '🤖 Telegram Bot Assistant',
+      description: 'Interact with AlphaHuman through Telegram. Get instant responses, automate tasks, and receive insights directly in your chats.',
+    },
+    {
+      title: '📊 Crypto Market Intelligence',
+      description: 'Get real-time market analysis, price alerts, and deep insights to help you make informed trading decisions.',
+    },
+    {
+      title: '🔗 Multi-Account Integration',
+      description: 'Connect Google, Notion, Telegram, and more. Your assistant can read emails, manage tasks, and automate workflows across all your tools.',
+    },
+    {
+      title: '⚡ Local Processing',
+      description: 'All your data is processed locally on your device. Your conversations, credentials, and sensitive information never leave your machine.',
+    },
+    {
+      title: '🔄 Automation & Workflows',
+      description: 'Automate repetitive tasks, schedule actions, and create custom workflows to 10x your productivity in crypto.',
+    },
+  ];
+
+  return (
+    <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
+      <div className="text-center mb-4">
+        <h1 className="text-xl font-bold mb-2">Features</h1>
+        <p className="opacity-70 text-sm">
+          Discover what AlphaHuman can do for you
+        </p>
+      </div>
+
+      <div className="space-y-2 mb-4">
+        {features.map((feature, index) => (
+          <PrivacyFeatureCard
+            key={index}
+            title={feature.title}
+            description={feature.description}
+          />
+        ))}
+      </div>
+
+      <button
+        onClick={onNext}
+        className="btn-primary w-full py-2.5 text-sm font-medium rounded-xl"
+      >
+        Continue
+      </button>
+    </div>
+  );
+};
+
+export default FeaturesStep;
@@ -20,14 +20,9 @@ const GetStartedStep = ({ onComplete }: GetStartedStepProps) => {
  return (
    <div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
      <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" />
-          </svg>
-        </div>
-        <h1 className="text-xl font-bold mb-2">Get Started</h1>
+        <h1 className="text-xl font-bold mb-2">You Are Ready, Soldier!</h1>
        <p className="opacity-70 text-sm">
-          Alright you're all set up, now let's get you started with the bot!
+          Alright you're all set up, just message the bot you're ready to cook!
        </p>
      </div>

@@ -25,7 +25,7 @@ const PrivacyStep = ({ onNext }: PrivacyStepProps) => {
      <div className="text-center mb-4">
        <h1 className="text-xl font-bold mb-2">Privacy</h1>
        <p className="opacity-70 text-sm">
-          A quick overview of how your privacy is protected with AlphaHuman
+          A quick overview of how your privacy is protected with AlphaHuman. AlphaHuman is built with privacy in mind.
        </p>
      </div>