mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-27 21:08:00 +00:00
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.
This commit is contained in:
Steven Enamakel
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user