update welcome tour to show 24 hours account review messages and premium animations

cypress/e2e/onboarding.cy.ts

@@ -63,8 +63,8 @@ describe('Supplier Portal Onboarding & Feature E2E Flow', () => {
     cy.contains('Submit Supplier Profile').click();
 
     // 6. Setup Welcome Tour Stepper
-    cy.contains('Welcome to Global Artisans Hub! 🎉').should('be.visible');
-    cy.contains('Start Tour').click();
+    cy.contains('Supplier Account Under Review ⏳').should('be.visible');
+    cy.contains('Start Guided Tour 🎬').click();
     cy.contains('📦 Products & Inventory Management').should('be.visible');
     cy.contains('Next: Order Management').click();
     cy.contains('🚚 Order Acceptance Control').should('be.visible');
@@ -72,7 +72,7 @@ describe('Supplier Portal Onboarding & Feature E2E Flow', () => {
     cy.contains('🏷️ Barcode Identification & Tracking').should('be.visible');
     cy.contains('Next: Earnings & Wallet').click();
     cy.contains('💼 Wallet & Payout Withdrawals').should('be.visible');
-    cy.contains('Launch Dashboard 🚀').click();
+    cy.contains('Explore Dashboard 🚀').click();
 
     // 7. Check Active Dashboard Tab
     cy.contains('Performance Analytics').should('be.visible');

src/App.test.tsx

@@ -121,11 +121,11 @@ describe('Supplier Portal Onboarding & Active Dashboard Tests', () => {
     const submitBtn = screen.getByRole('button', { name: /Submit Supplier Profile/i })
     fireEvent.click(submitBtn)
     
-    // Welcome Page & Setup Tour
-    expect(screen.getByText(/Welcome to Global Artisans Hub!/i)).toBeInTheDocument()
+    // Welcome Page & Setup Tour (Account Under Review)
+    expect(screen.getByText(/Supplier Account Under Review/i)).toBeInTheDocument()
     
     // Complete tour steps
-    const startTourBtn = screen.getByRole('button', { name: /Start Tour/i })
+    const startTourBtn = screen.getByRole('button', { name: /Start Guided Tour/i })
     fireEvent.click(startTourBtn)
     
     const next1 = screen.getByRole('button', { name: /Next: Order Management/i })
@@ -137,7 +137,7 @@ describe('Supplier Portal Onboarding & Active Dashboard Tests', () => {
     const next3 = screen.getByRole('button', { name: /Next: Earnings & Wallet/i })
     fireEvent.click(next3)
     
-    const finishBtn = screen.getByRole('button', { name: /Launch Dashboard 🚀/i })
+    const finishBtn = screen.getByRole('button', { name: /Explore Dashboard 🚀/i })
     fireEvent.click(finishBtn)
     
     // Redirects to Dashboard Page

src/App.tsx

@@ -2029,10 +2029,10 @@ function WelcomeTourWizard({ onComplete, storeName }: { onComplete: () => void;
   const [tourStep, setTourStep] = useState(1)
   const steps = [
     {
-      title: "Welcome to Global Artisans Hub! 🎉",
-      description: `Congratulations ${storeName}! Your supplier profile is verified and complete. Let's take a 1-minute tour to get you familiar with your active workspace so you can begin selling immediately.`,
-      icon: "🎉",
-      action: "Start Tour"
+      title: "Supplier Account Under Review ⏳",
+      description: `Thank you for completing your profile! Your GSTIN, PAN, and Aadhaar card details have been submitted. Our compliance team is verifying your documents. This review is typically completed within the next 24 hours. While we verify your credentials, let's take a quick animated tour to get you familiar with your dashboard!`,
+      icon: "⏳",
+      action: "Start Guided Tour 🎬"
     },
     {
       title: "📦 Products & Inventory Management",
@@ -2056,17 +2056,17 @@ function WelcomeTourWizard({ onComplete, storeName }: { onComplete: () => void;
       title: "💼 Wallet & Payout Withdrawals",
       description: "Monitor outstanding payouts and withdraw your earnings directly to your bank account anytime. Keep track of transaction receipts directly inside the Wallet tab.",
       icon: "💼",
-      action: "Launch Dashboard 🚀"
+      action: "Explore Dashboard 🚀"
     }
   ]
 
   const current = steps[tourStep - 1]
 
   return (
-    <div className="form-card" style={{ maxWidth: '640px', margin: '2rem auto', textAlign: 'center', padding: '2.5rem' }}>
-      <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>{current.icon}</div>
+    <div key={tourStep} className="form-card tour-card-animated" style={{ maxWidth: '640px', margin: '2rem auto', textAlign: 'center', padding: '2.5rem' }}>
+      <div className="tour-icon-animated" style={{ fontSize: '4.5rem', marginBottom: '1rem' }}>{current.icon}</div>
       <h2 className="form-card-title">{current.title}</h2>
-      <p style={{ color: 'var(--text-muted)', fontSize: '1.05rem', margin: '1.5rem 0 2rem' }}>
+      <p style={{ color: 'var(--text-muted)', fontSize: '1.05rem', margin: '1.5rem 0 2rem', lineHeight: '1.6' }}>
         {current.description}
       </p>
 
@@ -2074,6 +2074,7 @@ function WelcomeTourWizard({ onComplete, storeName }: { onComplete: () => void;
         {steps.map((_, idx) => (
           <div
             key={idx}
+            className={tourStep === idx + 1 ? 'tour-dot-active' : ''}
             style={{
               width: '12px',
               height: '12px',

src/index.css

@@ -1093,3 +1093,49 @@ body {
   }
 }
 
+/* Animated Tour Keyframes */
+@keyframes tourCardEntrance {
+  0% {
+    opacity: 0;
+    transform: translateY(20px) scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes tourIconBounce {
+  0%, 100% {
+    transform: translateY(0) scale(1);
+  }
+  50% {
+    transform: translateY(-8px) scale(1.05);
+  }
+}
+
+@keyframes tourDotPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.25);
+    opacity: 1;
+  }
+}
+
+.tour-card-animated {
+  animation: tourCardEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.tour-icon-animated {
+  animation: tourIconBounce 2s infinite ease-in-out;
+  display: inline-block;
+}
+
+.tour-dot-active {
+  animation: tourDotPulse 1.5s infinite ease-in-out;
+}
+
+