-
- {/* STEP 1: Account Creation */}
- {onboardingStep === 1 && (
-
-
Step 1: Create Your Seller Account
-
Basic contact information for order alerts and dashboard login
+ {/* =================================================================== */}
+ {/* STEP 1: Create Your Seller Account (Centered 480px Card) */}
+ {/* =================================================================== */}
+ {onboardingStep === 1 && (
+
+
+
+
+ Create your seller account
+
+
+ step 1 of 7 · takes about 2 minutes
+
+
-
-
-
- updateOnboarding({ fullName: e.target.value })}
- />
-
-
-
-
-
-
-
-
- updateOnboarding({ email: e.target.value })}
- />
-
-
-
-
-
-
-
-
+91
-
- updateOnboarding({ phone: e.target.value })}
- />
-
-
-
-
-
-
-
-
-
- Mobile number pre-verified via simulated OTP (4829)
-
+
+
+
+ )}
+
+ {/* =================================================================== */}
+ {/* STEPS 2 TO 7: Business, Pickup, Bank, Categories, Products, Profile */}
+ {/* =================================================================== */}
+ {onboardingStep > 1 && (
+
+
+
{/* STEP 2: Business & GST / Enrolment ID */}
{onboardingStep === 2 && (
@@ -940,6 +1124,78 @@ export const OnboardingPage: React.FC = () => {
+ )}
+
+ {/* Trust Badges Strip matching stitch screen */}
+
+
+
+
+
+
+
+
+
+ Secure & encrypted
+
+
+
+
+
+
+
+ ₹
+
+
+ No registration fee
+
+
+
+
+
+
+
+
+
+
+ Dedicated onboarding support
+
+
+
+
+
+
+
);
diff --git a/src/pages/ResetPasswordPage.tsx b/src/pages/ResetPasswordPage.tsx
new file mode 100644
index 0000000..7fcc66a
--- /dev/null
+++ b/src/pages/ResetPasswordPage.tsx
@@ -0,0 +1,589 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useSeller } from '../context/SellerContext';
+import {
+ Star,
+ Check,
+ ArrowRight,
+ ArrowLeft,
+ Smartphone,
+ Mail,
+ Eye,
+ EyeOff,
+ PhoneCall
+} from 'lucide-react';
+
+const SolidGreenCheck: React.FC<{ size?: number }> = ({ size = 16 }) => (
+
+);
+
+export const ResetPasswordPage: React.FC = () => {
+ const navigate = useNavigate();
+ const { login } = useSeller();
+
+ // Reset tab: 'email' or 'mobile' (matches screenshot: default is 'email')
+ const [resetTab, setResetTab] = useState<'email' | 'mobile'>('email');
+ const [resetEmail, setResetEmail] = useState('artisan.weaver@craftguild.in');
+ const [resetMobile, setResetMobile] = useState('9845012345');
+
+ // OTP Digits matching screenshot: 7, 3, 9, 4, and empty for 5 and 6
+ const [otpDigits, setOtpDigits] = useState
(['7', '3', '9', '4', '', '']);
+ const [newPassword, setNewPassword] = useState('craftatelier2026');
+ const [confirmPassword, setConfirmPassword] = useState('craftatelier2026');
+ const [showNewPassword, setShowNewPassword] = useState(false);
+ const [resendTimer, setResendTimer] = useState(28);
+
+ const [isEmailFocused, setIsEmailFocused] = useState(false);
+ const [isNewPassFocused, setIsNewPassFocused] = useState(false);
+ const [isConfirmPassFocused, setIsConfirmPassFocused] = useState(false);
+
+ useEffect(() => {
+ if (resendTimer > 0) {
+ const timer = setTimeout(() => setResendTimer(resendTimer - 1), 1000);
+ return () => clearTimeout(timer);
+ }
+ }, [resendTimer]);
+
+ const handleOtpDigitChange = (index: number, value: string) => {
+ // Only accept numeric or clean char
+ const cleanValue = value.replace(/[^0-9]/g, '').slice(-1);
+ const newDigits = [...otpDigits];
+ newDigits[index] = cleanValue;
+ setOtpDigits(newDigits);
+
+ // Auto focus next input
+ if (cleanValue && index < 5) {
+ const nextInput = document.getElementById(`otp-digit-${index + 1}`);
+ nextInput?.focus();
+ }
+ };
+
+ const handleOtpKeyDown = (index: number, e: React.KeyboardEvent) => {
+ if (e.key === 'Backspace') {
+ if (!otpDigits[index] && index > 0) {
+ const prevInput = document.getElementById(`otp-digit-${index - 1}`);
+ prevInput?.focus();
+ }
+ }
+ };
+
+ const handleResetSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ login(resetEmail || 'artisan.weaver@craftguild.in');
+ navigate('/dashboard');
+ };
+
+ return (
+
+
+
+
+
+ {/* 2-Column Authentication Card */}
+
+
+
+ {/* ------------------------------------------------------------------ */}
+ {/* LEFT COLUMN: Artisan Security, Guarantee Highlights & Helpline */}
+ {/* ------------------------------------------------------------------ */}
+
+
+ {/* Badge */}
+
+
+
+ ARTISAN SECURITY
+
+
+
+ {/* Headline */}
+
+ Protecting your craft atelier & earnings.
+
+
+ {/* Subtitle */}
+
+ Ensure seamless recovery to your master workshop ledger, scheduled bank settlements, and global artisan trade orders.
+
+
+ {/* Artisan Image */}
+
+
+
+
+ {/* Checklist */}
+
+
+
+
+
+
+ Quick OTP recovery via registered email or mobile SIM
+
+
+
+
+
+
+
+
+ Zero interruption to your ongoing orders and payouts
+
+
+
+
+
+
+
+
+ Dedicated 24/7 maker helpline in 7 regional languages
+
+
+
+
+ {/* Toll Free Callout */}
+
+
+
+ Kala Setu Support:{' '}
+ 1800–419–8723{' '}
+ (Toll Free)
+
+
+
+
+
+ {/* ------------------------------------------------------------------ */}
+ {/* RIGHT COLUMN: Reset Password Form */}
+ {/* ------------------------------------------------------------------ */}
+
+
+ {/* Back to login button */}
+
+
+
+ Reset your password
+
+
+
+ Enter your registered email address to receive a verification code and create a new password.
+
+
+ {/* Segmented Toggle Tabs */}
+
+
+
+
+
+
+
+
+ {/* Footer Support Desk Link */}
+
+
+
+
+
+
+
+
+
+