- Add new LoginPage with responsive 2-column layout - Create reusable AuthCard components (AuthCard, AuthInput, AuthButton) - Implement animated AuthFormCard for Sign In/Register toggle - Add ForgotPasswordModal with OTP verification flow - Add background decorations (logo glow, waves, gradients) - Remove old sign-in page, set LoginPage as root route - Add SVG type declarations for Vite |
||
|---|---|---|
| .. | ||
| bottom-left-wave1 .svg | ||
| bottom-left-wave2.svg | ||
| logo-glow-bg.svg | ||
| README.md | ||
| top-right-glow.svg | ||
Background Assets
This directory contains background images and decorative elements.
Files to Add
Decorative Elements
gradient-blob-1.svg- Decorative gradient shape (if needed as image)gradient-blob-2.svg- Additional decorative elementpattern-overlay.svg- Pattern overlay (if needed)
Background Images
auth-background.jpgor.webp- Full background image for auth pages (if needed)dashboard-background.svg- Dashboard background pattern
Usage Example
import backgroundPattern from '@/assets/images/backgrounds/pattern-overlay.svg';
<div
style={{ backgroundImage: `url(${backgroundPattern})` }}
className="absolute inset-0 opacity-20"
/>
Notes
- Most decorative backgrounds are created with CSS gradients (as in login-page.tsx)
- Only add image files if CSS gradients cannot achieve the desired effect
- Optimize all background images for performance