Design a complete, state-aware UI flow for Razorpay’s Login with Razorpay → Pre-check feature inside the merchant dashboard. The output must be desktop-first (1440 × 900) responsive to 360 × 800, follow Razorpay’s Blade design system, and include all interactions, animations, and copy.──────────────────────────────────🄰 BRAND & VISUAL LANGUAGE──────────────────────────────────• Primary color: brand-500 (#1C4DF2) | Secondary: brand-600 (#123EE2) • Status colors: success-500 (#14C371), error-500 (#FF5A5F), warning-500 (#FFB800) • Neutrals: surface-0 (#FFFFFF), surface-50 (#F7F9FC), grey-700 (#42526B) • Typography: Inter — H1 24/32 semibold, H2 20/28 semibold, body 14/20 regular, caption 12/16 • Corner radius = 12 px, grid spacing = 8 px multiples • Light mode only for now; keep contrast AA compliant ──────────────────────────────────🄱 SCREENS & STATES (5 TOTAL)──────────────────────────────────1. Intro / Idle ▸ Left sidebar open on “Magic Checkout › Login with Razorpay” ▸ Main pane shows 3-step vertical checklist cards numbered 1-3: ① Shopify store eligibility – “We’ll verify your plan tier.” ② Legacy customer accounts – “We’ll check existing customer settings.” ③ Enable login settings – “We’ll validate account & password options.” ▸ Primary CTA: “Check eligibility” (brand-500) ▸ Secondary CTA: ghost button “Watch setup video” with ▶ icon ▸ Beneath CTAs, 16:9 video thumbnail (blurred Razorpay gradient) 2. Scanning / In-progress ▸ On click, CTA disables, label switches to “Checking eligibility…” ▸ Each card’s number badge morphs into a 24 px circular spinner (Blade motion-medium, 150 ms ease-in) ▸ ARIA live region announces “Eligibility scan running” 3. All Passed ▸ Spinners fade to success-500 checkmarks with scale-up 1 → 1.2 → 1 easing 200 ms ▸ Toast slides in top-right: “Congrats! SSO ready to enable.” ▸ Primary CTA label changes to “Enable SSO now” (still brand-500) ▸ After click, quick success Lottie confetti, then redirect stub note4. Partial / Failed ▸ Any failed card expands (accordion) revealing: – Inline red error icon, one-line diagnostic copy – 320 × 120 contextual illustration (dashboard screenshot placeholder) – Primary remediation button (e.g., “Upgrade Shopify plan”) + tertiary “Cancel” ▸ Other passed cards remain collapsed with checkmarks ▸ Grey dotted line separates groups for clarity ▸ Dismiss error collapses card and re-activates “Re-check” CTA 5. Retry Loop ▸ Swap CTA text to “Re-check eligibility” ▸ When all now pass → follow flow 3──────────────────────────────────🄲 COMPONENT BEHAVIOURS──────────────────────────────────• Checklist Card – 100 % width of content area (max 720 px) – Shadow-xs, surface-50 background, 16 px padding – Hover: border changes to brand-50 (#E8EEFF) • Number/Status Badge – Idle: 24 px circle, grey-700 text – In-progress: spinner (stroke 2 px, 150 ms rotation) – Passed: brand-50 background, success-500 icon – Failed: brand-50 background, error-500 icon • Video Thumbnail – 560 × 315, rounded 12 px, play-on-click opens modal • Toast – Appears top-right, slides in + fades, auto-dismiss 4 s • Sidebar – Collapsible sections, highlight active link with brand-50 pill ──────────────────────────────────🄳 MICRO-INTERACTIONS──────────────────────────────────• Button press: 90 ms down-state darken, 90 ms up-state lighten • Card expand/collapse: 200 ms height & opacity transition • Tooltip on badge hover: “What we’re checking here” (fade-in 120 ms) • Confetti Lottie on final enable: 1.2 s, auto destroy ──────────────────────────────────🄴 ACCESSIBILITY──────────────────────────────────• All color choices pass 4.5:1 contrast ratio • Keyboard flow: Sidebar → Header → Checklist (top→bottom) → CTAs → Video • ARIA labels for buttons, list role=list on checklist, live region role=status during scan • Focusable toast dismiss “×” icon ──────────────────────────────────🄵 RESPONSIVE RULES──────────────────────────────────• ≤ 1024 px: Sidebar collapses to icon-only; checklist max-width 600 px • ≤ 640 px: Sidebar converts to hamburger drawer; checklist cards stack full-width; CTA row sticks bottom; spinner badges shrink to 20 px • ≤ 360 px: Typography scales down (-1 px), video thumbnail collapses into accordion “Need help? Watch video” ──────────────────────────────────🄶 DELIVERABLES──────────────────────────────────1. Hi-fi mockups for all 5 states in light mode, desktop + mobile breakpoint 2. Component spec sheet (tokens, padding, interaction timings) 3. Prototype linking Idle → Scan → Pass / Fail → Retry → Success 4. Lottie JSONs: spinner (loop), confetti (non-loop) 5. Accessibility annotation layer (.a11y) Prompt ends. Return designs respecting Razorpay IP and Blade tokens.