mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-27 21:08:00 +00:00
Refactor onboarding and styling for improved user experience
- Updated onboarding steps to remove background patterns and enhance layout consistency. - Modified text styles for better readability and accessibility, including opacity adjustments. - Improved button styles for Google and Microsoft account connections. - Enhanced privacy and security messaging across onboarding steps. - Streamlined the overall design to align with the dark mode theme and glass morphism aesthetics. This update enhances the onboarding flow, making it more visually appealing and user-friendly while maintaining a focus on privacy and security.
This commit is contained in:
Steven Enamakel
+1
-1
@@ -31,7 +31,7 @@
|
||||
@apply font-sans;
|
||||
line-height: 1.6;
|
||||
|
||||
background-color: #0f0f0f;
|
||||
background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
|
||||
color: #ffffff;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
|
||||
+9
-12
@@ -46,20 +46,17 @@ const Login = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 bg-noise opacity-30"></div>
|
||||
|
||||
<div className="min-h-screen relative flex items-center justify-center">
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 max-w-md w-full mx-4">
|
||||
{/* Login/Signup card */}
|
||||
<div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2">
|
||||
<h1 className="text-2xl font-bold mb-2">
|
||||
Join the Community
|
||||
</h1>
|
||||
<p className="text-stone-600">
|
||||
<p className="opacity-70">
|
||||
Choose your preferred method to get started
|
||||
</p>
|
||||
</div>
|
||||
@@ -75,7 +72,7 @@ const Login = () => {
|
||||
placeholder="(000) 000-0000"
|
||||
className="input-primary rounded-xl pl-20"
|
||||
/>
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 text-stone-500">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 opacity-60">
|
||||
<span className="text-lg">{selectedCountry.flag}</span>
|
||||
<span className="text-sm">{selectedCountry.dialCode}</span>
|
||||
</div>
|
||||
@@ -103,14 +100,14 @@ const Login = () => {
|
||||
</button>
|
||||
|
||||
{/* Security note */}
|
||||
<div className="mt-6 p-4 bg-sage-50 rounded-xl border border-sage-200">
|
||||
<div className="mt-6 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-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg className="w-5 h-5 text-sage-400 mt-0.5" 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>
|
||||
<div>
|
||||
<p className="text-sage-800 font-medium text-sm">Secure Authentication</p>
|
||||
<p className="text-sage-600 text-xs mt-1">Your data is protected with enterprise-grade encryption</p>
|
||||
<p className="font-medium text-sm">Secure Authentication</p>
|
||||
<p className="opacity-70 text-xs mt-1">Your data is protected with enterprise-grade encryption</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,7 +116,7 @@ const Login = () => {
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
|
||||
className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
|
||||
>
|
||||
← Back to welcome
|
||||
</button>
|
||||
|
||||
+32
-45
@@ -5,75 +5,62 @@ const Welcome = () => {
|
||||
const navigate = useNavigate();
|
||||
const [greeting] = useState(() => {
|
||||
const greetings = [
|
||||
"Ready to make your wallet cry tears of joy? 😭💰",
|
||||
"Time to turn those diamond hands into actual diamonds! 💎👋",
|
||||
"Welcome to the exclusive club of crypto degenerates! 🎪🚀",
|
||||
"Let's get you richer than a Nigerian prince's email! 👑💸",
|
||||
"Ready to HODL like your life depends on it? 🤝💀",
|
||||
"Welcome, future crypto millionaire (results not guaranteed)! 🎰💎",
|
||||
"Time to make Wall Street bros jealous AF! 📈🔥",
|
||||
"Ready to go to the moon? Pack light! 🌙🚀"
|
||||
"Hello Satoshi! 👋",
|
||||
"Got Crypto, Anon? 👀",
|
||||
// "Welcome to the exclusive club of crypto degenerates! 🎪🚀",
|
||||
// "Let's get you richer than a Nigerian prince's email! 👑💸",
|
||||
// "Ready to HODL like your life depends on it? 🤝💀",
|
||||
// "Welcome, future crypto millionaire (results not guaranteed)! 🎰💎",
|
||||
// "Time to make Wall Street bros jealous AF! 📈🔥",
|
||||
// "Ready to go to the moon? Pack light! 🌙🚀"
|
||||
];
|
||||
return greetings[Math.floor(Math.random() * greetings.length)];
|
||||
});
|
||||
|
||||
const handleGetStarted = () => {
|
||||
navigate('/login');
|
||||
const handleTelegramLogin = () => {
|
||||
navigate('/onboarding/step1');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 bg-noise opacity-30"></div>
|
||||
|
||||
<div className="min-h-screen relative flex items-center justify-center">
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 max-w-md w-full mx-4">
|
||||
{/* Welcome card */}
|
||||
<div className="glass rounded-3xl p-8 text-center animate-fade-up shadow-large">
|
||||
{/* Logo/Icon placeholder */}
|
||||
<div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-primary-500 to-sage-500 rounded-2xl flex items-center justify-center">
|
||||
<svg className="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Greeting */}
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2">
|
||||
<h1 className="text-2xl font-bold mb-4">
|
||||
{greeting}
|
||||
</h1>
|
||||
|
||||
<p className="text-stone-600 mb-8 leading-relaxed">
|
||||
Ready to join the most exclusive crypto community? Let's get you set up with enterprise-grade security and maximum privacy.
|
||||
{/* <br /> */}
|
||||
|
||||
<p className="opacity-70 mb-8 leading-relaxed">
|
||||
Welcome to AlphaHuman. Your Telegram assistant here to get you 10x more done in your crypto journey.
|
||||
</p>
|
||||
|
||||
{/* Get Started button */}
|
||||
<button
|
||||
onClick={handleGetStarted}
|
||||
className="btn-primary w-full py-4 text-lg font-semibold rounded-xl shadow-medium hover:shadow-large transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]"
|
||||
>
|
||||
Get Started
|
||||
</button>
|
||||
<p className="opacity-70 mb-8 leading-relaxed">
|
||||
Are you ready to cook?
|
||||
</p>
|
||||
|
||||
{/* Trust indicators */}
|
||||
<div className="mt-6 flex items-center justify-center space-x-4 text-xs text-stone-500">
|
||||
<span className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-sage-500 rounded-full"></div>
|
||||
<span>SOC 2 Certified</span>
|
||||
</span>
|
||||
<span className="flex items-center space-x-1">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full"></div>
|
||||
<span>Bank-Grade Security</span>
|
||||
</span>
|
||||
</div>
|
||||
{/* Login with Telegram button */}
|
||||
<button
|
||||
onClick={handleTelegramLogin}
|
||||
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-4 rounded-xl transition-all duration-300 hover:shadow-medium hover:scale-[1.02] active:scale-[0.98]"
|
||||
>
|
||||
<svg className="w-6 h-6" 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>
|
||||
<span>Login with Telegram</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bottom text */}
|
||||
<p className="text-center text-stone-500 text-sm mt-6">
|
||||
Trusted by thousands of crypto professionals worldwide
|
||||
<p className="text-center opacity-60 text-sm mt-6">
|
||||
Made with ❤️ by poor Web3 nerds
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Welcome;
|
||||
export default Welcome;
|
||||
|
||||
@@ -50,10 +50,7 @@ const Step1Phone = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 bg-noise opacity-30"></div>
|
||||
|
||||
<div className="min-h-screen relative flex items-center justify-center">
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 max-w-md w-full mx-4">
|
||||
{/* Progress indicator */}
|
||||
@@ -63,19 +60,19 @@ const Step1Phone = () => {
|
||||
<div className="w-12 h-1 bg-primary-500 mx-2"></div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center text-stone-500 text-sm font-semibold">2</div>
|
||||
<div className="w-12 h-1 bg-stone-300 mx-2"></div>
|
||||
<div className="w-8 h-8 bg-stone-700 rounded-full flex items-center justify-center text-white text-sm font-semibold">2</div>
|
||||
<div className="w-12 h-1 bg-stone-700 mx-2"></div>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center text-stone-500 text-sm font-semibold">3</div>
|
||||
<div className="w-8 h-8 bg-stone-700 rounded-full flex items-center justify-center text-white text-sm font-semibold">3</div>
|
||||
</div>
|
||||
|
||||
{/* Phone input card */}
|
||||
<div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2">
|
||||
<h1 className="text-2xl font-bold mb-2">
|
||||
Verify Your Phone
|
||||
</h1>
|
||||
<p className="text-stone-600">
|
||||
<p className="opacity-70">
|
||||
We'll send you a secure verification code to protect your account
|
||||
</p>
|
||||
</div>
|
||||
@@ -86,30 +83,30 @@ const Step1Phone = () => {
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="w-full flex items-center justify-between p-4 bg-white border border-stone-300 rounded-xl hover:border-primary-500 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
|
||||
className="w-full flex items-center justify-between p-4 bg-black/50 border border-stone-700 rounded-xl hover:border-primary-500 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-2xl">{selectedCountry.flag}</span>
|
||||
<span className="font-medium text-stone-900">{selectedCountry.name}</span>
|
||||
<span className="text-stone-500">{selectedCountry.dialCode}</span>
|
||||
<span className="font-medium">{selectedCountry.name}</span>
|
||||
<span className="opacity-60">{selectedCountry.dialCode}</span>
|
||||
</div>
|
||||
<svg className={`w-5 h-5 text-stone-500 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg className={`w-5 h-5 opacity-60 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Dropdown menu */}
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute z-50 w-full mt-2 bg-white border border-stone-300 rounded-xl shadow-large max-h-60 overflow-y-auto">
|
||||
<div className="absolute z-50 w-full mt-2 bg-black/90 border border-stone-700 rounded-xl shadow-large max-h-60 overflow-y-auto">
|
||||
{countries.map((country) => (
|
||||
<button
|
||||
key={country.code}
|
||||
onClick={() => handleCountrySelect(country)}
|
||||
className="w-full flex items-center space-x-3 p-3 hover:bg-stone-50 transition-colors text-left"
|
||||
className="w-full flex items-center space-x-3 p-3 hover:bg-stone-800 transition-colors text-left"
|
||||
>
|
||||
<span className="text-xl">{country.flag}</span>
|
||||
<span className="font-medium text-stone-900 flex-1">{country.name}</span>
|
||||
<span className="text-stone-500 text-sm">{country.dialCode}</span>
|
||||
<span className="font-medium flex-1">{country.name}</span>
|
||||
<span className="opacity-60 text-sm">{country.dialCode}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -125,7 +122,7 @@ const Step1Phone = () => {
|
||||
placeholder={selectedCountry.code === 'US' ? '(000) 000-0000' : 'Phone number'}
|
||||
className="input-primary rounded-xl pl-20"
|
||||
/>
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 text-stone-500">
|
||||
<div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center space-x-2 opacity-60">
|
||||
<span>{selectedCountry.flag}</span>
|
||||
<span className="text-sm">{selectedCountry.dialCode}</span>
|
||||
</div>
|
||||
@@ -144,7 +141,7 @@ const Step1Phone = () => {
|
||||
{/* Telegram alternative */}
|
||||
<button
|
||||
onClick={handleTelegramContinue}
|
||||
className="w-full flex items-center justify-center space-x-2 py-4 text-primary-600 font-medium rounded-xl border border-primary-200 hover:bg-primary-50 transition-colors"
|
||||
className="w-full flex items-center justify-center space-x-2 py-4 text-primary-400 font-medium rounded-xl border border-primary-600/50 hover:bg-primary-600/20 transition-colors"
|
||||
>
|
||||
<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"/>
|
||||
@@ -153,14 +150,14 @@ const Step1Phone = () => {
|
||||
</button>
|
||||
|
||||
{/* Security note */}
|
||||
<div className="mt-6 p-4 bg-primary-50 rounded-xl border border-primary-200">
|
||||
<div className="mt-6 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-primary-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg className="w-5 h-5 text-primary-400 mt-0.5" 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>
|
||||
<div>
|
||||
<p className="text-primary-800 font-medium text-sm">Your Privacy Matters</p>
|
||||
<p className="text-primary-600 text-xs mt-1">Your phone number is encrypted and never shared with third parties</p>
|
||||
<p className="font-medium text-sm">Your Privacy Matters</p>
|
||||
<p className="opacity-70 text-xs mt-1">Your phone number is encrypted and never shared with third parties</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -169,7 +166,7 @@ const Step1Phone = () => {
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate('/login')}
|
||||
className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
|
||||
className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
|
||||
>
|
||||
← Back to login
|
||||
</button>
|
||||
|
||||
@@ -8,10 +8,7 @@ const Step2Privacy = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 bg-noise opacity-30"></div>
|
||||
|
||||
<div className="min-h-screen relative flex items-center justify-center">
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 max-w-md w-full mx-4">
|
||||
{/* Progress indicator */}
|
||||
@@ -22,18 +19,18 @@ const Step2Privacy = () => {
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-primary-500 rounded-full flex items-center justify-center text-white text-sm font-semibold">2</div>
|
||||
<div className="w-12 h-1 bg-stone-300 mx-2"></div>
|
||||
<div className="w-12 h-1 bg-stone-700 mx-2"></div>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-stone-300 rounded-full flex items-center justify-center text-stone-500 text-sm font-semibold">3</div>
|
||||
<div className="w-8 h-8 bg-stone-700 rounded-full flex items-center justify-center text-white text-sm font-semibold">3</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy card */}
|
||||
<div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2">
|
||||
<h1 className="text-2xl font-bold mb-2">
|
||||
Privacy
|
||||
</h1>
|
||||
<p className="text-stone-600">
|
||||
<p className="opacity-70">
|
||||
Your security and privacy are our top priorities
|
||||
</p>
|
||||
</div>
|
||||
@@ -41,7 +38,7 @@ const Step2Privacy = () => {
|
||||
{/* Enterprise-Grade Security Section */}
|
||||
<div className="space-y-6 mb-8">
|
||||
{/* Enterprise-Grade Security */}
|
||||
<div className="bg-sage-50 rounded-xl p-6 border border-sage-200">
|
||||
<div className="bg-stone-800/50 rounded-xl p-6 border border-stone-700">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-12 h-12 bg-sage-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
@@ -49,8 +46,8 @@ const Step2Privacy = () => {
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-sage-900 mb-2">Enterprise-Grade Security</h3>
|
||||
<p className="text-sage-700 text-sm leading-relaxed">
|
||||
<h3 className="font-semibold mb-2">Enterprise-Grade Security</h3>
|
||||
<p className="opacity-70 text-sm leading-relaxed">
|
||||
Bank-level encryption, multi-factor authentication, and 24/7 security monitoring to protect your assets and personal information.
|
||||
</p>
|
||||
</div>
|
||||
@@ -58,7 +55,7 @@ const Step2Privacy = () => {
|
||||
</div>
|
||||
|
||||
{/* Privacy Section */}
|
||||
<div className="bg-primary-50 rounded-xl p-6 border border-primary-200">
|
||||
<div className="bg-stone-800/50 rounded-xl p-6 border border-stone-700">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-12 h-12 bg-primary-500 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
@@ -67,8 +64,8 @@ const Step2Privacy = () => {
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-primary-900 mb-2">Privacy</h3>
|
||||
<p className="text-primary-700 text-sm leading-relaxed">
|
||||
<h3 className="font-semibold mb-2">Privacy</h3>
|
||||
<p className="opacity-70 text-sm leading-relaxed">
|
||||
Zero-knowledge architecture ensures your trading patterns and holdings remain completely private from third parties.
|
||||
</p>
|
||||
</div>
|
||||
@@ -77,29 +74,29 @@ const Step2Privacy = () => {
|
||||
</div>
|
||||
|
||||
{/* Certifications */}
|
||||
<div className="bg-amber-50 rounded-xl p-6 border border-amber-200 mb-8">
|
||||
<h3 className="font-semibold text-amber-900 mb-4 text-center">Industry Certifications</h3>
|
||||
<div className="bg-stone-800/50 rounded-xl p-6 border border-stone-700 mb-8">
|
||||
<h3 className="font-semibold mb-4 text-center">Industry Certifications</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* SOC 2 Type II */}
|
||||
<div className="bg-white rounded-lg p-4 border border-amber-300 text-center">
|
||||
<div className="bg-black/50 rounded-lg p-4 border border-stone-700 text-center">
|
||||
<div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center mx-auto mb-2">
|
||||
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="font-medium text-amber-900 text-sm">SOC 2 Type II</p>
|
||||
<p className="text-amber-700 text-xs mt-1">Security & Availability</p>
|
||||
<p className="font-medium text-sm">SOC 2 Type II</p>
|
||||
<p className="opacity-70 text-xs mt-1">Security & Availability</p>
|
||||
</div>
|
||||
|
||||
{/* CASA Tier II */}
|
||||
<div className="bg-white rounded-lg p-4 border border-amber-300 text-center">
|
||||
<div className="bg-black/50 rounded-lg p-4 border border-stone-700 text-center">
|
||||
<div className="w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center mx-auto mb-2">
|
||||
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="font-medium text-amber-900 text-sm">CASA Tier II</p>
|
||||
<p className="text-amber-700 text-xs mt-1">Asset Protection</p>
|
||||
<p className="font-medium text-sm">CASA Tier II</p>
|
||||
<p className="opacity-70 text-xs mt-1">Asset Protection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,7 +113,7 @@ const Step2Privacy = () => {
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate('/onboarding/step1')}
|
||||
className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
|
||||
className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
|
||||
@@ -10,10 +10,7 @@ const Step3Analytics = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 bg-noise opacity-30"></div>
|
||||
|
||||
<div className="min-h-screen relative flex items-center justify-center">
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 max-w-md w-full mx-4">
|
||||
{/* Progress indicator */}
|
||||
@@ -32,10 +29,10 @@ const Step3Analytics = () => {
|
||||
{/* Analytics card */}
|
||||
<div className="glass rounded-3xl p-8 shadow-large animate-fade-up">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2">
|
||||
<h1 className="text-2xl font-bold mb-2">
|
||||
Analytics
|
||||
</h1>
|
||||
<p className="text-stone-600">
|
||||
<p className="opacity-70">
|
||||
Help us improve your experience while maintaining your privacy
|
||||
</p>
|
||||
</div>
|
||||
@@ -46,8 +43,8 @@ const Step3Analytics = () => {
|
||||
<div
|
||||
className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
selectedOption === 'shareAnalytics'
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-stone-300 bg-white hover:border-stone-400'
|
||||
? 'border-primary-500 bg-primary-500/20'
|
||||
: 'border-stone-700 bg-black/50 hover:border-stone-600'
|
||||
}`}
|
||||
onClick={() => setSelectedOption('shareAnalytics')}
|
||||
>
|
||||
@@ -56,7 +53,7 @@ const Step3Analytics = () => {
|
||||
<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-400 bg-white'
|
||||
: 'border-stone-600 bg-black'
|
||||
}`}>
|
||||
{selectedOption === 'shareAnalytics' && (
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
@@ -64,8 +61,8 @@ const Step3Analytics = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-stone-900 mb-1">Securely Share Analytics</h3>
|
||||
<p className="text-stone-600 text-sm leading-relaxed">
|
||||
<h3 className="font-semibold mb-1">Securely Share Analytics</h3>
|
||||
<p className="opacity-70 text-sm leading-relaxed">
|
||||
Share anonymized usage data to help us improve features and performance. All data is encrypted and cannot be traced back to you.
|
||||
</p>
|
||||
</div>
|
||||
@@ -76,8 +73,8 @@ const Step3Analytics = () => {
|
||||
<div
|
||||
className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${
|
||||
selectedOption === 'maximumPrivacy'
|
||||
? 'border-primary-500 bg-primary-50'
|
||||
: 'border-stone-300 bg-white hover:border-stone-400'
|
||||
? 'border-primary-500 bg-primary-500/20'
|
||||
: 'border-stone-700 bg-black/50 hover:border-stone-600'
|
||||
}`}
|
||||
onClick={() => setSelectedOption('maximumPrivacy')}
|
||||
>
|
||||
@@ -86,7 +83,7 @@ const Step3Analytics = () => {
|
||||
<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-400 bg-white'
|
||||
: 'border-stone-600 bg-black'
|
||||
}`}>
|
||||
{selectedOption === 'maximumPrivacy' && (
|
||||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||||
@@ -94,15 +91,15 @@ const Step3Analytics = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-stone-900 mb-1">Maximum Privacy</h3>
|
||||
<p className="text-stone-600 text-sm leading-relaxed">
|
||||
<h3 className="font-semibold mb-1">Maximum Privacy</h3>
|
||||
<p className="opacity-70 text-sm leading-relaxed">
|
||||
Keep all your data completely private. We won't collect any usage analytics, ensuring total anonymity.
|
||||
</p>
|
||||
<div className="flex items-center space-x-1 mt-2">
|
||||
<svg className="w-4 h-4 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<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-600 text-xs font-medium">Recommended for privacy</span>
|
||||
<span className="text-primary-400 text-xs font-medium">Recommended for privacy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,14 +115,14 @@ const Step3Analytics = () => {
|
||||
</button>
|
||||
|
||||
{/* Privacy note */}
|
||||
<div className="mt-6 p-4 bg-sage-50 rounded-xl border border-sage-200">
|
||||
<div className="mt-6 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-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<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"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p className="text-sage-800 font-medium text-sm">You can change this setting anytime</p>
|
||||
<p className="text-sage-600 text-xs mt-1">Your privacy preferences can be updated in your account settings</p>
|
||||
<p className="font-medium text-sm">You can change this setting anytime</p>
|
||||
<p className="opacity-70 text-xs mt-1">Your privacy preferences can be updated in your account settings</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,7 +131,7 @@ const Step3Analytics = () => {
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate('/onboarding/step2')}
|
||||
className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
|
||||
className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
|
||||
@@ -14,10 +14,7 @@ const Step4Connect = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-200 via-sage-100 to-amber-100 relative flex items-center justify-center">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 bg-noise opacity-30"></div>
|
||||
|
||||
<div className="min-h-screen relative flex items-center justify-center">
|
||||
{/* Main content */}
|
||||
<div className="relative z-10 max-w-md w-full mx-4">
|
||||
{/* Connect Account card */}
|
||||
@@ -46,10 +43,10 @@ const Step4Connect = () => {
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-bold text-stone-900 mb-2">
|
||||
<h1 className="text-2xl font-bold mb-2">
|
||||
Connect Account
|
||||
</h1>
|
||||
<p className="text-stone-600">
|
||||
<p className="opacity-70">
|
||||
Connect your email to personalize your experience
|
||||
</p>
|
||||
</div>
|
||||
@@ -59,7 +56,7 @@ const Step4Connect = () => {
|
||||
{/* Google */}
|
||||
<button
|
||||
onClick={handleGoogleConnect}
|
||||
className="w-full flex items-center justify-center space-x-3 p-4 bg-white border border-stone-300 rounded-xl hover:border-stone-400 hover:shadow-medium transition-all duration-200 group"
|
||||
className="w-full flex items-center justify-center space-x-3 p-4 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 group"
|
||||
>
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
||||
@@ -67,13 +64,13 @@ const Step4Connect = () => {
|
||||
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
||||
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
||||
</svg>
|
||||
<span className="font-medium text-stone-900">Use Google</span>
|
||||
<span className="font-medium">Use Google</span>
|
||||
</button>
|
||||
|
||||
{/* Microsoft */}
|
||||
<button
|
||||
onClick={handleMicrosoftConnect}
|
||||
className="w-full flex items-center justify-center space-x-3 p-4 bg-white border border-stone-300 rounded-xl hover:border-stone-400 hover:shadow-medium transition-all duration-200 group"
|
||||
className="w-full flex items-center justify-center space-x-3 p-4 bg-black/50 border border-stone-700 rounded-xl hover:border-stone-600 hover:shadow-medium transition-all duration-200 group"
|
||||
>
|
||||
<svg className="w-6 h-6" viewBox="0 0 24 24">
|
||||
<path fill="#f25022" d="M1 1h10v10H1z"/>
|
||||
@@ -81,27 +78,27 @@ const Step4Connect = () => {
|
||||
<path fill="#7fba00" d="M1 13h10v10H1z"/>
|
||||
<path fill="#ffb900" d="M13 13h10v10H13z"/>
|
||||
</svg>
|
||||
<span className="font-medium text-stone-900">Use Microsoft</span>
|
||||
<span className="font-medium">Use Microsoft</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Skip option */}
|
||||
<button
|
||||
onClick={() => navigate('/home')}
|
||||
className="w-full py-3 text-stone-600 hover:text-stone-800 font-medium transition-colors"
|
||||
className="w-full py-3 opacity-60 hover:opacity-100 font-medium transition-opacity"
|
||||
>
|
||||
Skip for now
|
||||
</button>
|
||||
|
||||
{/* Privacy note */}
|
||||
<div className="mt-6 p-4 bg-primary-50 rounded-xl border border-primary-200">
|
||||
<div className="mt-6 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-primary-600 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg className="w-5 h-5 text-primary-400 mt-0.5" 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>
|
||||
<div>
|
||||
<p className="text-primary-800 font-medium text-sm">Your data stays private</p>
|
||||
<p className="text-primary-600 text-xs mt-1">We only use your email for account notifications and security</p>
|
||||
<p className="font-medium text-sm">Your data stays private</p>
|
||||
<p className="opacity-70 text-xs mt-1">We only use your email for account notifications and security</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,7 +107,7 @@ const Step4Connect = () => {
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate('/onboarding/step3')}
|
||||
className="mt-6 w-full text-stone-500 hover:text-stone-700 text-sm font-medium transition-colors"
|
||||
className="mt-6 w-full opacity-60 hover:opacity-100 text-sm font-medium transition-opacity"
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user